add inheritance and dynamic background colors for the tile menu
This commit is contained in:
parent
30b8386131
commit
ae34f0ea6f
4 changed files with 36 additions and 14 deletions
|
@ -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.
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
|
|
40
js/tile.js
40
js/tile.js
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue