`:
```html
```
**Step 2: Add renderMap to render.js**
```javascript
export function renderMap(map) {
const game = document.getElementById("game");
const mapScreen = document.getElementById("map-screen");
const overlay = document.getElementById("overlay");
game.hidden = true;
overlay.hidden = true;
mapScreen.hidden = false;
const container = document.getElementById("map-nodes");
container.innerHTML = "";
for (const node of map.nodes) {
const div = document.createElement("div");
div.className = "map-node";
div.dataset.id = node.id;
div.dataset.type = node.type;
const isCurrent = node.id === map.currentNode;
const label = node.cleared ? `[${node.type}] ✓` : `[${node.type}]`;
div.textContent = label;
if (isCurrent) {
div.style.fontWeight = "bold";
div.textContent = `> ${label}`;
}
container.appendChild(div);
// add connector line between nodes (except last)
if (node.id < map.nodes.length - 1) {
const line = document.createElement("div");
line.textContent = "|";
line.className = "map-connector";
container.appendChild(line);
}
}
}
export function showGame() {
document.getElementById("game").hidden = false;
document.getElementById("map-screen").hidden = true;
}
```
**Step 3: Run checks**
Run: `bun run check`
Expected: PASS
**Step 4: Commit**
```
Add wireframe map rendering with node list and proceed button
```
---
### Task 16: Wire map into main.js game loop
**Files:**
- Modify: `src/main.js`
- Modify: `src/run.js`
The game loop becomes: map screen -> click proceed -> handle node (combat or campfire) -> after resolution -> advance map -> map screen.
**Step 1: Add map to run state**
In `src/run.js`, add import and update createRunState:
```javascript
import { createMap } from "./map.js";
export function createRunState(character) {
return {
character,
hp: 11,
maxHp: 11,
deck: [...getStarterDeck(character)],
cardRewardsDeck: buildRewardsDeck(character),
potions: [],
combatCount: 0,
map: createMap(),
};
}
```
**Step 2: Update main.js to use map flow**
This is a significant rewrite of the game flow. The key changes:
- `startNewRun()` shows the map instead of immediately starting combat
- "proceed" button reads current node type and dispatches to combat or campfire
- After reward pick/skip, advance map and show map screen
- After defeat, show restart option
Update main.js to import map functions and add the map flow:
```javascript
import { advanceMap, getCurrentNode, getNodeEnemy } from "./map.js";
import { renderMap, showGame } from "./render.js";
```
Replace `startNewRun`:
```javascript
function startNewRun() {
run = createRunState("ironclad");
showMapScreen();
}
function showMapScreen() {
renderMap(run.map);
}
function proceedFromMap() {
const node = getCurrentNode(run.map);
if (node.type === "campfire") {
showCampfire();
} else if (["encounter", "elite", "boss"].includes(node.type)) {
const enemyId = getNodeEnemy(node.type);
showGame();
state = createCombatFromRun(run, enemyId);
state = startTurn(state);
revealed = null;
render(state);
} else {
// stubbed node types (event, merchant, treasure)
run = { ...run, map: advanceMap(run.map) };
showMapScreen();
}
}
```
Replace reward/skip handlers to advance map:
```javascript
// after picking or skipping reward:
run = endCombat(run, state.players[0].hp);
run = pickReward(run, revealed, index); // or skipRewards
run = { ...run, map: advanceMap(run.map) };
// check if boss was defeated (act complete)
const clearedNode = run.map.nodes[run.map.currentNode - 1];
if (clearedNode?.type === "boss") {
// act 1 complete!
state = { ...state, combat: { ...state.combat, phase: "ended", result: "act_complete" } };
render(state);
return;
}
showMapScreen();
```
Add proceed button handler:
```javascript
document.getElementById("map-proceed-btn").addEventListener("click", () => {
proceedFromMap();
});
```
**Step 3: Update renderOverlay to handle act_complete**
In `src/render.js`, add to renderOverlay:
```javascript
} else if (state?.combat?.result === "act_complete") {
overlay.hidden = false;
overlayText.textContent = "act 1 complete!";
rewardCards.innerHTML = "";
skipBtn.hidden = true;
```
**Step 4: Run checks**
Run: `bun run check`
Expected: PASS
**Step 5: Manual play test**
Run: `bun run dev`
Verify:
- Game starts with map screen showing 10 nodes
- Click proceed -> first encounter starts
- Win -> rewards -> pick/skip -> back to map (node marked cleared)
- Navigate through encounters, campfires, elites
- Stubbed nodes (if any) auto-advance
- Boss victory -> "act 1 complete!"
- Defeat -> restart option
**Step 6: Commit**
```
Wire linear map into game loop with node progression
```
---
## Phase D: Campfire
### Task 17: Campfire — rest (heal)
**Files:**
- Modify: `src/run.js`
- Modify: `src/run.test.js`
**Step 1: Write failing test**
```javascript
import { campfireRest } from "./run.js";
describe("campfireRest", () => {
test("heals 3 HP", () => {
let run = createRunState("ironclad");
run = { ...run, hp: 5 };
const result = campfireRest(run);
expect(result.hp).toBe(8);
});
test("does not heal above maxHp", () => {
let run = createRunState("ironclad");
run = { ...run, hp: 10 };
const result = campfireRest(run);
expect(result.hp).toBe(11);
});
});
```
**Step 2: Implement**
Add to `src/run.js`:
```javascript
export function campfireRest(run) {
return { ...run, hp: Math.min(run.hp + 3, run.maxHp) };
}
```
**Step 3: Run tests**
Run: `bun test`
Expected: PASS
**Step 4: Commit**
```
Add campfireRest function — heals 3 HP
```
---
### Task 18: Campfire — smith (upgrade card)
**Files:**
- Modify: `src/run.js`
- Modify: `src/run.test.js`
**Step 1: Write failing tests**
```javascript
import { campfireSmith, getUpgradableCards } from "./run.js";
describe("campfireSmith", () => {
test("replaces base card with upgraded version in deck", () => {
let run = createRunState("ironclad");
const result = campfireSmith(run, "strike_r");
expect(result.deck).toContain("strike_r+");
expect(result.deck.filter((c) => c === "strike_r").length).toBe(4);
});
test("does nothing if card not in deck", () => {
let run = createRunState("ironclad");
const result = campfireSmith(run, "anger");
expect(result.deck).toEqual(run.deck);
});
});
describe("getUpgradableCards", () => {
test("returns cards that have an upgraded version", () => {
const run = createRunState("ironclad");
const upgradable = getUpgradableCards(run);
expect(upgradable.length).toBeGreaterThan(0);
// should not include already-upgraded cards
expect(upgradable.every((id) => !id.endsWith("+"))).toBe(true);
});
});
```
**Step 2: Implement**
Add to `src/run.js`:
```javascript
import { getCard } from "./cards.js";
export function campfireSmith(run, cardId) {
const card = getCard(cardId);
if (!card?.upgraded) return run;
const idx = run.deck.indexOf(cardId);
if (idx === -1) return run;
const deck = [...run.deck];
deck[idx] = card.upgraded;
return { ...run, deck };
}
export function getUpgradableCards(run) {
const seen = new Set();
const upgradable = [];
for (const id of run.deck) {
if (seen.has(id)) continue;
seen.add(id);
const card = getCard(id);
if (card?.upgraded && !id.endsWith("+")) {
upgradable.push(id);
}
}
return upgradable;
}
```
**Step 3: Run tests**
Run: `bun test`
Expected: PASS
**Step 4: Commit**
```
Add campfireSmith and getUpgradableCards for card upgrading
```
---
### Task 19: Campfire UI and wiring
**Files:**
- Modify: `index.html`
- Modify: `src/render.js`
- Modify: `src/main.js`
**Step 1: Add campfire HTML**
Add to `index.html`, after map-screen section:
```html
campfire
```
**Step 2: Add renderCampfire to render.js**
```javascript
export function renderCampfire(run, upgradableCards) {
document.getElementById("game").hidden = true;
document.getElementById("map-screen").hidden = true;
document.getElementById("overlay").hidden = true;
document.getElementById("campfire-screen").hidden = false;
document.getElementById("campfire-hp").textContent = `HP: ${run.hp}/${run.maxHp}`;
document.getElementById("smith-cards").hidden = true;
if (upgradableCards) {
const container = document.getElementById("smith-cards");
container.hidden = false;
container.innerHTML = "";
for (const cardId of upgradableCards) {
const card = getCard(cardId);
const btn = document.createElement("button");
btn.textContent = `${card.name} -> ${card.upgraded}`;
btn.dataset.cardId = cardId;
btn.className = "smith-card-btn";
container.appendChild(btn);
}
}
}
export function hideCampfire() {
document.getElementById("campfire-screen").hidden = true;
}
```
**Step 3: Wire campfire in main.js**
Add a `showCampfire` function and event handlers:
```javascript
function showCampfire() {
renderCampfire(run);
}
document.getElementById("campfire-rest-btn").addEventListener("click", () => {
run = campfireRest(run);
run = { ...run, map: advanceMap(run.map) };
hideCampfire();
showMapScreen();
});
document.getElementById("campfire-smith-btn").addEventListener("click", () => {
const upgradable = getUpgradableCards(run);
renderCampfire(run, upgradable);
});
document.getElementById("smith-cards").addEventListener("click", (e) => {
const btn = e.target.closest(".smith-card-btn");
if (!btn) return;
run = campfireSmith(run, btn.dataset.cardId);
run = { ...run, map: advanceMap(run.map) };
hideCampfire();
showMapScreen();
});
```
**Step 4: Run checks**
Run: `bun run check`
Expected: PASS
**Step 5: Manual play test**
Verify:
- Reach campfire node on map -> proceed shows campfire screen
- Rest heals 3 HP, returns to map
- Smith shows upgradable cards, picking one upgrades it, returns to map
**Step 6: Commit**
```
Add campfire UI with rest and smith options
```
---
## Phase E: Boss + Final Polish
### Task 20: Boss encounter and act complete screen
**Files:**
- Modify: `src/render.js`
- Modify: `src/main.js`
The boss fight itself uses the existing combat system — it's just a tougher enemy. The only new thing is the act-complete screen on victory.
**Step 1: Verify boss enemies exist in data**
Check that `slime_boss` and `the_guardian` are in enemies.json with correct data. If they have high HP and cube/die actions, they should work with the existing combat engine.
**Step 2: Update act-complete overlay**
The overlay text for act complete should offer a "play again" option:
```javascript
// in renderOverlay
} else if (state?.combat?.result === "act_complete") {
overlay.hidden = false;
overlayText.textContent = "act 1 complete — click to play again";
rewardCards.innerHTML = "";
skipBtn.hidden = true;
```
Add handler in main.js:
```javascript
// in overlay click handler, add:
if (state.combat.phase === "ended" && state.combat.result === "act_complete") {
startNewRun();
}
```
**Step 3: Run checks**
Run: `bun run check`
Expected: PASS
**Step 4: Full playthrough test**
Run: `bun run dev`
Play through the entire Act 1:
- Start on map
- Fight encounters, pick rewards
- Rest or smith at campfires
- Fight elites
- Defeat boss
- See "act 1 complete" screen
- Click to start new run
**Step 5: Commit**
```
Add act 1 boss encounter and completion screen
```
---
### Task 21: Final checks and cleanup
**Step 1: Run full check suite**
Run: `bun run check`
Expected: PASS (lint + typecheck + all tests)
**Step 2: Play test edge cases**
- Die on first encounter -> restart works
- Skip all rewards -> deck stays at 10
- Take every reward -> deck grows each combat
- Rest at every campfire -> HP stays healthy
- Smith upgrades actually change cards in combat
- Boss fight is noticeably harder than regular encounters
**Step 3: Commit any fixes found**
---
## Task checklist
Phase A — Run State + Rewards:
- [x] Task 1: Export shuffle, add getAllCards
- [x] Task 2: Run state module (createRunState)
- [x] Task 3: Reward reveal, pick, skip
- [x] Task 4: Create combat from run state
- [x] Task 5: Wire run loop in main.js
Phase B — Combat Keywords:
- [x] Task 6: Exhaust keyword
- [x] Task 7: Ethereal keyword
- [x] Task 8: Retain keyword
- [x] Task 9: Poison effect
- [x] Task 10: Poison tick
- [x] Task 11: Unplayable keyword
- [x] Task 12: Ironclad end-of-combat heal
Phase C — Linear Map:
- [x] Task 13: Map state module
- [x] Task 14: Enemy pools for map nodes
- [x] Task 15: Map rendering (wireframe)
- [x] Task 16: Wire map into game loop
Phase D — Campfire:
- [x] Task 17: Campfire rest
- [x] Task 18: Campfire smith
- [x] Task 19: Campfire UI and wiring
Phase E — Boss + Polish:
- [x] Task 20: Boss encounter and act complete
- [x] Task 21: Final checks and cleanup