// JSON War — Shared UI: progressive ships, bosses, effects ;(() => { const { useState, useEffect } = React; // ── Starfield ───────────────────────────────────────────────────────────────── function Starfield() { const stars = React.useMemo(() => Array.from({ length: 55 }, (_, i) => ({ id: i, x: Math.random() * 100, y: Math.random() * 100, r: Math.random() * 1.4 + 0.4, delay: Math.random() * 3, dur: 2 + Math.random() * 2, })), []); return ( {stars.map(s => ( ))} ); } // ── Player Ship — progressive additive design ───────────────────────────────── // form 0: base scout (single cannon) // form 1: + yellow side gun pods (3 per wing) // form 2: + teal wingtip turrets // form 3: + cyan scanner eye + antennas // form 4: + orange shield energy fins // form 5: + gold AOE ring emitter (ultimate) function PlayerShip({ form = 0 }) { const f = Math.min(5, Math.max(0, form)); // Engine glow color progression const engColors = ['#aab0be','#ecd050','#64c8b4','#40d8ff','#e86040','#ecd050']; const eng = engColors[f]; return ( {/* ── BASE (all forms) ── */} {/* Hard shadow */} {/* Hull */} {/* Wing shade */} {/* Cockpit glass */} {/* Center cannon barrel */} {/* Engine block */} {/* Engine glow */} {/* ── FORM 1+: yellow rapid-fire wing gun pods ── */} {f >= 1 && <> {/* Left pod group */} {/* Right pod group */} {/* Wing stripes */} } {/* ── FORM 2+: teal wingtip turrets ── */} {f >= 2 && <> } {/* ── FORM 3+: cyan scanner eye + wing antennas ── */} {f >= 3 && <> {/* Scanner eye ring over cannon */} {/* Antennas */} } {/* ── FORM 4+: orange shield energy fins ── */} {f >= 4 && <> {/* Inner energy lines */} } {/* ── FORM 5: gold AOE ring emitter ── */} {f >= 5 && <> {/* 4 connector nodes */} {[[40,40],[56,56],[40,72],[24,56]].map(([cx,cy],i) => ( ))} {/* Glow */} } ); } // ── Boss SVGs ───────────────────────────────────────────────────────────────── function BossGiant({ hp, maxHp, shaking, flash }) { const eyeColor = flash ? '#ffffff' : '#e86040'; return ( {'{ }'} {hp / maxHp < 0.6 && } ); } function BossInflation({ hp, maxHp, shaking, flash, inflation, locked, lockAnim }) { const scale = 1 + (inflation || 0) * 0.13; const eyeColor = flash ? '#ffffff' : '#e86040'; return ( {(inflation||0) > 0 && } {(inflation||0) > 1 && } {['col_001','col_002','col_003'].map((l,i) => ( {l} ))} {/* Lock ring (shown post-upgrade) */} {locked && <> } ); } function BossPhantom({ shaking, flash, visible, showTarget }) { const opacity = visible ? 1 : 0.25; const eyeColor = flash ? '#ffffff' : '#e86040'; return ( {Array.from({length:8},(_,i)=>( ))} {/* Target crosshair (post-upgrade) */} {showTarget && <> } ); } function BossShapeshifter({ shaking, flash, form, locked }) { const eyeColor = flash ? '#ffffff' : '#e86040'; const f = form || 0; return ( {locked ? 'LOCKED' : ['INTEGER','STRING','FLOAT'][f]+' FORM'} {f === 0 && ( )} {f === 1 && ( )} {f === 2 && ( {[0,45,90,135,180,225,270,315].map((angle,i) => { const rad = angle * Math.PI / 180; return ; })} )} {/* Lock X overlay */} {locked && <> } ); } function BossLegion({ unitHps, shaking, flash }) { const colors = ['#64c8b4','#7a8cff','#a06eff','#ff8c40','#40c8ff','#ff6480','#80e060','#ffd040','#c080ff']; return ( {(unitHps||Array(9).fill(11)).map((hp,i) => { const col = i%3, row = Math.floor(i/3); const x = 22+col*55, y = 6+row*48; const alive = hp > 0; return ( {alive && Array.from({length:Math.ceil(hp/4)},(_,pi)=>( ))} ); })} ); } // ── Boss HP Bar ─────────────────────────────────────────────────────────────── function BossHPBar({ hp, maxHp, bossName }) { const pct = Math.max(0, hp / maxHp); const color = pct > 0.5 ? '#64c8b4' : pct > 0.25 ? '#ecd050' : '#e86040'; return (
{bossName} {hp} / {maxHp} HP
); } // ── Damage Popup ────────────────────────────────────────────────────────────── function DamagePopup({ damage, id }) { const [on, setOn] = useState(true); useEffect(() => { const t = setTimeout(() => setOn(false), 800); return () => clearTimeout(t); }, [id]); if (!damage || !on) return null; return (
-{damage}
); } // ── Float Label (MISS / BLOCKED / GROW!) ───────────────────────────────────── function FloatLabel({ text, color = '#e86040', id }) { const [on, setOn] = useState(true); useEffect(() => { const t = setTimeout(() => setOn(false), 700); return () => clearTimeout(t); }, [id]); if (!on) return null; return (
16 ? 15 : text.length > 8 ? 20 : 26, whiteSpace:'nowrap', color, textShadow:'2px 2px 0 #1a1408', animation:'damageFloat 0.7s ease-in forwards', }}> {text}
); } // ── Shield Block Flash ──────────────────────────────────────────────────────── function ShieldFlash({ id }) { const [on, setOn] = useState(true); useEffect(() => { const t = setTimeout(() => setOn(false), 500); return () => clearTimeout(t); }, [id]); if (!on) return null; return (
); } // ── Arc Shield (type-mismatch block) ────────────────────────────────────────── // Positioned with bottom:% so it aligns with the bullet animation (vh-based). // Rendered in a viewport-sized overlay by the caller. function ArcShield({ id }) { const [on, setOn] = useState(true); useEffect(() => { const t = setTimeout(() => setOn(false), 620); return () => clearTimeout(t); }, [id]); if (!on) return null; return (
{/* Glow */} {/* Fill */} {/* Arc */} {/* Hex pattern highlights */}
); } // ── Cartoon Button ──────────────────────────────────────────────────────────── function CartoonBtn({ children, onClick, color='#e86040', disabled, style={}, size='lg' }) { const [pressed, setPressed] = useState(false); const h = size === 'lg' ? 56 : size === 'md' ? 44 : 36; return ( ); } // ── Skill Chip ──────────────────────────────────────────────────────────────── function SkillChip({ icon, name }) { return ( {icon} {name} ); } // ── Explosion ───────────────────────────────────────────────────────────────── function Explosion({ onDone }) { useEffect(() => { const t = setTimeout(onDone, 950); return () => clearTimeout(t); }, []); return (
{[...Array(10)].map((_,i) => (
))}
); } Object.assign(window, { Starfield, PlayerShip, BossGiant, BossInflation, BossPhantom, BossShapeshifter, BossLegion, BossHPBar, DamagePopup, FloatLabel, ShieldFlash, ArcShield, CartoonBtn, SkillChip, Explosion, }); })();