[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68950977232c8191b13815df3daca333","versionInt","title","Titanic Sinking Interactive Visualization","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\n\n/**\n * Titanic Sinking Interactive Visualization\n *\n * What it does\n * - Simulates the timeline from collision (11:40 PM) to sinking (~2:20 AM)\n * - Shows a simplified cutaway of 16 watertight compartments (bow→stern)\n * - Marks initial breaches (historically, forward compartments were opened)\n * - Animates water flooding & progressive bulkhead spill-over\n * - Click any compartment to see details at the current time\n * - Play / pause, scrub time, adjust speed, and step\n *\n * Notes\n * - This is a conceptual/educational approximation (not a naval simulator).\n * - You can refine flood curves, event timings, and styling in the config below.\n */\n\n// --- CONFIG --- //\nconst START_TIME_MIN = 0; // 11:40 PM = 0\nconst END_TIME_MIN = 160; // ~2:20 AM ≈ 160 minutes after collision\n\n// Key timeline markers (minutes after 11:40 PM)\nconst TIMELINE_EVENTS = [\n { t: 0, label: \"11:40 PM – Iceberg collision; forward compartments breached\" },\n { t: 10, label: \"11:50 PM – Damage assessment; pumps started\" },\n { t: 25, label: \"12:05 AM – Lifeboats readied\" },\n { t: 40, label: \"12:20 AM – First distress call (CQD)\" },\n { t: 50, label: \"12:30 AM – First lifeboat launched\" },\n { t: 80, label: \"1:00 AM – Bow noticeably lower; boilers secured\" },\n { t: 100, label: \"1:20 AM – Increased list; more boats away\" },\n { t: 120, label: \"1:40 AM – Water nearing Grand Staircase\" },\n { t: 140, label: \"2:00 AM – Final boats launched\" },\n { t: 150, label: \"2:10 AM – Power fluctuations; severe forward trim\" },\n { t: 160, label: \"2:20 AM – Ship founders; stern rises\" },\n];\n\n// Geometric/config params\nconst NUM_COMPARTMENTS = 16; // Titanic had 16 main watertight compartments\nconst BREACHED = [0, 1, 2, 3, 4]; // simplified forward compartments damaged initially (0 = foremost)\n\n// Simple flood progression model (conceptual)\n// Returns fill level [0..1] for a given compartment at time t (min)\nfunction floodLevel(compartmentIdx, t) {\n // Base curve: forward 5 compartments start flooding at t=0\n // Fill rate slows over time; spill-over to later compartments once bulkhead tops are exceeded\n const baseRates = BREACHED.includes(compartmentIdx) ? 0.012 : 0.0; // per minute\n\n // Early fill for breached compartments\n let level = Math.max(0, Math.min(1, baseRates * t));\n\n // Progressive spill-over: when a compartment exceeds 0.95, it contributes flow to the next\n // We propagate simply by looking at previous compartments and time.\n for (let k = compartmentIdx - 1; k >= 0; k--) {\n // If any forward neighbor is overwhelmed, add slow trickle that ramps later\n const prevIsFullish = floodLevelNoSpill(k, t) > 0.95;\n if (prevIsFullish) {\n const delay = (compartmentIdx - k) * 12; // delay spill per bulkhead (minutes)\n const spillT = t - delay;\n if (spillT > 0) {\n // Spill rate grows with time but capped\n const spill = Math.min(1, 0.009 * spillT);\n level = Math.max(level, spill);\n }\n }\n }\n\n return Math.max(0, Math.min(1, level));\n}\n\n// Helper: flood without spill-over (used to detect threshold)\nfunction floodLevelNoSpill(compartmentIdx, t) {\n const baseRates = BREACHED.includes(compartmentIdx) ? 0.012 : 0.0;\n return Math.max(0, Math.min(1, baseRates * t));\n}\n\n// Convert minutes-after-11:40 to clock string\nfunction formatClock(minsFromStart) {\n // Start = 23:40\n const totalMinutes = 23 * 60 + 40 + minsFromStart;\n const h = Math.floor(totalMinutes / 60) % 24;\n const m = totalMinutes % 60;\n const ampm = h >= 12 ? \"AM\" : \"PM\"; // after midnight wraps but we keep AM/PM contextual\n const h12 = ((h + 11) % 12) + 1;\n return `${h12}:${m.toString().padStart(2, \"0\")} ${ampm}`;\n}\n\n// Determine an overall bow-to-stern trim angle based on forward flooding\nfunction computeTrimAngle(t) {\n // Simple approach: more forward flooding → steeper negative (bow-down) angle\n const forwardAvg = [0, 1, 2, 3, 4].map((i) => floodLevel(i, t)).reduce((a, b) => a + b, 0) / 5;\n // Map 0..1 → 0..-18 degrees (exaggerated for clarity)\n return -18 * forwardAvg;\n}\n\n// Y-offset for waterline inside the hull (visual only)\nfunction waterline(t) {\n // As more compartments fill, overall waterline rises. Bound ~0..0.85 (of hull height)\n const avg = Array.from({ length: NUM_COMPARTMENTS }, (_, i) => floodLevel(i, t)).reduce((a, b) => a + b, 0) / NUM_COMPARTMENTS;\n return Math.min(0.85, avg * 0.9);\n}\n\nexport default function TitanicVisualization() {\n const [t, setT] = useState(0); // minutes after 11:40 PM\n const [playing, setPlaying] = useState(true);\n const [speed, setSpeed] = useState(1); // 1x = 1 sim minute per real second\n const [selectedCompartment, setSelectedCompartment] = useState(null);\n\n const rafRef = useRef(null);\n const lastTsRef = useRef(null);\n\n // Animation loop\n useEffect(() => {\n if (!playing) return;\n function loop(ts) {\n if (lastTsRef.current == null) lastTsRef.current = ts;\n const dt = (ts - lastTsRef.current) / 1000; // seconds\n lastTsRef.current = ts;\n\n setT((prev) => {\n const next = prev + dt * speed; // dt seconds → minutes at 1x = 1:1 (1 min per second)\n if (next >= END_TIME_MIN) {\n cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n lastTsRef.current = null;\n return END_TIME_MIN;\n }\n return next;\n });\n\n rafRef.current = requestAnimationFrame(loop);\n }\n rafRef.current = requestAnimationFrame(loop);\n return () => {\n if (rafRef.current) cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n lastTsRef.current = null;\n };\n }, [playing, speed]);\n\n const trimAngle = computeTrimAngle(t);\n const wl = waterline(t); // 0..1 of hull height\n\n const compartments = useMemo(() => {\n return Array.from({ length: NUM_COMPARTMENTS }, (_, i) => ({\n index: i,\n breached: BREACHED.includes(i),\n fill: floodLevel(i, t),\n }));\n }, [t]);\n\n // Event marker nearest to current time\n const activeEventIdx = useMemo(() => {\n let idx = 0;\n for (let i = 0; i < TIMELINE_EVENTS.length; i++) {\n if (TIMELINE_EVENTS[i].t <= t) idx = i;\n }\n return idx;\n }, [t]);\n\n // Handle interactions\n const handleScrub = (e) => {\n const val = Number(e.target.value);\n setT(val);\n };\n\n const reset = () => {\n setT(0);\n setPlaying(false);\n setSelectedCompartment(null);\n };\n\n const step = (mins = 1) => setT((prev) => Math.min(END_TIME_MIN, prev + mins));\n\n return (\n

\n {/* Left: Visualization */}\n

\n {/* Header / Clock */}\n

Titanic – Flooding Cutaway (Conceptual)

{formatClock(Math.floor(t))}

\n\n {/* Controls */}\n

\n setPlaying((p) => !p)}\n aria-label={playing ? \"Pause\" : \"Play\"}\n >\n {playing ? \"Pause\" : \"Play\"}\n \n \n \n \n

\n Speed\n setSpeed(Number(e.target.value))}\n />\n

