\n \n \n\n",[],[131,166],"81f37808-3dcf-11f1-bbe9-42b51c65c3df","app.tsx","594cd4a0-3dcd-11f1-97ee-42b51c65c3df",15,["D",1776809687274],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\n\n// ─── CSS ───────────────────────────────────────────────────────────────────────\nconst CSS = `\n @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&family=Crimson+Pro:ital,wght@0,400;1,400&display=swap');\n * { box-sizing: border-box; margin: 0; padding: 0; }\n .sizeup-root { background:#080808; min-height:100vh; color:#F0EBE0; font-family:'IBM Plex Mono',monospace; overflow-x:hidden; }\n @keyframes flicker1 { 0%,100%{transform:scaleY(1) scaleX(1) translateX(0);opacity:1} 20%{transform:scaleY(1.12) scaleX(.94) translateX(-1px);opacity:.9} 40%{transform:scaleY(.92) scaleX(1.06) translateX(1px);opacity:.95} 60%{transform:scaleY(1.08) scaleX(.97) translateX(-2px);opacity:.88} 80%{transform:scaleY(.96) scaleX(1.03) translateX(1px);opacity:.93} }\n @keyframes flicker2 { 0%,100%{transform:scaleY(1) scaleX(1);opacity:.85} 25%{transform:scaleY(1.18) scaleX(.9);opacity:.7} 50%{transform:scaleY(.88) scaleX(1.1);opacity:.9} 75%{transform:scaleY(1.1) scaleX(.92);opacity:.75} }\n @keyframes smoke-rise { 0%{transform:translateY(0) translateX(0) scale(1);opacity:.7} 50%{transform:translateY(-40px) translateX(8px) scale(1.4);opacity:.4} 100%{transform:translateY(-80px) translateX(-4px) scale(2);opacity:0} }\n @keyframes smoke2 { 0%{transform:translateY(0) scale(.8);opacity:.6} 50%{transform:translateY(-35px) translateX(-10px) scale(1.3);opacity:.3} 100%{transform:translateY(-70px) translateX(6px) scale(1.9);opacity:0} }\n @keyframes glow-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }\n @keyframes slide-up { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }\n @keyframes fade-in { from{opacity:0} to{opacity:1} }\n @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 40%{transform:translateX(4px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} }\n @keyframes overlay-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }\n @keyframes ind-flash { 0%,100%{border-color:rgba(204,68,0,.3)} 50%{border-color:rgba(204,68,0,.9)} }\n .ff { animation:flicker1 .3s ease-in-out infinite; transform-origin:bottom center; }\n .ff2 { animation:flicker2 .4s ease-in-out infinite .15s; transform-origin:bottom center; }\n .sm1 { animation:smoke-rise 2.2s ease-out infinite; }\n .sm2 { animation:smoke2 2.8s ease-out infinite .6s; }\n .sm3 { animation:smoke-rise 3.1s ease-out infinite 1.2s; }\n .gp { animation:glow-pulse .8s ease-in-out infinite; }\n .option-btn { width:100%; padding:14px 18px; margin-bottom:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:#F0EBE0; font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1.5; text-align:left; cursor:pointer; transition:all .15s ease; letter-spacing:.02em; }\n .option-btn:hover:not(:disabled) { background:rgba(255,100,0,.12); border-color:rgba(255,100,0,.4); color:#FF8C42; }\n .option-btn.sc { background:rgba(0,200,80,.1); border-color:#00C850; color:#00C850; }\n .option-btn.sw { background:rgba(220,30,30,.1); border-color:#DC1E1E; color:#FF6B6B; animation:shake .3s ease; }\n .option-btn.rc { background:rgba(0,200,80,.06); border-color:rgba(0,200,80,.4); color:rgba(0,200,80,.7); }\n .option-btn:disabled { cursor:default; }\n .fbx { background:rgba(255,255,255,.03); border-left:3px solid #FF6B00; padding:16px 18px; animation:slide-up .3s ease; }\n .aic { background:rgba(0,0,0,.4); border:1px solid rgba(255,100,0,.2); padding:16px; margin-top:12px; animation:fade-in .5s ease; }\n .nb { background:#CC1100; color:#fff; border:none; font-family:'Oswald',sans-serif; font-size:15px; font-weight:600; letter-spacing:.1em; padding:14px 32px; cursor:pointer; transition:all .15s; text-transform:uppercase; }\n .nb:hover:not(:disabled) { background:#FF1A00; transform:translateY(-1px); }\n .nb:disabled { opacity:.5; cursor:default; }\n .sdot { width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.3); transition:all .3s; }\n .sdot.active { background:#FF6B00; border-color:#FF6B00; }\n .sdot.done { background:rgba(255,107,0,.4); border-color:rgba(255,107,0,.4); }\n .cov { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.93); overflow-y:auto; animation:overlay-in .25s ease; padding:24px 16px 48px; }\n .ccard { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:14px; margin-bottom:10px; }\n .ccard.aw { border-color:rgba(204,68,0,.6); animation:ind-flash 1.2s ease-in-out infinite; }\n .ssc { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:22px 18px; cursor:pointer; transition:all .2s; text-align:left; width:100%; margin-bottom:10px; }\n .ssc:hover { background:rgba(255,100,0,.08); border-color:rgba(255,100,0,.4); }\n .intro-s,.res-s { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:32px 20px; text-align:center; animation:fade-in .6s ease; }\n`;\n\n// ─── COLLAPSE INDICATORS ───────────────────────────────────────────────────────\nconst INDICATORS = [\n { id:\"bowing\", title:\"BOWING / BULGING WALL\", sev:\"IMMINENT\", sevColor:\"#CC1100\",\n desc:\"Any outward deflection of a masonry wall means structural failure is in progress. Not a warning — a verdict. Get out.\",\n note:\"Can develop in 8–10 minutes in a wood frame with attic involvement.\",\n applies:[\"woodFrame\",\"tenement\"],\n svg:\n },\n { id:\"cracks\", title:\"DIAGONAL CRACKS IN MASONRY\", sev:\"CRITICAL\", sevColor:\"#CC4400\",\n desc:\"Diagonal cracks at 45° from window corners mean the wall is under shear stress. The building is moving.\",\n note:\"In old law tenements, check brick above window lintels and at building corners.\",\n applies:[\"tenement\"],\n svg:\n },\n { id:\"spongy\", title:\"SPONGY / SAGGING FLOORS\", sev:\"IMMINENT\", sevColor:\"#CC1100\",\n desc:\"If the floor gives under your weight, joists are burning through. You are standing on a ceiling. The fire is directly below you. Leave immediately.\",\n note:\"Wood joists in a cellar fire can fail in under 10 minutes. Dunn's cardinal rule.\",\n applies:[\"woodFrame\",\"cellar\"],\n svg:\n },\n { id:\"time\", title:\"TIME — THE INVISIBLE KILLER\", sev:\"ALWAYS\", sevColor:\"#888\",\n desc:\"Time is the most reliable collapse predictor. Nobody tracks it carefully enough. Your watch is as important as your hoseline.\",\n note:\"Wood frame: 10–15 min. Old law tenement: 15–20 min. These are deadlines, not guidelines.\",\n applies:[\"woodFrame\",\"cellar\",\"tenement\"],\n svg:\n },\n { id:\"parapet\", title:\"PARAPET / FACADE SEPARATION\", sev:\"CRITICAL\", sevColor:\"#CC4400\",\n desc:\"In old law tenements, the parapet is held by mortar. Fire deteriorates mortar. A falling parapet kills anyone on the sidewalk.\",\n note:\"Collapse zone = building height measured from base of wall. Enforce it.\",\n applies:[\"tenement\"],\n svg:\n },\n { id:\"cellar-access\", title:\"LIMITED CELLAR ACCESS\", sev:\"CRITICAL\", sevColor:\"#CC4400\",\n desc:\"A cellar has only two or three access points. Fire owns the stairway — it's a chimney. Interior stairs are not an option.\",\n note:\"Cellar pipe or distributor through the floor before any crew descends. No exceptions.\",\n applies:[\"cellar\"],\n svg:\n },\n { id:\"water-weight\", title:\"WATER WEIGHT LOADING\", sev:\"WARNING\", sevColor:\"#FFCC00\",\n desc:\"Hoselines add hundreds of pounds to an already compromised structure. You are fighting fire and loading a failing building simultaneously.\",\n note:\"In cellars especially: water accumulates, weight increases, floor joists fail faster.\",\n applies:[\"cellar\",\"woodFrame\",\"tenement\"],\n svg:\n },\n { id:\"backdraft\", title:\"BACKDRAFT CONDITIONS\", sev:\"IMMINENT\", sevColor:\"#CC1100\",\n desc:\"Dense smoke, no visible flame, pulsing at door gaps, stained windows: that room is superheated and oxygen-starved. Opening it without a line kills people.\",\n note:\"Never vent a cellar without a charged hoseline in position and crews out of the flow path.\",\n applies:[\"cellar\"],\n svg:\n }\n];\n\n// ─── SCENARIO SETS ─────────────────────────────────────────────────────────────\nconst SETS = {\n woodFrame: {\n label:\"WOOD FRAME DWELLING\", sub:\"2½-Story • Brooklyn Residential\", icon:\"🏠\", color:\"#FF6B00\",\n desc:\"The most common working fire in New York City. Wood frame buildings with attic involvement collapse fast. Time limits. Construction awareness. Know when to pull your crews.\",\n stages:[\n { stage:1, title:\"FIRST DUE ARRIVAL\", callSign:\"BOX 2-2-1447\", subtitle:\"2-Story Wood Frame • Brooklyn\", time:\"00:00\",\n description:\"You are first due. Dispatch: residential structure fire, occupied dwelling. On approach: smoke from one second-floor window, moderate volume, light gray. No visible flame. No other apparatus on scene. 2:30 AM.\",\n tactical:\"Wood frame, circa 1910. ~1,100 sq ft per floor. Time of night: maximum life hazard.\",\n sceneType:\"woodFrame\", fi:1, activeIndicators:[],\n question:\"You step off the apparatus. What is your FIRST priority size-up action?\",\n opts:[\n {id:\"a\",text:\"Locate nearest hydrant and establish water supply before any interior operation\",c:false},\n {id:\"b\",text:\"Assess life hazard — determine if occupied and likely location of occupants\",c:true},\n {id:\"c\",text:\"Position apparatus for maximum hose line stretch to the front entrance\",c:false},\n {id:\"d\",text:\"Transmit a second alarm based on building type and time of night\",c:false},\n ],\n fb:{y:\"Correct. Life Hazard is paramount. 2:30 AM — people are sleeping. That changes everything about how fast you move and where you commit your crews.\",n:\"Life Hazard first. Always. Water supply matters — but in service of lives. Knowing who's inside and where shapes every tactical decision.\"}\n },\n { stage:2, title:\"FIRE EXTENDING\", callSign:\"BOX 2-2-1447 — T+3\", subtitle:\"Two Windows • Eave Line Showing\", time:\"03:10\",\n description:\"Fire extended. Two second-floor windows fully involved. Dense black smoke pushing hard from the eave line — attic involvement confirmed. Neighbor confirms: family of four, two young children. No one seen exiting.\",\n tactical:\"Eave smoke means the attic is burning. In a wood frame, the attic is the structural skeleton of the roof.\",\n sceneType:\"woodFrame\", fi:2, activeIndicators:[\"time\",\"spongy\"],\n question:\"Fire is now in the attic. What is the CRITICAL tactical decision?\",\n opts:[\n {id:\"a\",text:\"Request additional engine for increased water supply and flow\",c:false},\n {id:\"b\",text:\"Commit a hose line through the front door for direct attack on the fire floor\",c:false},\n {id:\"c\",text:\"Set a firm interior time limit immediately — attic involvement means structural failure is coming fast\",c:true},\n {id:\"d\",text:\"Request aerial for roof ventilation to relieve attic pressure\",c:false},\n ],\n fb:{y:\"Correct. The clock starts now. Attic involvement in a wood frame means the load-bearing members of the roof are on fire. You have minutes — not many — before it comes down on your interior crews.\",n:\"Construction is the issue. Wood frame attic = structural roof supports on fire. Set a time limit before any crew goes interior. Non-negotiable.\"}\n },\n { stage:3, title:\"CIVILIAN AT WINDOW\", callSign:\"BOX 2-2-1447 — MAYDAY POTENTIAL\", subtitle:\"Life Hazard Confirmed • Three Windows\", time:\"05:30\",\n description:\"A civilian is visible at the second-floor window directly above the heaviest fire. Three windows fully involved. Attic fully involved. Interior crew radios: 'Second floor hallway untenable — zero visibility, floor is hot.'\",\n tactical:\"Civilian above fire. Interior crew cannot safely reach via stairs. You have one 24-foot portable ladder. Aerial not yet on scene.\",\n sceneType:\"woodFrame\", fi:3, activeIndicators:[\"time\",\"spongy\"],\n question:\"Confirmed civilian above the fire. Interior untenable. What is the correct action?\",\n opts:[\n {id:\"a\",text:\"Order interior crew to push through the hallway to attempt primary search\",c:false},\n {id:\"b\",text:\"Immediate portable ladder to the window; simultaneous hose line to fire below to protect the rescue\",c:true},\n {id:\"c\",text:\"Direct civilian to stay low and wait — attempt interior first, then exterior if that fails\",c:false},\n {id:\"d\",text:\"Hold rescue until aerial arrives — portable ladder insufficient for a panicked civilian\",c:false},\n ],\n fb:{y:\"Correct. You have a ladder and a window. Use them. The hose line at the fire base slows fire travel to the window and protects the firefighter on the ladder. Interior conditions are irrelevant.\",n:\"You have a ladder and a window. That's all you need. A simultaneous hose line at the fire base protects the rescuer. Waiting for aerial while someone burns above active fire is not an option.\"}\n },\n { stage:4, title:\"STRUCTURAL COMPROMISE\", callSign:\"BOX 2-2-1447 — 12 MINUTES\", subtitle:\"Fire Through Roof • Collapse Indicators\", time:\"12:00\",\n description:\"Twelve minutes on fire. Flames venting through roof in two locations. Interior crew: 'Floor is spongy — sinking with each step.' From outside: front wall bowing outward 3–4 inches at second floor. Fire not knocked. Two crews inside.\",\n tactical:\"Bowing wall. Spongy floors. 12 minutes, wood frame. Time of survivable interior operations: almost certainly elapsed.\",\n sceneType:\"woodFrame\", fi:4, activeIndicators:[\"bowing\",\"spongy\",\"time\",\"water-weight\"],\n question:\"Bowing wall. Compromised floors. Two crews inside. What is your command decision?\",\n opts:[\n {id:\"a\",text:\"Push interior crews — complete primary search before withdrawal\",c:false},\n {id:\"b\",text:\"Maintain interior but post safety officer to monitor wall movement\",c:false},\n {id:\"c\",text:\"Immediate PAR. Withdraw ALL interior crews. Establish collapse zone. Defensive operations.\",c:true},\n {id:\"d\",text:\"Increase water flow — knock the fire fast and collapse risk drops\",c:false},\n ],\n fb:{y:\"Correct. A bowing wall is not a warning. It is a collapse in progress. Spongy floors mean the joists are gone. The order to withdraw is the hardest to give and the most important. You give it.\",n:\"A bowing wall is a collapse in progress. 'Spongy' floors mean structural supports have burned through. No objective inside justifies the risk. PAR, withdrawal, collapse zone. That order saves lives.\"}\n }\n ]\n },\n cellar: {\n label:\"CELLAR FIRE\", sub:\"Taxpayer Building • Queens\", icon:\"🔥\", color:\"#CC1100\",\n desc:\"Dunn's specialty — and the most dangerous type of structural fire. Fire below grade. Limited access. The floor above your crews is a ceiling over a furnace.\",\n stages:[\n { stage:1, title:\"SMOKE IN THE CELLAR\", callSign:\"BOX 7-7-0822\", subtitle:\"Commercial Taxpayer • Queens\", time:\"00:00\",\n description:\"First due to a one-story taxpayer building. 11 PM — building appears closed. Heavy gray smoke pushing from cellar windows at grade level and from gaps around the cellar door. No visible flame. Smoke is pulsing slightly.\",\n tactical:\"Taxpayer building, circa 1940. Cellar = full footprint. One interior staircase. One bulkhead door on side.\",\n sceneType:\"cellar\", fi:1, activeIndicators:[\"cellar-access\",\"backdraft\"],\n question:\"Heavy smoke from cellar. Pulsing at door gaps. No visible flame. What is your immediate assessment?\",\n opts:[\n {id:\"a\",text:\"Force the cellar door and send a crew down the interior stairs with a hose line\",c:false},\n {id:\"b\",text:\"Pulsing smoke with no visible flame indicates backdraft potential — position a charged hose line before opening any access point\",c:true},\n {id:\"c\",text:\"Open all cellar windows immediately to ventilate before committing crews\",c:false},\n {id:\"d\",text:\"Transmit additional alarms based on building size and cellar fire designation\",c:false},\n ],\n fb:{y:\"Correct. Pulsing smoke with no visible flame in an enclosed space is a backdraft indicator. That cellar is superheated and oxygen-starved. Opening it without a charged line is a death sentence for anyone nearby.\",n:\"Pulsing smoke with no visible flame means backdraft conditions. That cellar is loaded with superheated gases waiting for oxygen. Never open it without a charged line in position.\"}\n },\n { stage:2, title:\"FIRE IN THE CELLAR\", callSign:\"BOX 7-7-0822 — T+4\", subtitle:\"Flames Through Floorboards • First Floor Heating\", time:\"04:20\",\n description:\"Cellar door breached with line in place. Active fire confirmed. Flames visible through floor boards in two locations on the first floor. Floor heating rapidly — 120°F at grade. Interior staircase fully involved. Store stock piled to ceiling.\",\n tactical:\"Fire below grade. Interior stairs: impassable. The first floor is now a ceiling over a furnace. Every firefighter on the first floor is above the fire.\",\n sceneType:\"cellar\", fi:2, activeIndicators:[\"cellar-access\",\"spongy\",\"time\"],\n question:\"Fire visible through first floor. Stairs gone. What is the correct tactical approach?\",\n opts:[\n {id:\"a\",text:\"Advance a hose line down the bulkhead stairs to attack from cellar level\",c:false},\n {id:\"b\",text:\"Open the first floor and use a cellar pipe or Bresnan distributor through the floor into the cellar\",c:true},\n {id:\"c\",text:\"Use the aerial master stream through front windows to knock the first floor fire\",c:false},\n {id:\"d\",text:\"Cut a trench in the first floor and advance a line down through the opening\",c:false},\n ],\n fb:{y:\"Correct. The cellar pipe — Bresnan distributor — through the floor. Apply water into the cellar from above without putting crews below grade. The first floor is not a platform — it is a ceiling over a furnace.\",n:\"The Bresnan distributor through the floor. You apply water from above into the cellar. Sending crews down stairs into an active cellar fire is extremely dangerous. This is fundamental cellar fire doctrine.\"}\n },\n { stage:3, title:\"FLOOR FAILURE WARNING\", callSign:\"BOX 7-7-0822 — T+9\", subtitle:\"Floor Moving • Crew on First Floor\", time:\"09:00\",\n description:\"Crew operating on first floor with hose line. Flames visible through multiple floor gaps — fire not knocked. Firefighter radios: 'Floor is giving — I can feel it moving under me.' Second reports: 'I can see fire directly below me through a gap near the counter.'\",\n tactical:\"9 minutes on a cellar fire. First floor joists burning through. Crews standing on a floor that is actively failing.\",\n sceneType:\"cellar\", fi:3, activeIndicators:[\"spongy\",\"time\",\"water-weight\"],\n question:\"Your crew on the first floor reports the floor is moving under them. What is your order?\",\n opts:[\n {id:\"a\",text:\"Direct crews to move to the rear — floor may be more stable there\",c:false},\n {id:\"b\",text:\"Maintain position — cellar pipe will knock the fire and floor will stabilize\",c:false},\n {id:\"c\",text:\"Immediate withdrawal of ALL first floor crews. Get out now. No delay.\",c:true},\n {id:\"d\",text:\"Have crews advance toward the front — structural support from the front wall is stronger\",c:false},\n ],\n fb:{y:\"Correct. A moving floor means joists are burning through from below. No stable position exists on a floor actively failing over a cellar fire. One order: get out. Now.\",n:\"'Floor is giving' means joists are burning through. There is no stable part of that floor. There is no waiting. The only order is immediate withdrawal.\"}\n },\n { stage:4, title:\"FIRST FLOOR COLLAPSE\", callSign:\"BOX 7-7-0822 — MAYDAY\", subtitle:\"Partial Collapse • Firefighter Unaccounted\", time:\"14:00\",\n description:\"A section of the first floor has collapsed into the cellar — roughly 15 by 20 feet. Partial MAYDAY transmission received. Roll call: one firefighter unaccounted. Fire venting through collapse opening and first floor windows. Front wall shows a diagonal crack above the display window.\",\n tactical:\"MAYDAY declared. Firefighter potentially in the cellar. Diagonal cracks in front wall. 14 minutes on a cellar fire. Entire first floor is collapse-compromised.\",\n sceneType:\"cellar\", fi:4, activeIndicators:[\"cracks\",\"spongy\",\"time\",\"water-weight\"],\n question:\"MAYDAY received. Partial floor collapse. One firefighter unaccounted. Diagonal cracks in front wall. What is your command action?\",\n opts:[\n {id:\"a\",text:\"Send RIT team through the front door immediately to locate the missing firefighter\",c:false},\n {id:\"b\",text:\"MAYDAY acknowledgment, full PAR, RIT deploys to collapse opening only — no interior ops on first floor, establish collapse zone on front wall\",c:true},\n {id:\"c\",text:\"Increase water application through collapse opening while RIT enters through front door\",c:false},\n {id:\"d\",text:\"Evacuate all personnel 50 feet and transition to exterior operations only\",c:false},\n ],\n fb:{y:\"Correct. This is the hardest moment in firefighting. A brother is missing and every instinct says go in. But the front wall is failing. The first floor is gone. Sending more crews in creates more MAYDAYs. RIT to the collapse point only. Controlled, disciplined rescue.\",n:\"A MAYDAY with a collapsing wall requires command discipline, not reaction. Sending RIT through the front door puts them on a compromised floor with a failing wall. RIT to the collapse opening only. Collapse zone on the front wall. Emotion costs lives in this moment.\"}\n }\n ]\n },\n tenement: {\n label:\"OLD LAW TENEMENT\", sub:\"5-Story Brownstone • Brooklyn\", icon:\"🏢\", color:\"#FF8C42\",\n desc:\"The classic Don Van Holt scenario — straight from NYFD.COM's 1998 size-up challenge. Old law tenements with air shafts, deteriorated mortar, and parapets that kill.\",\n stages:[\n { stage:1, title:\"TOP FLOOR FIRE\", callSign:\"BOX 4-4-2291\", subtitle:\"5-Story Old Law Tenement • Brooklyn\", time:\"00:00\",\n description:\"First due to a 5-story old law tenement — brownstone, pre-1901. Fire showing from two windows on the top (5th) floor, left side. Heavy smoke from the air shaft between this building and the adjoining one. Building fully occupied. Front fire escape visible, no occupants on it.\",\n tactical:\"Old law tenement. Old dry wood. Narrow air shaft. One interior stairway. Front fire escape does NOT reach the roof.\",\n sceneType:\"tenement\", fi:1, activeIndicators:[\"time\",\"parapet\"],\n question:\"Top floor fire, air shaft smoking. What does the air shaft smoke tell you?\",\n opts:[\n {id:\"a\",text:\"The air shaft is venting — fire spread to the adjacent building is less likely\",c:false},\n {id:\"b\",text:\"Air shaft smoke means fire has entered the shaft — every apartment opening onto it on every floor is now threatened\",c:true},\n {id:\"c\",text:\"Air shaft smoke is a ventilation problem — open the roof to clear it\",c:false},\n {id:\"d\",text:\"Air shaft smoke indicates the adjacent building may have a separate ignition\",c:false},\n ],\n fb:{y:\"Correct. The air shaft in an old law tenement is a chimney. Every apartment opening onto that shaft — on every floor below — is being filled with smoke and heat right now. Your life hazard just multiplied by the number of floors.\",n:\"The air shaft in an old law tenement is a chimney. Fire and smoke travel it instantly. Every apartment on every floor below is threatened simultaneously.\"}\n },\n { stage:2, title:\"FIRE EXTENDING VIA SHAFT\", callSign:\"BOX 4-4-2291 — T+5\", subtitle:\"Multiple Floors • Civilians at Windows\", time:\"05:00\",\n description:\"Fire extended. Third and fourth floor windows opening onto the air shaft now show smoke and flame. Civilians visible at windows on the 2nd, 3rd, and 4th floors — at least four people. Interior stairway: heavy smoke above 2nd floor landing. Roof door reportedly open. Aerial on scene.\",\n tactical:\"Multiple civilians across multiple floors. Interior stairs compromised above 2nd floor. Tower ladder positioned front.\",\n sceneType:\"tenement\", fi:2, activeIndicators:[\"time\",\"parapet\"],\n question:\"Multiple civilians at windows across four floors. What is the priority order of operations?\",\n opts:[\n {id:\"a\",text:\"Concentrate tower ladder on top floor fire knockdown — putting out the fire stops everything else\",c:false},\n {id:\"b\",text:\"Search fire floor first — primary search is always priority\",c:false},\n {id:\"c\",text:\"Tower ladder to civilians at highest immediate risk; simultaneously advance hose line to fire floor; engine protects stair for lower floor egress\",c:true},\n {id:\"d\",text:\"Evacuate entire building via fire escapes before any fire attack\",c:false},\n ],\n fb:{y:\"Correct. Multiple simultaneous life hazards require simultaneous operations. Tower ladder handles the highest-risk civilians while the interior line goes to the fire. Protecting the stair lets the lower floors self-evacuate.\",n:\"Multiple simultaneous life hazards cannot be addressed one at a time. Tower ladder to the most endangered civilians, hose line to the fire floor, stair protection for self-evacuation. These must happen simultaneously.\"}\n },\n { stage:3, title:\"FIRE THROUGH ROOF\", callSign:\"BOX 4-4-2291 — T+12\", subtitle:\"Heavy Fire • Parapet Concerns\", time:\"12:00\",\n description:\"Fire has vented through the roof. Heavy fire on the top two floors. Civilians evacuated. Roof crew: 'Roof is soft — pulling back to fire escape.' From the street: the front parapet — a 3-foot decorative brick parapet — shows a separation crack on the right side. The wall appears to be pulling away from the roof line.\",\n tactical:\"12 minutes on an old law tenement. Parapet separation. Roof crew on fire escape. Interior crews still on 3rd and 4th floors.\",\n sceneType:\"tenement\", fi:3, activeIndicators:[\"parapet\",\"bowing\",\"time\"],\n question:\"Parapet separation visible from the street. Interior crews on 3rd and 4th floors. What is your order?\",\n opts:[\n {id:\"a\",text:\"Direct interior crews to the far side of the building, away from the parapet\",c:false},\n {id:\"b\",text:\"Notify interior crews of the parapet condition and let them assess from inside\",c:false},\n {id:\"c\",text:\"Withdraw ALL interior crews immediately. Establish collapse zone front of building. Transition to exterior operations.\",c:true},\n {id:\"d\",text:\"Have roof crew knock the parapet from the fire escape to remove the collapse hazard\",c:false},\n ],\n fb:{y:\"Correct. A separating parapet is coming down. It will kill anyone below it. The interior crews must come out. The collapse zone must be established. There is no tactical objective inside worth more than the lives of those crews.\",n:\"A parapet showing separation is coming down. Period. There is no repositioning that makes interior crews safe from a falling parapet. Withdraw, collapse zone, exterior operations.\"}\n },\n { stage:4, title:\"DEFENSIVE TRANSITION\", callSign:\"BOX 4-4-2291 — T+20\", subtitle:\"Structural Failure • Exposure Protection\", time:\"20:00\",\n description:\"20 minutes on a fully involved old law tenement. Parapet partially collapsed — no casualties, collapse zone established. Fire through roof, heavy fire on top three floors. Adjacent building (evacuated) showing heat discoloration on the party wall. All interior operations withdrawn. You have aerial streams and two engine companies.\",\n tactical:\"Defensive operations. Exposure protection critical. The party wall to the adjoining building may fail. If it does, the fire walks down the block.\",\n sceneType:\"tenement\", fi:4, activeIndicators:[\"parapet\",\"cracks\",\"water-weight\",\"time\"],\n question:\"Defensive operations. The party wall is at risk. What is your priority?\",\n opts:[\n {id:\"a\",text:\"Concentrate all streams on the fire building — knock the fire and the party wall risk disappears\",c:false},\n {id:\"b\",text:\"Split streams: aerial on fire building, engine companies protect exposure building and the party wall face\",c:true},\n {id:\"c\",text:\"Evacuate entire block — party wall failure risk too high to continue operations\",c:false},\n {id:\"d\",text:\"Reopen interior operations on lower floors of fire building to cut off extension to exposure\",c:false},\n ],\n fb:{y:\"Correct. Exposure protection in defensive ops means you protect the building NOT on fire. Party wall failure in a block of old law tenements means the fire walks down the entire row. Aerial holds the fire building; engine companies protect the exposure.\",n:\"Exposure protection is the priority in defensive operations. Concentrating everything on the fire building while the party wall fails means the fire spreads building by building. Split your resources.\"}\n }\n ]\n }\n};\n\n// ─── SVG COMPONENTS ────────────────────────────────────────────────────────────\nfunction Fl({ x, y, w, h, d=0, c=\"ff\" }: { x: number; y: number; w: number; h: number; d?: number; c?: string }) {\n return (\n \n \n \n \n \n );\n}\nfunction Sm({ cx, cy, r, c, d=0 }: { cx: number; cy: number; r: number; c: string; d?: number }) {\n return ;\n}\n\nfunction FireScene({ sceneType, fi }: { sceneType: string; fi: number }) {\n const D = () => (\n \n \n \n \n \n \n \n \n \n \n \n =3?\"#1a0800\":\"#080d18\"}/>\n \n \n =3?\".4\":\".2\"}/>\n \n \n \n \n \n );\n\n if (sceneType === \"woodFrame\") {\n const w1=fi>=1,w2=fi>=2,w3=fi>=3,at=fi>=2,rt=fi>=4,bw=fi>=4;\n return (\n \n );\n }\n\n if (sceneType === \"cellar\") {\n const cf=fi>=1,ff=fi>=2,cp=fi>=3,cl=fi>=4;\n return (\n \n );\n }\n\n // TENEMENT\n const t1=fi>=1,t2=fi>=2,t3=fi>=3,t4=fi>=4;\n return (\n \n );\n}\n\n// ─── COLLAPSE OVERLAY ──────────────────────────────────────────────────────────\nfunction CollapseOverlay({ onClose, activeIds=[], sceneType }: { onClose: () => void; activeIds?: string[]; sceneType?: string }) {\n const list = INDICATORS.filter(i => !sceneType || i.applies.includes(sceneType));\n return (\n

