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

@ -1,4 +1,4 @@
# altboxels
# neoboxels
A sandbox game inspired by https://sandboxels.r74n.com/, with a cleaner codebase and secure/simple modding support in mind.
Some of the elements are derived from other games in the falling sand genre, especially Sandboxels. However, the physics engine and other backend code are custom and independently developed.

View file

@ -14,7 +14,7 @@
<body>
<div id="header">
<div id="header-title">Altboxels</div>
<div id="header-title">Neoboxels</div>
<div id="header-links">
<a href='https://dervland.net/'>dervland.net</a>

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