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

Generate the menubar dynamically; update help; indicate when new help is added

tags/v0.1.0
Fen Dweller 5 years ago
parent
4a949fcf22
commit
237e8c9625
3 changed files with 196 additions and 64 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +53
    -3
      macrovision.css
  2. +15
    -61
      macrovision.html
  3. +128
    -0
      macrovision.js

+ 53
- 3
macrovision.css View File

@@ -391,7 +391,35 @@ body.toggle-bottom-name .bottom-name {
}

#menubar button {
position: relative;
font-size: 36pt;
z-index: 1;
}

#open-help.highlighted::before {
position: absolute;
top: 0;
left: 0;
content: " ";
display: block;
height: 100%;
width: 100%;
background: white;
filter: drop-shadow(0px 0px 10px white);
z-index: -1;
animation: pulsing 5s linear 0s infinite;
}

@keyframes pulsing {
0% {
opacity: 100%;
}
50% {
opacity: 25%;
}
100% {
opacity: 100%;
}
}

#help {
@@ -407,17 +435,17 @@ body.toggle-bottom-name .bottom-name {
padding-bottom: 20vh;
padding-left: 20vw;
padding-right: 20vw;
transition: 1s;
text-align: center;
background: #333;
opacity: 0;
z-index: 9999999;
backdrop-filter: blur(5px);
}

#help.visible {
display: flex;
opacity: 0.9;
transition: 1s;
justify-content: center;
}

#help h1 {
@@ -428,8 +456,17 @@ body.toggle-bottom-name .bottom-name {
font-size: 125%;
}

#help ul {
text-align: left;
list-style: circle;
width: 75vw;
}

#help li {
padding: 10px;
}

#help button {
width: 20vw;
height: 10vh;
font-size: 9vh;
}
@@ -608,4 +645,17 @@ body.toggle-bottom-cover .bottom-cover {
i.fas
i.far {
pointer-events: none;
}

#help-icons {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 50vw;

}

#help-icons > div {
flex-basis: 25%;
font-size: 150%;
}

+ 15
- 61
macrovision.html View File

@@ -31,16 +31,14 @@

<body class="toggle-bottom-name toggle-top-name toggle-scale">
<div id="help">
<h1>Discord</h1>
<p>
<ul>
<li><a href="https://discord.gg/vqcKVV6">Join the Discord server!</a></li>
</ul>
</p>
<h1>Menu</h1>
<div id="help-icons">

</div>
<h1>Navigation</h1>
<p>
<ul>
<li>Scroll to zoom in/out. Entities will go off the top of the screen if they're in the air and you zoom in!</li>
<li>Scroll to zoom in/out.</li>

<li>Alt-scroll to zoom in/out and preserve positions on the screen.</li>
@@ -50,69 +48,25 @@
<h1>Adding/removing entities</h1>
<p>
<ul>
<li>Drag something to the top of the screen to delete it, or press the delete key</li>
<li>Remove the selected entity with the Delete key</li>
<li>Alternatively, drag them off the top of the screen</li>
</ul>
</p>
<h1>Adding your own character</h1>
<p>
<a href="https://docs.google.com/forms/d/1esagCHSNd1kvCFoTGfCacaHXe2L8dKalqgKEHqHgGuM/edit">Submit your stuff here!</a>
</p>
<button id="close-help">Close</button>
</div>
<div id="menubar">
<span class="menubar-group">
<button id="menu-toggle-sidebar">
<i class="fas fa-chevron-circle-down rotate-backward transitions"></i>
<span class="sr-only">Toggle Sidebar</span>
</button>
<button id="menu-fullscreen">
<i class="fas fa-compress" ></i>
<span class="sr-only">Fullscreen</span>
</button>
</span>
<span class="menubar-group">
<button id="menu-clear">
<i class="fas fa-trash-alt"></i>
<span class="sr-only">Clear</span>
</button>
</span>
<span class="menubar-group">
<button id="menu-order-height">
<i class="fas fa-sort-numeric-up"></i>
<span class="sr-only">Sort</span>
</button>
</span>
<span class="menubar-group">
<button id="menu-permalink">
<i class="fas fa-link"></i>
<span class="sr-only">Permalink</span>
</button>
<button id="menu-export">
<i class="fas fa-share"></i>
<span class="sr-only">Export</span>
</button>
<button id="menu-save">
<i class="fas fa-download"></i>
<span class="sr-only">Save</span>
</button>
<button id="menu-load">
<i class="fas fa-upload"></i>
<span class="sr-only">Load</span>
</button>
</span>
<span class="menubar-group" id="spawners">

