Add campfire UI with rest and smith actions

index.html

@@ -40,6 +40,16 @@
     <button type="button" id="map-proceed-btn">proceed</button>
   </section>
 
+  <section id="campfire-screen" hidden>
+    <h2>campfire</h2>
+    <p id="campfire-hp"></p>
+    <div id="campfire-choices">
+      <button type="button" id="campfire-rest-btn">rest (heal 3 HP)</button>
+      <button type="button" id="campfire-smith-btn">smith (upgrade a card)</button>
+    </div>
+    <div id="smith-cards" hidden></div>
+  </section>
+
   <div id="overlay" hidden>
     <div id="overlay-text"></div>
     <div id="reward-cards"></div>

src/main.js

@@ -2,10 +2,19 @@ import { getCard, initCards } from "./cards.js";
 import { checkCombatEnd, resolveEnemyTurn, startTurn } from "./combat.js";
 import { initEnemies } from "./enemies.js";
 import { advanceMap, getCurrentNode, getNodeEnemy } from "./map.js";
-import { render, renderMap, showGame } from "./render.js";
 import {
+  hideCampfire,
+  render,
+  renderCampfire,
+  renderMap,
+  showGame,
+} from "./render.js";
+import {
+  campfireRest,
+  campfireSmith,
   createRunState,
   endCombat,
+  getUpgradableCards,
   pickReward,
   revealRewards,
   skipRewards,
@@ -32,12 +41,14 @@ function showMapScreen() {
   renderMap(run.map);
 }
 
+function showCampfire() {
+  renderCampfire(run);
+}
+
 function proceedFromMap() {
   const node = getCurrentNode(run.map);
   if (node.type === "campfire") {
-    console.debug("campfire — rest not yet implemented");
+    showCampfire();
-    run = { ...run, map: advanceMap(run.map) };
-    showMapScreen();
     return;
   }
   const enemyId = getNodeEnemy(node.type);
@@ -182,6 +193,30 @@ function bindEvents() {
     .getElementById("map-proceed-btn")
     .addEventListener("click", proceedFromMap);
 
+  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;
+    const cardId = btn.dataset.cardId;
+    run = campfireSmith(run, cardId);
+    run = { ...run, map: advanceMap(run.map) };
+    hideCampfire();
+    showMapScreen();
+  });
+
   document.getElementById("overlay").addEventListener("click", (e) => {
     if (e.target.closest("#reward-cards") || e.target.closest("#skip-btn"))
       return;

src/render.js

@@ -126,11 +126,45 @@ export function renderMap(map) {
   document.getElementById("map-screen").hidden = false;
   document.getElementById("game").hidden = true;
   document.getElementById("overlay").hidden = true;
+  document.getElementById("campfire-screen").hidden = true;
 }
 
 export function showGame() {
   document.getElementById("game").hidden = false;
   document.getElementById("map-screen").hidden = true;
+  document.getElementById("campfire-screen").hidden = true;
+}
+
+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) {
+    document.getElementById("campfire-choices").hidden = true;
+    const smithEl = document.getElementById("smith-cards");
+    smithEl.hidden = false;
+    smithEl.innerHTML = "";
+    for (const id of upgradableCards) {
+      const card = getCard(id);
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "smith-card-btn";
+      btn.textContent = card.name;
+      btn.dataset.cardId = id;
+      smithEl.appendChild(btn);
+    }
+  } else {
+    document.getElementById("campfire-choices").hidden = false;
+  }
+}
+
+export function hideCampfire() {
+  document.getElementById("campfire-screen").hidden = true;
 }
 
 function renderOverlay(state, revealed) {