concept2-brutalist.jsx
1 // Concept 2 — BRUTALIST SPEC SHEET 2 // Architectural/industrial. Heavy grid, Oswald headlines, no glow. 3 // Feels like a Swiss-engineered procurement catalog from a naval yard. 4 // Paper-colored off-white, ink-black, single rust accent for danger/stock status. 5 6 function Concept2_Brutalist({ seed = "C2-default" }) { 7 const ship = makeShip(seed); 8 const paper = "#ece7dc"; 9 const ink = "#0c0c0c"; 10 const ink2 = "#1f1f1d"; 11 const rust = "#c2421a"; 12 const mute = "#7a756a"; 13 14 // Giant bold section headline 15 const H = ({ children, n }) => ( 16 <div style={{display:"flex", alignItems:"baseline", gap:14, borderBottom:`2px solid ${ink}`, paddingBottom:6, marginBottom:14}}> 17 {n && <div style={{fontFamily:"IBM Plex Mono", fontSize:10, fontWeight:500, color:mute}}>§{n}</div>} 18 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:3, color:ink, textTransform:"uppercase"}}>{children}</div> 19 </div> 20 ); 21 22 const SpecRow = ({ k, v, unit }) => ( 23 <div style={{display:"grid", gridTemplateColumns:"110px 1fr auto", alignItems:"baseline", fontFamily:"IBM Plex Mono", fontSize:12, color:ink, padding:"4px 0", borderBottom:`1px dotted ${ink}33`}}> 24 <div style={{color:mute, fontSize:10, letterSpacing:1, textTransform:"uppercase"}}>{k}</div> 25 <div style={{fontWeight:500}}>{v}</div> 26 <div style={{color:mute, fontSize:10, textTransform:"uppercase"}}>{unit}</div> 27 </div> 28 ); 29 30 return ( 31 <div style={{ 32 width:1280, height:880, background: paper, color: ink, 33 fontFamily:"'IBM Plex Sans', sans-serif", position:"relative", 34 }}> 35 {/* MASTHEAD */} 36 <div style={{padding:"18px 40px", display:"flex", alignItems:"flex-end", justifyContent:"space-between", borderBottom:`4px solid ${ink}`}}> 37 <div> 38 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:32, letterSpacing:6, color:ink, lineHeight:1}}>STRATA⁄FLEET</div> 39 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:mute, letterSpacing:2, marginTop:2}}>COALITION PROCUREMENT · VOL 47 · ISSUE 2396-114</div> 40 </div> 41 <div style={{textAlign:"right", fontFamily:"IBM Plex Mono", fontSize:10, color:mute, letterSpacing:1.5}}> 42 <div>FILE {ship.serial}</div> 43 <div>PP.{Math.floor((hashStr(seed)%800)+1).toString().padStart(3,"0")} / 812</div> 44 <div>CLASSIFIED — PURCHASER EYES</div> 45 </div> 46 </div> 47 48 {/* ITEM HEADER */} 49 <div style={{padding:"20px 40px 12px", display:"grid", gridTemplateColumns:"auto 1fr auto", gap:28, alignItems:"end", borderBottom:`1px solid ${ink}`}}> 50 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:160, lineHeight:0.82, color:ink, letterSpacing:-4}}> 51 {ship.cls.code} 52 </div> 53 <div> 54 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, letterSpacing:3, color:mute, textTransform:"uppercase"}}> 55 {ship.cls.name} · {ship.cls.role} 56 </div> 57 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:64, lineHeight:0.95, color:ink, letterSpacing:-1, textTransform:"uppercase", marginTop:4}}> 58 {ship.model} 59 </div> 60 <div style={{fontFamily:"IBM Plex Sans", fontSize:13, color:ink2, marginTop:6, maxWidth:520, lineHeight:1.5}}> 61 Manufactured by {ship.mfg.name} at {ship.mfg.loc}. {ship.cond.toLowerCase().replace("_"," ")} hull; {ship.drive.toLowerCase()} propulsion. Intended service: {ship.cls.role.toLowerCase()}. 62 </div> 63 </div> 64 <div style={{textAlign:"right"}}> 65 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:mute, textTransform:"uppercase"}}>UNIT PRICE</div> 66 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:48, color:ink, lineHeight:1, letterSpacing:-1}}> 67 ₵{formatCred(ship.price)} 68 </div> 69 <div style={{display:"inline-block", marginTop:6, background:rust, color:paper, padding:"4px 10px", fontFamily:"Oswald", fontSize:11, letterSpacing:3, fontWeight:700}}> 70 {ship.avail} 71 </div> 72 </div> 73 </div> 74 75 {/* BODY GRID */} 76 <div style={{display:"grid", gridTemplateColumns:"1.1fr 1.4fr 1fr", height:"calc(100% - 310px)"}}> 77 78 {/* LEFT COL — Spec sheet */} 79 <div style={{borderRight:`1px solid ${ink}`, padding:"20px 28px", overflow:"hidden"}}> 80 <H n="01">Dimensional</H> 81 <SpecRow k="Length" v={ship.length_m} unit="m"/> 82 <SpecRow k="Mass" v={ship.mass.toLocaleString()} unit="t"/> 83 <SpecRow k="Cargo" v={ship.cargo_t.toLocaleString()} unit="t"/> 84 <SpecRow k="Crew" v={ship.crew} unit="pax"/> 85 <SpecRow k="Year" v={ship.year} unit="cmn"/> 86 87 <div style={{height:18}}/> 88 <H n="02">Propulsion</H> 89 <SpecRow k="Drive" v={ship.drive} unit=""/> 90 <SpecRow k="Top spd" v={ship.topSpeed.toLocaleString()} unit="m/s"/> 91 <SpecRow k="Thrust" v={ship.thrust} unit="g"/> 92 <SpecRow k="Jump" v={ship.jumpRange} unit="ly"/> 93 94 <div style={{height:18}}/> 95 <H n="03">Combat</H> 96 <SpecRow k="Armor" v={ship.armor.toLocaleString()} unit="mm"/> 97 <SpecRow k="Shield" v={ship.shields.toLocaleString()} unit="GJ"/> 98 <SpecRow k="Hardpt" v={ship.hardpoints} unit="mt"/> 99 <SpecRow k="Sig" v={ship.signature} unit="dB"/> 100 </div> 101 102 {/* CENTER COL — Orthographic */} 103 <div style={{borderRight:`1px solid ${ink}`, padding:"20px 28px", position:"relative"}}> 104 <div style={{display:"flex", justifyContent:"space-between", fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:mute, textTransform:"uppercase", marginBottom:10}}> 105 <span>Plate IV · Orthographic</span> 106 <span>1:{Math.round(ship.length_m/8)}</span> 107 </div> 108 <div style={{position:"relative", height:260, border:`1px solid ${ink}`, background: `repeating-linear-gradient(0deg, transparent 0 19px, ${ink}11 19px 20px), repeating-linear-gradient(90deg, transparent 0 19px, ${ink}11 19px 20px)`}}> 109 <div style={{position:"absolute", inset:"15%"}}> 110 <ShipSilhouette ship={ship} stroke={ink} fill="none" glow={false} strokeWidth={1.4}/> 111 </div> 112 {/* rulers */} 113 <div style={{position:"absolute", left:-1, top:-20, fontFamily:"IBM Plex Mono", fontSize:9, color:mute}}>0</div> 114 <div style={{position:"absolute", right:0, top:-20, fontFamily:"IBM Plex Mono", fontSize:9, color:mute}}>{ship.length_m}m</div> 115 {/* Dimension lines */} 116 <svg style={{position:"absolute", inset:0, pointerEvents:"none"}} width="100%" height="100%"> 117 <line x1="15%" y1="95%" x2="85%" y2="95%" stroke={ink} strokeWidth="1"/> 118 <line x1="15%" y1="92%" x2="15%" y2="98%" stroke={ink} strokeWidth="1"/> 119 <line x1="85%" y1="92%" x2="85%" y2="98%" stroke={ink} strokeWidth="1"/> 120 </svg> 121 </div> 122 123 <div style={{marginTop:16, display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:12}}> 124 {["BOW","BEAM","STERN"].map((label, i) => ( 125 <div key={label} style={{border:`1px solid ${ink}`, padding:8}}> 126 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, color:mute, textTransform:"uppercase"}}>View {String.fromCharCode(65+i)} · {label}</div> 127 <div style={{height:68, position:"relative", marginTop:6}}> 128 <div style={{position:"absolute", inset:0, transform: i===1 ? "rotate(90deg)" : i===2 ? "scaleX(-1)" : "none"}}> 129 <ShipSilhouette ship={ship} stroke={ink} glow={false} strokeWidth={1.2} detail="min"/> 130 </div> 131 </div> 132 </div> 133 ))} 134 </div> 135 136 <div style={{marginTop:16}}> 137 <H n="04">Nota Bene</H> 138 <div style={{fontFamily:"IBM Plex Sans", fontSize:12, color:ink2, lineHeight:1.55, columnCount:2, columnGap:20}}> 139 Unit is {ship.cond.toLowerCase().replace("_"," ")}, origin {ship.mfg.loc}. Buyer shall verify transponder re-coding prior to jump. Warranty: {ship.warranty.toLowerCase()}. Buyer assumes all liability for flagged faction variants ({ship.faction}). Delivery in {ship.delivery} cycles via bonded relay. Export license required; all sales final at receipt of possession. 140 </div> 141 </div> 142 </div> 143 144 {/* RIGHT COL — Procurement form */} 145 <div style={{padding:"20px 28px", display:"flex", flexDirection:"column"}}> 146 <H n="05">Procurement</H> 147 148 <FormRow label="Buyer" value="Cmdr. Orlan Veyr" hand/> 149 <FormRow label="Dept" value="7th Expeditionary · LOG"/> 150 <FormRow label="PO Ref" value={`PO-${(hashStr(seed)%100000).toString().padStart(5,"0")}`}/> 151 <FormRow label="Qty" value="1 unit"/> 152 <FormRow label="Escrow" value="Stellar Bank · Tier 3"/> 153 154 <div style={{height:12}}/> 155 <H n="06">Terms</H> 156 <SpecRow k="Delivery" v={`${ship.delivery} cycles`} unit="cyc"/> 157 <SpecRow k="Lease/mo" v={`₵${formatCred(Math.round(ship.price/120))}`} unit="cred"/> 158 <SpecRow k="Insure" v={`${(1.8).toFixed(1)}% annual`} unit=""/> 159 <SpecRow k="Warranty" v={ship.warranty} unit=""/> 160 161 <div style={{height:20}}/> 162 163 <div style={{marginTop:"auto"}}> 164 <div style={{border:`2px dashed ${rust}`, padding:12, fontFamily:"IBM Plex Mono", fontSize:11, color:rust, textTransform:"uppercase", letterSpacing:2, marginBottom:14}}> 165 ⚑ Requires Commodore-grade authorization · Form 7B appended 166 </div> 167 168 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}> 169 <button style={{ 170 padding:"18px 0", background: ink, color: paper, border:`2px solid ${ink}`, 171 fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:3, cursor:"pointer", 172 }}>COMMIT</button> 173 <button style={{ 174 padding:"18px 0", background:"transparent", color: ink, border:`2px solid ${ink}`, 175 fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:3, cursor:"pointer", 176 }}>HOLD</button> 177 </div> 178 <div style={{marginTop:10, fontFamily:"IBM Plex Mono", fontSize:9, color:mute, letterSpacing:1.5, textTransform:"uppercase"}}> 179 Signature binding under Coalition Commerce Act §412. Notarized by sector clerk. 180 </div> 181 </div> 182 </div> 183 </div> 184 </div> 185 ); 186 } 187 188 function FormRow({ label, value, hand }) { 189 return ( 190 <div style={{display:"grid", gridTemplateColumns:"72px 1fr", gap:10, alignItems:"baseline", padding:"8px 0", borderBottom:"1px solid #0c0c0c"}}> 191 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, color:"#7a756a", textTransform:"uppercase"}}>{label}</div> 192 <div style={{fontFamily: hand ? "'Caveat','Space Grotesk',cursive" : "IBM Plex Mono", fontSize: hand ? 18 : 12, fontWeight: 500, color:"#0c0c0c"}}>{value}</div> 193 </div> 194 ); 195 } 196 197 Object.assign(window, { Concept2_Brutalist });