mirrors/seafoam
1
0
Fork 0
mirror of https://github.com/DoomKitty87/seafoam.git synced 2024-12-29 08:26:49 +01:00
Code Issues Projects Releases Packages Wiki Activity

Auto stash before merge of "main" and "origin/main"

Browse source
This commit is contained in:
Matthew Dinh 2023-08-22 00:24:01 -07:00
parent 67779d47d9
commit 50a011941e
2 changed files with 44 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -33,39 +33,39 @@
<img class="map" src="assets/map.png"> <img class="map" src="assets/map.png">
<div class="xaxis"> <div class="xaxis">
<div class="yaxis"> <div class="yaxis">
<div class="mapsquare" id="20" onclick="setSquare(20)"></div> <div class="mapsquare" id="20" onclick="selectSquare(20)"></div>
<div class="mapsquare" id="21" onclick="setSquare(21)"></div> <div class="mapsquare" id="21" onclick="selectSquare(21)"></div>
<div class="mapsquare" id="22" onclick="setSquare(22)"></div> <div class="mapsquare" id="22" onclick="selectSquare(22)"></div>
<div class="mapsquare" id="23" onclick="setSquare(23)"></div> <div class="mapsquare" id="23" onclick="selectSquare(23)"></div>
<div class="mapsquare" id="24" onclick="setSquare(24)"></div> <div class="mapsquare" id="24" onclick="selectSquare(24)"></div>
</div> </div>
<div class="yaxis"> <div class="yaxis">
<div class="mapsquare" id="15" onclick="setSquare(15)"></div> <div class="mapsquare" id="15" onclick="selectSquare(15)"></div>
<div class="mapsquare" id="16" onclick="setSquare(16)"></div> <div class="mapsquare" id="16" onclick="selectSquare(16)"></div>
<div class="mapsquare" id="17" onclick="setSquare(17)"></div> <div class="mapsquare" id="17" onclick="selectSquare(17)"></div>
<div class="mapsquare" id="18" onclick="setSquare(18)"></div> <div class="mapsquare" id="18" onclick="selectSquare(18)"></div>
<div class="mapsquare" id="19" onclick="setSquare(19)"></div> <div class="mapsquare" id="19" onclick="selectSquare(19)"></div>
</div> </div>
<div class="yaxis"> <div class="yaxis">
<div class="mapsquare" id="10" onclick="setSquare(10)"></div> <div class="mapsquare" id="10" onclick="selectSquare(10)"></div>
<div class="mapsquare" id="11" onclick="setSquare(11)"></div> <div class="mapsquare" id="11" onclick="selectSquare(11)"></div>
<div class="mapsquare" style="opacity: 0"></div> <div class="mapsquare" style="opacity: 0"></div>
<div class="mapsquare" id="13" onclick="setSquare(13)"></div> <div class="mapsquare" id="13" onclick="selectSquare(13)"></div>
<div class="mapsquare" id="14" onclick="setSquare(14)"></div> <div class="mapsquare" id="14" onclick="selectSquare(14)"></div>
</div> </div>
<div class="yaxis"> <div class="yaxis">
<div class="mapsquare" id="5" onclick="setSquare(5)"></div> <div class="mapsquare" id="5" onclick="selectSquare(5)"></div>
<div class="mapsquare" id="6" onclick="setSquare(6)"></div> <div class="mapsquare" id="6" onclick="selectSquare(6)"></div>
<div class="mapsquare" id="7" onclick="setSquare(7)"></div> <div class="mapsquare" id="7" onclick="selectSquare(7)"></div>
<div class="mapsquare" id="8" onclick="setSquare(8)"></div> <div class="mapsquare" id="8" onclick="selectSquare(8)"></div>
<div class="mapsquare" id="9" onclick="setSquare(9)"></div> <div class="mapsquare" id="9" onclick="selectSquare(9)"></div>
</div> </div>
<div class="yaxis"> <div class="yaxis">
<div class="mapsquare" id="0" onclick="setSquare(0)"></div> <div class="mapsquare" id="0" onclick="selectSquare(0)"></div>
<div class="mapsquare" id="1" onclick="setSquare(1)"></div> <div class="mapsquare" id="1" onclick="selectSquare(1)"></div>
<div class="mapsquare" id="2" onclick="setSquare(2)"></div> <div class="mapsquare" id="2" onclick="selectSquare(2)"></div>
<div class="mapsquare" id="3" onclick="setSquare(3)"></div> <div class="mapsquare" id="3" onclick="selectSquare(3)"></div>
<div class="mapsquare" id="4" onclick="setSquare(4)"></div> <div class="mapsquare" id="4" onclick="selectSquare(4)"></div>
</div> </div>
</div> </div>
</div> </div>
@ -408,12 +408,13 @@
document.getElementById("menua1").style.opacity = 1; document.getElementById("menua1").style.opacity = 1;
document.getElementById("menua1").style.display = "block"; document.getElementById("menua1").style.display = "block";
function setSquare(indx) { function selectSquare(index) {
if (activeSquare != -1) { if (selectedSquareIndex != -1) {
document.getElementById(activeSquare).style.backgroundColor = "#0e141b"; document.getElementById(selectedSquareIndex).style.backgroundColor = "#0e141b";
} }
activeSquare = parseInt(indx); selectedSquareIndex = parseInt(index);
document.getElementById(indx).style.backgroundColor = "#ffffff"; let selectedSquareDiv = document.getElementById(index);
selectedSquareDiv.style.backgroundColor = "#edbdc2";
} }
function getRoute() { function getRoute() {
var output = generateRoute(activeSquare, allowedOOB, priority, waypointNumber, angleEnable, angle22, angle33); var output = generateRoute(activeSquare, allowedOOB, priority, waypointNumber, angleEnable, angle22, angle33);
@ -461,7 +462,7 @@
document.getElementById("menub1").style.opacity = 1; document.getElementById("menub1").style.opacity = 1;
} }
function moveStep() { function moveStep() {
if (currentStep == 1 && activeSquare == -1) return; if (currentStep == 1 && selectedSquareIndex == -1) return;
if (currentStep == 2) waypointNumber = document.getElementById("wpform").value; if (currentStep == 2) waypointNumber = document.getElementById("wpform").value;
if (currentStep == 3) { if (currentStep == 3) {
if (document.getElementById("tp").checked) priority = "tp"; else priority = "dens"; if (document.getElementById("tp").checked) priority = "tp"; else priority = "dens";

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

@ -166,17 +166,27 @@ body {
.mapsquare { .mapsquare {
display: flex; display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
width: 5.8rem; width: 5.8rem;
height: 5.8rem; height: 5.8rem;
background-color: #0e141b; background-color: #0e141b;
display: inline-block;
margin: 0.1rem; margin: 0.1rem;
opacity: 0.4; opacity: 0.5;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.mapsquare:hover { .mapsquare:hover {
opacity: 0.7; opacity: 0.8;
}
#mapboxselectedtext {
text-align: center;
color: #ffffff;
font-size: 1rem;
font-weight: 500;
opacity: 1;
} }
.waypointentry { .waypointentry {