oneos-truck-date-prototype/components/map.jsx

// map.jsx — Stylized cockpit map. SVG-based road network. Theme-aware via CSS vars.

const MAP_BG = "var(--map-bg)";
const MAP_GRID = "var(--map-grid)";
const MAP_PARK = "var(--map-park)";
const MAP_PARK_STROKE = "var(--map-park-stroke)";
const MAP_RIVER = "var(--map-river)";
const MAP_ROAD_MINOR = "var(--map-road-minor)";
const MAP_ROAD_MAJOR_OUTER = "var(--map-road-major-outer)";
const MAP_ROAD_MAJOR_INNER = "var(--map-road-major-inner)";

// 嘉兴乍浦 (Zhapu Port, Jiaxing) — port city on Hangzhou Bay.
// Layout: Hangzhou Bay sea fills the south (y > ~620). Port piers jutting south.
// G15 Shen-Hai expressway runs roughly N–S (right side). 乍嘉苏 expressway diagonal.
// Inland canals (东湖、独山港河) cross the city. Pinghu 老城 in the upper-middle.
const ROADS_MAJOR = [
  // G15 沈海高速 (N–S, right)
  "M 1020 40 L 1020 200 L 1010 380 L 1000 540 L 1000 620",
  // 乍嘉苏高速 (NW–SE diagonal)
  "M 60 120 L 240 220 L 420 320 L 600 400 L 760 480 L 880 560",
  // 海盐塘公路 (E–W arterial through old town)
  "M 60 280 L 280 280 L 520 300 L 780 290 L 1140 280",
  // 乍浦大道 (E–W, mid, leading to port)
  "M 60 460 L 280 460 L 520 470 L 800 470 L 1140 470",
  // 港区疏港路 (curves down to port)
  "M 600 470 L 600 560 L 580 620",
  "M 800 470 L 820 560 L 840 620",
  // 外环 — connector
  "M 240 220 L 240 460 L 260 600",
  "M 880 200 L 880 400 L 880 560",
];
const ROADS_MINOR = [
  // city grid (north of bay)
  "M 80 160 L 1140 160","M 80 220 L 1140 220","M 80 360 L 1140 360","M 80 410 L 1140 410","M 80 540 L 980 540",
  "M 160 60 L 160 600","M 320 60 L 320 600","M 400 60 L 400 600","M 520 60 L 520 600","M 680 60 L 680 600","M 760 60 L 760 600","M 880 60 L 880 600","M 940 60 L 940 600",
  // port grid
  "M 540 540 L 540 620","M 660 540 L 660 620","M 720 540 L 720 620","M 780 540 L 780 620",
];
// 杭州湾 + 内河水系
const RIVERS = [
  // 东湖塘 (E–W canal in city)
  "M 0 350 Q 200 340 380 360 T 760 350 Q 920 340 1240 360",
  // 独山港河 / pier inlet
  "M 460 470 L 470 540 L 480 600",
];
// 杭州湾 — fills bottom of map
const SEA_PATH = "M -20 620 L 1260 620 L 1260 820 L -20 820 Z";
// 港池 — port basins (water inlets cut into land)
const PORT_BASINS = [
  "M 360 620 L 380 540 L 440 540 L 460 620 Z",
  "M 600 620 L 620 580 L 700 580 L 720 620 Z",
  "M 820 620 L 840 580 L 920 580 L 940 620 Z",
];
// 防波堤 / 码头 — piers extending into the sea
const PIERS = [
  "M 480 620 L 480 700 L 540 700 L 540 620",
  "M 740 620 L 740 720 L 800 720 L 800 620",
  "M 960 620 L 960 680 L 1020 680 L 1020 620",
];
const PARKS = [
  // 九龙山 / 南湾绿地
  { x: 220, y: 80, w: 90, h: 70, label: "九龙山" },
  // 东湖公园
  { x: 440, y: 220, w: 80, h: 50, label: "东湖" },
  // 临港绿带
  { x: 80, y: 500, w: 140, h: 90, label: "南湾绿带" },
];
const POIS = [
  { x: 320, y: 180, label: "总站·乍浦城区" },
  { x: 600, y: 240, label: "氢能补能站·东湖" },
  { x: 880, y: 320, label: "维保中心·G15" },
  { x: 700, y: 540, label: "调度中心·港区" },
  { x: 960, y: 540, label: "重卡停车场" },
  { x: 240, y: 540, label: "化工园补能站" },
];

