@sailingrotevista/rotevista-dash 2.0.2 → 2.0.4

package/app.js

@@ -283,39 +283,96 @@ function drawGraph(d, id, min, max, isTws, isHercules) {
 }
 
 // ==========================================================================
-// 8. EVENTI E INTERAZIONI (Touch, Focus e Fullscreen)
+// 8. EVENTI E INTERAZIONI (Smart Touch Manager)
 // ==========================================================================
 
-// Blocco globale del menu contestuale per Android/iOS
-window.addEventListener('contextmenu', e => e.preventDefault());
+// Uccide il menu contestuale di Android/iOS
+window.addEventListener('contextmenu', e => e.preventDefault(), true);
 
 function toggleFocusMode(type, element) {
     const container = document.querySelector('.main-container');
     const parentPanel = element.closest('.side-panel');
     const isLeft = parentPanel.classList.contains('left-panel');
+
     isFocusActive = !isFocusActive;
-    if (isFocusActive) { container.classList.add('focus-active'); container.classList.add(isLeft ? 'focus-side-left' : 'focus-side-right'); parentPanel.classList.add('has-focus'); element.classList.add('is-focused'); blockNextClick = true; }
-    else { container.classList.remove('focus-active', 'focus-side-left', 'focus-side-right'); document.querySelectorAll('.side-panel').forEach(p => p.classList.remove('has-focus')); document.querySelectorAll('.data-box').forEach(b => b.classList.remove('is-focused')); }
+
+    if (isFocusActive) {
+        container.classList.add('focus-active');
+        container.classList.add(isLeft ? 'focus-side-left' : 'focus-side-right');
+        parentPanel.classList.add('has-focus');
+        element.classList.add('is-focused');
+    } else {
+        container.classList.remove('focus-active', 'focus-side-left', 'focus-side-right');
+        document.querySelectorAll('.side-panel').forEach(p => p.classList.remove('has-focus'));
+        document.querySelectorAll('.data-box').forEach(b => b.classList.remove('is-focused'));
+    }
 }
 
+// Configurazione Interazioni per i 4 grafici principali
 ['stw', 'sog', 'tws', 'depth'].forEach(type => {
     const el = document.getElementById(type + '-graph').closest('.data-box');
     
-    // Doppio Click -> Hercules Zoom
-    el.addEventListener('dblclick', (e) => { if (isFocusActive) return; e.preventDefault(); graphModes[type] = graphModes[type] === 'standard' ? 'hercules' : 'standard'; localStorage.setItem('mode_' + type, graphModes[type]); el.style.backgroundColor = "rgba(255,255,255,0.15)"; setTimeout(() => el.style.backgroundColor = "", 200); });
-    
-    // Long Press -> Tactical Focus
-    const startPress = () => { if (!isFocusActive) pressTimer = setTimeout(() => toggleFocusMode(type, el), 1000); };
-    const cancelPress = () => { clearTimeout(pressTimer); };
-    el.addEventListener('mousedown', startPress); el.addEventListener('touchstart', startPress, {passive: true});
-    ['mouseup', 'mouseleave', 'touchend', 'touchcancel'].forEach(evt => el.addEventListener(evt, cancelPress));
-    
-    // Click -> Exit Focus o Ghost click filtering
-    el.addEventListener('click', (e) => { if (blockNextClick) { blockNextClick = false; return; } if (isFocusActive && el.classList.contains('is-focused')) toggleFocusMode(type, el); });
+    let lastTapTime = 0;
+    let tapTimeout;
+
+    const handleInteraction = (e) => {
+        // Impedisce al browser di fare qualsiasi cosa (zoom, menu, click fantasma)
+        if (e.cancelable) e.preventDefault();
+
+        const currentTime = new Date().getTime();
+        const tapDelay = currentTime - lastTapTime;
+
+        // --- 1. RILEVAMENTO LONG PRESS ---
+        // Avviamo un timer per la pressione lunga
+        pressTimer = setTimeout(() => {
+            if (!isFocusActive) {
+                toggleFocusMode(type, el);
+                lastTapTime = 0; // Reset per non innescare click singoli al rilascio
+            }
+        }, 800); // 800ms per attivare il Focus
+
+        // --- 2. GESTIONE DOPPIO E SINGOLO TOCCO ---
+        // Se tocchiamo di nuovo entro 300ms è un DOUBLE TAP
+        if (tapDelay < 300 && tapDelay > 0) {
+            clearTimeout(tapTimeout); // Cancella l'azione del singolo tap
+            if (!isFocusActive) {
+                // Toggle Hercules Mode
+                graphModes[type] = graphModes[type] === 'standard' ? 'hercules' : 'standard';
+                localStorage.setItem('mode_' + type, graphModes[type]);
+                el.style.backgroundColor = "rgba(255,255,255,0.15)"; setTimeout(() => el.style.backgroundColor = "", 200);
+            }
+            lastTapTime = 0;
+        } else {
+            // Se è passato più tempo, potrebbe essere un SINGOLO TAP
+            lastTapTime = currentTime;
+            tapTimeout = setTimeout(() => {
+                // Se siamo in focus mode, il singolo tap esce
+                if (isFocusActive && el.classList.contains('is-focused')) {
+                    toggleFocusMode(type, el);
+                }
+            }, 350); // Attesa per vedere se arriva il secondo tap
+        }
+    };
+
+    const stopInteraction = () => {
+        clearTimeout(pressTimer);
+    };
+
+    // Usiamo PointerEvents: funzionano identici per Mouse e Touch
+    el.addEventListener('pointerdown', handleInteraction);
+    el.addEventListener('pointerup', stopInteraction);
+    el.addEventListener('pointerleave', stopInteraction);
 });
 