{if(e.target===e.currentTarget)onClose();}}>\n

COLLAPSE INDICATORS

BASED ON THE WORK OF DEPUTY CHIEF VINCENT DUNN, FDNY (RET.)

\n \n

\n \"The most important skill in firefighting is recognizing when a building is about to collapse — and having the discipline to act on that recognition even when everything in you wants to stay and fight the fire.\"\n

— Deputy Chief Vincent Dunn, FDNY (Ret.)

\n {list.map(ind=>(\n

{ind.svg}

{ind.title}

{ind.sev}

{ind.desc}

▸ {ind.note}

\n {activeIds.includes(ind.id)&&

⚠ ACTIVE IN CURRENT SCENARIO

}\n

\n ))}\n

\n );\n}\n\n// ─── MAIN APP ──────────────────────────────────────────────────────────────────\nexport default function SizeUpApp() {\n const [screen, setScreen] = useState(\"intro\");\n const [setKey, setSetKey] = useState(null);\n const [stages, setStages] = useState([]);\n const [si, setSi] = useState(0);\n const [sel, setSel] = useState(null);\n const [showFb, setShowFb] = useState(false);\n const [score, setScore] = useState(0);\n const [answers, setAnswers] = useState([]);\n const [aiTxt, setAiTxt] = useState(\"\");\n const [aiLoad, setAiLoad] = useState(false);\n const [showCI, setShowCI] = useState(false);\n const fbRef = useRef(null);\n\n useEffect(()=>{\n const el=document.createElement(\"style\");\n el.id=\"su-css\";el.textContent=CSS;\n if(!document.getElementById(\"su-css\"))document.head.appendChild(el);\n return()=>document.getElementById(\"su-css\")?.remove();\n },[]);\n\n const sc = stages[si];\n\n const startSet = (k: string) => {\n setSetKey(k);setStages((SETS as any)[k].stages);setSi(0);setSel(null);\n setShowFb(false);setScore(0);setAnswers([]);setAiTxt(\"\");\n setScreen(\"scenario\");\n };\n\n const pick = async (opt: any) => {\n if(sel)return;\n setSel(opt.id);setShowFb(true);\n if(opt.c)setScore(s=>s+1);\n setAnswers(p=>[...p,{correct:opt.c}]);\n setTimeout(()=>fbRef.current?.scrollIntoView({behavior:\"smooth\",block:\"start\"}),150);\n setAiLoad(true);setAiTxt(\"\");\n try {\n const r = await fetch(\"/api/ai-commentary\",{\n method:\"POST\",\n headers:{\"Content-Type\":\"application/json\"},\n body:JSON.stringify({\n setLabel: (SETS as any)[setKey!]?.label,\n stageTitle: sc?.title,\n description: sc?.description,\n tactical: sc?.tactical,\n question: sc?.question,\n answerText: opt.text,\n correct: opt.c,\n correctAnswer: sc?.opts?.find((o:any)=>o.c)?.text\n })\n });\n const d = await r.json();\n setAiTxt(d.text || \"Commentary unavailable.\");\n } catch { setAiTxt(\"Commentary unavailable. Study the tactical feedback above.\"); }\n setAiLoad(false);\n };\n\n const next = () => {\n if(sii+1);setSel(null);setShowFb(false);setAiTxt(\"\");window.scrollTo({top:0,behavior:\"smooth\"});}\n else setScreen(\"results\");\n };\n\n const restart = () => {\n setScreen(\"select\");setSetKey(null);setStages([]);setSi(0);\n setSel(null);setShowFb(false);setScore(0);setAnswers([]);setAiTxt(\"\");\n };\n\n // INTRO\n if(screen===\"intro\") return (\n

