Clean up styling and function of zoom buttons

index.html

@@ -220,12 +220,11 @@
         </div>
     </div>
 	
-	<div id="zoom-buttons">
-		<button id="zoom-in">+</button>
-		<button id="zoom-out">-</button>
-	</div>
-	
     <div id="stats" class="orange">
+        <div id="navigationControls">
+            <button id="navZoomIn" class="panel orange">+</button>
+            <button id="navZoomOut" class="panel orange">-</button>
+        </div>
         <div id="zoomLevelDisplay"></div>
         Map v0.5 alpha
         <br>
@@ -269,7 +268,7 @@
                     <a href="https://derailvalley.wiki.gg/wiki/Derail_Valley_Wiki">DV Wiki</a>
                 </div>
             </div>
-            <div id="legendButton" class="panel orange"><svg style="transform:rotate(180deg) translateY(0px)" viewBox="0 0 32 32"><path fill="currentColor" d="M31 16 20 31l-16 0L15 16 4 1l16 0Z"/></svg></div>
+            <button id="legendButton" class="panel orange"><svg style="transform:rotate(180deg) translateY(0px)" viewBox="0 0 32 32"><path fill="currentColor" d="M31 16 20 31l-16 0L15 16 4 1l16 0Z"/></svg></button>
         </div>
     </div>
   </body>

index.js

@@ -11,7 +11,8 @@ const bezierGradeResolution = 80;
 const bezierLengthResolution = 80;
 const bezierCurvatureResolution = 80;
 const padding = 500;
-const zoomFactor = 1.5;
+const scrollZoomFactor = 1.25;
+const buttonZoomFactor = 1.5;
 const trackWidth = {
     base: 110,
     min: 3,
@@ -91,7 +92,7 @@ let MapMatrix = {};
 document.addEventListener('DOMContentLoaded', async () => {
     await loadTrackData('trackdata_dv.json');
     await loadPoiData('poi_dv.json');
-    mapScrollSetup();
+    mapNavigationSetup();
 });
 
 async function loadTrackData(file){
@@ -129,7 +130,7 @@ async function loadPoiData(file){
 }
 
 /** Handling for the map scrolling and zooming */
-function mapScrollSetup(){
+function mapNavigationSetup(){
     const touchCache = [];
     let touchCount = 0;
     let pinchDistance = null;
@@ -160,7 +161,6 @@ function mapScrollSetup(){
         }else if(touchCount == 2){
             getTouchAverage();
             zoomAtPosition(touchCenter_x, touchCenter_y, (previousScale * getTouchDistance()/pinchDistance)/mapNav.scale);
-			
         }
         touchCache[e.pointerId].x = e.clientX;
         touchCache[e.pointerId].y = e.clientY;
@@ -174,7 +174,19 @@ function mapScrollSetup(){
         }
     }
     const scrollHandler = e => {
-        if(e.deltaY != 0) zoomAtPosition(e.clientX, e.clientY, e.deltaY > 0 ? 1/zoomFactor : zoomFactor);
+        if(e.deltaY != 0) zoomAtPosition(e.clientX, e.clientY, e.deltaY > 0 ? 1/scrollZoomFactor : scrollZoomFactor);
+    }
+    const navButtonInput = navType => {
+        const centerX = map_container.offsetWidth / 2;
+        const centerY = map_container.offsetHeight / 2;
+        switch(navType){
+            case 'zoomIn':
+                zoomAtPosition(centerX, centerY, buttonZoomFactor);
+                break;
+            case 'zoomOut':
+                zoomAtPosition(centerX, centerY, 1/buttonZoomFactor);
+                break;
+        }
     }
     const navUpdate = ts => {
         if(ts){
@@ -230,28 +242,14 @@ function mapScrollSetup(){
         mapNav.scale *= scaleFactor;
     }
 	
-	window.zoomAtPosition = zoomAtPosition;
-	
     map_container.addEventListener('pointerdown', touchDownHandler);
     map_container.addEventListener('wheel', scrollHandler);
+
+    document.getElementById('navZoomIn').addEventListener('click', e => {navButtonInput('zoomIn');});
+    document.getElementById('navZoomOut').addEventListener('click', e => {navButtonInput('zoomOut');});
     navUpdate();
 }
 
-document.getElementById('zoom-in').addEventListener('click', () => {
-    const centerX = map_container.offsetWidth / 2;
-    const centerY = map_container.offsetHeight / 2;
-    zoomAtPosition(centerX, centerY, zoomFactor); // Use zoomFactor from config.js
-    updateMapview();
-});
-
-document.getElementById('zoom-out').addEventListener('click', () => {
-    const centerX = map_container.offsetWidth / 2;
-    const centerY = map_container.offsetHeight / 2;
-    zoomAtPosition(centerX, centerY, 1 / zoomFactor); // Use zoomFactor from config.js
-    updateMapview();
-});
-
-
 /** Readjust map view to focus on position */
 function updateMapview(){
     if(mapNav == null) return;
@@ -280,8 +278,6 @@ function updateMapview(){
     }
 }
 
-
-
 function forceRedraw(){
     redrawTriggerElement.style.backgroundColor = Color.random().hex;
 }

style.css

@@ -66,8 +66,6 @@ a:visited{
 }
 
 #legendButton{
-    cursor: pointer;
-    user-select: none;
     padding: 8px;
     height: var(--legendButtonSize);
     width: var(--legendButtonSize);
@@ -116,6 +114,7 @@ a:visited{
 }
 
 #stats{
+    pointer-events: none;
     position: fixed;
     width: fit-content;
     right: 10px;
@@ -166,27 +165,21 @@ a:visited{
     font-variation-settings: "wght" 700;
 }
 
-#zoom-buttons {
+button{
-    position: absolute;
+    cursor: pointer;
-    bottom: 80px; /* Position 10px from the bottom */
+    user-select: none;
-    right: 10px;  /* Position 10px from the right */
+}
-    z-index: 1000; /* Ensure it's above the map */
+
+#navigationControls {
+    margin-left: auto;
+    width: fit-content;
     display: flex;
     flex-direction: column;
     gap: 5px;
-}
+    >*{
-
+        font-size: 24px;
-#zoom-buttons button {
-    background-color: #ffffff;
-    border: 1px solid #cccccc;
-    border-radius: 5px;
-    padding: 10px 35px;
-    font-size: 40px;
         font-weight: bold;
-    cursor: pointer;
+        width: var(--legendButtonSize);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        height: var(--legendButtonSize);
-}
+    }
-
-#zoom-buttons button:hover {
-    background-color: #f0f0f0;
 }