-// Fullscreen via Hotspot
-if (ui.hotspot) { ui.hotspot.addEventListener('click', () => { const doc = document.documentElement, isF = document.fullscreenElement || document.webkitFullscreenElement; if (!isF) { if (doc.requestFullscreen) doc.requestFullscreen(); else if (doc.webkitRequestFullscreen) doc.webkitRequestFullscreen(); } else { if (document.exitFullscreen) document.exitFullscreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); } }); }
+// Fullscreen via Hotspot (Click Singolo)
+if (ui.hotspot) {
+    ui.hotspot.addEventListener('click', (e) => {
+        e.preventDefault();
+        const doc = document.documentElement, isF = document.fullscreenElement || document.webkitFullscreenElement;
+        if (!isF) { if (doc.requestFullscreen) doc.requestFullscreen(); else if (doc.webkitRequestFullscreen) doc.webkitRequestFullscreen(); }
+        else { if (document.exitFullscreen) document.exitFullscreen(); else if (document.webkitExitFullscreen) document.webkitExitFullscreen(); }
+    });
+}
 
 // ==========================================================================
 // 9. INIZIALIZZAZIONE

package/index.html

@@ -40,13 +40,13 @@
 
             <!-- HEADING MEAN -->
             <div class="data-box">
-                <div class="label-row"><span class="label">HEADING MEAN</span></div>
+                <div class="label-row"><span class="label">HEADING (MEAN)</span></div>
                 <span class="value value-large" id="hdg">000&deg;</span>
             </div>
 
             <!-- COG MEAN -->
             <div class="data-box">
-                <div class="label-row"><span class="label">COG MEAN</span></div>
+                <div class="label-row"><span class="label">COG (MEAN)</span></div>
                 <span class="value value-large" id="cog">000&deg;</span>
             </div>
 
@@ -136,19 +136,19 @@
 
             <!-- TWA MEAN -->
             <div class="data-box">
-                <div class="label-row"><span class="label">TWA MEAN</span></div>
+                <div class="label-row"><span class="label">TWA (MEAN)</span></div>
                 <span class="value value-large" id="twa-avg">---&deg;</span>
             </div>
 
             <!-- AWA MEAN -->
             <div class="data-box">
-                <div class="label-row"><span class="label">AWA MEAN</span></div>
+                <div class="label-row"><span class="label">AWA (MEAN)</span></div>
                 <span class="value value-large" id="awa-avg">---&deg;</span>
             </div>
 
             <!-- TWD MEAN con Bussola -->
             <div class="data-box">