{speed.toFixed(2)}×

\n\n {/* Scrubber */}\n

11:40 PM

\n \n

2:20 AM

\n\n {/* SVG Hull */}\n

\n \n \n \n

\n\n {/* Right: Timeline & Details */}\n

\n {/* Active Event Card */}\n

Current Marker

{TIMELINE_EVENTS[activeEventIdx].label}

T+{Math.floor(t)} min

\n\n {/* Timeline List */}\n

Timeline of Events

\n
\n
{formatClock(ev.t)}
\n
{ev.label}
\n setT(ev.t)}\n >\n Jump\n \n
\n

\n\n {/* Selected Compartment */}\n \n {selectedCompartment != null && (\n \n

Compartment {selectedCompartment + 1}

\n setSelectedCompartment(null)}\n >Close\n

\n \n

\n \n )}\n \n

\n\n

\n This visualization is an educational approximation of flooding dynamics and timeline events. For scholarly or historical work, replace the event list and flood curves with your preferred sources.\n

\n );\n}\n\nfunction HullSVG({ compartments, waterline, onCompartmentClick }) {\n // SVG dimensions\n const width = 900;\n const height = 240;\n\n // Hull geometry (rounded rectangle)\n const hullRadius = 26;\n const innerPad = 16;\n\n // Compartment geometry\n const compMargin = 2;\n const compCount = compartments.length;\n const innerWidth = width - innerPad * 2;\n const innerHeight = height - innerPad * 2;\n const compWidth = innerWidth / compCount;\n\n // Waterline height inside hull (0..1 → 0..innerHeight)\n const wlY = innerPad + innerHeight * (1 - waterline);\n\n // Build water polygon that fills each compartment up to its fill level\n const waterRects = compartments.map((c, i) => {\n const x = innerPad + i * compWidth + compMargin;\n const w = compWidth - compMargin * 2;\n const h = innerHeight * c.fill;\n const y = innerPad + innerHeight - h;\n return { x, y, w, h, i, breached: c.breached, fill: c.fill };\n });\n\n return (\n \n );\n}\n\nfunction CompartmentDetails({ index, t }) {\n const fill = floodLevel(index, t);\n const breached = BREACHED.includes(index);\n\n // Naive deck mapping for flavor text\n const deck = index < 4 ? \"Forward Cargo / Mail\" : index < 6 ? \"Boiler Rooms\" : index < 10 ? \"Engineering\" : index < 14 ? \"Crew / Stores\" : \"Aft Cargo\";\n\n // Status text\n let status = \"Intact\";\n if (breached && fill > 0) status = \"Breached – flooding\";\n if (!breached && fill > 0.02) status = \"Over-topping spill from forward bulkheads\";\n if (fill > 0.98) status = \"Fully flooded\";\n\n return (\n

Section: #{index + 1} — {deck}

Status: {status}

Fill: {(fill * 100).toFixed(0)}%

\n This panel estimates flooding based on a simplified model: initial forward damage leads to rapid local flooding, then progressive over-topping into adjacent compartments as the ship trims bow-down. Use the scrubber or play controls to observe transitions.\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","16845440763535696469","traceTime",1779066016479]