step 10.10: wip (not ticked)

public/css/main.css

@@ -1123,3 +1123,25 @@ button:hover { background: #c73650; }
   color: #888;
   cursor: not-allowed;
 }
+
+.btn-rest {
+  background: #2a9d8f;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.35rem 1rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.btn-rest:hover:not(:disabled) {
+  background: #21867a;
+}
+
+.btn-rest:disabled {
+  background: #444;
+  color: #888;
+  cursor: not-allowed;
+}

public/game.html

@@ -41,6 +41,9 @@
             <span class="label">HP:</span>
             <span id="char-hp"></span>
           </div>
+          <div id="rest-section" style="display:none;">
+            <button id="rest-btn" class="btn-rest"></button>
+          </div>
           <div class="stat-row">
             <span class="label">Energy:</span>
             <span id="char-energy"></span>

public/js/game.js

@@ -170,6 +170,9 @@ async function loadCharacter() {
 
     // Initialize allocation UI
     initAllocationUI(character.unspent_points);
+
+    // Initialize rest UI
+    initRestUI(character.hp_current, character.maxHp, character.gold, character.level);
   } catch (err) {
     // Not authenticated — redirect to login
     window.location.href = '/login.html';
@@ -974,6 +977,41 @@ async function handleAllocApply() {
   }
 }
 
+/**
+ * Handle rest button: heal to full HP for gold cost.
+ */
+async function handleRest() {
+  const restBtn = document.getElementById('rest-btn');
+  if (!restBtn || restBtn.disabled) return;
+
+  restBtn.disabled = true;
+  restBtn.textContent = 'Resting...';
+
+  try {
+    const data = await api.post('/character/rest', {});
+    if (!data) {
+      showToast('Rest failed.', 'error');
+      return;
+    }
+
+    showToast('Fully rested!', 'success');
+
+    // Reload character to get updated stats
+    await loadCharacter();
+  } catch (err) {
+    const msg = err.message || 'Rest failed.';
+    if (msg.includes('NOTHING_TO_HEAL') || msg.includes('full health')) {
+      showToast('Already at full health.', 'info');
+    } else if (msg.includes('INSUFFICIENT_GOLD') || msg.includes('gold')) {
+      showToast('Not enough gold to rest.', 'error');
+    } else {
+      showToast(msg, 'error');
+    }
+    // Reload to restore state
+    await loadCharacter();
+  }
+}
+
 /**
  * Initialize or refresh the allocation UI based on current character data.
  */
@@ -992,6 +1030,27 @@ function initAllocationUI(unspentPoints) {
   }
 }
 
+/**
+ * Initialize the rest button based on character HP and gold.
+ */
+function initRestUI(hpCurrent, maxHp, gold, level) {
+  const section = document.getElementById('rest-section');
+  if (!section) return;
+
+  const cost = level * 5;
+  const restBtn = document.getElementById('rest-btn');
+
+  if (hpCurrent >= maxHp) {
+    section.style.display = 'none';
+  } else {
+    section.style.display = 'block';
+    if (restBtn) {
+      restBtn.textContent = `Rest (${cost}g)`;
+      restBtn.disabled = gold < cost;
+    }
+  }
+}
+
 // ===== Init =====
 document.addEventListener('DOMContentLoaded', async () => {
   await loadCharacter();
@@ -1010,6 +1069,12 @@ document.addEventListener('DOMContentLoaded', async () => {
   if (applyBtn) {
     applyBtn.addEventListener('click', handleAllocApply);
   }
+
+  // Rest button
+  const restBtn = document.getElementById('rest-btn');
+  if (restBtn) {
+    restBtn.addEventListener('click', handleRest);
+  }
 });
 
 // Logout handler