Add map screen rendering and HTML section

index.html

@@ -34,6 +34,12 @@
     <section id="hand"></section>
   </div>
 
+  <section id="map-screen" hidden>
+    <h2>act 1</h2>
+    <div id="map-nodes"></div>
+    <button type="button" id="map-proceed-btn">proceed</button>
+  </section>
+
   <div id="overlay" hidden>
     <div id="overlay-text"></div>
     <div id="reward-cards"></div>

src/render.js

@@ -104,6 +104,35 @@ function renderHand(state) {
   });
 }
 
+export function renderMap(map) {
+  const container = document.getElementById("map-nodes");
+  container.innerHTML = "";
+
+  map.nodes.forEach((node, index) => {
+    const div = document.createElement("div");
+    let label = node.type;
+    if (index === map.currentNode) label = `> ${label}`;
+    if (node.cleared) label = `${label} ✓`;
+    if (index === map.currentNode) {
+      const b = document.createElement("b");
+      b.textContent = label;
+      div.appendChild(b);
+    } else {
+      div.textContent = label;
+    }
+    container.appendChild(div);
+  });
+
+  document.getElementById("map-screen").hidden = false;
+  document.getElementById("game").hidden = true;
+  document.getElementById("overlay").hidden = true;
+}
+
+export function showGame() {
+  document.getElementById("game").hidden = false;
+  document.getElementById("map-screen").hidden = true;
+}
+
 function renderOverlay(state, revealed) {
   const overlay = document.getElementById("overlay");
   const overlayText = document.getElementById("overlay-text");