import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react"; import { useSQLQuery } from "@motherduck/react-sql-query"; import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend, ComposedChart, Bar, Line, ReferenceLine, AreaChart, Area, } from "recharts"; import * as d3 from "d3"; import { Maximize2, X, Play, Pause, Radio, Crosshair, Shield, Layers, SkipForward, Flame, BookOpen, Activity, } from "lucide-react"; // injected for public data access — keep in sync with the skyfall share, // or pushes strip viewer access export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/skyfall/41ac3b77-116e-46ee-ba70-165f99cc2d79', alias: 'skyfall' } ]; const N = (v: unknown): number => (v != null ? Number(v) : 0); const S = (v: unknown): string => (v != null ? String(v) : ""); // render **bold** spans in editorial text — gold highlights const emph = (text: string) => text.split("**").map((seg, i) => i % 2 === 1 ? {seg} : seg); // popil (warm-ash) role tokens const C = { canvas: "#1f1f1e", surface: "#262625", raised: "#2e2e2c", sunken: "#1a1a19", fg: "#e4e2de", muted: "#b8b3a8", subtle: "#9b958a", faint: "#78716c", borderDefault: "#2e2e2c", borderStrong: "#373634", accent: "#d97757", gold: "#d4a85a", success: "#8a9d68", danger: "#c87a72", info: "#7ba0c4", }; const MONO = "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace"; // weapon classes — color + label, ordered by share const CLASSES: Record = { shahed: { label: "Shahed-type drones", short: "SHAHED", color: "#d4a85a" }, strike_uav: { label: "Strike / loitering UAVs", short: "STRIKE UAV", color: "#7ba0c4" }, cruise: { label: "Cruise missiles", short: "CRUISE", color: "#d97757" }, ballistic: { label: "Ballistic / aero-ballistic", short: "BALLISTIC", color: "#c87a72" }, recon_uav: { label: "Reconnaissance UAVs", short: "RECON", color: "#9b958a" }, other: { label: "Other / mixed", short: "OTHER", color: "#78716c" }, }; const classColor = (c: string) => CLASSES[c]?.color ?? C.faint; const DB = `"skyfall"."main"`; // ── types ─────────────────────────────────────────────────────────── type ArcRow = { d: string; cls: string; sla: number; slo: number; dla: number; dlo: number; w: number }; type ImpactRow = { d: string; cls: string; name: string; la: number; lo: number; w: number }; type FeedRow = { d: string; cls: string; headline: string; detail: string; launched: number; destroyed: number }; type DayTotal = { d: string; launched: number; destroyed: number; nat: number }; // ── shared chrome (same skeleton as confmap) ──────────────────────── const PanelFull = createContext(false); function ChartBox({ height, children }: { height: number; children: React.ReactElement }) { const full = useContext(PanelFull); return (

