games/neoboxels
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add inheritance and dynamic background colors for the tile menu

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
README.md
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. 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. 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.

2
index.html
View file

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

6
js/core_blocks.js
View file

@ -244,3 +244,9 @@ mainTiles.loadSet(
); );
let air = mainTiles.resolveID('Vanilla/Air', 'Air'); 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)

40
js/tile.js
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.color = color;
this.id = id; this.id = id;
@ -23,9 +38,10 @@ function Tile(color, id) {
this.attributes = {}; this.attributes = {};
this.attributes.temperature = 0; this.attributes.temperature = 0;
this.attributes.conduct = 0.01; 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) 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? if (color == 'random') this.color = [-1, -1, -1]; // ugly and hard-coded, but somehow faster?
/* /*
Interactions are used for dynamic functions that Interactions are used for dynamic functions that
@ -45,7 +61,7 @@ function TileManager(row, row2) {
this.row = row; this.row = row;
this.row2 = row2; this.row2 = row2;
this.sel = 0; this.sel = 0;
this.used = {}; this.used = {};
} }
@ -57,23 +73,22 @@ TileManager.prototype.loadSet = function (namespace, tiles) {
elem.textContent = namespace; elem.textContent = namespace;
//elem.href = `#${namespace}` //elem.href = `#${namespace}`
//elem.id = namespace //elem.id = namespace
this.row.appendChild(elem); this.row.appendChild(elem);
let elem2 = document.createElement('section'); let elem2 = document.createElement('section');
elem2.id = namespace; elem2.id = namespace;
this.row2.appendChild(elem2); this.row2.appendChild(elem2);
elem.onclick = function(e) { elem.onclick = function (e) {
document.querySelectorAll("#game .selected-group").forEach(function (e) { e.classList.remove("selected-group") })
document.querySelectorAll("#game .selected-group").forEach(function(e) {e.classList.remove("selected-group")})
e.target.classList.add("selected-group"); e.target.classList.add("selected-group");
elem2.classList.add("selected-group"); elem2.classList.add("selected-group");
} }
for (let tile of tiles) { for (let tile of tiles) {
if (tile.isAbstract) continue;
tile.namespace = namespace; tile.namespace = namespace;
tile.number = this.tiles.length; tile.number = this.tiles.length;
this.tiles.push(tile); this.tiles.push(tile);
@ -84,6 +99,8 @@ TileManager.prototype.loadSet = function (namespace, tiles) {
elem = document.createElement('button'); elem = document.createElement('button');
elem.textContent = tile.id; 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); elem2.appendChild(elem);
elem.addEventListener('click', () => { elem.addEventListener('click', () => {
@ -110,7 +127,6 @@ var mainTiles = new TileManager(
document.querySelector('.menu'), document.querySelector('.menu'),
document.querySelector('.buttons') document.querySelector('.buttons')
); );
/* /*
You can theoretically add more tile managers if desired, You can theoretically add more tile managers if desired,
but you probably shouldn't but you probably shouldn't