deepseek
f040bb6be0
- Stylized 3D ink-painting map of China (12 provinces, 32 cities, 17 factions) - Custom warlord creation (8 origins, banner, starting city) or historical factions - City management: 7 buildings, 5 dev tiers, recruitment from levies - Character system: stats, traits, loyalty, relationships, wounds, capture, death, succession - Turn-based tactical battles with formations, stances, hero skills, cinematic 3D replay - Sieges: assault, starvation, bribery, infiltration - Diplomacy with trust memory, alliances, NAPs, trade, marriage, espionage, betrayal - Scripted diverging history (Dong Zhuo, Guandu, Red Cliffs...) + world crises + court events - AI factions with distinct personalities; prisoners (execute/release/recruit/ransom) - Procedural guqin/taiko WebAudio score; save/load; victory + dynasty chronicle screens - View-relative camera controls; headless test suites (smoke, stress, map validator)
208 lines
8.8 KiB
HTML
208 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Warlord's Fate — a Three Kingdoms Chronicle</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Noto+Serif+SC:wght@400;600;900&family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>⚔</text></svg>">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<!-- ======== TITLE SCREEN ======== -->
|
||
<div id="title-screen" class="screen">
|
||
<div class="title-ink"></div>
|
||
<div class="title-inner">
|
||
<div class="title-seal">漢末<br>群雄</div>
|
||
<h1 class="game-title">WARLORD'S FATE</h1>
|
||
<div class="game-subtitle">三国 · 群雄传 — A Three Kingdoms Chronicle</div>
|
||
<p class="title-tag">The Han collapses. Warlords rise. History is unwritten.<br>Take a city, a banner, and a handful of sworn blades — and carve your name into the age.</p>
|
||
<div class="title-menu">
|
||
<button class="btn btn-primary" id="btn-new-campaign">⚑ New Grand Campaign</button>
|
||
<button class="btn" id="btn-new-challenge">⏳ Hundred Days Trial</button>
|
||
<button class="btn" id="btn-continue" disabled>↻ Continue Campaign</button>
|
||
<button class="btn" id="btn-load-title">▤ Load Saved Game</button>
|
||
<button class="btn" id="btn-help-title">？ How to Play</button>
|
||
</div>
|
||
<div class="title-foot">An original strategy chronicle · stylized 3D China · every playthrough writes a different history</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ======== NEW GAME SETUP ======== -->
|
||
<div id="setup-screen" class="screen hidden">
|
||
<div class="setup-scroll">
|
||
<h2 class="panel-title">Raise Your Banner <span class="cn">举旗</span></h2>
|
||
|
||
<div class="setup-section">
|
||
<h3>I. Origin <span class="cn-small">出身</span></h3>
|
||
<div id="origin-list" class="choice-row"></div>
|
||
<div id="origin-desc" class="hint-box"></div>
|
||
</div>
|
||
|
||
<div class="setup-columns">
|
||
<div class="setup-section">
|
||
<h3>II. Identity</h3>
|
||
<label>Ruler name <input id="inp-ruler" type="text" maxlength="16" value="Minh"></label>
|
||
<label>Banner emblem
|
||
<select id="sel-emblem">
|
||
<option>⚔</option><option>🐉</option><option>🦅</option><option>🐯</option><option>🐺</option><option>🔥</option><option>⛰</option><option>☯</option><option>🏹</option><option>🐎</option><option>🗡</option><option>🏮</option>
|
||
</select>
|
||
</label>
|
||
<label>Banner color <input id="inp-color" type="color" value="#c2452d"></label>
|
||
<label>Faction name (optional) <input id="inp-factionname" type="text" maxlength="20" placeholder="House of …"></label>
|
||
</div>
|
||
<div class="setup-section">
|
||
<h3>III. Starting City <span class="cn-small">起兵之地</span></h3>
|
||
<div id="city-list" class="city-list"></div>
|
||
<div id="city-desc" class="hint-box"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="setup-section">
|
||
<h3>IV. Difficulty</h3>
|
||
<div id="diff-list" class="choice-row small"></div>
|
||
</div>
|
||
|
||
<div class="setup-actions">
|
||
<button class="btn btn-primary" id="btn-begin">Begin the Chronicle</button>
|
||
<button class="btn" id="btn-back-title">Back</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ======== PICK FACTION (for standard warlord campaign) ======== -->
|
||
<div id="faction-screen" class="screen hidden">
|
||
<div class="setup-scroll">
|
||
<h2 class="panel-title">Choose a Warlord <span class="cn">选择势力</span></h2>
|
||
<div id="faction-list" class="faction-grid"></div>
|
||
<div class="setup-actions">
|
||
<button class="btn btn-primary" id="btn-faction-go">Lead This Faction</button>
|
||
<button class="btn" id="btn-back-title2">Back</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ======== MAIN GAME ======== -->
|
||
<div id="game-screen" class="screen hidden">
|
||
<canvas id="gl"></canvas>
|
||
<div id="labels"></div>
|
||
|
||
<!-- Top HUD -->
|
||
<div id="hud-top">
|
||
<div class="hud-block hud-date">
|
||
<span id="hud-season">Spring</span>
|
||
<b id="hud-date">Winter 193 · Jan</b>
|
||
</div>
|
||
<div class="hud-block"><span class="res-ico">◉</span><b id="hud-gold">0</b><span class="delta" id="hud-gold-d"></span></div>
|
||
<div class="hud-block"><span class="res-ico">🌾</span><b id="hud-food">0</b><span class="delta" id="hud-food-d"></span></div>
|
||
<div class="hud-block"><span class="res-ico">⚔</span><b id="hud-troops">0</b></div>
|
||
<div class="hud-block"><span class="res-ico">🏯</span><b id="hud-cities">0</b></div>
|
||
<div class="hud-block"><span class="res-ico">🎖</span><b id="hud-generals">0</b></div>
|
||
<div class="hud-block legit" title="Legitimacy — how rightful the realm believes your rule to be"><span class="res-ico">☰</span><b id="hud-legit">0</b></div>
|
||
<div class="hud-spacer"></div>
|
||
<button class="icon-btn" id="btn-audio" title="Music / sound">♪</button>
|
||
<button class="icon-btn" id="btn-save" title="Save game">💾</button>
|
||
<button class="icon-btn" id="btn-menu" title="Menu">≡</button>
|
||
<button id="btn-endturn">END TURN <span class="cn-small" style="opacity:.8">下一月</span></button>
|
||
</div>
|
||
|
||
<!-- Left quick info -->
|
||
<div id="hud-left">
|
||
<div class="mini-note" id="turn-objective"></div>
|
||
</div>
|
||
|
||
<!-- Bottom tab bar -->
|
||
<div id="tab-bar">
|
||
<button class="tab-btn active" data-tab="court">🎖 Generals</button>
|
||
<button class="tab-btn" data-tab="cities">🏯 Cities</button>
|
||
<button class="tab-btn" data-tab="armies">🐴 Armies</button>
|
||
<button class="tab-btn" data-tab="diplomacy">🤝 Diplomacy</button>
|
||
<button class="tab-btn" data-tab="court-politics">☰ Court</button>
|
||
<button class="tab-btn" data-tab="journal">📜 Journal</button>
|
||
<button class="tab-btn" data-tab="chronicle">🖋 Chronicle</button>
|
||
<button class="tab-btn" data-tab="help">？ Help</button>
|
||
</div>
|
||
|
||
<!-- Side panel -->
|
||
<div id="side-panel" class="hidden">
|
||
<div id="panel-content"></div>
|
||
<button class="icon-btn panel-close" id="btn-panel-close">✕</button>
|
||
</div>
|
||
|
||
<!-- Selection tooltip card -->
|
||
<div id="hover-card" class="hidden"></div>
|
||
|
||
<!-- Event modal -->
|
||
<div id="event-modal" class="modal hidden">
|
||
<div class="event-card">
|
||
<div class="event-kind" id="event-kind">COURT</div>
|
||
<h2 id="event-title">—</h2>
|
||
<div class="event-art" id="event-art"></div>
|
||
<p id="event-text"></p>
|
||
<div id="event-choices"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toasts -->
|
||
<div id="toasts"></div>
|
||
|
||
<!-- Turn banner -->
|
||
<div id="turn-banner" class="hidden"><div id="turn-banner-text"></div></div>
|
||
|
||
<!-- Battle overlay -->
|
||
<div id="battle-overlay" class="hidden">
|
||
<canvas id="battle-gl"></canvas>
|
||
<div id="battle-hud">
|
||
<div class="bh-side bh-left">
|
||
<div class="bh-name" id="bh-att-name">Attacker</div>
|
||
<div class="bh-bar"><div id="bh-att-morale"></div></div>
|
||
<div class="bh-troops" id="bh-att-troops"></div>
|
||
</div>
|
||
<div class="bh-center">
|
||
<div id="bh-round">—</div>
|
||
<div id="bh-terrain">Plains</div>
|
||
</div>
|
||
<div class="bh-side bh-right">
|
||
<div class="bh-name" id="bh-def-name">Defender</div>
|
||
<div class="bh-bar"><div id="bh-def-morale"></div></div>
|
||
<div class="bh-troops" id="bh-def-troops"></div>
|
||
</div>
|
||
</div>
|
||
<div id="battle-callout"></div>
|
||
<div id="battle-result" class="hidden"></div>
|
||
<button id="battle-speed" class="icon-btn">▶▶</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Load dialog -->
|
||
<div id="load-modal" class="modal hidden">
|
||
<div class="event-card">
|
||
<h2>Load Campaign</h2>
|
||
<div id="save-slots"></div>
|
||
<div style="text-align:center;margin-top:12px"><button class="btn" id="btn-load-close">Close</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Game over / victory -->
|
||
<div id="end-screen" class="screen hidden">
|
||
<div class="end-scroll">
|
||
<h1 id="end-title">THE CHRONICLE OF YOUR DYNASTY</h1>
|
||
<div id="end-dynasty" class="dynasty-name"></div>
|
||
<pre id="end-chronicle"></pre>
|
||
<div id="end-stats"></div>
|
||
<div class="setup-actions">
|
||
<button class="btn btn-primary" id="btn-end-title">Return to Title</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="vignette"></div>
|
||
<div id="loading" class="hidden">LOADING THE REALM…</div>
|
||
</div>
|
||
<script type="module" src="js/main.js"></script>
|
||
</body>
|
||
</html>
|