francy51
316a44661b
- Restructure flat static prototype into pnpm workspace monorepo - apps/game: playable shell with R3F 3D scene, HUD, SpacetimeDB connection - apps/docs: design docs and prototypes - apps/site: landing page - packages/ui: shared Button and Panel primitives - services/spacetimedb: backend module (9 tables, 11 reducers) - Archive legacy static files to archive/legacy-static/ - Game loop: connect, undock, target, approach, dock, mine, sell - Add pnpm-workspace.yaml, tsconfig.base.json, spacetime.json
187 lines
11 KiB
JavaScript
187 lines
11 KiB
JavaScript
window.GDD = window.GDD || {};
|
||
|
||
function DemoGalleryPage() {
|
||
const demos = [
|
||
{
|
||
id: 'starmap',
|
||
name: 'Star Map (Era 2 Galaxy Map)',
|
||
color: 'var(--accent)',
|
||
icon: '🗺',
|
||
validates: 'Multi-system galaxy view with system connections, faction territories, click-to-navigate interaction, warp routes. Validates the Era 2 Galaxy Map (region/constellation/system hierarchy). Each system has celestial body rendering.',
|
||
limitations: 'This is the Era 2 Galaxy Map, NOT the Era 1 System Map. No single-system detail view showing belts, stations, and orbital bodies at navigation scale. Era 1 needs a separate System Map demo. Static galaxy topology — systems don\'t shift. No faction territory animation. World events shown as static icons, not animated effects. No waypoint creation or route planning integration.',
|
||
docPage: 'Overview → HUD & View Mode Architecture → Map Mode',
|
||
},
|
||
{
|
||
id: 'movement',
|
||
name: 'Movement',
|
||
color: 'var(--green)',
|
||
icon: '→',
|
||
validates: 'Click-to-move autopilot, ship interpolation between waypoints, ETA calculation, warp-to for distant objects. Validates the Movement Model design.',
|
||
limitations: 'Client-side only — no server authority. Interpolation assumes constant speed; no acceleration/deceleration curves yet.',
|
||
docPage: 'Backend → Movement Model',
|
||
},
|
||
{
|
||
id: 'market',
|
||
name: 'Market',
|
||
color: 'var(--cyan)',
|
||
icon: '📈',
|
||
validates: 'Order book depth, bid/ask spread, price history charts, buy/sell order placement, margin accounts, commodity ticker. Validates the full market surface design.',
|
||
limitations: 'Fixed seed data — prices don\'t propagate between systems (no info diffusion). NPC orders only, no player-to-player trades. ₢ symbol used for ISK. Futures contracts are simulated, not backed by SpacetimeDB.',
|
||
docPage: 'Overview → Market Panel ★',
|
||
},
|
||
{
|
||
id: 'combat',
|
||
name: 'Combat',
|
||
color: 'var(--red)',
|
||
icon: '⚔',
|
||
validates: 'FTL-style reactor power allocation (weapons/shields/engines/aux), target selection, auto-engage, module auto-cycling, capacitor drain, shield/armor/hull layers.',
|
||
limitations: 'Solo PvE only — no PvP. Single opponent at a time. No subsystem targeting. No weapon type differentiation (all deal generic damage). Power allocation is instant, not gradual.',
|
||
docPage: 'Gameplay → Combat Model',
|
||
},
|
||
{
|
||
id: 'fitting',
|
||
name: 'Fitting',
|
||
color: 'var(--purple)',
|
||
icon: '🔧',
|
||
validates: 'CPU/Power Grid slot constraints, High/Med/Low slot assignment, module fitting and unfiting, invalid fit rejection, fitting stat preview.',
|
||
limitations: 'Single ship only (Frigate). No AI module slot type yet. No rig slots. No ship bonuses per skill level. Fitting only changes displayed stats, doesn\'t affect combat demo.',
|
||
docPage: 'Ships & Fitting → Fitting / Slots',
|
||
},
|
||
{
|
||
id: 'refining',
|
||
name: 'Refining',
|
||
color: 'var(--accent)',
|
||
icon: '⚗',
|
||
validates: 'Ore → mineral refining, batch sizes, efficiency curve by Industry skill level, yield calculation, station reprocessing interface.',
|
||
limitations: 'No manufacturing chain beyond refining. No blueprint research. No production queues. Efficiency slider is manual, not skill-gated.',
|
||
docPage: 'Economy → Refining',
|
||
},
|
||
{
|
||
id: 'progression',
|
||
name: 'Progression',
|
||
color: 'var(--green)',
|
||
icon: '📊',
|
||
validates: 'XP-based skill progression across categories, level-up notifications, skill tree visualization, session XP tracking.',
|
||
limitations: 'Flat XP curve — not the exponential curve described in the Social page. No skill prerequisites. No skill-based module restrictions. No time-based skill queue.',
|
||
docPage: 'Progression & Social → XP & Skills',
|
||
},
|
||
{
|
||
id: 'bounty',
|
||
name: 'Bounty',
|
||
color: 'var(--red)',
|
||
icon: '💰',
|
||
validates: 'Bounty placement, bounty tiers by pool size, kill feed display, bounty collection on ship destruction, anti-abuse rules (no self-claiming).',
|
||
limitations: 'Bounty pool is static — no decay over time. Kill feed is pre-seeded, not generated from real combat. No galaxy-wide visibility tiers — all bounties visible everywhere.',
|
||
docPage: 'Progression & Social → Bounty System',
|
||
},
|
||
{
|
||
id: 'gamehud',
|
||
name: 'Game HUD (Flight Mode)',
|
||
color: 'var(--cyan)',
|
||
icon: '🖥',
|
||
validates: 'Flight Mode diegetic HUD: 3D viewport with overlay panels (shield/armor/hull arcs, module rack, overview sidebar, target lock, capacitor gauge, speed/ETA, chat stub). Validates the undocked in-space experience with diegetic overlays on the 3D scene.',
|
||
limitations: 'Only shows Flight Mode (undocked). Station Mode (panel-based) not shown here — see Market/Fitting/Refining demos for panel UI. No panel undocking or free-floating mode. No multi-monitor support. No saved layout profiles. Chat is stub-only (no real messages).',
|
||
docPage: 'Overview → HUD & View Mode Architecture → Flight Mode',
|
||
},
|
||
{
|
||
id: 'chat',
|
||
name: 'Chat & Comms',
|
||
color: 'var(--cyan)',
|
||
icon: '💬',
|
||
validates: 'Range-based chat propagation, light-speed delay mechanics, channel switching (Local/Trade/Private), message delivery visualization, pilot proximity display. Validates the core social surface design.',
|
||
limitations: 'Simulated delays only — no real network latency. NPC responses are scripted. Fleet channel is disabled (post-MVP). No corporation or alliance channels. Delay formula is simplified.',
|
||
docPage: 'Progression & Social → Chat & Comms',
|
||
},
|
||
{
|
||
id: 'zora',
|
||
name: 'Zora Tier 0',
|
||
color: 'var(--purple)',
|
||
icon: '🤖',
|
||
validates: 'Deterministic template selection by personality state × module availability × soul depth. Soul depth progression from blank (raw status codes) to deep (full personality). Module gating logic. Personality axes influence. Validates the Tier 0 implementation spec.',
|
||
limitations: 'Tier 0 only — no LLM generation. Template database is a sample, not production-scale. Personality axes affect template selection but not text generation. No autonomous mode or inter-agent communication.',
|
||
docPage: 'Ship AI — Zora → Implementation Tiers',
|
||
},
|
||
{
|
||
id: 'galaxy',
|
||
name: 'Galaxy Generation',
|
||
color: 'var(--accent)',
|
||
icon: '🌌',
|
||
validates: 'Deterministic seeded galaxy generation with concrete parameters: 4 regions (Core/Frontier/Null/Deep Null), ~50 systems, Poisson disk constellation placement, MST + extra edges stargate topology, station/belt placement by security level, faction territory seeding, connectivity validation. Validates the Galaxy Generation spec in Backend → Galaxy Simulation → Galaxy Generation tab.',
|
||
limitations: '2D top-down view only — no Z-depth or 3D system rendering. Galaxy shape is simplified (diamond layout, not true spiral). No NPC agent dialogue or mission seeding details. No wormhole connections for Deep Null. No world event overlay. Connectivity validation is BFS only (no minimum-gate-per-system check).',
|
||
docPage: 'Backend → Galaxy Simulation → Galaxy Generation',
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className="content-inner">
|
||
<h1 style={{ marginBottom: '8px' }}>Interactive Demo Gallery</h1>
|
||
<p style={{ color: 'var(--fg-dim)', fontSize: '0.95rem', maxWidth: '680px' }}>
|
||
Twelve interactive demos that validate specific game systems. Each demo is a standalone prototype
|
||
focused on one aspect of the design. They use fake data and simulated APIs — not connected to
|
||
SpacetimeDB or a real server. Use these to evaluate feel and UX, not performance or scale.
|
||
<strong>Note:</strong> The Star Map demo covers the <em>Era 2 Galaxy Map</em>. A separate Era 1 System Map demo (single-system
|
||
navigation view) is still needed before Phase 1.
|
||
</p>
|
||
|
||
<div className="stat-grid" style={{ marginTop: 'var(--sp-5)' }}>
|
||
<div className="stat-card">
|
||
<div className="stat-value" style={{ color: 'var(--accent)' }}>12</div>
|
||
<div className="stat-label">Demos</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value" style={{ color: 'var(--cyan)' }}>Fake Data</div>
|
||
<div className="stat-label">Data Source</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value" style={{ color: 'var(--green)' }}>No Server</div>
|
||
<div className="stat-label">Backend</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value" style={{ color: 'var(--purple)' }}>UX Only</div>
|
||
<div className="stat-label">Purpose</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="callout callout-info" style={{ marginTop: 'var(--sp-5)', marginBottom: 'var(--sp-6)' }}>
|
||
<strong>How to use:</strong> Open demos from the sidebar under "Interactive Demos". Each demo has its own
|
||
fullscreen mode. The limitations listed below are known gaps — they describe what the demo does <em>not</em>
|
||
validate, not what the final game will lack.
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--sp-4)' }}>
|
||
{demos.map((demo, i) => (
|
||
<div key={i} className="card" style={{ borderLeft: `3px solid ${demo.color}` }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)', marginBottom: 'var(--sp-4)' }}>
|
||
<span style={{ fontSize: '1.4rem' }}>{demo.icon}</span>
|
||
<h3 style={{ color: demo.color, margin: 0 }}>{demo.name} Demo</h3>
|
||
<span className="pill" style={{
|
||
background: 'var(--surface-raised)',
|
||
color: demo.color,
|
||
border: `1px solid ${demo.color}40`,
|
||
fontSize: '0.65rem',
|
||
}}>
|
||
{demo.id}
|
||
</span>
|
||
</div>
|
||
<div className="grid-2" style={{ gap: 'var(--sp-4)' }}>
|
||
<div>
|
||
<div style={{ fontSize: '0.7rem', color: 'var(--green)', fontWeight: 600, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', marginBottom: 'var(--sp-2)' }}>✓ VALIDATES</div>
|
||
<p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>{demo.validates}</p>
|
||
</div>
|
||
<div>
|
||
<div style={{ fontSize: '0.7rem', color: 'var(--red)', fontWeight: 600, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', marginBottom: 'var(--sp-2)' }}>✗ LIMITATIONS</div>
|
||
<p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>{demo.limitations}</p>
|
||
</div>
|
||
</div>
|
||
<div style={{ marginTop: 'var(--sp-3)', paddingTop: 'var(--sp-3)', borderTop: '1px solid var(--border)', fontSize: '0.8rem', color: 'var(--muted)' }}>
|
||
<strong style={{ color: 'var(--fg-dim)' }}>Doc reference:</strong> {demo.docPage}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
window.GDD.DemoGalleryPage = DemoGalleryPage;
|