\n \n

NYFD.COM PRESENTS

SIZE UP

INTERACTIVE FIREFIGHTING DECISION TRAINER

\n \"An ongoing evaluation of problems encountered in a fire or emergency situation. What do you see?\"\n

Don Van Holt, Ret. Ladder Co. 108 — NYFD.COM, October 1998

\n Three building types. Sequential fire stages. AI commentary in the voice of Deputy Chief Vincent Dunn, FDNY (Ret.).\n

\n \n

IN MEMORY OF DON VAN HOLT • LADDER CO. 108 • FDNY

\n );\n\n // SELECT\n if(screen===\"select\") return (\n

SELECT BUILDING TYPE

CHOOSE YOUR SCENARIO

Construction type determines collapse risk, time limits, and tactical options. Choose carefully.

\n {Object.entries(SETS).map(([k,s])=>(\n \n ))}\n \n

\n );\n\n // RESULTS\n if(screen===\"results\") {\n const pct=Math.round((score/stages.length)*100);\n const grade=pct===100?\"FIRE GROUND READY\":pct>=75?\"SOLID SIZING\":pct>=50?\"NEEDS WORK\":\"BACK TO BASICS\";\n const gc=pct===100?\"#00C850\":pct>=75?\"#FF8C42\":pct>=50?\"#FFCC00\":\"#DC1E1E\";\n return (\n