-                <div class="label-row"><span class="label">TWD MEAN</span></div>
+                <div class="label-row"><span class="label">TWD (MEAN)</span></div>
                 <div class="value-with-compass">
                     <svg class="mini-compass" viewBox="0 0 40 40">
                         <circle cx="20" cy="20" r="19" fill="#151515" stroke="#444" stroke-width="1.5"/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sailingrotevista/rotevista-dash",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Public Wind Dashboard with navigation and course aids",
   "main": "index.js",
   "publishConfig": {

package/style.css

@@ -22,7 +22,7 @@ body {
     gap: 8px;
     grid-template-columns: 1.7fr 3fr 1.7fr;
     grid-template-rows: 100%;
-    transition: all 0.4s ease;
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* ==========================================================================
@@ -43,14 +43,22 @@ body {
     container-type: size;
     flex: 1;
     overflow: hidden;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+    touch-action: none;
 }
 
 /* Altezze Desktop */
 .data-box:nth-child(1), .data-box:nth-child(2) { height: 25vh; }
 .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 16.666vh; }
 
+/* Allineamento Speculare Data Box */
+.left-panel .data-box { align-items: flex-start; text-align: left; }
+.right-panel .data-box { align-items: flex-end; text-align: right; }
+
 /* ==========================================================================
-   3. TACTICAL FOCUS MODE (ORIZZONTALE)
+   3. TACTICAL FOCUS MODE (ORIZZONTALE) E INGRANDIMENTI
    ========================================================================== */
 .focus-active { grid-template-columns: 1fr 1fr !important; }
 .focus-active .side-panel:not(.has-focus) { display: none !important; }
@@ -62,17 +70,35 @@ body {
 .focus-active.focus-side-right .side-panel.has-focus { grid-column: 2 !important; }
 
 .focus-active .has-focus .data-box:not(.is-focused) { display: none !important; }
-.focus-active .has-focus .data-box.is-focused { height: 100vh !important; border: none; background: rgba(255, 255, 255, 0.05); }
+.focus-active .has-focus .data-box.is-focused { height: 100vh !important; border: none; background: rgba(255, 255, 255, 0.05); padding: 20px; }
+
+/* Ingrandimenti in Focus Mode */
+.focus-active .is-focused .value { font-size: clamp(4rem, 25cqh, 10rem) !important; margin-top: 15px; }
+.focus-active .is-focused .scale-labels { font-size: 24px !important; min-width: 60px !important; line-height: 1.2; }
+.focus-active .is-focused .label-row .label { font-size: 1.5rem !important; }
+.focus-active .is-focused .label-row .unit { font-size: 1.5rem !important; }
+
+/* Ingrandimento scritta Hercules */
+.focus-active .is-focused.box-hercules .unit::before,
+.focus-active .is-focused.box-hercules .unit::after,
+.focus-active .is-focused.box-hercules .label::before,
+.focus-active .is-focused.box-hercules .label::after {
+    font-size: 14px !important;
+    letter-spacing: 2px;
+}
 
-/* Tipografia e Grafica in Focus */
-.focus-active .is-focused .value { font-size: clamp(3rem, 18cqh, 8rem) !important; margin-top: 10px; }
-.focus-active .is-focused .scale-labels { font-size: 22px !important; min-width: 40px !important; }
 .focus-active .is-focused .sparkline path { stroke-width: 0.8px !important; }
 
 /* ==========================================================================
-   4. TIPOGRAFIA DINAMICA (CQH)
+   4. TIPOGRAFIA DINAMICA E SIMMETRIA
    ========================================================================== */
 .label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; width: 100%; }
+
+/* Simmetria Titoli/Unità */
+.left-panel .label-row { justify-content: space-between; }
+.right-panel .label-row { justify-content: space-between; flex-direction: row; }
+.right-panel .label-row .label:only-child { margin-left: auto; }
+
 .label { color: #666; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; }
 .unit { color: #888; font-size: 0.6rem; font-weight: bold; }
 .value { color: #fff; font-size: clamp(1.2rem, 22cqh, 3rem); font-weight: 600; line-height: 0.9; letter-spacing: -1px; padding-bottom: 5px; }
@@ -107,12 +133,23 @@ body {
 #depth-graph { stroke: #3498db; fill: rgba(52, 152, 219, 0.12); }
 #tws-graph { stroke: #f1c40f; fill: rgba(241, 196, 15, 0.12); }
 
+/* ==========================================================================
+   6. HERCULES MODE (LABEL TOP E SIMMETRIA)
+   ========================================================================== */
 .line-hercules { filter: drop-shadow(0 0 5px #ff0000); stroke-width: 1.8px !important; }
 .box-hercules { background: rgba(255, 0, 0, 0.08) !important; }
-.box-hercules::after { content: "HERCULES"; position: absolute; bottom: 4px; right: 35px; font-size: 7px; color: #ff4444; font-weight: 900; opacity: 0.8; }
+
+/* Simmetria Scritta Hercules */
+.box-hercules .unit::before, .box-hercules .unit::after,
+.box-hercules .label::before, .box-hercules .label::after {
+    font-size: 7px; color: #ff4444; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
+}
+.left-panel .box-hercules .unit::before { content: "HERCULES "; }
+.right-panel .box-hercules .unit::after { content: " HERCULES"; }
+.right-panel .box-hercules .label:only-child::before { content: "HERCULES "; }
 
 /* ==========================================================================
-   6. STATI E ANIMAZIONI
+   7. STATI E ANIMAZIONI
    ========================================================================== */
 #status { position: absolute; top: 5px; right: 15px; font-size: 0.5rem; text-transform: uppercase; z-index: 1000; }
 .online { color: #2ecc71; opacity: 0.5; }
@@ -126,7 +163,7 @@ body {
 #wind-gauge { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
 
 /* ==========================================================================
-   7. RESPONSIVE (PORTRAIT) - FIX DEFINITIVO 2x2 E FOCUS
+   8. RESPONSIVE (PORTRAIT)
    ========================================================================== */
 @media (max-aspect-ratio: 0.9 / 1) {
     .main-container {
@@ -134,29 +171,16 @@ body {
         grid-template-rows: 45vh 55vh !important;
     }
 
-    /* Ordine Standard Portrait: Vento (1), SX (2), DX (3) */
-    .center-panel { grid-row: 1 !important; grid-column: 1 / span 2 !important; }
+    .center-panel { grid-row: 1 !important; grid-column: 1 / span 2 !important; padding: 5px 0; }
     .left-panel { grid-row: 2 !important; grid-column: 1 !important; }
     .right-panel { grid-row: 2 !important; grid-column: 2 !important; }
 
-    /* FOCUS MODE IN VERTICALE: Abbandoniamo la Grid, usiamo Flex per sicurezza */
-    .main-container.focus-active {
-        display: flex !important;
-        flex-direction: column !important;
-    }
-    .focus-active .center-panel {
-        flex: 0 0 45vh !important;
-        width: 100% !important;
-    }
-    .focus-active .side-panel.has-focus {
-        flex: 0 0 55vh !important;
-        width: 100% !important;
-        display: flex !important;
-    }
+    .main-container.focus-active { display: flex !important; flex-direction: column !important; }
+    .focus-active .center-panel { flex: 0 0 45vh !important; width: 100% !important; }
+    .focus-active .side-panel.has-focus { flex: 0 0 55vh !important; width: 100% !important; display: flex !important; }
 
-    /* Calibrazione altezze box per Portrait */
     .data-box:nth-child(1), .data-box:nth-child(2) { height: 13.5vh; }
     .data-box:nth-child(3), .data-box:nth-child(4), .data-box:nth-child(5) { height: 9.3vh; }
-
-    .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); }
+    .value-large { font-size: clamp(1.2rem, 35cqh, 2.5rem); margin: auto 0; }
+    .value.dual-val { font-size: clamp(0.9rem, 30cqh, 1.4rem); }
 }