chemicalcrux
/
macrovision
1
0
Fork 0
Code Issues 5 Pull-Requests 0 Releases 10 Wiki Aktivität
Quellcode durchsuchen

Improve menubar. Add button to fit world to current entities

tags/v0.0.3
Fen Dweller vor 6 Jahren
Ursprung
e61e5b6fb3
Commit
9caca6eaf0
3 geänderte Dateien mit 52 neuen und 11 gelöschten Zeilen
Gesamtansicht
Diff-Optionen
Statistiken anzeigen Patch-Datei herunterladen Vergleichs-Datei herunterladen
  1. +19
    -1
      macrovision.css
  2. +12
    -2
      macrovision.html
  3. +21
    -8
      macrovision.js

+ 19
- 1
macrovision.css Datei anzeigen

@@ -122,7 +122,7 @@ body.toggle-entity-name .entity-name {
#menubar { #menubar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center;
justify-content: space-evenly;
align-items: center; align-items: center;
min-height: 10vh; min-height: 10vh;
min-width: 100vw; min-width: 100vw;
@@ -134,6 +134,18 @@ body.toggle-entity-name .entity-name {
background: #922; 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 { .menu-item {
font-size: 24px; font-size: 24px;
color: #ccc; color: #ccc;
@@ -174,6 +186,12 @@ body.toggle-entity-name .entity-name {
font-size: 150%; font-size: 150%;
} }


.options-row .options-button {
flex: 1;
width: 100%;
font-size: 150%;
}

body #test-canvas { body #test-canvas {
position: fixed; position: fixed;
top: 100vh; top: 100vh;


+ 12
- 2
macrovision.html Datei anzeigen

@@ -20,8 +20,15 @@


<body class="toggle-bottom-name toggle-entity-name"> <body class="toggle-bottom-name toggle-entity-name">
<div id="menubar"> <div id="menubar">
<button id="menu-clear">Clear</button>
<button id="menu-order">Order by height</button>
<span class="menubar-group">
<button id="menu-clear">Clear</button>
</span>
<span class="menubar-group">
<button id="menu-order-height">Order by height</button>
</span>
<span class="menubar-group" id="spawners">

</span>
</div> </div>
<div id="main-area"> <div id="main-area">
<div id="options"> <div id="options">
@@ -39,6 +46,9 @@
<option>miles</option> <option>miles</option>
</select> </select>
</div> </div>
<div class="options-row">
<button class="options-button" id="options-world-fit">Fit to entities</button>
</div>
</span> </span>
<div class="options-header">Entity options</div> <div class="options-header">Entity options</div>
<select class="menu-item" id="entity-view"></select> <select class="menu-item" id="entity-view"></select>


+ 21
- 8
macrovision.js Datei anzeigen

@@ -518,7 +518,6 @@ function displayEntity(entity, view, x, y) {
box.appendChild(img); box.appendChild(img);
box.appendChild(nameTag); box.appendChild(nameTag);


console.log(entity)
img.src = entity.views[view].image.source; img.src = entity.views[view].image.source;


box.dataset.x = x; box.dataset.x = x;
@@ -560,7 +559,6 @@ function displayEntity(entity, view, x, y) {
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const stuff = [makeFen].concat(makeBuildings().map(x => x.constructor)) const stuff = [makeFen].concat(makeBuildings().map(x => x.constructor))


console.log(stuff)
let x = 0.2; let x = 0.2;


stuff.forEach(entity => { stuff.forEach(entity => {
@@ -591,7 +589,6 @@ document.addEventListener("DOMContentLoaded", () => {
world.addEventListener("mousedown", e => deselect()); world.addEventListener("mousedown", e => deselect());
document.addEventListener("mouseup", e => clickUp(e)); document.addEventListener("mouseup", e => clickUp(e));
document.addEventListener("touchend", e => { document.addEventListener("touchend", e => {
console.log(e)
const fakeEvent = { const fakeEvent = {
target: e.target, target: e.target,
clientX: e.changedTouches[0].clientX, clientX: e.changedTouches[0].clientX,
@@ -614,7 +611,7 @@ document.addEventListener("DOMContentLoaded", () => {
removeAllEntities(); 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 order = Object.keys(entities).sort((a, b) => {
const entA = entities[a]; const entA = entities[a];
const entB = entities[b]; const entB = entities[b];
@@ -628,6 +625,8 @@ document.addEventListener("DOMContentLoaded", () => {
arrangeEntities(order); arrangeEntities(order);
}); });


document.querySelector("#options-world-fit").addEventListener("click", fitWorld);

prepareEntities(); prepareEntities();
}); });


@@ -635,7 +634,7 @@ function prepareEntities() {
availableEntities["buildings"] = makeBuildings(); availableEntities["buildings"] = makeBuildings();
availableEntities["characters"] = makeCharacters(); availableEntities["characters"] = makeCharacters();


const holder = document.querySelector("#menubar");
const holder = document.querySelector("#spawners");
Object.entries(availableEntities).forEach(([category, entityList]) => { Object.entries(availableEntities).forEach(([category, entityList]) => {
const select = document.createElement("select"); const select = document.createElement("select");
select.id = "create-entity-" + category; select.id = "create-entity-" + category;
@@ -685,8 +684,6 @@ document.addEventListener("touchmove", (e) => {
let x = e.touches[0].clientX; let x = e.touches[0].clientX;
let y = e.touches[0].clientY; let y = e.touches[0].clientY;


console.log(y)

const position = snapRel(abs2rel({ x: x - dragOffsetX, y: y - dragOffsetY })); const position = snapRel(abs2rel({ x: x - dragOffsetX, y: y - dragOffsetY }));
clicked.dataset.x = position.x; clicked.dataset.x = position.x;
clicked.dataset.y = position.y; clicked.dataset.y = position.y;
@@ -702,12 +699,28 @@ document.addEventListener("touchmove", (e) => {
} }
}, { passive: false }); }, { 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() { function updateWorldHeight() {
const value = Math.max(1, document.querySelector("#options-height-value").value); const value = Math.max(1, document.querySelector("#options-height-value").value);
const unit = document.querySelector("#options-height-unit").value; const unit = document.querySelector("#options-height-unit").value;
const oldHeight = config.height; 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]) => { Object.entries(entities).forEach(([key, entity]) => {
const element = document.querySelector("#entity-" + key); const element = document.querySelector("#entity-" + key);


Verfassen Vorschau
Laden…
Abbrechen
Speichern