add inheritance and dynamic background colors for the tile menu

This commit is contained in:
biglyderv 2025-05-14 13:30:49 -04:00
parent 30b8386131
commit ae34f0ea6f
Signed by: biglyderv
GPG key ID: 0E2EB0B4CD7397B5
4 changed files with 36 additions and 14 deletions

View file

@ -244,3 +244,9 @@ mainTiles.loadSet(
);
let air = mainTiles.resolveID('Vanilla/Air', 'Air');
setTimeout(function () {
for (let tile in mainTiles.tiles) {
mainTiles.tiles[tile].hook ? mainTiles.tiles[tile].hook() : false;
}
}, 400)

View file

@ -14,7 +14,22 @@ var canGravity = [
];
function Tile(color, id) {
function getContrast(r, g, b) {
var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
return (yiq >= 128) ? 'black' : 'white';
}
function Tile(color, id, isAbstract = false, copyFrom = false, copyFromName = false) {
if (copyFrom) {
let that = this;
this.hook = function () {
let oldie = mainTiles.resolve(copyFrom, copyFromName);
Object.assign(that, Object.assign({}, oldie, that));
that.attributes = Object.assign({}, that.attributes);
that.interactions = that.interactions.concat(oldie.interactions)
}
}
this.color = color;
this.id = id;
@ -23,9 +38,10 @@ function Tile(color, id) {
this.attributes = {};
this.attributes.temperature = 0;
this.attributes.conduct = 0.01;
this.isAbstract = isAbstract;
this.color = (color == 'none') ? [181,204,253,1/255] : color.replace(/^[^\(]+\(/,'').replace(/\)$/,'').split(',').map(x => 1 * x)
if (color == 'random') this.color = [-1,-1,-1]; // ugly and hard-coded, but somehow faster?
this.color = (color == 'none') ? [181, 204, 253, 1 / 255] : color.replace(/^[^\(]+\(/, '').replace(/\)$/, '').split(',').map(x => 1 * x)
if (color == 'random') this.color = [-1, -1, -1]; // ugly and hard-coded, but somehow faster?
/*
Interactions are used for dynamic functions that
@ -45,7 +61,7 @@ function TileManager(row, row2) {
this.row = row;
this.row2 = row2;
this.sel = 0;
this.used = {};
}
@ -57,23 +73,22 @@ TileManager.prototype.loadSet = function (namespace, tiles) {
elem.textContent = namespace;
//elem.href = `#${namespace}`
//elem.id = namespace
this.row.appendChild(elem);
let elem2 = document.createElement('section');
elem2.id = namespace;
this.row2.appendChild(elem2);
elem.onclick = function(e) {
document.querySelectorAll("#game .selected-group").forEach(function(e) {e.classList.remove("selected-group")})
elem.onclick = function (e) {
document.querySelectorAll("#game .selected-group").forEach(function (e) { e.classList.remove("selected-group") })
e.target.classList.add("selected-group");
elem2.classList.add("selected-group");
}
for (let tile of tiles) {
if (tile.isAbstract) continue;
tile.namespace = namespace;
tile.number = this.tiles.length;
this.tiles.push(tile);
@ -84,6 +99,8 @@ TileManager.prototype.loadSet = function (namespace, tiles) {
elem = document.createElement('button');
elem.textContent = tile.id;
elem.style.color = getContrast(tile.color[0], tile.color[1], tile.color[2]);
elem.style.backgroundColor = `rgb(${tile.color[0]}, ${tile.color[1]}, ${tile.color[2]})`
elem2.appendChild(elem);
elem.addEventListener('click', () => {
@ -110,7 +127,6 @@ var mainTiles = new TileManager(
document.querySelector('.menu'),
document.querySelector('.buttons')
);
/*
You can theoretically add more tile managers if desired,
but you probably shouldn't