// 12 vehicles around the city
// src: T = TBOX 3296/2016国标, J = JT808/1078, B = both (TBOX + JT)
// VEHICLES dataset comes from data/fleet.js (window.VEHICLES) — asset-management model.

// Source badge — small T/JT chip
const SourceBadge = ({ src, size = "sm" }) => {
  const items = src === "B" ? ["T","JT"] : src === "T" ? ["T"] : ["JT"];
  const colors = { T: "var(--info)", JT: "var(--accent)" };
  return (
    <span style={{display:"inline-flex", gap:2}}>
      {items.map(k => (
        <span key={k} style={{
          fontFamily:"var(--font-mono)", fontSize: size === "sm" ? 9 : 10,
          padding: size === "sm" ? "1px 4px" : "2px 5px",
          borderRadius:3, lineHeight:1.2,
          color: colors[k], background: `oklch(from ${colors[k]} l c h / 0.15)`,
          border: `1px solid ${colors[k]}`, opacity:0.85, letterSpacing:"0.04em", fontWeight:600,
        }}>{k}</span>
      ))}
    </span>
  );
};
window.SourceBadge = SourceBadge;

// recent path traces (last 30 min ghost trails) for animation feel
const TRACES = [
  { id: "浙F07179F", d: "M 200 260 L 240 250 L 280 260", color: "ok" },
  { id: "浙F02002F", d: "M 540 260 L 580 256 L 620 260", color: "ok" },
  { id: "浙F08638F", d: "M 540 460 L 560 500 L 580 540", color: "danger" },
];

const StatusColor = {
  ok:     "var(--ok)",
  warn:   "var(--warn)",
  danger: "var(--danger)",
  idle:   "var(--fg-3)",
};

const VehiclePin = ({ v, selected, onClick, showHeading = true, animate = true }) => {
  const color = StatusColor[v.status];
  return (
    <g transform={`translate(${v.x} ${v.y})`} style={{cursor:"pointer"}} onClick={() => onClick && onClick(v)}>
      {/* heading cone */}
      {showHeading && v.status !== "idle" && (
        <g transform={`rotate(${v.h})`} opacity={0.5}>
          <path d="M -10 -2 L 0 -22 L 10 -2 Z" fill={color} opacity="0.35"/>
        </g>
      )}
      {/* pulse ring (only for moving) */}
      {animate && v.status === "ok" && v.speed > 0 && (
        <circle r="14" fill="none" stroke={color} strokeWidth="1" opacity="0.6">
          <animate attributeName="r" from="6" to="20" dur="2s" repeatCount="indefinite"/>
          <animate attributeName="opacity" from="0.7" to="0" dur="2s" repeatCount="indefinite"/>
        </circle>
      )}
      {/* outer halo */}
      <circle r="9" fill={color} opacity="0.18"/>
      {/* core */}
      <circle r="5" fill={color} stroke="var(--map-bg)" strokeWidth="1.5"/>
      {selected && <circle r="11" fill="none" stroke={color} strokeWidth="1.5"/>}
    </g>
  );
};

const PoiMarker = ({ poi }) => (
  <g transform={`translate(${poi.x} ${poi.y})`}>
    <rect x="-3" y="-3" width="6" height="6" fill="var(--accent)" opacity="0.8" transform="rotate(45)"/>
    <text x="8" y="3" fill="var(--fg-2)" fontSize="9" fontFamily="var(--font-mono)" letterSpacing="0.05em">{poi.label}</text>
  </g>
);

