adding half of sec files

.gitignore

@@ -0,0 +1,2 @@
+
+web-app/seafoam/src-tauri/assets/blockarraydata.json

web-app/seafoam/src/index.html

@@ -16,7 +16,7 @@
           </div>
         </div>
         <div class="menubutton" onclick="resetMenu()"><h2 class="buttontext">GENERATE</h2></div>
-        <div class="menubutton" onclick="routeMenu()""><h2 class="buttontext">ROUTES</h2></div>
+        <div class="menubutton" onclick="routeMenu()""><h2 class="buttontext">OLD ROUTES</h2></div>
       </div>
       <div class="main">
         <div class="menucontainer" id="menua">
@@ -29,6 +29,7 @@
           <div class="menuscreen" id="menua1">
             <div class="lefttextcontainer">
               <div class="infobox">
+                <h4 class="infotitlesuperscript">Step One:</h4>
                 <h1 class="infotitle">ROUTE AREA</h1>
                 <h3 class="infodesc">Click to choose the area where your route will generate.</h3>
                 <form>
@@ -37,7 +38,7 @@
                 </form>
               </div>
               <div class="nextbutton">
-                <h2 class="nextbuttontext" onclick="moveStep()">NEXT &#8594</h2>
+                <h2 class="nextbuttontext" id="mapnextbutton" onclick="moveStep()">NEXT &#8594</h2>
               </div>
             </div>
             <div class="rightcontentcontainer">
@@ -86,6 +87,7 @@
           <div class="menuscreen" id="menua2">
             <div class="lefttextcontainer">
               <div class="infobox">
+                <h4 class="infotitlesuperscript">Step Two:</h4>
                 <h1 class="infotitle">WAYPOINTS</h1>
                 <h3 class="infodesc">Enter desired waypoints- route may be +-10% of the value.</h3>
               </div>
@@ -102,6 +104,7 @@
           <div class="menuscreen" id="menua3">
             <div class="lefttextcontainer">
               <div class="infobox">
+                <h4 class="infotitlesuperscript">Step Three:</h4>
                 <h1 class="infotitle">SETTINGS</h1>
               </div>
               <div class="settingbox">
@@ -148,6 +151,7 @@
           <div class="menuscreen" id="menua4">
             <div class="lefttextcontainer">
               <div class="infobox">
+                <h4 class="infotitlesuperscript">Step Four:</h4>
                 <h1 class="infotitle">GENERATE</h1>
                 <h3 class="infodesc">Your route is being generated. Please wait.</h3>
               </div>
@@ -191,18 +195,43 @@
       waypointCount = parseInt(waypointCount);
       const readTextFile = window.__TAURI__.fs.readTextFile;
       const resolveResource = window.__TAURI__.path.resolveResource;
-      const padPath = await resolveResource('assets/padsv3.txt')
+      const padPath = await resolveResource('assets/pads.json')
       const overallPads = [];
+      const gemDensities = [];
       // Loading etherwarp pad coordinates
       const padFile = await readTextFile(padPath);
+      const padData = JSON.parse(padFile);
+      for (const pad of padData) {
+        overallPads.push(parseInt(pad.x), parseInt(pad.y), parseInt(pad.z));
+        gemDensities.push(parseInt(pad.density));
+      }
+      console.log("Done loading pads.");
+      /*
       const padLines = padFile.trim().split('\n');
       for (const line of padLines) {
         const [x, y, z] = line.split(' ').map(Number);
         overallPads.push(x, y, z);
       }
-      const gemDataPath = await resolveResource('assets/blockarraydatav3.txt');
+      */
+      const gemDataPath = await resolveResource('assets/sector' + sector + '.json');
       const gemstoneData = await readTextFile(gemDataPath);
+      const gemData = JSON.parse(gemstoneData);
+      console.log("Loaded block json");
       const blockData = [];
+      blockData.length = 640;
+      for (let x = 0; x < 640; x++) {
+        blockData[x] = [];
+        blockData[x].length = 256;
+        for (let y = 0; y < 256; y++) {
+          blockData[x][y] = [];
+          blockData[x][y].length = 640;
+          for (let z = 0; z < 640; z++) {
+            blockData[x][y][z] = 0;
+          }
+        }
+      }
+      
+      /*
       const lines = gemstoneData.trim().split('\n');
       for (let x = 0; x < 622; x++) {
         console.log(`Loading block data... ${Math.floor(x / 622 * 100)}%`);
@@ -213,14 +242,16 @@
           blockData[x][y] = values;
         }
       }
-      const densPath = await resolveResource('assets/densitylistv3.txt');
+      */
+      //const densPath = await resolveResource('assets/densitylistv3.txt');
+      /*
       const gemDensities = [];
       const densityFile = await readTextFile(densPath);
       const densityLines = densityFile.trim().split('\n');
       for (const line of densityLines) {
         gemDensities.push(Number(line));
       }
-
+      */
       console.log(`Loaded ${overallPads.length / 3} pads.`);
 
       const jadecoordsx = 823;
