117 lines
3.5 KiB
JavaScript
117 lines
3.5 KiB
JavaScript
import { atlasMetadata, makeAtlasImage } from "./atlas.js";
|
|
import { DomList } from "./dom-list.js";
|
|
import { addEventToButton, addEventToInput, getElements } from "./dom-utils.js";
|
|
import { emitEvent, listenTo } from "./events.js";
|
|
import { loadConfiguration } from "./configuration.js";
|
|
import { getState, setState, STATE } from "./state.js";
|
|
|
|
let multiblockSize = [ 7, 7, 5 ]; // width (screen x), depth (screen y), height (xy grids)
|
|
let suppressHover = false;
|
|
let activeItem = -1;
|
|
|
|
function cellHoverEvent(e) {
|
|
if (suppressHover) return;
|
|
|
|
const cells = document.querySelectorAll("#planner-list [data-x]");
|
|
cells.forEach(c => delete c.dataset.highlight);
|
|
if (e.type === "mouseenter") {
|
|
cells.forEach(c => {
|
|
if (c.dataset.y === e.target.dataset.y && c.dataset.z === e.target.dataset.z) {
|
|
c.dataset.highlight = "x";
|
|
}
|
|
if (c.dataset.x === e.target.dataset.x && c.dataset.z === e.target.dataset.z) {
|
|
c.dataset.highlight = "y";
|
|
}
|
|
if (c.dataset.x === e.target.dataset.x && c.dataset.y === e.target.dataset.y) {
|
|
c.dataset.highlight = "z";
|
|
}
|
|
if (c === e.target) {
|
|
delete c.dataset.highlight;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function listClickEvent(e) {
|
|
const items = document.querySelectorAll("#block-list [data-index]");
|
|
items.forEach(i => delete i.dataset.active);
|
|
activeItem = Number(e.currentTarget.dataset.index);
|
|
e.currentTarget.dataset.active = undefined;
|
|
}
|
|
|
|
window.addEventListener("load", () => {
|
|
emitEvent("setup-start");
|
|
|
|
window.addEventListener("keypress", e => {
|
|
console.log(e);
|
|
if (e.key === "H") {
|
|
suppressHover = !suppressHover;
|
|
}
|
|
});
|
|
|
|
getElements("state", "*").forEach(e => {
|
|
e.classList.add("hidden");
|
|
if (e.dataset.state === getState()) {
|
|
e.classList.remove("hidden");
|
|
}
|
|
});
|
|
|
|
addEventToInput("configuration", "input", loadConfiguration);
|
|
addEventToButton("loadConfiguration", "click", loadConfiguration)
|
|
|
|
listenTo("state", () => {
|
|
console.log("State changed", getState());
|
|
getElements("state", "*").forEach(e => {
|
|
e.classList.add("hidden");
|
|
if (e.dataset.state === getState()) {
|
|
e.classList.remove("hidden");
|
|
}
|
|
});
|
|
});
|
|
|
|
listenTo("config:end", () => setState(STATE.planning));
|
|
|
|
listenTo("config:end", () => {
|
|
console.log(atlasMetadata);
|
|
const grid = new DomList(document.querySelector("#block-list"));
|
|
grid.clear();
|
|
|
|
atlasMetadata.forEach((m, i) => {
|
|
const item = grid.makeItem();
|
|
item.dataset.index = i.toString(10);
|
|
item.appendChild(makeAtlasImage(i));
|
|
item.addEventListener("click", listClickEvent);
|
|
grid.addItem(item);
|
|
});
|
|
});
|
|
|
|
listenTo("config:end", () => {
|
|
const list = new DomList(document.querySelector("#planner-list"));
|
|
list.clear();
|
|
|
|
for (let z = 0; z < multiblockSize[2]; z++) {
|
|
const item = list.makeItem();
|
|
item.style.setProperty("--width", multiblockSize[1]);
|
|
const grid = new DomList(item);
|
|
grid.clear();
|
|
for (let y = 0; y < multiblockSize[1]; y++) {
|
|
for (let x = 0; x < multiblockSize[0]; x++) {
|
|
const cell = grid.makeItem();
|
|
cell.dataset.x = x.toString(10);
|
|
cell.dataset.y = y.toString(10);
|
|
cell.dataset.z = z.toString(10);
|
|
cell.appendChild(makeAtlasImage(-1));
|
|
cell.addEventListener("mouseenter", cellHoverEvent);
|
|
cell.addEventListener("mouseleave", cellHoverEvent);
|
|
grid.addItem(cell);
|
|
}
|
|
}
|
|
list.addItem(item);
|
|
}
|
|
});
|
|
|
|
emitEvent("setup-end");
|
|
|
|
void loadConfiguration("default");
|
|
});
|