@sailingrotevista/rotevista-dash 8.0.1 → 8.0.2

package/src/App.tsx

@@ -1,346 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDashboard } from './hooks/useDashboard';
-import { DataBox } from './components/DataBox';
-import { Sparkline } from './components/Sparkline';
-import { AnalogGauge } from './components/AnalogGauge';
-import { WeatherRadar } from './components/WeatherRadar';
-import { MiniCompass } from './components/MiniCompass';
-import { BoxType } from './types';
-
-export const App: React.FC = () => {
-  const {
-    config,
-    displayModeSog,
-    setDisplayModeSog,
-    displayModeTws,
-    setDisplayModeTws,
-    activeInstrument,
-    setActiveInstrument,
-    isNightMode,
-    setIsNightMode,
-    isFocusActive,
-    focusedBox,
-    graphModes,
-    connectionStatus,
-    displayValues,
-    histories,
-    windRadarSlots,
-    futureForecast,
-    toggleFocusMode,
-    toggleGraphMode,
-  } = useDashboard();
-
-  // Fullscreen toggle on center hotspot tap
-  const handleToggleFullscreen = useCallback(() => {
-    if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen().catch(() => {});
-    } else {
-      document.exitFullscreen().catch(() => {});
-    }
-  }, []);
-
-  // Night Mode toggle on 1s press of center hotspot
-  const handleToggleNightMode = useCallback(() => {
-    setIsNightMode(prev => {
-      const next = !prev;
-      try {
-        const saved = localStorage.getItem('rotevista_dash_state');
-        const state = saved ? JSON.parse(saved) : {};
-        state.isNightMode = next;
-        localStorage.setItem('rotevista_dash_state', JSON.stringify(state));
-      } catch (e) {}
-      return next;
-    });
-  }, [setIsNightMode]);
-
-  // Handle Box TWD Long Press -> Switch to Weather Radar
-  const handleTwdLongPress = useCallback(() => {
-    setActiveInstrument('radar');
-  }, [setActiveInstrument]);
-
-  // Handle Box TWD Single Tap in Radar Mode -> Switch back to Gauge
-  const handleTwdSingleTap = useCallback(() => {
-    if (activeInstrument === 'radar') {
-      setActiveInstrument('gauge');
-    }
-  }, [activeInstrument, setActiveInstrument]);
-
-  const isLeftFocused = focusedBox && ['stw', 'sog', 'hdg', 'cog', 'tack'].includes(focusedBox);
-  const containerClasses = [
-    'main-container',
-    isFocusActive ? 'focus-active' : '',
-    isFocusActive && isLeftFocused ? 'focus-side-left' : '',
-    isFocusActive && !isLeftFocused ? 'focus-side-right' : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <div className={containerClasses}>
-      {/* ================= COLONNA SINISTRA ================= */}
-      {/* 1. STW */}
-      <DataBox
-        type="stw"
-        label="STW"
-        unit="kts"
-        value={displayValues.stw}
-        isFocused={focusedBox === 'stw'}
-        isHercules={graphModes.stw === 'hercules'}
-        onLongPress={() => toggleFocusMode('stw')}
-        onDoubleTap={() => toggleGraphMode('stw')}
-      >
-        <div className="graph-wrapper">
-          <Sparkline
-            id="stw-graph"
-            type="stw"
-            data={histories.stw}
-            config={config}
-            mode={graphModes.stw}
-            isNavigating={displayValues.isNavigating}
-            displayMode="STW"
-            isFocused={focusedBox === 'stw'}
-          />
-        </div>
-      </DataBox>
-
-      {/* 2. SOG / VMG */}
-      <DataBox
-        type="sog"
-        label={displayModeSog}
-        unit="kts"
-        value={displayValues.sog}
-        valueColor={displayValues.sogColor}
-        isFocused={focusedBox === 'sog'}
-        isHercules={graphModes.sog === 'hercules'}
-        onLongPress={() => toggleFocusMode('sog')}
-        onDoubleTap={() => toggleGraphMode('sog')}
-        onSingleTap={() => {
-          if (!isFocusActive) {
-            setDisplayModeSog(prev => (prev === 'SOG' ? 'VMG' : 'SOG'));
-          } else {
-            toggleFocusMode('sog');
-          }
-        }}
-      >
-        <div className="graph-wrapper">
-          <Sparkline
-            id="sog-graph"
-            type="sog"
-            data={displayModeSog === 'VMG' ? histories.vmg : histories.sog}
-            config={config}
-            mode={graphModes.sog}
-            isNavigating={displayValues.isNavigating}
-            displayMode={displayModeSog}
-            isFocused={focusedBox === 'sog'}
-          />
-        </div>
-      </DataBox>
-
-      {/* 3. HEADING (MEAN) */}
-      <DataBox
-        type="hdg"
-        label="HEADING (MEAN)"
-        value={displayValues.hdg}
-        isLargeValue
-        unstable={displayValues.hdgUnstable}
-        isFocused={focusedBox === 'hdg'}
-        onLongPress={() => toggleFocusMode('hdg')}
-        onSingleTap={() => {
-          if (isFocusActive) toggleFocusMode('hdg');
-        }}
-      />
-
-      {/* 4. COG (MEAN) */}
-      <DataBox
-        type="cog"
-        label="COG (MEAN)"
-        value={displayValues.cog}
-        isLargeValue
-        unstable={displayValues.cogUnstable}
-        isFocused={focusedBox === 'cog'}
-        onLongPress={() => toggleFocusMode('cog')}
-        onSingleTap={() => {
-          if (isFocusActive) toggleFocusMode('cog');
-        }}
-      />
-
-      {/* 5. TACK / GYBE OPPOSITE COURSE */}
-      <DataBox
-        type="tack"
-        label={displayValues.tackLabel}
-        isFocused={focusedBox === 'tack'}
-        onLongPress={() => toggleFocusMode('tack')}
-        onSingleTap={() => {
-          if (isFocusActive) toggleFocusMode('tack');
-        }}
-      >
-        <div className="dual-value-container">
-          <div className="dual-value-col tack-hdg-col">
-            <span className="dual-label">HDG</span>
-            <span
-              className={`value dual-val ${displayValues.tackHdgUnstable ? 'unstable-data' : ''}`}
-              id="tack-hdg"
-            >
-              {displayValues.tackHdg}
-            </span>
-          </div>
-          <div className="dual-value-col tack-cog-col">
-            <span className="dual-label">COG</span>
-            <span
-              className={`value dual-val ${displayValues.tackCogUnstable ? 'unstable-data' : ''}`}
-              id="tack-cog"
-            >
-              {displayValues.tackCog}
-            </span>
-          </div>
-        </div>
-      </DataBox>
-
-      {/* ================= BUSSOLA CENTRALE ================= */}
-      <div className="box-gauge">
-        {/* STATO CONNESSIONE */}
-        <div id="status" className={connectionStatus.className}>
-          {connectionStatus.text}
-        </div>
-
-        {activeInstrument === 'gauge' ? (
-          <AnalogGauge
-            awsVal={parseFloat(displayValues.awsSvg) || 0}
-            awaDeg={displayValues.awaPointerDeg}
-            twaDeg={displayValues.twaPointerDeg}
-            leewayDeg={displayValues.leewayDeg}
-            trackDeg={displayValues.trackRotDeg}
-            tacticCwDot={displayValues.tacticCwDot}
-            tacticCcwDot={displayValues.tacticCcwDot}
-            onCenterHotspotLongPress={handleToggleNightMode}
-            onCenterHotspotClick={handleToggleFullscreen}
-          />
-        ) : (
-          <WeatherRadar
-            twdHistory={histories.twd}
-            twsHistory={histories.tws}
-            windRadarSlots={windRadarSlots}
-            futureForecast={futureForecast}
-            headingTrueDeg={displayValues.boatCompassRotDeg}
-            config={config}
-            meteoLed={displayValues.meteoLed}
-            onSwitchToGauge={() => setActiveInstrument('gauge')}
-          />
-        )}
-      </div>
-
-      {/* ================= COLONNA DESTRA ================= */}
-      {/* 6. DEPTH */}
-      <DataBox
-        type="depth"
-        label="DEPTH"
-        unit="m"
-        value={displayValues.depth}
-        alarmClass={displayValues.depthAlarmClass}
-        isFocused={focusedBox === 'depth'}
-        isHercules={graphModes.depth === 'hercules'}
-        onLongPress={() => toggleFocusMode('depth')}
-        onDoubleTap={() => toggleGraphMode('depth')}
-      >
-        <div className="graph-wrapper">
-          <Sparkline
-            id="depth-graph"
-            type="depth"
-            data={histories.depth}
-            config={config}
-            mode={graphModes.depth}
-            isNavigating={displayValues.isNavigating}
-            displayMode="DEPTH"
-            isFocused={focusedBox === 'depth'}
-          />
-        </div>
-      </DataBox>
-
-      {/* 7. TWS / AWS */}
-      <DataBox
-        type="tws"
-        label={displayModeTws}
-        unit="kts"
-        value={displayValues.tws}
-        valueColor={displayValues.twsColor}
-        isFocused={focusedBox === 'tws'}
-        isHercules={graphModes.tws === 'hercules'}
-        onLongPress={() => toggleFocusMode('tws')}
-        onDoubleTap={() => toggleGraphMode('tws')}
-        onSingleTap={() => {
-          if (!isFocusActive) {
-            setDisplayModeTws(prev => (prev === 'TWS' ? 'AWS' : 'TWS'));
-          } else {
-            toggleFocusMode('tws');
-          }
-        }}
-      >
-        <div className="graph-wrapper">
-          <Sparkline
-            id="tws-graph"
-            type="tws"
-            data={displayModeTws === 'AWS' ? histories.aws : histories.tws}
-            config={config}
-            mode={graphModes.tws}
-            isNavigating={displayValues.isNavigating}
-            displayMode={displayModeTws}
-            isFocused={focusedBox === 'tws'}
-          />
-        </div>
-      </DataBox>
-
-      {/* 8. TWA (MEAN) */}
-      <DataBox
-        type="twa"
-        label="TWA (MEAN)"
-        value={displayValues.twaAvg}
-        isLargeValue
-        unstable={displayValues.twaUnstable}
-        isFocused={focusedBox === 'twa'}
-        onLongPress={() => toggleFocusMode('twa')}
-        onSingleTap={() => {
-          if (isFocusActive) toggleFocusMode('twa');
-        }}
-      />
-
-      {/* 9. AWA (MEAN) */}
-      <DataBox
-        type="awa"
-        label="AWA (MEAN)"
-        value={displayValues.awaAvg}
-        isLargeValue
-        unstable={displayValues.awaUnstable}
-        isFocused={focusedBox === 'awa'}
-        onLongPress={() => toggleFocusMode('awa')}
-        onSingleTap={() => {
-          if (isFocusActive) toggleFocusMode('awa');
-        }}
-      />
-
-      {/* 10. TWD (MEAN) WITH MINI COMPASS */}
-      <DataBox
-        type="twd"
-        label="TWD (MEAN)"
-        isFocused={focusedBox === 'twd'}
-        onLongPress={handleTwdLongPress}
-        onSingleTap={handleTwdSingleTap}
-      >
-        <div className="value-with-compass">
-          <MiniCompass
-            boatRotDeg={displayValues.boatCompassRotDeg}
-            windRotDeg={displayValues.windCompassRotDeg}
-            compassCwDot={displayValues.compassCwDot}
-            compassCcwDot={displayValues.compassCcwDot}
-          />
-          <span
-            className={`value-large ${displayValues.twdUnstable ? 'unstable-data' : ''}`}
-            id="twd-avg"
-          >
-            {displayValues.twdAvg}
-          </span>
-        </div>
-      </DataBox>
-    </div>
-  );
-};
-export default App;