@@ -229,16 +260,27 @@
       const sectors = [];
       for (let i = 0; i < 5; i++) {
         for (let j = 0; j < 5; j++) {
-          const sector = [];
+          const sectortmp = [];
           const cornerx = jadecoordsx + i * -128;
           const cornerz = jadecoordsz + j * 128;
-          sector.push(cornerx);
-          sector.push(cornerz);
-          sector.push(cornerx - 128);
-          sector.push(cornerz + 128);
-          sectors.push(sector);
+          sectortmp.push(cornerx);
+          sectortmp.push(cornerz);
+          sectortmp.push(cornerx - 128);
+          sectortmp.push(cornerz + 128);
+          sectors.push(sectortmp);
         }
       }
+      if (checkingLOS) {
+        for (let x = 0; x < 128; x++) {
+          for (let y = 0; y < 256; y++) {
+            for (let z = 0; z < 128; z++) {
+              blockData[sectors[sector][0] - x - 202][y][z + sectors[sector][1] - 202] = gemData[x][y][z];
+            }
+          }
+        }
+        console.log("Done loading blocks.");
+      }
+  
       const desiredPathLength = waypointCount;
       const padCoords = [];
       const secDensities = [];
@@ -425,7 +467,7 @@
       pathOutput += "]";
       document.getElementById("routeout").innerHTML = pathOutput;
       console.log(outPath.length / 3, outPathDensity, outPathDist);
-      document.getElementById("routestats").innerHTML = `Waypoints: ${outPath.length / 3}<br>Density: ${outPathDensity}<br>Distance: ${outPathDist}`;
+      document.getElementById("routestats").innerHTML = `Waypoints: ${outPath.length / 3}<br>Density: ${outPathDensity.toPrecision(4)}<br>Distance: ${outPathDist.toPrecision(4)}`;
       return pathOutput, outPath.length / 3, outPathDensity, outPathDist;
     }
     var activeSquareIndex = -1;
@@ -449,8 +491,9 @@
 
     function selectSquare(index) {
       if (activeSquareIndex != -1) {
-        document.getElementById(activeSquareIndex).style.backgroundColor = "#0e141b";
+        document.getElementById(activeSquareIndex).style.backgroundColor = "rgba(1, 1, 2, 0.665)";
       }
+      document.getElementById("mapnextbutton").style.opacity = 1;
       activeSquareIndex = parseInt(index);
       let selectedSquareDiv = document.getElementById(index);
       selectedSquareDiv.style.backgroundColor = "#edbdc2";
@@ -518,6 +561,8 @@
         } else angleEnable = false;
         if (document.getElementById("los").checked) checkingLOS = true;
         else checkingLOS = false;
+        document.getElementById("routeout").innerHTML = "Route loading...";
+        document.getElementById("routestats").innerHTML = "";
       }
       if (currentStep == 4) return;
       currentStep++;

web-app/seafoam/src/styles.css