const Compass = () => (
  <g transform="translate(60 60)">
    <circle r="22" fill="var(--bg-1)" opacity="0.85" stroke="var(--border-2)"/>
    <path d="M 0 -14 L 4 0 L 0 14 L -4 0 Z" fill="var(--accent)" opacity="0.5"/>
    <path d="M 0 -14 L 4 0 L 0 4 L -4 0 Z" fill="var(--accent)"/>
    <text textAnchor="middle" y="-26" fontSize="9" fill="var(--fg-2)" fontFamily="var(--font-mono)">N</text>
  </g>
);

const ScaleBar = ({ x = 60, y = 720 }) => (
  <g transform={`translate(${x} ${y})`}>
    <line x1="0" y1="0" x2="100" y2="0" stroke="var(--fg-1)" strokeWidth="1.5"/>
    <line x1="0" y1="-3" x2="0" y2="3" stroke="var(--fg-1)" strokeWidth="1.5"/>
    <line x1="50" y1="-3" x2="50" y2="3" stroke="var(--fg-1)" strokeWidth="1.5"/>
    <line x1="100" y1="-3" x2="100" y2="3" stroke="var(--fg-1)" strokeWidth="1.5"/>
    <text x="100" y="-6" fontSize="9" fill="var(--fg-2)" fontFamily="var(--font-mono)">500m</text>
  </g>
);

