Add map screen rendering and HTML section
This commit is contained in:
parent
7dfcc416d4
commit
4d0692cf44
2 changed files with 35 additions and 0 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
Loading…
Reference in a new issue