diff --git a/macrovision.css b/macrovision.css index 70aac21c..8878c0f3 100644 --- a/macrovision.css +++ b/macrovision.css @@ -122,7 +122,7 @@ body.toggle-entity-name .entity-name { #menubar { display: flex; flex-direction: row; - justify-content: center; + justify-content: space-evenly; align-items: center; min-height: 10vh; min-width: 100vw; @@ -134,6 +134,18 @@ body.toggle-entity-name .entity-name { background: #922; } +.menubar-group { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.menubar-group button, +.menubar-group select { + height: 5vh; +} + .menu-item { font-size: 24px; color: #ccc; @@ -174,6 +186,12 @@ body.toggle-entity-name .entity-name { font-size: 150%; } +.options-row .options-button { + flex: 1; + width: 100%; + font-size: 150%; +} + body #test-canvas { position: fixed; top: 100vh; diff --git a/macrovision.html b/macrovision.html index 4eae4021..17f0d6fc 100644 --- a/macrovision.html +++ b/macrovision.html @@ -20,8 +20,15 @@
@@ -39,6 +46,9 @@
+
+ +
Entity options
diff --git a/macrovision.js b/macrovision.js index a996f42f..ba9d7225 100644 --- a/macrovision.js +++ b/macrovision.js @@ -518,7 +518,6 @@ function displayEntity(entity, view, x, y) { box.appendChild(img); box.appendChild(nameTag); - console.log(entity) img.src = entity.views[view].image.source; box.dataset.x = x; @@ -560,7 +559,6 @@ function displayEntity(entity, view, x, y) { document.addEventListener("DOMContentLoaded", () => { const stuff = [makeFen].concat(makeBuildings().map(x => x.constructor)) - console.log(stuff) let x = 0.2; stuff.forEach(entity => { @@ -591,7 +589,6 @@ document.addEventListener("DOMContentLoaded", () => { world.addEventListener("mousedown", e => deselect()); document.addEventListener("mouseup", e => clickUp(e)); document.addEventListener("touchend", e => { - console.log(e) const fakeEvent = { target: e.target, clientX: e.changedTouches[0].clientX, @@ -614,7 +611,7 @@ document.addEventListener("DOMContentLoaded", () => { removeAllEntities(); }); - document.querySelector("#menu-order").addEventListener("click", e => { + document.querySelector("#menu-order-height").addEventListener("click", e => { const order = Object.keys(entities).sort((a, b) => { const entA = entities[a]; const entB = entities[b]; @@ -628,6 +625,8 @@ document.addEventListener("DOMContentLoaded", () => { arrangeEntities(order); }); + document.querySelector("#options-world-fit").addEventListener("click", fitWorld); + prepareEntities(); }); @@ -635,7 +634,7 @@ function prepareEntities() { availableEntities["buildings"] = makeBuildings(); availableEntities["characters"] = makeCharacters(); - const holder = document.querySelector("#menubar"); + const holder = document.querySelector("#spawners"); Object.entries(availableEntities).forEach(([category, entityList]) => { const select = document.createElement("select"); select.id = "create-entity-" + category; @@ -685,8 +684,6 @@ document.addEventListener("touchmove", (e) => { let x = e.touches[0].clientX; let y = e.touches[0].clientY; - console.log(y) - const position = snapRel(abs2rel({ x: x - dragOffsetX, y: y - dragOffsetY })); clicked.dataset.x = position.x; clicked.dataset.y = position.y; @@ -702,12 +699,28 @@ document.addEventListener("touchmove", (e) => { } }, { passive: false }); +function fitWorld() { + let max = math.unit(0, "meter"); + + Object.entries(entities).forEach(([key, entity]) => { + const view = document.querySelector("#entity-" + key).dataset.view; + + max = math.max(max, entity.views[view].height); + }); + + setWorldHeight(config.height, math.multiply(max, 1.1)); +} + function updateWorldHeight() { const value = Math.max(1, document.querySelector("#options-height-value").value); const unit = document.querySelector("#options-height-unit").value; const oldHeight = config.height; - config.height = math.unit(value + " " + unit) + setWorldHeight(oldHeight, math.unit(value, unit)); +} + +function setWorldHeight(oldHeight, newHeight) { + config.height = newHeight; Object.entries(entities).forEach(([key, entity]) => { const element = document.querySelector("#entity-" + key);