316 lines
24 KiB
JavaScript
316 lines
24 KiB
JavaScript
window.GDD = window.GDD || {};
|
||
|
||
function OverviewPage() {
|
||
return (
|
||
<div className="content-inner">
|
||
<h1 style={{ marginBottom: '8px' }}>EVE-Inspired Multiplayer Prototype</h1>
|
||
<p style={{ color: 'var(--fg-dim)', fontSize: '1.1rem', maxWidth: '680px', marginBottom: 'var(--sp-6)' }}>
|
||
A browser-based <strong style={{ color: 'var(--fg-bright)' }}>spreadsheet simulator</strong> in the EVE Online tradition,
|
||
set inside a <strong style={{ color: 'var(--fg-bright)' }}>single persistent galaxy</strong> that the server simulates as a living world.
|
||
The game is played through UI panels, market tables, inventory grids, and chat channels — not by flying a ship.
|
||
Movement and combat are deliberately rudimentary; the depth lives in the economy, information diffusion,
|
||
strategic decisions, and a galaxy that evolves around you through <strong style={{ color: 'var(--fg-bright)' }}>dynamic PvE events and emergent world story</strong>.
|
||
</p>
|
||
|
||
<div className="stat-grid">
|
||
<div className="stat-card">
|
||
<div className="stat-value" style={{ color: 'var(--accent)' }}>UI-first</div>
|
||
<div className="stat-label">Design Pillar</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value" style={{ color: 'var(--cyan)' }}>SpacetimeDB</div>
|
||
<div className="stat-label">Backend</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value" style={{ color: 'var(--green)' }}>~3 hrs</div>
|
||
<div className="stat-label">Session Target</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value" style={{ color: 'var(--purple)' }}>Player-led</div>
|
||
<div className="stat-label">Economy Model</div>
|
||
</div>
|
||
<div className="stat-card">
|
||
<div className="stat-value" style={{ color: 'var(--red)' }}>Living Galaxy</div>
|
||
<div className="stat-label">World Model</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section-header">
|
||
<span className="section-num">OV-01</span>
|
||
<h2 style={{ margin: 0 }}>Product Vision</h2>
|
||
</div>
|
||
|
||
<div className="callout callout-info">
|
||
<strong>Primary recommendation:</strong> Build the MVP as a UI-heavy browser game — a <em>spreadsheet simulator</em>.
|
||
The 3D scene is a strategic map layer for context, not the game itself. Players spend 90% of their time
|
||
in tables, charts, and panels: market depth, order books, cargo manifests, fitting spreadsheets,
|
||
route planners, and chat. The 3D viewport exists to give spatial awareness, not twitch gameplay.
|
||
</div>
|
||
|
||
<h3>Core Pillars</h3>
|
||
<table className="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Pillar</th>
|
||
<th>Prototype Interpretation</th>
|
||
<th>MVP Scope</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span className="pill pill-amber">Economy & markets</span></td>
|
||
<td style={{ color: 'var(--fg-dim)' }}>Player-led economy with NPC support. Mining → refining → manufacturing → trade. Geographic price differences, contract markets, order books, and <strong style={{ color: 'var(--accent)' }}>information asymmetry between systems</strong> create emergent trade routes and speculative opportunities. <strong style={{ color: 'var(--accent)' }}>This IS the game.</strong></td>
|
||
<td><span className="pill pill-green">Era 1</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>NPC economy, single-player mining/refining/manufacturing</span><br/><span className="pill pill-cyan" style={{ fontSize: '0.65rem' }}>Era 2</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Player-to-player market, info diffusion</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span className="pill pill-cyan">Social & multiplayer</span></td>
|
||
<td style={{ color: 'var(--fg-dim)' }}>Local chat, delayed PMs, bounty system, emergent player-driven justice. Communication is range-based. <strong style={{ color: 'var(--accent)' }}>Priority pillar.</strong></td>
|
||
<td><span className="pill pill-cyan" style={{ fontSize: '0.65rem' }}>Era 2</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>All social features require multiplayer</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span className="pill pill-green">Command-based (not action)</span></td>
|
||
<td style={{ color: 'var(--fg-dim)' }}>Players issue high-level intentions — click a point of interest and the ship autopilots there. Click a hostile and the ship auto-engages. During combat the player manages <strong style={{ color: 'var(--fg)' }}>reactor power allocation</strong> (FTL-style) between systems. No manual flight, no aiming, no skill shots. The skill is in <strong style={{ color: 'var(--fg)' }}>what</strong> you power, not <strong style={{ color: 'var(--fg)' }}>how fast</strong> you click.</td>
|
||
<td><span className="pill pill-green">Era 1</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Core combat & movement loop</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span className="pill pill-purple">Ship fitting</span></td>
|
||
<td style={{ color: 'var(--fg-dim)' }}>CPU/Power Grid slot system. High/Med/Low slots with meaningful fitting tradeoffs. Multiple ships, AI crew (post-MVP).</td>
|
||
<td><span className="pill pill-green">Era 1</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Basic fitting, single ship class</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span className="pill pill-amber">Emergent lore</span></td>
|
||
<td style={{ color: 'var(--fg-dim)' }}>No server has the same lore as another. The galaxy is a <strong style={{ color: 'var(--fg)' }}>single persistent world</strong> with systems, planets, anomalies, and orbiting objects. A world simulation layer spawns PvE events dynamically — faction wars, space anomalies, migrations, raids — that create a <strong style={{ color: 'var(--fg)' }}>living story unique to every server</strong>. Lore evolves through both player actions and server-driven world events.</td>
|
||
<td><span className="pill pill-cyan" style={{ fontSize: '0.65rem' }}>Era 2</span> <span style={{ fontSize: '0.75rem', color: 'var(--fg-dim)' }}>Living galaxy requires world agents</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div className="section-header" style={{ marginTop: 'var(--sp-8)' }}>
|
||
<span className="section-num">OV-02</span>
|
||
<h2 style={{ margin: 0 }}>Design Principles</h2>
|
||
</div>
|
||
|
||
<div className="grid-2">
|
||
<div className="card" style={{ borderLeft: '3px solid var(--accent)' }}>
|
||
<h4 style={{ color: 'var(--accent)' }}>Spreadsheet simulator, not flight sim</h4>
|
||
<p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
|
||
90% of gameplay happens in tables, charts, and panels: market order books, cargo manifests, fitting spreadsheets,
|
||
route planners, ship AI logs, and chat channels. The 3D viewport gives spatial awareness, not twitch gameplay.
|
||
Movement is click-to-autopilot. Combat is click-to-engage with FTL-style power management. <strong style={{ color: 'var(--fg)' }}>The depth is in the economy and information.</strong>
|
||
</p>
|
||
</div>
|
||
<div className="card">
|
||
<h4 style={{ color: 'var(--cyan)' }}>Authoritative backend</h4>
|
||
<p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
|
||
SpacetimeDB owns authoritative game state. The browser renders state and sends player
|
||
intentions. The renderer should never become the source of truth.
|
||
</p>
|
||
</div>
|
||
<div className="card">
|
||
<h4 style={{ color: 'var(--green)' }}>Information is the real currency</h4>
|
||
<p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
|
||
Market data propagates at the speed of player travel, not the speed of light. Knowing a price discrepancy exists
|
||
before other traders — that's the skill. The ship AI (Zora) is a living market intelligence tool. See the
|
||
<em> Economy → 📡 Info Diffusion</em> tab for the full model.
|
||
</p>
|
||
</div>
|
||
<div className="card">
|
||
<h4 style={{ color: 'var(--purple)' }}>Movement & combat are not action</h4>
|
||
<p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0 }}>
|
||
The player never pilots the ship directly. Click a destination → ship autopilots. Click a hostile → ship auto-engages.
|
||
During combat, the player manages <strong style={{ color: 'var(--fg)' }}>reactor power allocation</strong> (FTL-style: weapons/shields/engines/aux)
|
||
and <strong style={{ color: 'var(--fg)' }}>subsystem targeting</strong>. That's it. Ship destruction
|
||
is an economic event (ISK sink, insurance payout, loot drop), not a competitive action moment. ISK (symbol ₢) is the canonical in-game currency.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section-header" style={{ marginTop: 'var(--sp-8)' }}>
|
||
<span className="section-num">OV-03</span>
|
||
<h2 style={{ margin: 0 }}>Core MVP Loop</h2>
|
||
</div>
|
||
|
||
<div className="card card-accent" style={{ padding: 'var(--sp-6) var(--sp-8)' }}>
|
||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.85rem', color: 'var(--fg-dim)', lineHeight: 2 }}>
|
||
<span style={{ color: 'var(--cyan)' }}>Connect</span> → <span style={{ color: 'var(--accent)' }}>Spawn Ship</span> →{' '}
|
||
<span style={{ color: 'var(--green)' }}>Navigate</span> →{' '}
|
||
<span style={{ color: 'var(--purple)' }}>Mine</span> →{' '}
|
||
<span style={{ color: 'var(--fg-bright)' }}>Inventory</span> →{' '}
|
||
<span style={{ color: 'var(--cyan)' }}>Station</span> →{' '}
|
||
<span style={{ color: 'var(--accent)' }}>Sell Ore</span> →{' '}
|
||
<span style={{ color: 'var(--green)' }}>Chat</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="callout callout-info" style={{ marginBottom: 'var(--sp-5)' }}>
|
||
<strong>The real loop is economic.</strong> Connect → gather information → identify opportunity → act on it → profit.
|
||
The "mine → sell" cycle is the entry point. The endgame is inter-regional arbitrage, supply chain management,
|
||
manufacturing empires, and market manipulation — all driven by <strong>information diffusion between systems</strong>.
|
||
</div>
|
||
|
||
<h3 style={{ marginTop: 'var(--sp-6)' }}>Minimum Viable Screens</h3>
|
||
|
||
<div className="callout callout-info" style={{ marginBottom: 'var(--sp-4)' }}>
|
||
<strong>Era 1 screens</strong> ship in the single-player proof of concept (Roadmap phases 0–7). These are the minimum screens needed to validate the core loop is fun.
|
||
</div>
|
||
<table className="data-table">
|
||
<thead>
|
||
<tr><th>Screen / Panel</th><th>Minimum Functionality</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Login / Connect</td><td>Display current identity and connection status.</td></tr>
|
||
<tr><td>3D Star-System Map</td><td>Strategic overview — ships, asteroids, station, click-to-set-waypoint. <strong>Not a flight sim.</strong></td></tr>
|
||
<tr><td>Ship Status Panel</td><td>Name, owner, status, cargo, current action, location.</td></tr>
|
||
<tr><td>Inventory Panel</td><td>Item type + quantity grid. Sell button when docked. Cargo capacity bar.</td></tr>
|
||
<tr><td>Station Panel</td><td>Dock/undock state, sell ore, view market, refit ship.</td></tr>
|
||
<tr><td>Market Panel</td><td>Order book, price per unit, place sell order from inventory. NPC-only economy in Era 1.</td></tr>
|
||
<tr><td>Combat HUD</td><td>Target selection, module activation, reactor power allocation bars (FTL-style).</td></tr>
|
||
<tr><td>Debug Panel</td><td>Reducer call log, error display, connection metrics, entity count.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div className="callout callout-info" style={{ marginTop: 'var(--sp-6)', marginBottom: 'var(--sp-4)' }}>
|
||
<strong>Era 2 screens</strong> require SpacetimeDB multiplayer infrastructure (Roadmap phases 8–15).
|
||
</div>
|
||
<table className="data-table">
|
||
<thead>
|
||
<tr><th>Screen / Panel</th><th>Minimum Functionality</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td style={{ fontWeight: 600, color: 'var(--accent)' }}>Market Panel ★</td><td><strong>Primary game surface.</strong> Order book with depth, price history charts, contract specifications, bid/ask spread, long/short positions, margin account, place orders (market/limit/stop). See the Interactive Demos → Market demo.</td></tr>
|
||
<tr><td style={{ fontWeight: 600, color: 'var(--cyan)' }}>Commodity Ticker</td><td>Scrolling price ticker across all contracts. Real-time price updates. Category filters. Sparkline charts.</td></tr>
|
||
<tr><td>Chat Panel</td><td>Send and receive local/system messages. Range-based propagation.</td></tr>
|
||
<tr><td>Bounty Board</td><td>Active bounties by tier, place bounty on player, kill feed.</td></tr>
|
||
<tr><td>Galaxy Map</td><td>Region/constellation/system hierarchy, faction territory overlay, active world events.</td></tr>
|
||
<tr><td>World Event Panel</td><td>Active events in current region, countdown timers, story log access.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div className="section-header" style={{ marginTop: 'var(--sp-8)' }}>
|
||
<span className="section-num">OV-04</span>
|
||
<h2 style={{ margin: 0 }}>HUD & View Mode Architecture</h2>
|
||
</div>
|
||
|
||
<div className="callout callout-info" style={{ marginBottom: 'var(--sp-5)' }}>
|
||
<strong>Decision: Hybrid diegetic + panel approach.</strong>
|
||
The game uses <strong>two distinct view modes</strong> depending on the player's state. This resolves the ambiguity
|
||
between the gamehud demo (which renders diegetic overlays on a 3D viewport) and the spec's description of traditional panels.
|
||
Both are correct — they apply to different contexts.
|
||
</div>
|
||
|
||
<div className="grid-2" style={{ marginBottom: 'var(--sp-6)' }}>
|
||
<div className="card" style={{ borderLeft: '3px solid var(--cyan)' }}>
|
||
<h4 style={{ color: 'var(--cyan)' }}>🚀 Flight Mode (Undocked)</h4>
|
||
<p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
|
||
When the player's ship is in space (undocked), the primary view is a <strong style={{ color: 'var(--fg)' }}>3D viewport
|
||
with diegetic HUD overlays</strong>. This is what the Game HUD demo validates. The 3D scene shows the ship's
|
||
surroundings (asteroids, stations, other ships, celestials) while the HUD overlays provide:
|
||
</p>
|
||
<ul style={{ color: 'var(--fg-dim)', fontSize: '0.82rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Shield/armor/hull bars</strong> — curved around the viewport center, not flat rectangles</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Module activation buttons</strong> — arranged in a bottom rack, grouped by slot type</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Overview panel</strong> — collapsible sidebar listing all on-grid entities with type, distance, and hostile/friendly status</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Target lock indicator</strong> — centered targeting reticle with lock timer</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Capacitor gauge</strong> — circular arc display</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Speed/distance HUD</strong> — current speed, target distance, ETA</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Chat stub</strong> — minimized chat bubble, expands to full chat on click</li>
|
||
</ul>
|
||
<div style={{ marginTop: 'var(--sp-3)', fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>
|
||
Validated by: Game HUD demo · Covers: movement, combat, mining interactions
|
||
</div>
|
||
</div>
|
||
<div className="card" style={{ borderLeft: '3px solid var(--accent)' }}>
|
||
<h4 style={{ color: 'var(--accent)' }}>🏢 Station Mode (Docked)</h4>
|
||
<p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
|
||
When the player is docked at a station, the 3D viewport is replaced by a <strong style={{ color: 'var(--fg)' }}>traditional
|
||
panel-based UI</strong> — the "spreadsheet simulator" surface. This is the Overview spec's "tables, charts, and panels"
|
||
description. Station mode panels include:
|
||
</p>
|
||
<ul style={{ color: 'var(--fg-dim)', fontSize: '0.82rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Market Panel</strong> — order book, price history charts, contract specifications</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Inventory Panel</strong> — item grid with quantity, type, value estimation</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Fitting Screen</strong> — ship slot layout with drag-and-drop module fitting</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Refining Interface</strong> — batch processing with yield preview</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Manufacturing Tab</strong> — blueprint selection, job queue, material requirements</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Insurance Panel</strong> — coverage tiers, premium calculator, active policies</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Agent/Mission Panel</strong> — NPC agent list, available missions, standings</li>
|
||
</ul>
|
||
<div style={{ marginTop: 'var(--sp-3)', fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>
|
||
Validated by: Market, Fitting, Refining demos · Covers: all station-based gameplay
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid-2" style={{ marginBottom: 'var(--sp-6)' }}>
|
||
<div className="card" style={{ borderLeft: '3px solid var(--green)' }}>
|
||
<h4 style={{ color: 'var(--green)' }}>🗺 Map Mode (Both)</h4>
|
||
<p style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: '0 0 var(--sp-3) 0' }}>
|
||
Accessible from either view mode, the map replaces the main viewport with a full-screen 3D strategic map.
|
||
<strong style={{ color: 'var(--fg)' }}>Era 1</strong> shows the current star system (single system with celestials, belts, stations).
|
||
<strong style={{ color: 'var(--fg)' }}>Era 2</strong> adds the Galaxy Map (multi-system with region/constellation hierarchy, faction overlay, world events).
|
||
</p>
|
||
<div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.72rem', color: 'var(--muted)' }}>
|
||
Era 1: System Map needed · Era 2: Validated by Star Map demo
|
||
</div>
|
||
</div>
|
||
<div className="card" style={{ borderLeft: '3px solid var(--purple)' }}>
|
||
<h4 style={{ color: 'var(--purple)' }}>Transition Rules</h4>
|
||
<ul style={{ color: 'var(--fg-dim)', fontSize: '0.82rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Undock:</strong> Flight Mode fades in with 3D viewport. HUD elements animate in sequence (shields → modules → overview).</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Dock:</strong> 3D viewport zooms toward station. Fades to Station Mode panel layout.</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Open Map:</strong> Current viewport shrinks into a corner (minimap). Full map overlay fades in.</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Close Map:</strong> Map fades out. Previous viewport mode restores.</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Combat ambush:</strong> If attacked while docked, player auto-undocks into Flight Mode (no safe space abuse).</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="callout callout-warn">
|
||
<strong>Why not all-diegetic or all-panel?</strong>
|
||
A fully diegetic HUD (Dead Space style) works for immersion but is terrible for spreadsheet gameplay — you can't read
|
||
an order book through a holographic visor. A fully panel UI (traditional MMO) loses the spatial awareness that makes
|
||
space feel like space. The hybrid approach keeps the best of both: diegetic immersion during the action, panel efficiency
|
||
during the economy game. The key insight is that <strong>the game alternates between two distinct cognitive modes</strong> —
|
||
reactive (in-space, monitoring health/modules/overview) and analytical (docked, reading tables/planning routes).
|
||
Each view mode is optimized for its cognitive mode.
|
||
</div>
|
||
|
||
<div className="section-header" style={{ marginTop: 'var(--sp-8)' }}>
|
||
<span className="section-num">OV-05</span>
|
||
<h2 style={{ margin: 0 }}>Onboarding & Tutorial</h2>
|
||
</div>
|
||
|
||
<div className="callout callout-info" style={{ marginBottom: 'var(--sp-5)' }}>
|
||
<strong>The first 30 minutes teach the game through doing, not reading.</strong> New players learn by playing a guided
|
||
mission sequence that introduces each system naturally. There is no separate "tutorial mode" \u2014 the tutorial IS the game.
|
||
See Economy \u2192 First 30 Minutes tab for the full moment-by-moment walkthrough.
|
||
</div>
|
||
|
||
<div className="grid-2" style={{ marginBottom: 'var(--sp-6)' }}>
|
||
<div className="card" style={{ borderLeft: '3px solid var(--cyan)' }}>
|
||
<h4 style={{ color: 'var(--cyan)' }}>Guided Mission Sequence</h4>
|
||
<ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Mission 1:</strong> "Welcome, Pilot" \u2014 undock, warp to belt, mine 100 ore, dock, sell. Teaches: navigation, mining, market.</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Mission 2:</strong> "Armed and Ready" \u2014 accept kill mission, engage NPC frigate, manage power allocation, collect bounty. Teaches: combat, insurance.</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Mission 3:</strong> "Supply Chain" \u2014 refine ore, manufacture a module, fit it to ship. Teaches: industry, fitting.</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Mission 4:</strong> "Price Watcher" \u2014 fly to second station, compare prices, sell at the better one. Teaches: price discovery, trade routes.</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Mission 5:</strong> "Your AI Companion" \u2014 Zora introduces herself, explains her modules, offers first market tip. Teaches: Zora, AI modules.</li>
|
||
</ul>
|
||
</div>
|
||
<div className="card" style={{ borderLeft: '3px solid var(--green)' }}>
|
||
<h4 style={{ color: 'var(--green)' }}>Tutorial Principles</h4>
|
||
<ul style={{ color: 'var(--fg-dim)', fontSize: '0.85rem', margin: 0, paddingLeft: 'var(--sp-5)' }}>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Teach by doing:</strong> Every tutorial element is an actual game action, not a text popup.</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Earn while learning:</strong> Tutorial missions pay real ISK and XP. No wasted time.</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Skip allowed:</strong> Veterans can skip the tutorial sequence. No forced hand-holding.</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>Zora as guide:</strong> Zora delivers tutorial hints in-character. "I notice you haven't opened the fitting screen yet. Want me to walk you through it?"</li>
|
||
<li><strong style={{ color: 'var(--fg)' }}>No dead ends:</strong> If a player gets stuck, Zora proactively offers help after 60s of inactivity.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
window.GDD.OverviewPage = OverviewPage;
|