</span>
</span>
<span class="menubar-group" id="scenes">
<button id="load-scene">
<i class="fas fa-cloud-upload-alt"></i>
<span class="sr-only">Load Scene</span>
</button>
<select id="scene-choices">
<span class="menubar-group" id="scenes">
<button id="load-scene">
<i class="fas fa-cloud-upload-alt"></i>
<span class="sr-only">Load Scene</span>
</button>
<select id="scene-choices">

</select>
</span>
</select>
</span>
<span class="menubar-group">
<button id="open-help">
<i class="far fa-question-circle"></i>


+ 128
- 0
macrovision.js View File

@@ -1016,7 +1016,133 @@ function handleResize() {
updateSizes();
}

function prepareMenu() {

const menubar = document.querySelector("#menubar");
const help = document.querySelector("#help-icons");
const spawners = document.querySelector("#spawners");

[
[
{
name: "Show/hide sidebar",
id: "menu-toggle-sidebar",
icon: "fas fa-chevron-circle-down",
rotates: true
},
{
name: "Fullscreen",
id: "menu-fullscreen",
icon: "fas fa-compress"
}
],
[
{
name: "Clear",
id: "menu-clear",
icon: "fas fa-trash-alt"
}
],
[
{
name: "Sort by height",
id: "menu-order-height",
icon: "fas fa-sort-numeric-up"
}
],
[
{
name: "Permalink",
id: "menu-permalink",
icon: "fas fa-link"
},
{
name: "Export",
id: "menu-export",
icon: "fas fa-share"
},
{
name: "Save",
id: "menu-save",
icon: "fas fa-download"
},
{
name: "Load",
id: "menu-load",
icon: "fas fa-upload"
}
]
].forEach(group => {
const span = document.createElement("span");
span.classList.add("menubar-group");
group.forEach(entry => {
const button = document.createElement("button");
button.id = entry.id;

const icon = document.createElement("i");
icon.classList.add(...entry.icon.split(" "));
if (entry.rotates) {
icon.classList.add("rotate-backward", "transitions");
}

const srText = document.createElement("span");
srText.classList.add("sr-only");
srText.innerText = entry.name;

button.appendChild(icon);
button.appendChild(srText);

span.appendChild(button);

const helperEntry = document.createElement("div");
const helperIcon = document.createElement("icon");
const helperText = document.createElement("span");

helperIcon.classList.add(...entry.icon.split(" "));
helperText.innerText = entry.name;
helperEntry.appendChild(helperIcon);
helperEntry.appendChild(helperText);

help.appendChild(helperEntry);
});

menubar.insertBefore(span, spawners);
});

if (checkHelpDate()) {
document.querySelector("#open-help").classList.add("highlighted");
}
}

const lastHelpChange = 1585150501917;

function checkHelpDate() {
try {
const old = localStorage.getItem("help-viewed");

if (old === null || old < lastHelpChange) {
return true;
}

return false;
} catch {
console.warn("Could not set the help-viewed date");
return false;
}
}

function setHelpDate() {
try {
localStorage.setItem("help-viewed", Date.now());
} catch {
console.warn("Could not set the help-viewed date");
}
}

document.addEventListener("DOMContentLoaded", () => {
prepareMenu();
prepareEntities();

document.querySelector("#menu-toggle-sidebar").addEventListener("click", e => {
@@ -1160,6 +1286,8 @@ document.addEventListener("DOMContentLoaded", () => {
canvasHeight = document.querySelector("#display").clientHeight - 50;

document.querySelector("#open-help").addEventListener("click", e => {
setHelpDate();
document.querySelector("#open-help").classList.remove("highlighted");
document.querySelector("#help").classList.add("visible");
});



Write Preview
Loading…
Cancel
Save