br-debrief.jsx
1 // Brutalist POST-FLIGHT DEBRIEF — Form 58. 2 // Mission narrative, telemetry summary, drive / fuel / weapon logs, 3 // pilot narrative, yard notes, AAR (after-action review) grid. 4 5 function BRDebrief({ onNav }) { 6 const ship = makeShip("KRV-IC-2849-AX"); 7 8 // Tiny sparkline helper 9 const spark = (vals, color) => { 10 const max = Math.max(...vals), min = Math.min(...vals); 11 const w = 180, h = 40; 12 const pts = vals.map((v, i) => { 13 const x = (i/(vals.length-1)) * w; 14 const y = h - ((v - min) / (max - min || 1)) * (h - 4) - 2; 15 return `${x.toFixed(1)},${y.toFixed(1)}`; 16 }).join(" "); 17 return ( 18 <svg width={w} height={h} style={{display:"block"}}> 19 <polyline fill="none" stroke={color} strokeWidth="1.5" points={pts}/> 20 </svg> 21 ); 22 }; 23 24 // Synthesize curves 25 const fuel = Array.from({length:40}, (_,i) => 1 - (i/40)*0.58 + Math.sin(i*0.4)*0.01); 26 const vel = Array.from({length:40}, (_,i) => 0.2 + Math.sin(i*0.3)*0.25 + (i>20 ? 0.4 : 0.1)); 27 const gload = Array.from({length:40}, (_,i) => 1 + Math.abs(Math.sin(i*0.5))*3 + (i>28 ? 2 : 0)); 28 const heat = Array.from({length:40}, (_,i) => 0.3 + i*0.012 + (i>30 ? 0.3 : 0)); 29 30 return ( 31 <BRPage minHeight={2200}> 32 <BRNav active="debrief" cartCount={0} onNav={onNav}/> 33 34 {/* HEADER */} 35 <div style={{padding:"30px 40px 22px", borderBottom:`4px double ${BR.ink}`, display:"flex", justifyContent:"space-between", alignItems:"flex-end"}}> 36 <div> 37 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, letterSpacing:3, color:BR.mute, textTransform:"uppercase"}}>FORM 58 · AFTER-ACTION REPORT · MN-2396-11502-A</div> 38 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:92, lineHeight:0.9, letterSpacing:-2, textTransform:"uppercase", marginTop:6}}>Debrief</div> 39 <div style={{fontFamily:"IBM Plex Mono", fontSize:12, color:BR.ink2, marginTop:8, letterSpacing:1.2}}> 40 MISSION "WAYPOINT ε-7 · ESCORT" · 04h 22m · PILOT CMDR O. VEYR 41 </div> 42 </div> 43 <div style={{display:"flex", gap:10}}> 44 <BRStamp color={BR.green} rotate={-6}>MISSION OK</BRStamp> 45 <BRStamp rotate={5}>DEBRIEF FILED</BRStamp> 46 </div> 47 </div> 48 49 {/* HULL STRIP */} 50 <div style={{display:"grid", gridTemplateColumns:"260px 1fr 220px", borderBottom:`2px solid ${BR.ink}`, background:BR.paper2}}> 51 <div style={{padding:"14px 18px", borderRight:`1px solid ${BR.ink}`}}> 52 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>HULL</div> 53 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:17, letterSpacing:1, textTransform:"uppercase", marginTop:2}}>{ship.model}</div> 54 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:1}}>{ship.serial}</div> 55 </div> 56 <div style={{padding:"14px 20px", borderRight:`1px solid ${BR.ink}`, display:"grid", gridTemplateColumns:"repeat(5,1fr)", gap:16}}> 57 {[ 58 ["DEPARTED","2396.115 · 0600Z"], 59 ["RETURNED","2396.115 · 1022Z"], 60 ["DURATION","04h 22m"], 61 ["DISTANCE","4.81 ly"], 62 ["PEAK V", "0.82 c"], 63 ].map(([k,v],i)=> ( 64 <div key={i}> 65 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>{k}</div> 66 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:16, marginTop:2}}>{v}</div> 67 </div> 68 ))} 69 </div> 70 <div style={{padding:"14px 18px"}}> 71 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>OUTCOME</div> 72 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:22, color:BR.green, marginTop:2, letterSpacing:-0.5}}>OBJECTIVE MET</div> 73 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.ink2, marginTop:2, letterSpacing:1}}>NO CONTACT · NO DAMAGE</div> 74 </div> 75 </div> 76 77 {/* BODY */} 78 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr"}}> 79 {/* LEFT — narrative + track */} 80 <div style={{borderRight:`1px solid ${BR.ink}`, padding:"24px 30px"}}> 81 <BRH n="01">Mission Narrative</BRH> 82 <div style={{fontFamily:"IBM Plex Sans", fontSize:14, lineHeight:1.65, color:BR.ink, columnCount:1, textAlign:"justify"}}> 83 Flight launched at 0600Z from Ceres-II, Bay 22-E, under fair orbital conditions. Waypoint ε-7 reached at 0741Z with no sensor contacts; hand-off to the convoy confirmed by LT AMARA at 0748Z. Escort leg proceeded along corridor ε with a sustained cruise of 0.64c. One brief transient contact at 0842Z resolved as a drift-buoy; no action taken. Return leg nominal. Drive shudder absent; fuel trim nominal through full envelope. 84 </div> 85 86 <div style={{height:20}}/> 87 <BRH n="02">Flight Track</BRH> 88 <div style={{border:`2px solid ${BR.ink}`, background:BR.paper2, position:"relative", height:300}}> 89 <svg viewBox="0 0 520 300" style={{width:"100%", height:"100%"}}> 90 <defs> 91 <pattern id="dg" width="30" height="30" patternUnits="userSpaceOnUse"> 92 <path d="M 30 0 L 0 0 0 30" fill="none" stroke={BR.ink} strokeOpacity="0.1" strokeWidth="1"/> 93 </pattern> 94 </defs> 95 <rect width="520" height="300" fill="url(#dg)"/> 96 {/* track */} 97 <path d="M 60,250 Q 160,210 240,180 T 360,100 L 430,70" stroke={BR.ink} strokeWidth="2" fill="none" strokeDasharray="4 3"/> 98 <path d="M 430,70 L 370,130 T 260,200 L 140,240 L 60,250" stroke={BR.rust} strokeWidth="1.8" fill="none"/> 99 {/* waypoints */} 100 {[ 101 [60,250,"CERES-II","0600Z"], 102 [240,180,"JUMP β", "0722Z"], 103 [430,70, "ε-7", "0741Z"], 104 [260,200,"CONTACT","0842Z"], 105 ].map(([x,y,l,t],i)=>( 106 <g key={i}> 107 <rect x={x-4} y={y-4} width="8" height="8" fill={l==="CONTACT" ? BR.rust : BR.ink}/> 108 <text x={x+8} y={y-4} fontFamily="Oswald" fontSize="10" fontWeight="700" fill={BR.ink} letterSpacing="1">{l}</text> 109 <text x={x+8} y={y+8} fontFamily="IBM Plex Mono" fontSize="9" fill={BR.mute} letterSpacing="1">{t}</text> 110 </g> 111 ))} 112 <text x="12" y="18" fontFamily="IBM Plex Mono" fontSize="9" fill={BR.mute} letterSpacing="2">SECTOR G-4 · ε CORRIDOR</text> 113 <text x="470" y="290" fontFamily="IBM Plex Mono" fontSize="9" fill={BR.mute} letterSpacing="2">— OUT · · RET</text> 114 </svg> 115 </div> 116 117 <div style={{height:20}}/> 118 <BRH n="03">Pilot Log (Raw)</BRH> 119 <div style={{border:`2px solid ${BR.ink}`, padding:"12px 14px", fontFamily:"'Caveat','Space Grotesk',cursive", fontSize:19, lineHeight:1.5, color:BR.ink, background:BR.paper}}> 120 "Clean flight. Q-drive behaves after the stud work. Handed convoy to Amara 0748Z, she took point without chatter. Watched ε for three hours — one buoy ghost at 0842Z, marked and moved on. Brought her home with 42% in the tanks. Good bird." 121 </div> 122 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2, marginTop:6, textTransform:"uppercase"}}>CMDR O. VEYR · 2396.115.1110Z</div> 123 </div> 124 125 {/* RIGHT — telemetry + AAR */} 126 <div style={{padding:"24px 30px"}}> 127 <BRH n="04">Telemetry Summary</BRH> 128 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:14}}> 129 {[ 130 ["FUEL", "58% burned", fuel, BR.ink], 131 ["VELOCITY","peak 0.82c", vel, BR.rust], 132 ["G-LOAD", "max 4.1 G", gload, BR.ink], 133 ["HEAT", "peak 74%", heat, BR.rust], 134 ].map(([k,v,series,c],i)=>( 135 <div key={i} style={{border:`2px solid ${BR.ink}`, padding:"12px 14px", background: i%3===0 ? BR.paper2 : BR.paper}}> 136 <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline"}}> 137 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:2, textTransform:"uppercase"}}>{k}</div> 138 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:1}}>{v}</div> 139 </div> 140 <div style={{marginTop:6}}>{spark(series, c)}</div> 141 </div> 142 ))} 143 </div> 144 145 <div style={{height:20}}/> 146 <BRH n="05">Event Log</BRH> 147 <table style={{width:"100%", borderCollapse:"collapse", fontFamily:"IBM Plex Mono", fontSize:11}}> 148 <thead> 149 <tr style={{background:BR.paper2, borderBottom:`2px solid ${BR.ink}`}}> 150 {["T","Event","Severity"].map(h => ( 151 <th key={h} style={{padding:"6px 8px", textAlign:"left", fontSize:9, letterSpacing:2, color:BR.mute, textTransform:"uppercase", fontWeight:500}}>{h}</th> 152 ))} 153 </tr> 154 </thead> 155 <tbody> 156 {[ 157 ["0600Z","Launch · Ceres-II Bay 22-E", "INFO", BR.ink], 158 ["0722Z","Jump β cleared", "INFO", BR.ink], 159 ["0741Z","Waypoint ε-7 reached", "INFO", BR.ink], 160 ["0748Z","Convoy handoff to LT AMARA", "INFO", BR.ink], 161 ["0812Z","Coolant loop 3 transient", "NOTE", "#c78f1a"], 162 ["0842Z","Unidentified contact · buoy", "CAUTN", "#c78f1a"], 163 ["0904Z","Return leg commenced", "INFO", BR.ink], 164 ["1022Z","Recovery · Bay 22-E", "INFO", BR.ink], 165 ].map((r,i)=>( 166 <tr key={i} style={{borderBottom:`1px dotted ${BR.ink}44`, background: i%2 ? BR.paper : BR.paper2}}> 167 <td style={{padding:"6px 8px", color:BR.mute}}>{r[0]}</td> 168 <td style={{padding:"6px 8px"}}>{r[1]}</td> 169 <td style={{padding:"6px 8px"}}><span style={{fontFamily:"Oswald", fontWeight:700, fontSize:10, letterSpacing:2, color:r[3]}}>{r[2]}</span></td> 170 </tr> 171 ))} 172 </tbody> 173 </table> 174 175 <div style={{height:20}}/> 176 <BRH n="06">After-Action Review</BRH> 177 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:12}}> 178 {[ 179 ["WHAT WORKED", BR.green, "Drive behaved post-refit · convoy handoff clean · fuel management ahead of plan."], 180 ["WHAT DIDN'T", BR.rust, "Contact classification took 40s longer than standard · sensor gain set too high."], 181 ["CARRY FORWARD", BR.ink, "Pre-brief corridor ε buoy map · re-calibrate LIDAR before next escort."], 182 ["RECOGNITION", "#c78f1a", "LT AMARA · clean point formation at handoff · recommend commendation."], 183 ].map(([t,c,d],i)=>( 184 <div key={i} style={{border:`2px solid ${c}`, padding:"12px 14px", background:BR.paper}}> 185 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:11, letterSpacing:2.5, color:c, textTransform:"uppercase"}}>{t}</div> 186 <div style={{fontFamily:"IBM Plex Sans", fontSize:12, color:BR.ink, marginTop:6, lineHeight:1.5}}>{d}</div> 187 </div> 188 ))} 189 </div> 190 191 <div style={{marginTop:20, display:"flex", gap:10}}> 192 <button onClick={()=>onNav("fleet")} style={{flex:1, padding:"14px 0", background:BR.ink, color:BR.paper, border:"none", fontFamily:"Oswald", fontWeight:900, fontSize:12, letterSpacing:3, cursor:"pointer"}}>▸ TO BRIDGE</button> 193 <button onClick={()=>onNav("comms")} style={{flex:1, padding:"14px 0", background:"transparent", color:BR.ink, border:`2px solid ${BR.ink}`, fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, cursor:"pointer"}}>RELAY TO DESK</button> 194 </div> 195 </div> 196 </div> 197 198 <BRFooter/> 199 </BRPage> 200 ); 201 } 202 203 Object.assign(window, { BRDebrief });