Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
97 lines (91 loc) · 4.47 KB
/
Copy pathindex.html
File metadata and controls
97 lines (91 loc) · 4.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cogfall — a clockwork deckbuilding roguelike</title>
<link rel="stylesheet" href="game.css" />
</head>
<body>
<!-- Top bar (shown during a run) -->
<div id="topbar" class="hidden">
<span class="title">⚙️ Cogfall</span>
<span class="stat" title="Health">
<span class="icon">❤️</span>
<span class="hp-text"><span id="ui-hp">80</span>/<span id="ui-maxhp">80</span></span>
</span>
<span class="stat" title="Scrap">
<span class="icon">🪙</span>
<span class="gold-text" id="ui-gold">99</span>
</span>
<span class="stat" title="Floor">
<span class="floor-text">Floor <span id="ui-floor">0</span></span>
</span>
<span class="stat relic-row" id="ui-relics" title="Relics"></span>
<span class="spacer"></span>
<button class="link-btn" id="btn-deck">🃏 Deck (<span id="ui-decksize">0</span>)</button>
<button class="link-btn" id="btn-abandon">Abandon Run</button>
</div>
<!-- Title screen -->
<div id="title-screen" class="screen">
<h1>⚙️ Cogfall</h1>
<p>
A clockwork deckbuilding roguelike. The Aurum Core — a
god-sized machine — died long ago, and now something is winding
it back to life. You are a reactivated automaton, fighting up
through its rusted sectors with a deck of cards, salvaging new
gear and <em>Cogs</em>, to reach and shatter its heart. Every
run reshapes the machine — choose your path wisely.
</p>
<p class="muted">
Play a card by clicking it (attacks ask you to pick a target).
Spend your <b>Steam</b> each turn, then <b>End Turn</b>.
<b>Plating</b> (your block) absorbs damage. Each machine plays
differently — read your fighter's signature below.
</p>
<h3 class="gold">Choose your machine</h3>
<div class="char-picker" id="char-picker"></div>
<button class="big-btn" id="btn-start">Begin the Descent ⚙️</button>
</div>
<!-- Map screen -->
<div id="map-screen" class="screen hidden">
<h2 class="center">Choose your route through the machine</h2>
<p class="center muted" id="map-legend">
⚔️ Sentinel 💀 Warden 🔧 Repair 💰 Vault
🏪 Market ❓ Anomaly 🦿 Guardian ⚙️
Core
</p>
<div id="map-scroll">
<div id="map-inner"></div>
</div>
</div>
<!-- Combat screen -->
<div id="combat-screen" class="screen hidden">
<div class="battlefield">
<div id="player-side"></div>
<div id="enemy-side" style="display: flex; gap: 34px; align-items: flex-end;"></div>
</div>
<div class="log" id="combat-log"></div>
<div class="combat-hud">
<div class="hud-row">
<div class="energy-orb"><span id="ui-energy">3</span>/<span id="ui-maxenergy">3</span></div>
<button class="pile-btn" id="btn-draw-pile">Draw: <span id="ui-drawcount">0</span></button>
<button class="pile-btn" id="btn-discard-pile">Discard: <span id="ui-discardcount">0</span></button>
<span class="muted" id="target-hint"></span>
<button class="end-turn-btn" id="btn-end-turn">End Turn</button>
</div>
<div class="hand" id="hand"></div>
</div>
</div>
<!-- Overlay container -->
<div id="overlay" class="overlay hidden"></div>
<div id="tooltip" class="tooltip hidden"></div>
<p class="center muted" style="padding: 12px; font-size: 12px">
<a href="../Hobbies/index.html" style="color: var(--muted)">← Back to Hobbies</a>
|
<a href="../Home/index.html" style="color: var(--muted)">Home</a>
· An original clockwork deckbuilder.
</p>
<script src="game.js"></script>
</body>
</html>