// the main rendered map
const FleetMap = ({
  selectedId,
  onSelect,
  vehicles,
  showLabels = false,
  showHeatmap = false,
  showPaths = true,
  highlightPath = null,    // for playback view: a polyline string
  playbackProgress = 0,
  playbackPoint = null,
  variant = "default",     // "default" | "minimal" | "satellite"
}) => {
  const isMin = variant === "minimal";
  // Default: pull from global fleet, only those with map coords
  const _vehicles = vehicles || (window.VEHICLES || []).filter(v => v.x != null && v.y != null);

  return (
    <svg viewBox="0 0 1240 800" width="100%" height="100%" style={{display:"block", background: MAP_BG}}>
      <defs>
        <linearGradient id="mapVignette" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--map-vignette)" stopOpacity="0"/>
          <stop offset="1" stopColor="var(--map-vignette)" stopOpacity="var(--map-vignette-strength)"/>
        </linearGradient>
        <radialGradient id="heat" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor="var(--accent)" stopOpacity="0.5"/>
          <stop offset="1" stopColor="var(--accent)" stopOpacity="0"/>
        </radialGradient>
        <pattern id="mapGrid" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse">
          <path d="M 80 0 L 0 0 0 80" fill="none" stroke={MAP_GRID} strokeWidth="0.5"/>
        </pattern>
      </defs>

      {/* base */}
      <rect width="1240" height="800" fill={MAP_BG}/>
      <rect width="1240" height="800" fill="url(#mapGrid)"/>

      {/* 杭州湾 — sea */}
      {!isMin && (
        <path d={SEA_PATH} fill={MAP_RIVER} opacity="0.55"/>
      )}
      {/* 港池 — port water basins cut into land */}
      {!isMin && PORT_BASINS.map((d, i) => (
        <path key={"pb"+i} d={d} fill={MAP_RIVER} opacity="0.55"/>
      ))}
      {/* coastline marker */}
      {!isMin && (
        <line x1="0" y1="620" x2="1240" y2="620"
              stroke="var(--map-park-stroke)" strokeWidth="0.6" strokeDasharray="3 3" opacity="0.6"/>
      )}
      {/* sea label */}
      {!isMin && (
        <text x="1140" y="700" fontSize="14" fill="var(--fg-3)" textAnchor="end"
              fontFamily="var(--font-sans)" letterSpacing="2" opacity="0.55">杭州湾 · 乍浦港</text>
      )}

      {/* parks */}
      {!isMin && PARKS.map((p, i) => (
        <g key={i}>
          <rect x={p.x} y={p.y} width={p.w} height={p.h}
                fill={MAP_PARK} stroke={MAP_PARK_STROKE} strokeWidth="0.5" rx="3"/>
          {p.label && (
            <text x={p.x + p.w/2} y={p.y + p.h/2 + 3} fontSize="9"
                  fill="var(--fg-3)" textAnchor="middle" opacity="0.7">{p.label}</text>
          )}
        </g>
      ))}

      {/* river */}
      {!isMin && RIVERS.map((d, i) => (
        <path key={i} d={d} stroke={MAP_RIVER} strokeWidth="10" fill="none" strokeLinecap="round"/>
      ))}

      {/* piers */}
      {!isMin && PIERS.map((d, i) => (
        <path key={"pier"+i} d={d} fill="none" stroke="var(--map-road-major-outer)"
              strokeWidth="8" strokeLinecap="butt"/>
      ))}

      {/* heatmap layer */}
      {showHeatmap && _vehicles.map((v, i) => (
        <ellipse key={i} cx={v.x} cy={v.y} rx="50" ry="50" fill="url(#heat)"/>
      ))}

      {/* minor roads */}
      {ROADS_MINOR.map((d, i) => (
        <path key={i} d={d} fill="none" stroke={MAP_ROAD_MINOR} strokeWidth="1"/>
      ))}

      {/* major roads casing + center stripe */}
      {ROADS_MAJOR.map((d, i) => (
        <g key={i}>
          <path d={d} fill="none" stroke={MAP_ROAD_MAJOR_OUTER} strokeWidth="6" strokeLinecap="round"/>
          <path d={d} fill="none" stroke={MAP_ROAD_MAJOR_INNER} strokeWidth="3" strokeLinecap="round"/>
        </g>
      ))}

      {/* vignette */}
      <rect width="1240" height="800" fill="url(#mapVignette)" pointerEvents="none"/>

      {/* highlighted path */}
      {highlightPath && (
        <g>
          <path d={highlightPath} fill="none" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round" opacity="0.35"/>
          <path d={highlightPath} fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"
                strokeDasharray="6 4" style={{filter: "drop-shadow(0 0 6px var(--accent-glow))"}}/>
        </g>
      )}

      {/* recent traces */}
      {showPaths && !highlightPath && TRACES.map((t, i) => (
        <path key={i} d={t.d} fill="none" stroke={StatusColor[t.color]} strokeWidth="2" opacity="0.35" strokeLinecap="round"/>
      ))}

      {/* POIs */}
      {!isMin && POIS.map((p, i) => <PoiMarker key={i} poi={p}/>)}

      {/* vehicles */}
      {_vehicles.map(v => (
        <VehiclePin key={v.id} v={v}
                    selected={v.id === selectedId}
                    onClick={onSelect}
                    showHeading
                    animate={!highlightPath}/>
      ))}

      {/* selected vehicle label */}
      {selectedId && _vehicles.filter(v => v.id === selectedId).map(v => (
        <g key={v.id} transform={`translate(${v.x + 14} ${v.y - 14})`}>
          <rect x="0" y="-12" width="86" height="22" rx="4" fill="var(--bg-1)" stroke={StatusColor[v.status]} strokeWidth="1"/>
          <text x="6" y="3" fill="var(--fg-0)" fontSize="11" fontFamily="var(--font-mono)" fontWeight="500">{v.id}</text>
          <text x="56" y="3" fill={StatusColor[v.status]} fontSize="10" fontFamily="var(--font-mono)">{v.speed}km/h</text>
        </g>
      ))}

      {/* playback marker */}
      {playbackPoint && (
        <g transform={`translate(${playbackPoint.x} ${playbackPoint.y})`}>
          <circle r="14" fill="var(--accent)" opacity="0.18"/>
          <circle r="7" fill="var(--accent)" stroke="var(--map-bg)" strokeWidth="2"/>
          <circle r="3" fill="var(--map-bg)"/>
        </g>
      )}

      {/* HUD overlays */}
      <Compass/>
      <ScaleBar/>
    </svg>
  );
};

window.FleetMap = FleetMap;