@@ -1,12 +1,33 @@
 @font-face {
-  font-family: "Poppins";
-  src: url(assets/poppins.ttf) format("truetype");
+  font-family: "Poppins-Thin";
+  src: url(assets/fonts/Poppins/Poppins-Thin.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-ExtraLight";
+  src: url(assets/fonts/Poppins/Poppins-ExtraLight.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-Light";
+  src: url(assets/fonts/Poppins/Poppins-Light.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-Medium";
+  src: url(assets/fonts/Poppins/Poppins-Medium.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-SemiBold";
+  src: url(assets/fonts/Poppins/Poppins-SemiBold.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-Bold";
+  src: url(assets/fonts/Poppins/Poppins-Bold.ttf) format("truetype");
 }
 
 :root {
   --main-bg-color: #295d8c;
   --accent-bg-color: #427baf;
   --button-bg-color: #427baf;
+  --white-text-color: rgba(255, 255, 255, 0.8);
 }
 
 html {
@@ -17,7 +38,7 @@ html {
 body {
   user-select: none;
   background-color: var(--main-bg-color);
-  font-family: "Poppins";
+  font-family: "Poppins-Medium";
   margin: 0;
   padding: 0;
   height: 100%;
@@ -51,8 +72,8 @@ body {
 
 .title {
   display: flex;
-  color: #ffffff;
-  font-weight: 200;
+  color: var(--white-text-color);
+  font-weight: 300;
   margin: 0;
 }
 
@@ -67,6 +88,7 @@ body {
   align-items: center;
   margin: 2rem;
   margin-bottom: 5rem;
+  font-family: "Poppins-ExtraLight";
 }
 
 .menubutton {
@@ -76,14 +98,16 @@ body {
   align-items: center;
   height: 5rem;
   font-size: 0.7rem;
-  color: #ffffff;
+  color: var(--white-text-color);
   background-color: #131b23;
   transition: background-color 0.25s;
   padding-left: 2rem;
 }
 
 .buttontext {
-  font-weight: 200;
+  font-family: "Poppins-SemiBold";
+  letter-spacing: 0.2rem;
+  font-size: 12pt;
 }
 
 .menucontainer {
@@ -118,7 +142,7 @@ body {
   margin: 1.5rem;
   font-size: 0.75rem;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--white-text-color);
   display: inline-block;
   opacity: 0.3;
   transition: opacity 0.25s;
@@ -131,12 +155,12 @@ body {
 .dot {
   height: .8rem;
   width: .8rem;
-  background-color: #ffffff;
+  background-color: var(--white-text-color);
   border-radius: 50%;
   display: block;
   margin: 0.5rem auto auto auto;
-  transition: opacity 0.25s;
-  transition: transform 0.5s;
+  transition: opacity 0.25s ease-out;
+  transition: transform 0.25s ease-out;
   transform: scale(0.5);
   opacity: 0.3;
 }
@@ -165,34 +189,65 @@ body {
   width: 20rem;
 }
 
+.infotitlesuperscript {
+  font-size: 12pt;
+  font-family: "Poppins-ExtraLight";
+  letter-spacing: 0.05rem;
+  color: var(--white-text-color);
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
 .infotitle {
   font-size: 3rem;
-  font-weight: 500;
-  color: #ffffff;
+  font-family: "Poppins-Light";
+  letter-spacing: 0.1rem;
+  color: var(--white-text-color);
   margin-top: 1rem;
   margin-bottom: 0;
 }
 
 .infodesc {
-  font-size: 0.8rem;
-  font-weight: 300;
-  color: #ffffff;
+  font-size: 12pt;
+  font-family: "Poppins-Thin";
+  letter-spacing: 0.05rem;
+  color: var(--white-text-color);
+}
+
+#mapnextbutton {
+  opacity: 0;
+  transition: opacity 0.2s ease-out;
 }
 
 .nextbutton {
   margin-top: 5rem;
-  transition: background-color 0.1s;
   width: fit-content;
   padding: 0 1rem 0 0;
 }
 
-.nextbutton:hover {
-  background-color: var(--button-bg-color);
+.nextbuttontext {
+  color: var(--white-text-color);
+  font-family: "Poppins-SemiBold";
+  display: inline-block;
+  position: relative;
 }
 
-.nextbuttontext {
-  color: #ffffff;
-  font-weight: 200;
+.nextbuttontext::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--white-text-color);
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+.nextbuttontext:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
 }
 
 .mapbox {
@@ -244,7 +299,7 @@ body {
 
 #mapboxselectedtext {
   text-align: center;
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1rem;
   font-weight: 500;
   opacity: 1;
@@ -259,7 +314,7 @@ body {
   background-color: var(--accent-bg-color);
   height: 2rem;
   width: 7rem;
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   font-family: "Poppins";
@@ -277,7 +332,7 @@ body {
 }
 
 .priorityform {
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   margin-right: 1rem;
@@ -287,16 +342,17 @@ body {
 .settingdesc {
   margin-top: 1rem;
   width: 20rem;
-  font-size: 1rem;
-  font-weight: 300;
-  color: #ffffff;
+  font-size: 12pt;
+  font-family: "Poppins-Thin";
+  letter-spacing: 0.05rem;
+  color: var(--white-text-color);
 }
 
 .oobform {
   background-color: var(--accent-bg-color);
   height: 1.5rem;
   width: 5rem;
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   font-family: "Poppins";
@@ -310,11 +366,11 @@ body {
 }
 
 input.angleenable:checked {
-  background-color: #ffffff;
+  background-color: var(--white-text-color);
 }
 
 label.angleenable {
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   margin-left: 0.5rem;
@@ -332,7 +388,7 @@ input.anglesettings {
   background-color: var(--accent-bg-color);
   height: 1.5rem;
   width: 5rem;
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   font-family: "Poppins";
@@ -345,7 +401,7 @@ input.anglesettings::-webkit-inner-spin-button {
 }
 
 label.anglesettings {
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   margin-left: 0.5rem;
@@ -358,7 +414,7 @@ label.anglesettings {
 }
 
 .routeoutput {
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   user-select: text;
@@ -370,7 +426,7 @@ label.anglesettings {
 }
 
 .routestats {
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1.2rem;
   font-weight: 300;
   margin-top: 1rem;
@@ -386,7 +442,7 @@ label.anglesettings {
 .routestitle {
   font-size: 3rem;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--white-text-color);
   /* margin-top: 1rem;
   margin-bottom: 0; */
 }
@@ -394,7 +450,7 @@ label.anglesettings {
 .routesdesc {
   font-size: 0.8rem;
   font-weight: 300;
-  color: #ffffff;
+  color: var(--white-text-color);
 }
 
 /* .routeviewbox {
@@ -408,7 +464,7 @@ label.anglesettings {
 .routetitle {
   font-size: 1.5rem;
   font-weight: 500;
-  color: #ffffff;
+  color: var(--white-text-color);
   /* margin-top: 1rem;
   margin-bottom: 0; */
 }
@@ -428,7 +484,7 @@ label.anglesettings {
 } */
 
 label.mfbox {
-  color: #ffffff;
+  color: var(--white-text-color);
   font-size: 1rem;
   font-weight: 300;
   margin-left: 0.5rem;