{children}

); } function Panel({ title, right, children, className, icon, }: { title: string; right?: React.ReactNode; children: React.ReactNode; className?: string; icon?: React.ReactNode; }) { const [expanded, setExpanded] = useState(false); const main = title.split("·")[0].trim(); const sub = title.includes("·") ? title.split("·").slice(1).join("·").trim() : null; const frame = (full: boolean) => (

{icon && {icon}} {main}

{right}

{sub &&

{sub}

}

{children}

); if (!expanded) return frame(false); return ( <>

{ if (e.target === e.currentTarget) setExpanded(false); }} > {frame(true)}

); } const tooltipStyle = { contentStyle: { background: C.surface, border: `1px solid ${C.borderStrong}`, borderRadius: 4, fontFamily: MONO, fontSize: 11, color: C.fg, }, labelStyle: { color: C.subtle }, itemStyle: { color: C.fg }, }; const axisProps = { stroke: C.faint, tick: { fill: C.subtle, fontSize: 10, fontFamily: MONO }, tickLine: { stroke: C.borderStrong }, axisLine: { stroke: C.borderStrong }, }; function Section({ title, sub }: { title: string; sub?: string }) { return (

{title}

{sub &&

{sub}

}

); } // ── live map canvas ───────────────────────────────────────────────── type MapEvent = | { kind: "arc"; cls: string; x0: number; y0: number; x1: number; y1: number; w: number; born: number } | { kind: "pulse"; cls: string; x: number; y: number; w: number; born: number } | { kind: "nat"; n: number; born: number }; function LiveMap({ oblasts, dayIdx, dates, arcsByDay, impactsByDay, natByDay, height, tickMs, label, tonight, }: { oblasts: { name: string; geometry: GeoJSON.Geometry }[]; dayIdx: number; dates: string[]; arcsByDay: Map; impactsByDay: Map; natByDay: Map; height: number; tickMs: number; label: string; tonight: { launched: number; destroyed: number } | undefined; }) { const labelRef = useRef(label); labelRef.current = label; const tonightRef = useRef(tonight); tonightRef.current = tonight; const canvasRef = useRef(null); const events = useRef([]); const trail = useRef<{ x: number; y: number; cls: string; a: number }[]>([]); const projRef = useRef(null); const sizeRef = useRef({ w: 0, h: 0 }); const tickRef = useRef(tickMs); tickRef.current = tickMs; // build projection whenever the canvas resizes const fitProjection = (w: number, h: number) => { // tight Ukraine frame — launch sites beyond it clamp to the canvas edge const frame: GeoJSON.Feature = { type: "Feature", properties: {}, geometry: { type: "Polygon", // ring wound so d3's spherical convention reads it as the small box coordinates: [[[21.9, 44.2], [21.9, 52.6], [40.5, 52.6], [40.5, 44.2], [21.9, 44.2]]], }, }; return d3.geoMercator().fitExtent([[10, 10], [w - 10, h - 10]], frame); }; // spawn the events of the current day useEffect(() => { const proj = projRef.current; if (!proj) return; const d = dates[dayIdx]; if (!d) return; const now = performance.now(); const { w: cw, h: ch } = sizeRef.current; const clamp = ([x, y]: [number, number]): [number, number] => [Math.max(6, Math.min(cw - 6, x)), Math.max(6, Math.min(ch - 6, y))]; for (const a of arcsByDay.get(d) ?? []) { const p0 = proj([a.slo, a.sla]); const p1 = proj([a.dlo, a.dla]); if (!p0 || !p1) continue; const [x0, y0] = clamp(p0 as [number, number]); const [x1, y1] = p1 as [number, number]; events.current.push({ kind: "arc", cls: a.cls, x0, y0, x1, y1, w: a.w, born: now }); } for (const im of impactsByDay.get(d) ?? []) { const p = proj([im.lo, im.la]); if (!p) continue; events.current.push({ kind: "pulse", cls: im.cls, x: p[0], y: p[1], w: im.w, born: now }); trail.current.push({ x: p[0], y: p[1], cls: im.cls, a: 0.32 }); } const nat = natByDay.get(d) ?? 0; if (nat > 0) events.current.push({ kind: "nat", n: nat, born: now }); if (events.current.length > 700) events.current.splice(0, events.current.length - 700); if (trail.current.length > 2500) trail.current.splice(0, trail.current.length - 2500); }, [dayIdx, dates, arcsByDay, impactsByDay, natByDay]); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; let raf = 0; const dpr = window.devicePixelRatio || 1; const qpt = (e: { x0: number; y0: number; x1: number; y1: number }, t: number) => { // quadratic bezier with perpendicular bulge const mx = (e.x0 + e.x1) / 2; const my = (e.y0 + e.y1) / 2; const dx = e.x1 - e.x0; const dy = e.y1 - e.y0; const cx = mx - dy * 0.18; const cy = my + dx * 0.18; const a = 1 - t; return [ a * a * e.x0 + 2 * a * t * cx + t * t * e.x1, a * a * e.y0 + 2 * a * t * cy + t * t * e.y1, ] as const; }; const draw = () => { const box = canvas.getBoundingClientRect(); if (box.bottom < 0 || box.top > window.innerHeight) { raf = requestAnimationFrame(draw); return; } const w = box.width; const h = box.height; // resize only on real layout changes (>2px) — resizing clears the canvas, // so sub-pixel or scrollbar jitter would otherwise blink the map const W = Math.round(w * dpr); const H = Math.round(h * dpr); if (Math.abs(canvas.width - W) > 2 * dpr || Math.abs(canvas.height - H) > 2 * dpr) { canvas.width = W; canvas.height = H; projRef.current = fitProjection(w, h); sizeRef.current = { w, h }; } const proj = projRef.current; if (!proj) { raf = requestAnimationFrame(draw); return; } ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, w, h); ctx.fillStyle = C.sunken; ctx.fillRect(0, 0, w, h); const now = performance.now(); const tick = Math.max(tickRef.current, 60); const life = Math.min(3600, tick * 3); // nationwide nights: nothing on the land at all — any whole-map effect // reads as blinking at replay speed. Just a steady overlay tag. let natCount = 0; for (const e of events.current) { if (e.kind !== "nat") continue; if (now - e.born > life) continue; natCount = Math.max(natCount, e.n); } // land const path = d3.geoPath(proj, ctx); for (const ob of oblasts) { ctx.beginPath(); path(ob.geometry as d3.GeoPermissibleObjects); ctx.fillStyle = C.surface; ctx.fill(); ctx.strokeStyle = C.borderStrong; ctx.lineWidth = 0.7; ctx.stroke(); } // broadcast overlay: date + tonight's tally const lbl = labelRef.current; const tn = tonightRef.current; ctx.textBaseline = "top"; ctx.font = `700 22px ${MONO}`; ctx.fillStyle = C.fg; ctx.fillText(lbl, 14, 12); if (tn) { ctx.font = `700 13px ${MONO}`; ctx.fillStyle = C.gold; ctx.fillText(`${tn.launched} LAUNCHED`, 14, 42); ctx.fillStyle = C.info; ctx.fillText(`${tn.destroyed} DOWNED`, 14, 60); } if (natCount > 0) { ctx.font = `700 11px ${MONO}`; ctx.fillStyle = C.gold; ctx.fillText(`◈ NATIONWIDE — ${natCount} weapons, no region given`, 14, 84); } // legend — why some strikes are arcs and others only rings const { h: ch2 } = sizeRef.current; ctx.font = `10px ${MONO}`; ctx.fillStyle = C.faint; ctx.fillText("⌒ arc = launch site + target both reported", 14, ch2 - 46); ctx.fillText("◎ ring = target reported, launch site not", 14, ch2 - 32); ctx.fillText("◈ tag = report says only “Ukraine”, no region", 14, ch2 - 18); // accumulated impact trail (the scar tissue of the replay) for (const t of trail.current) { ctx.beginPath(); ctx.arc(t.x, t.y, 1.6, 0, Math.PI * 2); ctx.fillStyle = classColor(t.cls) + "2e"; ctx.fill(); } // live events events.current = events.current.filter((e) => now - e.born < life * 1.05); for (const e of events.current) { const t = Math.min(1, (now - e.born) / life); if (e.kind === "arc") { const head = Math.min(1, t * 1.6); const col = classColor(e.cls); ctx.beginPath(); const steps = 24; for (let i = 0; i <= steps * head; i++) { const [px, py] = qpt(e, i / steps); if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py); } ctx.strokeStyle = col + (t > 0.8 ? "40" : "90"); ctx.lineWidth = Math.min(2.4, 0.7 + Math.sqrt(e.w) * 0.18); ctx.stroke(); if (head < 1) { const [hx, hy] = qpt(e, head); ctx.beginPath(); ctx.arc(hx, hy, 2.2, 0, Math.PI * 2); ctx.fillStyle = col; ctx.fill(); } } else if (e.kind === "pulse") { const col = classColor(e.cls); const rmax = 6 + Math.min(20, Math.sqrt(e.w) * 3.2); // two staggered expanding rings + glowing core for (const off of [0, 0.35]) { const tt = t - off; if (tt < 0 || tt > 0.95) continue; ctx.beginPath(); ctx.arc(e.x, e.y, 2 + tt * rmax, 0, Math.PI * 2); ctx.strokeStyle = col + Math.round((1 - tt) * 220).toString(16).padStart(2, "0"); ctx.lineWidth = 1.6; ctx.stroke(); } ctx.beginPath(); ctx.arc(e.x, e.y, 2.6, 0, Math.PI * 2); ctx.fillStyle = col + (t < 0.7 ? "ff" : "70"); ctx.fill(); } } raf = requestAnimationFrame(draw); }; raf = requestAnimationFrame(draw); return () => cancelAnimationFrame(raf); }, [oblasts]); return (

SkyFall - 1,350 nights of drones & missiles over Ukraine

Comments