[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":21,"_26":27,"_28":27,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68d5375362888191aa2490bb4d0a7f3d","versionInt","title","Hydrostatic Pressure Dive Demo (seawater 8","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Play, Pause, RotateCcw, Waves } from \"lucide-react\";\n\n// =============================\n// Constants & Utilities (US units)\n// =============================\nconst MAX_DEPTH_FT = 10000; // hard cap requested\nconst DEFAULT_PPG = 8.55; // seawater density for this demo\nconst GAUGE_MAX_PSI = 5000; // legacy fixed max (not used by digital max anymore)\n\nfunction psiFromPPGAndTVD(ppg: number, tvd_ft: number) {\n // Oilfield hydrostatic: P(psi) = 0.052 * MW(ppg) * TVD(ft)\n return 0.052 * ppg * tvd_ft;\n}\nfunction depthLabel(depth_ft: number) {\n return `${depth_ft.toFixed(0)} ft`;\n}\n\n// =============================\n// Detailed Submarine (SVG)\n// =============================\nfunction SubmarineSVG() {\n return (\n \n );\n}\n\n// =============================\n// Digital Seven-Segment PSI Display (0–5,000 psi)\n// =============================\nfunction SevenSegmentPsi({ valuePsi, maxPsi }: { valuePsi: number; maxPsi: number }) {\n const clamped = Math.max(0, Math.min(valuePsi, maxPsi));\n const value = Math.round(clamped); // integer psi\n const str = value.toString().padStart(5, \" \"); // allow up to 5 digits (e.g., 12,345 psi if MW is increased)\n\n const segMap: Record = {\n \"0\": [1,1,1,1,1,1,0],\n \"1\": [0,1,1,0,0,0,0],\n \"2\": [1,1,0,1,1,0,1],\n \"3\": [1,1,1,1,0,0,1],\n \"4\": [0,1,1,0,0,1,1],\n \"5\": [1,0,1,1,0,1,1],\n \"6\": [1,0,1,1,1,1,1],\n \"7\": [1,1,1,0,0,0,0],\n \"8\": [1,1,1,1,1,1,1],\n \"9\": [1,1,1,1,0,1,1],\n \" \": [0,0,0,0,0,0,0],\n };\n\n const Digit = ({ ch }: { ch: string }) => {\n const on = segMap[ch] ?? segMap[\" \"];\n const ON = \"#000000\"; // digits in black\n const OFF = \"#9ca3af\"; // off segments in grey\n const BG = \"#e5e7eb\"; // grey background\n return (\n \n );\n };\n\n return (\n

\n {str.split(\"\").map((ch, i) => (\n \n ))}\n

psi

\n );\n}\n\n// =============================\n// Main Component\n// =============================\nexport default function DiveHydrostaticDemo() {\n const [densityPpg, setDensityPpg] = useState(DEFAULT_PPG);\n const [depthFt, setDepthFt] = useState(0);\n const [diving, setDiving] = useState(false);\n\n const clampedDepthFt = Math.max(0, Math.min(depthFt, MAX_DEPTH_FT));\n const pressurePsi = useMemo(() => psiFromPPGAndTVD(densityPpg, clampedDepthFt), [densityPpg, clampedDepthFt]);\n\n // Auto-dive animation to max in ~60 s, then stop automatically\n useEffect(() => {\n let raf: number | null = null;\n let last = performance.now();\n const speedFtPerSec = MAX_DEPTH_FT / 60;\n\n const tick = (t: number) => {\n const dt = (t - last) / 1000;\n last = t;\n setDepthFt((d) => {\n if (!diving) return d;\n const nd = Math.min(MAX_DEPTH_FT, d + speedFtPerSec * dt);\n if (nd >= MAX_DEPTH_FT - 1) {\n setDiving(false);\n return MAX_DEPTH_FT;\n }\n return nd;\n });\n raf = requestAnimationFrame(tick);\n };\n\n if (diving) raf = requestAnimationFrame(tick);\n return () => { if (raf) cancelAnimationFrame(raf); };\n }, [diving]);\n\n // Submarine Y position (visual only)\n const subY = useMemo(() => {\n const pad = 32;\n const usable = 400 - 2 * pad;\n const frac = Math.min(1, Math.max(0, clampedDepthFt / MAX_DEPTH_FT));\n return pad + frac * usable;\n }, [clampedDepthFt]);\n\n const reset = () => {\n setDepthFt(0);\n setDiving(false);\n };\n\n const maxPsi = useMemo(() => psiFromPPGAndTVD(densityPpg, MAX_DEPTH_FT), [densityPpg]); // auto max equals hydrostatic @ 10,000 ft\n\n return (\n

\n \n \n \n Hydrostatic Pressure Dive — Seawater 8.55 ppg (US units) — MAX 10,000 ft\n \n

Real-time demonstration for Well Control: P(psi) = 0.052 × MW(ppg) × TVD(ft)

\n \n \n

\n {/* Ocean Scene */}\n

\n {/* Surface line */}\n

\n {/* Depth scale */}\n

\n {Array.from({ length: 6 }, (_, i) => {\n const frac = i / 5;\n const dft = Math.round(MAX_DEPTH_FT * frac);\n return (\n

\n {depthLabel(dft)}\n

\n );\n })}\n

\n\n {/* Submarine */}\n \n \n \n\n {/* Bubbles */}\n {Array.from({ length: 12 }).map((_, i) => (\n \n ))}\n

\n\n {/* Readouts & Gauge */}\n

\n \n \n Digital Gauge (auto max @ 10,000 ft)\n \n \n \n

psi

{pressurePsi.toFixed(0)}

Depth (ft)

{clampedDepthFt.toFixed(0)}

MW (ppg)

{densityPpg.toFixed(2)}

\n \n \n\n

\n \n \n \n

\n\n

\n Depth (ft)\n setDepthFt(v[0] as number)}\n min={0}\n max={MAX_DEPTH_FT}\n step={10}\n />\n

Current depth (capped at 10,000 ft): {depthLabel(clampedDepthFt)}

\n\n

\n Seawater density (ppg)\n {\n const v = parseFloat(e.target.value || `${DEFAULT_PPG}`);\n if (Number.isFinite(v)) setDensityPpg(Math.min(12, Math.max(6, v)));\n }}\n />\n

Default {DEFAULT_PPG} ppg

Target at max depth

~{psiFromPPGAndTVD(densityPpg, MAX_DEPTH_FT).toFixed(0)} psi @ 10,000 ft

\n \n \n\n {/* Theory & Instructor Notes */}\n \n \n Theory, Formulae & Instructor Prompts\n \n \n

Hydrostatic pressure (oilfield form)

\n P(psi) = 0.052 × MW(ppg) × TVD(ft)\n

At 10,000 ft with {DEFAULT_PPG} ppg → ~4446 psi.

\n\n

Instructor prompts

Ask trainees to predict the increase for an extra 1,000 ft at {DEFAULT_PPG} ppg (≈ 444 psi).
Discuss how increasing MW (e.g., 8.55 → 10.0 ppg) changes the slope.
Relate display to BHP management: choke vs MW vs TVD.

\n\n

Safety note

This visualization is an analogy. Actual subsea/wellbore environments include temperature, compressibility, salinity, and dynamic effects not modeled here.

\n \n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch","shouldPrefetchAccount",true,"shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","2068027858133057280","traceTime",1776457181562]