Feat: Add brightness sliders for grid lines and intersection dots

index.html

@@ -155,6 +155,51 @@
           <div class="board" id="gameBoard"></div>
         </div>
 
+        <!-- Grid Brightness Controls -->
+        <div class="grid-controls">
+          <div class="control-group">
+            <label for="gridLineOpacity">Grid Lines</label>
+            <input
+              type="range"
+              id="gridLineOpacity"
+              min="0.1"
+              max="1"
+              step="0.1"
+              value="0.3"
+            />
+          </div>
+          <div class="control-group">
+            <label for="dotOpacity">Intersections</label>
+            <input
+              type="range"
+              id="dotOpacity"
+              min="0.1"
+              max="1"
+              step="0.1"
+              value="0.4"
+            />
+          </div>
+        </div>
+
+        <script>
+          const gridLineSlider = document.getElementById("gridLineOpacity");
+          const dotOpacitySlider = document.getElementById("dotOpacity");
+
+          gridLineSlider.addEventListener("input", (e) => {
+            document.documentElement.style.setProperty(
+              "--grid-line-opacity",
+              e.target.value
+            );
+          });
+
+          dotOpacitySlider.addEventListener("input", (e) => {
+            document.documentElement.style.setProperty(
+              "--grid-dot-opacity",
+              e.target.value
+            );
+          });
+        </script>
+
         <!-- Multiplayer Panel -->
         <div
           id="multiplayerPanel"