SIZE-UP COMPLETE — {(SETS as any)[setKey!]?.label}

{score}/{stages.length}

{grade}

\n {stages.map((s:any,i:number)=>(\n

{answers[i]?.correct?\"✓\":\"✗\"}

STAGE {s.stage}

{s.title}

\n ))}\n

\n \n \n

NYFD.COM — SIZE-UP CHALLENGE — EST. 1998

\n {showCI&&setShowCI(false)} activeIds={[]} sceneType={setKey!}/>}\n

\n );\n }\n\n if(!sc) return null;\n const isCorrect = sel && sc.opts.find((o:any)=>o.id===sel)?.c;\n\n return (\n

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

SIZE UP

{stages.map((_:any,i:number)=>

)}

\n \n

{score}/{si+(showFb?1:0)}

\n\n {/* Dispatch */}\n

{sc.callSign}

{(SETS as any)[setKey!]?.label} • STAGE {sc.stage}/4

\n\n {/* Fire scene */}\n

\n \n

{sc.title}

{sc.subtitle}

=3?\"#FF2200\":\"#FF6B00\",fontWeight:500}}>T+{sc.time}

\n {sc.activeIndicators?.length>0&&(\n

setShowCI(true)} style={{position:\"absolute\",top:9,right:10,background:\"rgba(204,68,0,.2)\",border:\"1px solid rgba(204,68,0,.5)\",padding:\"4px 9px\",fontSize:8,color:\"#CC4400\",letterSpacing:\".1em\",cursor:\"pointer\",animation:\"glow-pulse 1.2s infinite\"}}>\n ⚠ {sc.activeIndicators.length} COLLAPSE INDICATOR{sc.activeIndicators.length>1?\"S\":\"\"} ACTIVE\n

\n )}\n

\n\n {/* Content */}\n

SCENE REPORT

{sc.description}

▸ {sc.tactical}

\n\n

\n \"What do you see?\"\n

\n\n

{sc.question}

\n\n

\n {sc.opts.map((opt:any)=>{\n let cls=\"option-btn\";\n if(sel){\n if(opt.id===sel)cls+=opt.c?\" sc\":\" sw\";\n else if(opt.c&&!isCorrect)cls+=\" rc\";\n }\n return (\n \n );\n })}\n

\n\n {showFb&&(\n

{isCorrect?\"✓ CORRECT — TACTICAL ASSESSMENT\":\"✗ INCORRECT — REVIEW\"}

{isCorrect?sc.fb.y:sc.fb.n}

▸ CHIEF VINCENT DUNN, FDNY (RET.) — TACTICAL COMMENTARY

\n {aiLoad\n ?

Receiving commentary...

\n :

{aiTxt}

\n }\n

\n {sc.activeIndicators?.length>0&&(\n

setShowCI(true)} style={{marginTop:9,background:\"rgba(204,68,0,.06)\",border:\"1px solid rgba(204,68,0,.25)\",padding:\"9px 13px\",cursor:\"pointer\",display:\"flex\",justifyContent:\"space-between\",alignItems:\"center\"}}>\n

⚠ {sc.activeIndicators.length} COLLAPSE INDICATOR{sc.activeIndicators.length>1?\"S\":\"\"} PRESENT IN THIS SCENARIO

VIEW REF ›

\n )}\n

\n )}\n\n

INSPIRED BY DON VAN HOLT'S SIZE-UP CHALLENGE — NYFD.COM — EST. 1998

\n\n {showCI&&setShowCI(false)} activeIds={sc.activeIndicators||[]} sceneType={setKey!}/>}\n

\n );\n}",[],[131,174],["D",1776809201129],[148,149,150],[131],["D",1776808717683],{"_11":12,"_85":81},{"_11":12,"_79":-5,"_80":81,"_44":45,"_82":83,"_84":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_74":-5,"_75":-5,"_76":-5,"_77":14,"_78":12},"ctx",{"_67":-5,"_108":222,"_223":224,"_225":226,"_227":38,"_228":38,"_229":38,"_230":106,"_231":-5,"_232":-7,"_233":-7,"_234":51,"_235":38,"_236":38,"_237":-5,"_238":38,"_239":38,"_240":38,"_241":-5},"ENV",{"_193":194,"_195":196,"_197":26,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1