br-auction.jsx
1 // Brutalist AUCTION / BIDDING ROOM — Form 63. Live sale-room broadsheet. 2 // Featured lot on block, current high-bid ledger, other lots, auctioneer banter. 3 4 function BRAuction({ onNav }) { 5 const lot = makeShip("AUC-CR-0477-ZZ"); 6 const bids = [ 7 ["0841:02Z", "B-11", "CMDR T. RHEIN", "14.40M", false], 8 ["0841:48Z", "B-04", "H. COLEA · SYN", "14.70M", false], 9 ["0842:12Z", "B-11", "CMDR T. RHEIN", "15.10M", false], 10 ["0842:55Z", "B-22", "NGR LIQUIDATORS", "15.50M", false], 11 ["0843:30Z", "B-04", "H. COLEA · SYN", "15.90M", false], 12 ["0844:07Z", "B-11", "CMDR T. RHEIN", "16.20M", false], 13 ["0844:42Z", "B-01", "CMDR O. VEYR", "16.60M", true], 14 ]; 15 const otherLots = [ 16 { seed:"AUC-DR-0448-QA", lot:"LOT 42", bid:"8.20M", bids:14, ends:"0912Z" }, 17 { seed:"AUC-HL-0412-WB", lot:"LOT 43", bid:"22.40M", bids:31, ends:"0924Z" }, 18 { seed:"AUC-YT-0455-ER", lot:"LOT 44", bid:"3.40M", bids:7, ends:"0938Z" }, 19 { seed:"AUC-IC-0466-TY", lot:"LOT 45", bid:"11.10M", bids:19, ends:"0954Z" }, 20 ].map(o => ({...o, ship:makeShip(o.seed)})); 21 22 return ( 23 <BRPage minHeight={2100}> 24 <BRNav active="auction" cartCount={0} onNav={onNav}/> 25 26 {/* HEADER */} 27 <div style={{padding:"30px 40px 22px", borderBottom:`4px double ${BR.ink}`, display:"flex", justifyContent:"space-between", alignItems:"flex-end"}}> 28 <div> 29 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, letterSpacing:3, color:BR.mute, textTransform:"uppercase"}}>FORM 63 · SALE-ROOM · CATALOGUE 2396-Q2</div> 30 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:92, lineHeight:0.9, letterSpacing:-2, textTransform:"uppercase", marginTop:6}}>Sale-Room</div> 31 <div style={{fontFamily:"IBM Plex Mono", fontSize:12, color:BR.ink2, marginTop:8, letterSpacing:1.2}}> 32 AUCTIONEER F. KAVROS · 42 LOTS · 184 BIDDERS · LIVE Q-FEED 33 </div> 34 </div> 35 <div style={{display:"flex", gap:10}}> 36 <BRStamp color={BR.rust} rotate={-6}>LIVE</BRStamp> 37 <BRStamp rotate={5}>BONDED</BRStamp> 38 </div> 39 </div> 40 41 <div style={{display:"grid", gridTemplateColumns:"1.3fr 1fr 320px"}}> 42 {/* LEFT — lot on block */} 43 <div style={{borderRight:`1px solid ${BR.ink}`, padding:"24px 32px"}}> 44 <BRH n="01">Lot on the Block · 41 of 42</BRH> 45 <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline"}}> 46 <div> 47 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>{lot.serial}</div> 48 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:40, letterSpacing:-1, textTransform:"uppercase", lineHeight:1}}>{lot.model}</div> 49 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, color:BR.ink2, letterSpacing:1, marginTop:4}}>{lot.cls.name.toUpperCase()} · {lot.mfg.name.toUpperCase()} · {lot.year}</div> 50 </div> 51 <div style={{textAlign:"right"}}> 52 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>ESTIMATE</div> 53 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:20}}>₵14.0M – ₵18.0M</div> 54 </div> 55 </div> 56 57 <div style={{height:300, marginTop:14, border:`2px solid ${BR.ink}`, background:BR.paper2, position:"relative"}}> 58 <div style={{position:"absolute", inset:"10% 8%"}}> 59 <ShipSilhouette ship={lot} stroke={BR.ink} glow={false} strokeWidth={1.5} detail="high"/> 60 </div> 61 <div style={{position:"absolute", top:12, left:12, fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>PLATE</div> 62 <div style={{position:"absolute", bottom:10, right:12, fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2, textTransform:"uppercase"}}>BONDED · INSPECTED · §412</div> 63 </div> 64 65 <div style={{height:18}}/> 66 <BRH n="02">Provenance</BRH> 67 <div style={{fontFamily:"IBM Plex Sans", fontSize:13, lineHeight:1.65, color:BR.ink2, textAlign:"justify"}}> 68 Commissioned 2386 under Coalition contract CTR-3318. First service with 3rd Expeditionary as flagship escort; re-flagged civilian 2392 after §403 retirement. Hull re-plated twice, Q-drive original. Consignor: N.G.R. Liquidators on behalf of the Coalition Salvage Trust. Reserve: ₵12.0M. 69 </div> 70 71 <div style={{height:18}}/> 72 <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap:0, border:`2px solid ${BR.ink}`}}> 73 {[ 74 ["MASS", `${lot.mass} kt`], 75 ["JUMP", `${lot.jump} ly`], 76 ["DRIVE", lot.drive], 77 ["HULL", `${Math.round(lot.hullPct*100)}%`], 78 ].map(([k,v],i)=>( 79 <div key={i} style={{padding:"12px 14px", borderRight: i<3 ? `1px solid ${BR.ink}` : "none", background: i%2 ? BR.paper2 : BR.paper}}> 80 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>{k}</div> 81 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:20, marginTop:2}}>{v}</div> 82 </div> 83 ))} 84 </div> 85 86 <div style={{height:22}}/> 87 <BRH n="03">Auctioneer's Call</BRH> 88 <div style={{border:`2px solid ${BR.ink}`, background:BR.paper, padding:"14px 16px"}}> 89 <div style={{fontFamily:"'Caveat','Space Grotesk',cursive", fontSize:22, color:BR.ink, lineHeight:1.4}}> 90 "Fair warning — sixteen-six on the paddle from Commodore Veyr. Do I hear sixteen-nine? Sixteen-nine, anywhere in the room? Last call, sixteen-nine — going on the hammer…" 91 </div> 92 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2, marginTop:6, textTransform:"uppercase"}}>F. KAVROS · AUCTIONEER · 0844:55Z</div> 93 </div> 94 </div> 95 96 {/* CENTER — bid ledger */} 97 <div style={{borderRight:`1px solid ${BR.ink}`, padding:"24px 28px"}}> 98 <BRH n="04">Bid Ledger</BRH> 99 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2, textTransform:"uppercase", marginBottom:8}}>LIVE · 7 BIDS · TICKER 3s</div> 100 <table style={{width:"100%", borderCollapse:"collapse", fontFamily:"IBM Plex Mono", fontSize:11}}> 101 <thead> 102 <tr style={{background:BR.paper2, borderBottom:`2px solid ${BR.ink}`}}> 103 {["Time","Pad","Bidder","Bid ₵"].map(h => ( 104 <th key={h} style={{padding:"6px 8px", textAlign:"left", fontSize:9, letterSpacing:2, color:BR.mute, textTransform:"uppercase", fontWeight:500}}>{h}</th> 105 ))} 106 </tr> 107 </thead> 108 <tbody> 109 {bids.map((r,i)=>( 110 <tr key={i} style={{borderBottom:`1px dotted ${BR.ink}44`, background: r[4] ? "rgba(194,66,26,0.08)" : (i%2 ? BR.paper : BR.paper2)}}> 111 <td style={{padding:"7px 8px", color:BR.mute}}>{r[0]}</td> 112 <td style={{padding:"7px 8px", fontWeight:700}}>{r[1]}</td> 113 <td style={{padding:"7px 8px"}}>{r[2]}{r[4] && <span style={{marginLeft:6, fontFamily:"Oswald", fontWeight:900, fontSize:9, letterSpacing:1.5, color:BR.rust}}>YOU</span>}</td> 114 <td style={{padding:"7px 8px", fontFamily:"Oswald", fontWeight:700, fontSize:13, color: r[4] ? BR.rust : BR.ink}}>₵{r[3]}</td> 115 </tr> 116 ))} 117 </tbody> 118 </table> 119 120 <div style={{height:16}}/> 121 <div style={{padding:"14px 16px", border:`2px solid ${BR.rust}`, background:"rgba(194,66,26,0.06)"}}> 122 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.rust, textTransform:"uppercase"}}>HIGH BID · YOURS</div> 123 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:44, lineHeight:1, letterSpacing:-1, color:BR.rust, marginTop:2}}>₵16.60M</div> 124 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.ink2, letterSpacing:1, marginTop:4}}>PADDLE B-01 · BUYER PREMIUM 12% · TOTAL ₵18.59M</div> 125 </div> 126 127 <div style={{height:16}}/> 128 <BRH n="05">Counter-Bid</BRH> 129 <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:8, marginBottom:8}}> 130 {["+100k","+250k","+500k"].map(l => ( 131 <button key={l} style={{padding:"14px 0", background:BR.paper, color:BR.ink, border:`2px solid ${BR.ink}`, fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:2.5, cursor:"pointer"}}>{l}</button> 132 ))} 133 </div> 134 <button style={{width:"100%", padding:"18px 0", background:BR.rust, color:BR.paper, border:"none", fontFamily:"Oswald", fontWeight:900, fontSize:15, letterSpacing:4, cursor:"pointer"}}>▸ RAISE · ₵16.90M</button> 135 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:8, marginTop:8}}> 136 <button style={{padding:"12px 0", background:"transparent", color:BR.ink, border:`2px solid ${BR.ink}`, fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:3, cursor:"pointer"}}>PROXY MAX</button> 137 <button style={{padding:"12px 0", background:"transparent", color:BR.ink, border:`2px solid ${BR.ink}`, fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:3, cursor:"pointer"}}>WITHDRAW</button> 138 </div> 139 140 <div style={{marginTop:18, fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:1.5, lineHeight:1.6, letterSpacing:1, textTransform:"uppercase"}}> 141 BIDDING BINDS UNDER §412 · BUYER PREMIUM 12% · HAMMER CLOSES AFTER 3 CALLS 142 </div> 143 </div> 144 145 {/* RIGHT — up next + paddles */} 146 <div style={{padding:"24px 22px", background:BR.paper2}}> 147 <BRH n="06">Up Next</BRH> 148 {otherLots.map((o,i)=>( 149 <div key={i} style={{display:"grid", gridTemplateColumns:"90px 1fr", gap:10, padding:"10px 0", borderBottom:`1px dotted ${BR.ink}33`}}> 150 <div style={{height:40, border:`1px solid ${BR.ink}55`, position:"relative", background:BR.paper}}> 151 <div style={{position:"absolute", inset:"10% 6%"}}> 152 <ShipSilhouette ship={o.ship} stroke={BR.ink} glow={false} strokeWidth={1} detail="min"/> 153 </div> 154 </div> 155 <div> 156 <div style={{display:"flex", justifyContent:"space-between"}}> 157 <span style={{fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:2, color:BR.mute}}>{o.lot}</span> 158 <span style={{fontFamily:"IBM Plex Mono", fontSize:9, color:BR.rust, letterSpacing:1}}>ENDS {o.ends}</span> 159 </div> 160 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:0.5, textTransform:"uppercase", marginTop:2}}>{o.ship.model}</div> 161 <div style={{display:"flex", justifyContent:"space-between", marginTop:2}}> 162 <span style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute}}>{o.bids} bids</span> 163 <span style={{fontFamily:"Oswald", fontWeight:700, fontSize:13}}>₵{o.bid}</span> 164 </div> 165 </div> 166 </div> 167 ))} 168 169 <div style={{height:20}}/> 170 <BRH n="07">The Floor</BRH> 171 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, color:BR.ink2, letterSpacing:0.5, lineHeight:1.8}}> 172 <div><span style={{color:BR.mute}}>PAD</span> 184 registered · 22 live</div> 173 <div><span style={{color:BR.mute}}>YOU</span> B-01 · Tier-3 · max ₵22.0M</div> 174 <div><span style={{color:BR.mute}}>RIVAL</span> B-11 · CMDR T. Rhein</div> 175 <div><span style={{color:BR.mute}}>RIVAL</span> B-04 · H. Colea · Syn</div> 176 <div><span style={{color:BR.mute}}>RIVAL</span> B-22 · N.G.R.</div> 177 </div> 178 179 <div style={{height:18}}/> 180 <BRH n="08">Paddle</BRH> 181 <div style={{border:`3px solid ${BR.ink}`, padding:"16px 14px", textAlign:"center", background:BR.paper}}> 182 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.mute, textTransform:"uppercase"}}>PADDLE</div> 183 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:74, lineHeight:1, letterSpacing:-2, color:BR.ink, marginTop:4}}>B-01</div> 184 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.ink2, letterSpacing:2, marginTop:4, textTransform:"uppercase"}}>CMDR O. VEYR · TIER-3</div> 185 </div> 186 </div> 187 </div> 188 189 <BRFooter/> 190 </BRPage> 191 ); 192 } 193 194 Object.assign(window, { BRAuction });