package/src/components/AnalogGauge.tsx

@@ -1,243 +0,0 @@
-import React, { useMemo, useEffect, useRef } from 'react';
-
-interface AnalogGaugeProps {
-  awsVal: number;
-  awaDeg: number;
-  twaDeg: number;
-  leewayDeg: number;
-  trackDeg: number;
-  tacticCwDot: { active: boolean; color: string; gybing?: boolean };
-  tacticCcwDot: { active: boolean; color: string; gybing?: boolean };
-  onCenterHotspotLongPress: () => void;
-  onCenterHotspotClick: () => void;
-}
-
-export const AnalogGauge: React.FC<AnalogGaugeProps> = ({
-  awsVal,
-  awaDeg,
-  twaDeg,
-  leewayDeg,
-  trackDeg,
-  tacticCwDot,
-  tacticCcwDot,
-  onCenterHotspotLongPress,
-  onCenterHotspotClick,
-}) => {
-  const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const isLongPressRef = useRef(false);
-
-  // Generate compass ticks
-  const ticks = useMemo(() => {
-    const list: React.ReactNode[] = [];
-    for (let i = 0; i < 360; i += 10) {
-      const isMajor = i % 30 === 0;
-      list.push(
-        <line
-          key={`tick-${i}`}
-          x1="200"
-          y1="40"
-          x2="200"
-          y2={isMajor ? 60 : 50}
-          stroke={isMajor ? '#000' : '#bbb'}
-          strokeWidth={isMajor ? 2 : 1}
-          transform={`rotate(${i}, 200, 200)`}
-        />
-      );
-    }
-    return list;
-  }, []);
-
-  const clampedLeeway = Math.max(-20, Math.min(20, leewayDeg));
-  const c = 125;
-  const px = 125 / 20;
-  const leewayWidth = Math.min(Math.abs(clampedLeeway) * px, 125);
-  const leewayX = clampedLeeway >= 0 ? c : c - leewayWidth;
-
-  const handlePointerDown = () => {
-    isLongPressRef.current = false;
-    pressTimerRef.current = setTimeout(() => {
-      isLongPressRef.current = true;
-      onCenterHotspotLongPress();
-    }, 1000);
-  };
-
-  const handlePointerUp = () => {
-    if (pressTimerRef.current) {
-      clearTimeout(pressTimerRef.current);
-      pressTimerRef.current = null;
-    }
-    if (!isLongPressRef.current) {
-      onCenterHotspotClick();
-    }
-    isLongPressRef.current = false;
-  };
-
-  const handlePointerLeave = () => {
-    if (pressTimerRef.current) {
-      clearTimeout(pressTimerRef.current);
-      pressTimerRef.current = null;
-    }
-    isLongPressRef.current = false;
-  };
-
-  return (
-    <svg id="wind-gauge" viewBox="35 38 330 395" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <clipPath id="boat-clip">
-          <circle cx="200" cy="200" r="50" />
-        </clipPath>
-        <linearGradient id="axiom-grad" x1="0%" y1="0%" x2="0%" y2="100%">
-          <stop offset="0%" stopColor="#ffffff" stopOpacity={1} />
-          <stop offset="100%" stopColor="#888888" stopOpacity={1} />
-        </linearGradient>
-        <linearGradient id="leeway-grad" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="0%" stopColor="#ff0000" stopOpacity={1} />
-          <stop offset="25%" stopColor="#ff8800" stopOpacity={1} />
-          <stop offset="50%" stopColor="#00ff00" stopOpacity={1} />
-          <stop offset="75%" stopColor="#ff8800" stopOpacity={1} />
-          <stop offset="100%" stopColor="#ff0000" stopOpacity={1} />
-        </linearGradient>
-        <linearGradient id="leeway-night-grad" x1="0%" y1="0%" x2="100%" y2="0%">
-          <stop offset="0%" stopColor="#ff0000" stopOpacity={1} />
-          <stop offset="50%" stopColor="#330000" stopOpacity={1} />
-          <stop offset="100%" stopColor="#ff0000" stopOpacity={1} />
-        </linearGradient>
-        <clipPath id="leeway-clip">
-          <rect id="leeway-mask-rect" x={leewayX} y="0" width={leewayWidth} height="12" rx="2" />
-        </clipPath>
-        <filter id="center-glow" x="-20%" y="-20%" width="140%" height="140%">
-          <feDropShadow dx="0" dy="0" stdDeviation="8" floodColor="#aaaaaa" floodOpacity={0.5} />
-        </filter>
-      </defs>
-
-      {/* Dials */}
-      <circle cx="200" cy="200" r="160" fill="#050505" />
-      <circle cx="200" cy="200" r="125" fill="#121212" />
-
-      {/* Beating & Running Arcs */}
-      <path d="M 82.0 101.0 A 154 154 0 0 1 142.3 57.2" fill="none" stroke="#ff0000" strokeWidth="12" />
-      <path d="M 257.7 57.2 A 154 154 0 0 1 318.0 101.0" fill="none" stroke="#00ff00" strokeWidth="12" />
-      <path d="M 265.1 339.6 A 154 154 0 0 1 134.9 339.6" fill="none" stroke="#ff8800" strokeWidth="12" />
-
-      {/* Ticks */}
-      <g id="ticks">{ticks}</g>
-
-      {/* Tick Labels */}
-      <g id="tick-labels" fill="#bbb" textAnchor="middle" dominantBaseline="middle" fontFamily="Arial" fontWeight="bold">
-        <text fontSize="16" transform="translate(200, 74)">0</text>
-        <text fontSize="16" transform="translate(326, 200) rotate(90)">90</text>
-        <text fontSize="16" transform="translate(74, 200) rotate(-90)">90</text>
-        <text fontSize="16" transform="translate(200, 326) rotate(180)">180</text>
-        <text fontSize="11" transform="translate(262.5, 91.7) rotate(30)">30</text>
-        <text fontSize="11" transform="translate(308.3, 137.5) rotate(60)">60</text>
-        <text fontSize="11" transform="translate(308.3, 262.5) rotate(120)">120</text>
-        <text fontSize="11" transform="translate(262.5, 308.3) rotate(150)">150</text>
-        <text fontSize="11" transform="translate(137.5, 91.7) rotate(-30)">30</text>
-        <text fontSize="11" transform="translate(91.7, 137.5) rotate(-60)">60</text>
-        <text fontSize="11" transform="translate(91.7, 262.5) rotate(-120)">120</text>
-        <text fontSize="11" transform="translate(137.5, 308.3) rotate(-150)">150</text>
-      </g>
-
-      {/* Track / Leeway Drift Pointer */}
-      <g id="track-pointer" transform={`rotate(${trackDeg}, 200, 200)`}>
-        <path d="M200,42 L194,58 L206,58 Z" fill="#007aff" stroke="#fff" strokeWidth="0.5" />
-      </g>
-
-      {/* Center Interactive Hotspot */}
-      <circle
-        id="fullscreen-hotspot"
-        cx="200"
-        cy="200"
-        r="55"
-        fill="#181818"
-        stroke="#333"
-        strokeWidth="1"
-        filter="url(#center-glow)"
-        cursor="pointer"
-        onPointerDown={handlePointerDown}
-        onPointerUp={handlePointerUp}
-        onPointerLeave={handlePointerLeave}
-      />
-
-      {/* Boat Silhouette */}
-      <path
-        id="boat-icon"
-        d="M200,150 Q165,185 170,250 Q165,190 200,173 Q235,190 230,250 Q235,185 200,150 Z"
-        fill="url(#axiom-grad)"
-        transform="translate(0, 5)"
-        clipPath="url(#boat-clip)"
-        style={{ pointerEvents: 'none' }}
-      />
-
-      {/* AWS Center Display */}
-      <g id="aws-display-group" transform="translate(200, 265)">
-        <text x="0" y="0" fill="#777" fontSize="10" fontWeight="bold" textAnchor="middle" style={{ textTransform: 'uppercase' }}>
-          Apparent Wind kts
-        </text>
-        <text id="aws-val-svg" x="0" y="42" fill="#fff" fontSize="52" fontWeight="bold" textAnchor="middle">
-          {awsVal.toFixed(1)}
-        </text>
-      </g>
-
-      {/* AWA Pointer (Orange with 'A') */}
-      <g id="awa-pointer" transform={`rotate(${awaDeg}, 200, 200)`} opacity={0.9}>
-        <path d="M 200,70 L 213,95 L 200,145 L 187,95 Z" fill="#ff8c00" stroke="#000" strokeWidth="1" />
-        <text x="200" y="90" fill="#000" fontSize="10" fontWeight="900" textAnchor="middle" fontFamily="Arial Black">
-          A
-        </text>
-      </g>
-
-      {/* TWA Pointer (Yellow with 'T') and Tactical Trend Dots */}
-      <g id="twa-pointer" transform={`rotate(${twaDeg}, 200, 200)`} opacity={0.9}>
-        <path
-          d="M 200,92 A 8,8 0 0 1 208,100 C 208,108 200,128 200,128 C 200,128 192,108 192,100 A 8,8 0 0 1 200,92 Z"
-          fill="#ffff00"
-          stroke="#000"
-          strokeWidth="0.8"
-        />
-        <text x="200" y="106" fill="#000" fontSize="9" fontWeight="900" textAnchor="middle" fontFamily="Arial Black">
-          T
-        </text>
-        <circle
-          id="trend-gauge-cw"
-          cx="215"
-          cy="110"
-          r="4"
-          fill={tacticCwDot.color}
-          className={`${tacticCwDot.active ? 'is-trending' : ''} ${tacticCwDot.gybing ? 'is-gybing' : ''}`}
-        />
-        <circle
-          id="trend-gauge-ccw"
-          cx="185"
-          cy="110"
-          r="4"
-          fill={tacticCcwDot.color}
-          className={`${tacticCcwDot.active ? 'is-trending' : ''} ${tacticCcwDot.gybing ? 'is-gybing' : ''}`}
-        />
-      </g>
-
-      {/* Leeway Bar Indicator */}
-      <g transform="translate(75, 395)">
-        <text x="125" y="-12" id="leeway-val" fill="#aaa" fontSize="11" textAnchor="middle" fontWeight="bold">
-          {`LEEWAY: ${clampedLeeway.toFixed(1)}°`}
-        </text>
-        <rect x="0" y="0" width="250" height="12" fill="#222" rx="3" />
-        <rect x="0" y="0" width="250" height="12" fill="url(#leeway-grad)" clipPath="url(#leeway-clip)" rx="3" />
-        <g stroke="#555" strokeWidth="1">
-          <line x1="0" y1="-2" x2="0" y2="14" />
-          <line x1="62.5" y1="2" x2="62.5" y2="10" />
-          <line x1="125" y1="-2" x2="125" y2="14" />
-          <line x1="187.5" y1="2" x2="187.5" y2="10" />
-          <line x1="250" y1="-2" x2="250" y2="14" />
-        </g>
-        <g fill="#555" fontSize="8" textAnchor="middle" fontWeight="bold">
-          <text x="0" y="24">-20°</text>
-          <text x="62.5" y="24">-10</text>
-          <text x="125" y="24">0°</text>
-          <text x="187.5" y="24">10</text>
-          <text x="250" y="24">20°</text>
-        </g>
-      </g>
-    </svg>
-  );
-};