mirrors/seafoam
1
0
Fork 0
mirror of https://github.com/DoomKitty87/seafoam.git synced 2024-12-28 16:06:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

finished waypoint page working on settings page

Browse source
This commit is contained in:
DoomKitty87 2023-08-21 18:38:48 -07:00
parent 8e0a6de382
commit 9962421994
2 changed files with 129 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
web-app/seafoam/src/index.html
View file

@ -15,13 +15,14 @@
<div class="menubutton"><h2 class="buttontext">ROUTES</h2></div>
</div>
<div class="main">
<div class="menuscreen" id="menua1">
<div class="menua">
<ul class="progressbar">
<li class="progressitem" data-active="true">MAP ZONE<span class="dot" data-active="true"></span></li>
<li class="progressitem" data-active="false">WAYPOINTS<span class="dot"></span></li>
<li class="progressitem" data-active="false">SETTINGS<span class="dot" data-active="false"></span></li>
<li class="progressitem" data-active="false">GENERATE<span class="dot" data-active="false"></span></li>
</ul>
<div class="menuscreen" id="menua1">
<div class="infobox">
<h1 class="infotitle">ROUTE AREA</h1>
<h3 class="infodesc">Click to choose the area where your route will generate.</h3>
@ -71,25 +72,45 @@
</div>
</div>
<div class="menuscreen" id="menua2">
<ul class="progressbar">
<li class="progressitem" data-active="true">MAP ZONE<span class="dot" data-active="true"></span></li>
<li class="progressitem" data-active="false">WAYPOINTS<span class="dot"></span></li>
<li class="progressitem" data-active="false">SETTINGS<span class="dot" data-active="false"></span></li>
<li class="progressitem" data-active="false">GENERATE<span class="dot" data-active="false"></span></li>
</ul>
<div class="infobox">
<h1 class="infotitle">ROUTE AREA</h1>
<h3 class="infodesc">Click to choose the area where your route will generate.</h3>
<h1 class="infotitle">WAYPOINTS</h1>
<h3 class="infodesc">Enter desired waypoints- route may be +-10% of the value.</h3>
</div>
<div class="waypointentry">
<form>
<input id="wpform" class="waypointform" type="number" value="150">
</form>
</div>
<div class="nextbutton">
<h2 class="nextbuttontext" onclick="moveStep()">NEXT &#8594</h2>
</div>
</div>
<div class="menuscreen" id="menua3">
<div class="infobox">
<h1 class="infotitle">SETTINGS</h1>
</div>
<div class="prioritychoice">
<h2 class="settingdesc">Choose priority for teleport distance or density for route output.</h2>
<form>
<input class="priorityform" id="tp" type="radio" value="TP">
<label class="priorityform" for="tp">TP Distance</label>
<br>
<input class="priorityform" id="dens" type="radio" value="DENS">
<label class="priorityform" for="dens">Density</label>
</form>
</div>
<div class="nextbutton">
<h2 class="nextbuttontext" onclick="moveStep()">NEXT &#8594</h2>
</div>
</div>
</div>
</div>
<script>
var activeSquare = -1;
var currentStep = 1;
var waypointNumber = 150;
document.getElementById("menua1").style.opacity = 1;
document.getElementById("menua1").style.display = "block";
@ -102,13 +123,18 @@
}
async function updateMenu(step) {
document.getElementById("menua" + (step - 1)).style.opacity = 0;
document.getElementsByClassName("progressitem")[step - 2].setAttribute("data-active", "false");
document.getElementsByClassName("dot")[step - 2].setAttribute("data-active", "false");
await new Promise(r => setTimeout(r, 500));
document.getElementById("menua" + (step - 1)).style.display = "none";
document.getElementById("menua" + (step)).style.display = "block";
document.getElementById("menua" + (step)).style.opacity = 1;
document.getElementsByClassName("progressitem")[step - 1].setAttribute("data-active", "true");
document.getElementsByClassName("dot")[step - 1].setAttribute("data-active", "true");
}
function moveStep() {
if (currentStep == 1 && activeSquare == -1) return;
if (currentStep == 2) waypointNumber = document.getElementById("wpform").value;
currentStep++;
updateMenu(currentStep);
}

45
web-app/seafoam/src/styles.css
View file

@ -71,6 +71,7 @@ body {
font-weight: 500;
color: #404040;
display: inline-block;
transition: color 0.25s;
}
.progressitem[data-active="true"] {
@ -176,3 +177,47 @@ body {
.mapsquare:hover {
opacity: 0.7;
}
.waypointentry {
position: relative;
left: 20rem;
margin-top: 2rem;
width: 40rem;
}
.waypointform {
background-color: #131b23;
height: 2rem;
width: 7rem;
color: #ffffff;
font-size: 1.2rem;
font-weight: 300;
font-family: "Poppins";
}
.waypointform::-webkit-outer-spin-button,
.waypointform::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.prioritychoice {
position: relative;
left: 20rem;
width: 40rem;
}
.priorityform {
color: #ffffff;
font-size: 1.2rem;
font-weight: 300;
margin-right: 1rem;
}
.settingdesc {
margin-top: 1rem;
width: 20rem;
font-size: 1rem;
font-weight: 300;
color: #ffffff;
}