Implement fake full-screen for board control. Requires testing #28

web/js/sections/board-control.js

@@ -14,6 +14,7 @@ let currentBg = localStorage.getItem('wiji_bg') || 'default';
 let steps1 = 0;
 let steps2 = 0;
 let isManualPickMode = false;
+let isFullscreen = false;
 
 function syncStateFromStorage() {
   isHomed = localStorage.getItem('wiji_homed') === 'true';
@@ -76,6 +77,32 @@ function buildHTML() {
         z-index: 10;
         pointer-events: none;
       }
+      .fullscreen-card {
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100vw !important;
+        height: 100vh !important;
+        z-index: 9999 !important;
+        border-radius: 0 !important;
+        margin: 0 !important;
+        background: #111 !important;
+        display: flex;
+        flex-direction: column;
+      }
+      .fullscreen-card #map-container {
+        max-width: none !important;
+        height: 100% !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .fullscreen-card #bg-image {
+        max-height: 100%;
+        width: auto !important;
+        max-width: 100%;
+        object-fit: contain;
+      }
     </style>
 
     <div class="section-page fade-in" style="display:flex; flex-direction:column; height: 100%;">
@@ -86,12 +113,17 @@ function buildHTML() {
 
       <div class="board-grid">
         <!-- ── Map Area ─────────────────────────────────────── -->
-        <div class="card" style="display:flex; flex-direction:column; padding: 12px; position:relative;">
+        <div id="map-card" class="card" style="display:flex; flex-direction:column; padding: 12px; position:relative;">
           <div class="card-header" style="display:flex; justify-content:space-between; align-items:center;">
             <span class="card-title">Interactive Map</span>
-            <button id="btn-manual-pick" class="btn btn-secondary" style="padding: 4px 8px; font-size: 0.8rem; display:flex; align-items:center; gap:4px; border-radius: var(--radius-sm);">
+            <div style="display: flex; gap: 8px;">
-              <span style="font-size: 1.1rem;">⌖</span> Manual Pick
+              <button id="btn-manual-pick" class="btn btn-secondary" style="padding: 4px 8px; font-size: 0.8rem; display:flex; align-items:center; gap:4px; border-radius: var(--radius-sm);">
-            </button>
+                <span style="font-size: 1.1rem;">⌖</span> Manual Pick
+              </button>
+              <button id="btn-fullscreen" class="btn btn-secondary" style="padding: 4px 8px; font-size: 0.8rem; display:flex; align-items:center; gap:4px; border-radius: var(--radius-sm);">
+                <span id="fullscreen-icon" style="font-size: 1.1rem;">⛶</span> <span id="fullscreen-text">Full Screen</span>
+              </button>
+            </div>
           </div>
           
           <div style="flex:1; display:flex; align-items:flex-start; justify-content:center; overflow:hidden;">
@@ -489,6 +521,27 @@ export default {
       });
     }
 
+    // ── Full Screen Mode ──────────────────────────────────────
+    const btnFullscreen = document.getElementById('btn-fullscreen');
+    const mapCard = document.getElementById('map-card');
+    const fullscreenIcon = document.getElementById('fullscreen-icon');
+    const fullscreenText = document.getElementById('fullscreen-text');
+
+    if (btnFullscreen && mapCard) {
+      btnFullscreen.addEventListener('click', () => {
+        isFullscreen = !isFullscreen;
+        if (isFullscreen) {
+          mapCard.classList.add('fullscreen-card');
+          fullscreenIcon.textContent = '✖';
+          fullscreenText.textContent = 'Exit';
+        } else {
+          mapCard.classList.remove('fullscreen-card');
+          fullscreenIcon.textContent = '⛶';
+          fullscreenText.textContent = 'Full Screen';
+        }
+      });
+    }
+
     // ── Sync Steps from BLE ───────────────────────────────────
     const onBLEStatus = (e) => {
       const msg = e.detail;