added settings menu that saves and reads to/from the browser localStorage

minor design changes
2025-06-04 17:28:48 -07:00
parent d5dd306d74
commit 03b1b8fdf6
6 changed files with 448 additions and 6 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -9,13 +9,29 @@
 <body>
  <header class="header">
    <div class="logo">
-      <img src="logo.png" alt="Logo" /> <!-- put it in public -->
+      <img src="logo.png" alt="Logo" />
      <span>Cuberoo</span>
    </div>
+    <!-- Sidebar toggle for mobile -->
+    <button id="sidebarToggle" style="display:none;margin-left:16px;font-size:1.6em;background:none;border:none;color:#d103f9;z-index:1100;">☰</button>
  </header>
  <div class="container">
    <!-- wrapper for the draggable map class -->
    <div id="mapWrapper" class="map-wrapper">
+      <!-- Settings button in top right -->
+      <button id="settingsBtn" class="settings-btn" title="Settings">
+        <span></span>
+      </button>
+      <!-- Settings menu (hidden by default) -->
+      <div id="settingsMenu" class="settings-menu" style="display:none;">
+        <div class="settings-menu-content">
+          <!-- Square Style toggle -->
+          <div style="margin-bottom:18px;">
+            <label for="squareStyleToggle" style="color:white;vertical-align:middle;">Highlight by</label>
+            <button id="squareStyleToggle" type="button" style="margin-left:10px;vertical-align:middle;"></button>
+          </div>
+        </div>
+      </div>
      <!-- class for the squares -->
      <div id="map" class="map"></div>
      <!-- zoom controls -->
@@ -84,6 +100,81 @@
      });
    }
    loadCategories();
+
+    // Settings button/menu logic
+    const settingsBtn = document.getElementById('settingsBtn');
+    const settingsMenu = document.getElementById('settingsMenu');
+
+    settingsBtn.addEventListener('click', () => {
+      settingsMenu.style.display = 'block';
+    });
+    // Optional: click outside menu closes it
+    document.addEventListener('mousedown', (e) => {
+      if (settingsMenu.style.display === 'block' &&
+          !settingsMenu.contains(e.target) &&
+          e.target !== settingsBtn) {
+        settingsMenu.style.display = 'none';
+      }
+    });
+
+    // Filled/Outline setting logic (toggle)
+    function applySquareStyle(style) {
+      document.body.setAttribute('data-square-style', style);
+      const btn = document.getElementById('squareStyleToggle');
+      if (btn) {
+        btn.textContent = style === 'filled' ? 'filling' : 'outlining';
+        btn.className = style === 'filled' ? 'toggle-filled' : 'toggle-outline';
+      }
+    }
+    function saveSquareStyle(style) {
+      localStorage.setItem('squareStyle', style);
+    }
+    function loadSquareStyle() {
+      return localStorage.getItem('squareStyle') || 'filled';
+    }
+
+    function setupSquareStyleSetting() {
+      const toggleBtn = document.getElementById('squareStyleToggle');
+      if (!toggleBtn) return;
+      let style = loadSquareStyle();
+      applySquareStyle(style);
+      toggleBtn.addEventListener('click', () => {
+        style = (style === 'filled') ? 'outline' : 'filled';
+        applySquareStyle(style);
+        saveSquareStyle(style);
+      });
+    }
+
+    document.addEventListener('DOMContentLoaded', setupSquareStyleSetting);
+    if (document.getElementById('squareStyleToggle')) setupSquareStyleSetting();
+
+    // Sidebar toggle for mobile
+    function setupSidebarToggle() {
+      const sidebar = document.getElementById('sidebar');
+      const toggleBtn = document.getElementById('sidebarToggle');
+      function updateSidebarDisplay() {
+        if (window.innerWidth <= 900) {
+          toggleBtn.style.display = '';
+          sidebar.classList.remove('open');
+        } else {
+          toggleBtn.style.display = 'none';
+          sidebar.classList.remove('open');
+        }
+      }
+      toggleBtn.addEventListener('click', () => {
+        sidebar.classList.toggle('open');
+      });
+      // Close sidebar when clicking outside on mobile
+      document.addEventListener('mousedown', (e) => {
+        if (window.innerWidth > 900) return;
+        if (sidebar.classList.contains('open') && !sidebar.contains(e.target) && e.target !== toggleBtn) {
+          sidebar.classList.remove('open');
+        }
+      });
+      window.addEventListener('resize', updateSidebarDisplay);
+      updateSidebarDisplay();
+    }
+    document.addEventListener('DOMContentLoaded', setupSidebarToggle);
  </script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="script.js"></script>