chemicalcrux
/
macrovision
1
0
Fork 0
Code Issues 5 Pull Requests 0 Releases 10 Wiki Activity
Browse Source

Add an option to point out entities much larger than the viewport 

Very large entities are confusing to add - they appear for a brief moment
and then grow off the screen. This shows an arrow if an entity is at least
ten times taller than the viewport.
tags/v0.1.0
Fen Dweller 5 years ago
parent
ccc8046feb
commit
928b4d3088
4 changed files with 69 additions and 2 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +25
    -0
      macrovision.css
  2. +6
    -2
      macrovision.html
  3. +25
    -0
      macrovision.js
  4. +13
    -0
      media/ui/arrow.svg

+ 25
- 0
macrovision.css View File

@@ -286,6 +286,31 @@ body #test-canvas {
transform: scale(2);
}

.top-name {
display: none;
text-align: center;
position: fixed;
max-width: 150px;
height: 50px;
transform: translate(-50%, 20pt);
z-index: 1001;
}

body.toggle-top-name .top-name.top-name-needed {
display: block;
}

.top-name::after {
display: block;
background-image: url("./media/ui/arrow.svg");
width: 70px;
height: 70px;
background-size: 70px 70px;
background-repeat: no-repeat;
content: "";
transform: translate(0, -120%);
}

.bottom-name {
display: none;
text-align: center;


+ 6
- 2
macrovision.html View File

@@ -27,7 +27,7 @@
<link rel="icon" href="https://crux.sexy/images/macrovision.ico">
</head>

<body class="">
<body class="toggle-bottom-name toggle-top-name">
<div id="help">
<h1>Discord</h1>
<p>
@@ -140,9 +140,13 @@
<label for="options-world-show-names">Names over entities</label>
</div>
<div class="options-row">
<input type="checkbox" id="options-world-show-bottom-names">
<input type="checkbox" id="options-world-show-bottom-names" checked="true">
<label for="options-world-show-bottom-names">Names at bottom</label>
</div>
<div class="options-row">
<input type="checkbox" id="options-world-show-top-names" checked="true">
<label for="options-world-show-top-names">Arrows for very large entities</label>
</div>
<div class="options-row">
<input type="checkbox" id="options-world-show-height-bars">
<label for="options-world-show-height-bars">Height bars</label>


+ 25
- 0
macrovision.js View File

@@ -132,6 +132,18 @@ function updateEntityElement(entity, element) {
bottomName.style.left = position.x + entityX + "px";
bottomName.style.top = "95vh";
bottomName.innerText = entity.name;

const topName = document.querySelector("#top-name-" + element.dataset.key);

topName.style.left = position.x + entityX + "px";
topName.style.top = "20vh";
topName.innerText = entity.name;

if (entity.views[view].height.toNumber("meters") / 10 > config.height.toNumber("meters")) {
topName.classList.add("top-name-needed");
} else {
topName.classList.remove("top-name-needed");
}
}

function updateSizes(dirtyOnly = false) {
@@ -917,6 +929,15 @@ function displayEntity(entity, view, x, y, selectEntity=false) {
bottomName.addEventListener("click", () => select(box));

world.appendChild(bottomName);

const topName = document.createElement("div");
topName.classList.add("top-name");
topName.id = "top-name-" + entityIndex;
topName.innerText = entity.name;

topName.addEventListener("click", () => select(box));

world.appendChild(topName);
entityIndex += 1;
if (config.autoFit) {
fitWorld();
@@ -985,6 +1006,10 @@ document.addEventListener("DOMContentLoaded", () => {
document.body.classList[e.target.checked ? "add" : "remove"]("toggle-bottom-name");
});

document.querySelector("#options-world-show-top-names").addEventListener("input", e => {
document.body.classList[e.target.checked ? "add" : "remove"]("toggle-top-name");
});

document.querySelector("#options-world-show-height-bars").addEventListener("input", e => {
document.body.classList[e.target.checked ? "add" : "remove"]("toggle-height-bars");
});


+ 13
- 0
media/ui/arrow.svg View File

@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 122.31 196.32" style="enable-background:new 0 0 122.31 196.32;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#424242;stroke-width:10;stroke-miterlimit:10;}
.st1{fill:none;stroke:#7A7A7A;stroke-width:10;stroke-miterlimit:10;}
</style>
<g>
<line class="st0" x1="61.14" y1="196.32" x2="61.14" y2="7.07"/>
<polyline class="st1" points="118.77,64.7 61.14,7.07 3.54,64.68 "/>
</g>
</svg>

Write Preview
Loading…
Cancel
Save