Parley Hatch
902a233229
A real-time consumer of combat-core (the front-end the spec designs for, §14): pick a foe, manage your single Vigor pool, try not to spend your survival. - combat-core: a HumanController (input-driven, spec §5) behind a shared intent cell, plus Encounter::tick_once / drain_events so a wall-clock front-end can drive the engine a tick at a time (§10). Trivial abilities (difficulty 0, e.g. auto-attack) no longer fizzle. Engine unchanged otherwise; 48 tests still green. - combat-wasm: a wasm-bindgen Game bridge — tick-stepping, JSON world state, the player's ability list, and a flavorful MonsterAI that uses each monster's signature kit (the wraith curses your ceiling) on a coin-flip so big hits space into a readable duel. Own workspace member, kept out of the default host build. - combat-web: an atmospheric battler. The signature dual Vigor bar shows fill, the regen-headroom ceiling, the ceiling marker, and the dark cracked fatigue zone in one bar — the squeeze made legible. Floating damage, cast telegraphs, combat log, result overlay. Verified end-to-end in a real browser. - tools/portraits.py: stdlib text-to-image client reusing the proven LAN Z-Image stack (minus the depth ControlNet) to render the bestiary. 7 portraits committed. - Added skeleton / troll / wraith monster stat blocks; bumped the duelist's durability so fights are readable (even-con ~30s) and active play beats every monster while passive auto-attacking loses the hard ones. Re-validated the sim: the skill gradient and anti-turtle guardrail still hold (auto ~1% → skill100 34% at even con). README findings updated to match. Verified live: roster screen, win/lose, the dual bars, telegraphed casts, and a 3s active-play victory over the Skeleton Knight. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
84 lines
3.1 KiB
HTML
84 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Vigor — combined-pool combat</title>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
|
|
<!-- ── Start: choose your foe ─────────────────────────────────────── -->
|
|
<section id="start" class="screen">
|
|
<header class="masthead">
|
|
<h1>VIGOR</h1>
|
|
<p class="tagline">One pool. Offense spends your survival. Choose a foe.</p>
|
|
</header>
|
|
<div id="roster" class="roster"><!-- filled by JS --></div>
|
|
<footer class="legend">
|
|
<span><b class="swatch fill"></b> Vigor (fill) — your energy & your absorb capacity</span>
|
|
<span><b class="swatch cap"></b> Cap (ceiling) — regen headroom</span>
|
|
<span><b class="swatch fatigue"></b> Fatigue — ceiling lost this fight</span>
|
|
</footer>
|
|
</section>
|
|
|
|
<!-- ── Battle ─────────────────────────────────────────────────────── -->
|
|
<section id="battle" class="screen hidden">
|
|
<div class="arena">
|
|
|
|
<!-- enemy -->
|
|
<div id="enemy-card" class="combatant enemy">
|
|
<div class="portrait-wrap">
|
|
<img id="enemy-portrait" class="portrait" alt="" />
|
|
<div id="enemy-cast" class="cast hidden"><span class="cast-label"></span><div class="cast-fill"></div></div>
|
|
</div>
|
|
<div class="nameplate">
|
|
<span id="enemy-name" class="cname"></span>
|
|
<span id="enemy-level" class="clevel"></span>
|
|
</div>
|
|
<div class="vbar-mount" id="enemy-vbar"></div>
|
|
<div id="enemy-status" class="statusrow"></div>
|
|
</div>
|
|
|
|
<div class="midline">
|
|
<div id="floaters" class="floaters"></div>
|
|
<div class="vs">⚔</div>
|
|
</div>
|
|
|
|
<!-- player -->
|
|
<div id="player-card" class="combatant player">
|
|
<div class="nameplate">
|
|
<span id="player-name" class="cname"></span>
|
|
<span id="player-level" class="clevel"></span>
|
|
</div>
|
|
<div class="vbar-mount" id="player-vbar"></div>
|
|
<div id="player-status" class="statusrow"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hud">
|
|
<div id="actionbar" class="actionbar"><!-- ability buttons --></div>
|
|
<div class="hud-side">
|
|
<button id="auto-toggle" class="auto on" title="Auto-attack (space)">AUTO ⚔</button>
|
|
<div id="log" class="log"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- result overlay -->
|
|
<div id="result" class="overlay hidden">
|
|
<div class="result-card">
|
|
<h2 id="result-title"></h2>
|
|
<p id="result-sub"></p>
|
|
<div class="result-actions">
|
|
<button id="again">Fight again</button>
|
|
<button id="choose">Choose foe</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script type="module" src="./game.js"></script>
|
|
</body>
|
|
</html>
|