Add map screen rendering and HTML section

This commit is contained in:
Jared Miller 2026-02-25 09:53:24 -05:00
parent 7dfcc416d4
commit 4d0692cf44
Signed by: shmup
GPG key ID: 22B5C6D66A38B06C
2 changed files with 35 additions and 0 deletions

View file

@ -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>

View file

@ -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");