diff --git a/world.js b/world.js index 1f45237..495ec65 100644 --- a/world.js +++ b/world.js @@ -15,9 +15,9 @@ moveListeners = { } -actionListeners = { +actionButtons = [ -} +] function initWorld(story, state) { state.world = story["world"]; @@ -47,6 +47,19 @@ function resetControls(state) { moveListeners[dir] = undefined; }); + + const actionHolder = document.querySelector("#actions"); + actionHolder.innerHTML = ""; + + actionButtons = []; + + if (state.player.location) { + state.world[state.player.location].actions.forEach(action => { + actionButtons.push(undefined); + }); + } + + } @@ -96,7 +109,7 @@ function moveToRoom(src, exit, dest, state) { state.player.location = dest; - resetControls(); + resetControls(state); refresh(); } @@ -121,7 +134,7 @@ function goToRoom(dest, state) { state.player.location = dest; - resetControls(); + resetControls(state); refresh(); } @@ -184,7 +197,7 @@ function updateRoom(state) { button.addEventListener("click", moveFunc); moveListeners[dir] = moveFunc; - + button.addEventListener("mouseenter", () => { showActionDescription(exit.desc); }); @@ -196,45 +209,66 @@ function updateRoom(state) { } const actionHolder = document.querySelector("#actions"); - actionHolder.innerHTML = ""; + const existingButtons = Array.from(document.querySelectorAll("#actions > button")); + const keptButtons = []; if (room.actions) { - room.actions.forEach(action => { - const button = document.createElement("button"); - button.classList.add("action-button"); + for (index in room.actions) { + const action = room.actions[index]; + let button; + + if (actionButtons[index]) { + button = actionButtons[index]; + } + else { + button = document.createElement("button"); + button.classList.add("action-button"); + + actionButtons[index] = button; + + button.textContent = action.name; + + button.addEventListener("click", () => { + action.execute(room, state); + refresh(); + }); + + button.addEventListener("mouseenter", () => { + showActionDescription(action.desc); + }); + + button.addEventListener("mouseleave", () => { + removeActionDescription(); + }); + } if (action.show) { if (!action.show.every(cond => cond(room, state))) { - return; + continue; } } - button.textContent = action.name; - - actionHolder.appendChild(button); + keptButtons.push(actionButtons[index]); if (action.conditions) { if (!action.conditions.every(cond => cond(room, state))) { button.classList.add("disabled"); button.setAttribute("disabled", "true"); - return; } } - button.addEventListener("click", () => { - action.execute(room, state); - refresh(); - }); - - button.addEventListener("mouseenter", () => { - showActionDescription(action.desc); - }); + } - button.addEventListener("mouseleave", () => { - removeActionDescription(); - }); + const removed = existingButtons.filter(button => { + return !keptButtons.includes(button); + }); + removed.forEach(button => actionHolder.removeChild(button)); + const added = actionButtons.filter(button => { + return keptButtons.includes(button) && !existingButtons.includes(button); }); + + added.forEach(button => actionHolder.appendChild(button)); } }