settings popup with grid stuff & make roll popup a bit better

assets/web/app.js

@@ -1,3 +1,7 @@
+const LOCAL_GRID_TYPE = "GRID_DASH_TYPE";
+const LOCAL_GRID_COLOR = "GRID_COLOR";
+const LOCAL_GRID_WIDTH = "GRID_WIDTH";
+
 // init - game view (map)
 var mapScale = 1.0;
 var mapOffsetX = 0.0;
@@ -5,10 +9,10 @@ var mapOffsetY = 0.0;
 var draggedToken = { token: null, offX: 0, offY: 0 };
 var draggedDiv = { div: null, offX: 0, offY: 0 };
 var gridDashType = 1;
-var gridLineWidth = 2;
+var gridLineWidth = 0;
+var gridColor = 'black';
 var gridSize = 200; // Grid size in pixels
-var gridOffset = [0, 0]
-var gridColor = 'red';
+var gridOffset = [0, 0];
 var showGrid = true;
 const LINE_DASH_TYPES = [
     [1.0, 0.0],
@@ -50,6 +54,13 @@ function init() {
     }
     document.body.onmousemove = onMoveableDivDrag;
     document.body.onmouseup = onMoveableDivMouseUp;
+
+    // Load user grid settings from local storage
+    document.getElementById('settings-grid-color').value = gridColor = localStorage.getItem(LOCAL_GRID_COLOR) ?? 'black';
+    let savedGridWidth = parseInt(localStorage.getItem(LOCAL_GRID_WIDTH));
+    let savedGridType = parseInt(localStorage.getItem(LOCAL_GRID_TYPE));
+    document.getElementById('settings-grid-width').value = gridLineWidth = isNaN(savedGridWidth) ? 2 : savedGridWidth;
+    document.getElementById('settings-grid-type').selectedIndex = gridDashType = isNaN(savedGridType) ? 0 : savedGridType;
 }
 
 function updateGrid() {
@@ -58,6 +69,7 @@ function updateGrid() {
     let width = mapBackground.width;
     let height = mapBackground.height;
     let svg = document.getElementById('map-grid');
+    if (gridLineWidth <= 0) { gridLineWidth = 1; }
 
     svg.setAttribute('width', width);
     svg.setAttribute('height', height);
@@ -77,15 +89,18 @@ function updateGridDashType(type) {
     gridDashType = Math.max(0, Math.min(LINE_DASH_TYPES.length - 1, type));
     let svg = document.getElementById('map-grid');
     svg.setAttribute('stroke-dasharray', LINE_DASH_TYPES[gridDashType].map(v => v * gridSize).join(' '))
+    localStorage.setItem(LOCAL_GRID_TYPE, gridDashType);
 }
 function updateGridColor(color) {
     let svg = document.getElementById('map-grid');
     svg.setAttribute('stroke', color);
     gridColor = color;
+    localStorage.setItem(LOCAL_GRID_COLOR, color);
 }
 function updateGridWidth(width) {
     let svg = document.getElementById('map-grid');
     gridLineWidth = width;
+    localStorage.setItem(LOCAL_GRID_WIDTH, width);
     svg.setAttribute('stroke-width', gridLineWidth);
 }
 
@@ -251,18 +266,20 @@ function openRollsPopup(action) {
     holder.innerHTML = ''; // remove all holder children
     holder.action = action;
     if (action.rolls != undefined && Array.isArray(action.rolls)) {
+        let i = 0;
         for (const r of action.rolls) {
             // name (extra)     (dice_amount)d(dice_type) + constant | enabled
             console.log(r);
             let row = document.createElement('div');
-            row.style.display = 'flex';
+            row.className = 'dice-roll-row';
             row.roll = r;
             row.innerHTML = `
             <p style='flex-grow: 1;'>${r.name} ${r.extra != null ? '(' + r.extra + ')' : ''}</p>
-            <p style='margin-right: 8px;'>${r.dice_amount}d${r.dice_type} + ${r.constant}</p>
-            <input type='checkbox' ${r.enabled ? 'checked' : ''} />
+            <label for='dice-roll-row-${i}'>${r.dice_amount}d${r.dice_type} + ${r.constant}</label>
+            <input id='dice-roll-row-${i}' type='checkbox' ${r.enabled ? 'checked' : ''} />
             `;
             holder.appendChild(row);
+            i += 1;
         }
     }
     document.getElementById('dice-roll-title').innerText = action.display_name ?? action.name;

assets/web/index.html

@@ -41,13 +41,14 @@
             </div>
             <div id="dice-roll-popup"
                 style="display:none; justify-content: center; width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 10; top: 0px; left: 0px">
-                <div style="display:flex; width: 50%; justify-content: center; flex-direction: column;">
+                <div style="display:flex; width: auto; justify-content: center; flex-direction: column;">
                     <div
                         style="display: flex; height: fit-content; flex-direction: column; background-color: #ffffd6; color: black; border: black solid 1px; padding: 8px; border-radius: 8px;">
                         <h3 id="dice-roll-title" style="align-self: center;">
                             THIS IS THE ROLL DISPLAY
                         </h3>
-                        <div id="dice-roll-holder" style="display: flex; flex-direction: column;">
+                        <div id="dice-roll-holder"
+                            style="display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px;">
 
                         </div>
                         <div style="display: flex;">
@@ -60,15 +61,12 @@
             </div>
             <div
                 style="position: absolute; top: 10px; right: 10px; color: black; z-index: 5; display: flex; flex-direction: row;">
-                <button style="background-color: #ffffd6;"><b>s</b></button>
+                <button style="background-color: #ffffd6;" onclick="showHideDiv('settings-window')"><b>s</b></button>
                 <button style="background-color: #ffffd6;" onclick="showHideDiv('initiative-tracker')"><b>i</b></button>
             </div>
             <div id="map" style="position:absolute; transform-origin: top left; user-select: none;">
-                <img id="map-background" src="https://rustystriker.dev/molly.jpg" onload="updateGrid()"
-                    onerror="alert('Failed loading map')">
+                <img id="map-background" onload="updateGrid()" onerror="alert('Failed loading map')">
                 <svg id="map-grid" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0px; left: 0px">
-                    <g vector-effect="non-scaling-stroke" id="map-grid-horizontal" />
-                    <g vector-effect="non-scaling-stroke" id="map-grid-vertical" />
                 </svg>
             </div>
         </div>
@@ -101,6 +99,35 @@
             cccc
         </div>
     </div>
+    <div id="settings-window" style="position: absolute; background-color: #ffffd6; color:black; display: none; 
+        flex-direction: column; top: 40px; right: 8px; padding: 8px; border-radius: 8px;">
+        <div style="min-width: 150px; user-select: none; display: flex;"
+            onmousedown="onMoveableDivMouseDown(event, 'settings-window')">
+            <h3 style="flex-grow: 1; margin: 8px 0;">Settings</h3>
+            <!-- it looks bad, for now just click the 'open initiative tracker' button again -->
+            <button onclick="document.getElementById('settings-window').style.display = 'none';"
+                style="height: fit-content; align-self: center; background-color: transparent; font-size: 20px; border: 0;">
+                X
+            </button>
+        </div>
+        <hr style="width: 100%; margin: 0px; align-self: center;" />
+        <div style="display: grid; grid-template-columns: auto auto; gap: 16px; margin-top: 8px;">
+            <div>Grid width</div>
+            <input id="settings-grid-width" type="number" onchange="updateGridWidth(event.target.value)"
+                style="width: 55px;">
+            <div>Grid color</div>
+            <input id="settings-grid-color" type="color" onchange="updateGridColor(event.target.value)">
+            <div>Grid type</div>
+            <select id="settings-grid-type" onchange="updateGridDashType(event.target.selectedIndex)"
+                style="width: 140px;">
+                <option value="0" selected>Solid</option>
+                <option value="1">Cross</option>
+                <option value="2">Hollow cross</option>
+                <option value="3">Large hollow cross</option>
+                <option value="4">Squire</option>
+            </select>
+        </div>
+    </div>
 </body>
 
 </html>

assets/web/style.css

@@ -83,4 +83,13 @@ body {
     cursor: grab;
     width: 200px;
     height: 200px;
+}
+
+.dice-roll-row {
+    display: flex;
+    gap: 16px;
+}
+
+.dice-roll-row p {
+    margin: 0px;
 }