Add menuing system with level select and control changing

3 files changed, 127 insertions, 8 deletions

diff --git a/src/systems/grid.js b/src/systems/grid.js
index 3e56ea9..6add388 100644
--- a/src/systems/grid.js
+++ b/src/systems/grid.js
@@ -26,7 +26,9 @@ game.system.Grid = (entitiesGrid) => {
       }
     }));
     changedIds.forEach(id => {
-      const entity = entities[id];
+      // TODO: Figure out why we HAVE to use game.entities rather than entities
+      // Hint: it breaks when changing a level in the menu
+      const entity = game.entities[id];
       const { x, y } = entity.components.gridPosition;
       entitiesGrid[y][x].set(entity.id, entity);
     });
diff --git a/src/systems/keyboardInput.js b/src/systems/keyboardInput.js
index 80feeef..06a73c9 100644
--- a/src/systems/keyboardInput.js
+++ b/src/systems/keyboardInput.js
@@ -1,4 +1,4 @@
-game.system.KeyboardInput = (undoSystem) => {
+game.system.KeyboardInput = () => {
   "use strict";
   const keys = {};
   const keyPress = (event) => {
@@ -6,31 +6,41 @@ game.system.KeyboardInput = (undoSystem) => {
       keys[event.key] = true;
     }
   };
+  const removeKey = (event) => {
+    delete keys[event.key];
+  };
   const update = (elapsedTime, entities, changedIds) => {
     for (let id in entities) {
       const entity = entities[id];
       if (entity.hasComponent('controllable')) {
         const controls = entity.components.controllable.controls;
         if (!changedIds.has(entity.id)) {
-          if (controls.includes('left') && keys['ArrowLeft']) {
+          if (controls.includes('left') && keys[game.controls.left]) {
             entity.addComponent(game.components.Momentum({ dx: -1, dy: 0 }));
-          } else if (controls.includes('right') && keys['ArrowRight']) {
+          } else if (controls.includes('right') && keys[game.controls.right]) {
             entity.addComponent(game.components.Momentum({ dx: 1, dy: 0 }));
-          } else if (controls.includes('up') && keys['ArrowUp']) {
+          } else if (controls.includes('up') && keys[game.controls.up]) {
             entity.addComponent(game.components.Momentum({ dx: 0, dy: -1 }));
-          } else if (controls.includes('down') && keys['ArrowDown']) {
+          } else if (controls.includes('down') && keys[game.controls.down]) {
             entity.addComponent(game.components.Momentum({ dx: 0, dy: 1 }));
           }
         }
       }
     }
-    if (keys['z']) {
-      undoSystem.undo(entities);
+    if (keys[game.controls.undo]) {
+      game.systems.undo.undo(entities);
+    }
+    if (keys[game.controls.reset]) {
+      game.loadLevelIndex(game.level);
+    }
+    if (keys["Escape"]) {
+      game.systems.menu.bringUpMenu();
     }
     Object.keys(keys).map((key) => delete keys[key]);
 
     return new Set();
   };
   window.addEventListener("keydown", keyPress);
+  window.addEventListener("keyup", removeKey);
   return { keys, update };
 }
diff --git a/src/systems/menu.js b/src/systems/menu.js
new file mode 100644
index 0000000..17153d0
--- /dev/null
+++ b/src/systems/menu.js
@@ -0,0 +1,107 @@
+game.system.Menu = () => {
+  let state;
+
+  const menuElement = document.getElementById("menu"); 
+
+  const escapeEventListener = (e) => {
+    if (e.key == "Escape") {
+      setState('main');
+    }
+  }
+
+  const setState = (newState) => {
+    state = newState;
+    draw();
+  }
+
+  const bringUpMenu = () => {
+    game.running = false;
+    window.addEventListener("keydown", escapeEventListener);
+    setState("main");
+  }
+
+  const hide = () => {
+    menuElement.style.display = "none";
+    game.startLoop();
+  }
+
+  const listenFor = (action, elementId) => {
+    const element = document.getElementById(elementId);
+    element.innerHTML = "Listening...";
+    const handleKey = (event) => {
+      window.removeEventListener("keydown", handleKey);
+      if (event.key == "Escape") {
+        element.innerHTML = menu.controls[action];
+        return;
+      }
+      game.controls[action] = event.key;
+      localStorage.setItem("controls", JSON.stringify(game.controls));
+      element.innerHTML = event.key;
+    }
+    window.addEventListener("keydown", handleKey);
+  }
+
+  const setLevel = (index) => {
+    game.loadLevelIndex(index);
+    hide();
+  }
+
+  const draw = () => {
+    menuElement.style.display = "block";
+    menuElement.innerHTML = `<h1><span style='color: blue'>Big Blue</span> Is <span style='color: green'>You</h1>`;
+    if (state == "main") {
+      menuElement.innerHTML += `
+        <div class='menu-button' onclick='game.systems.menu.setState("controls")'>Change Controls</div>
+        <div class='menu-button' onclick='game.systems.menu.setState("credits")'>Credits</div>
+        <div class='menu-button' onclick='game.systems.menu.setState("levelSelect")'>Select Level</div>
+      `;
+    }
+    else if (state == "controls") {
+      menuElement.innerHTML += `
+        <div>
+          <p>
+            Move left: <button id="moveLeft" onfocus='game.systems.menu.listenFor("left", "moveLeft")'>${game.controls.left}</button>
+            <br>
+            Move right: <button id="moveRight" onfocus='game.systems.menu.listenFor("right", "moveRight")'>${game.controls.right}</button>
+            <br>
+            Move up: <button id="moveUp" onfocus='game.systems.menu.listenFor("up", "moveUp")'>${game.controls.up}</button>
+            <br>
+            Move down: <button id="moveDown" onfocus='game.systems.menu.listenFor("down", "moveDown")'>${game.controls.down}</button>
+            <br>
+            Undo: <button id="undo" onfocus='game.systems.menu.listenFor("undo", "undo")'>${game.controls.undo}</button>
+            <br>
+            Reset: <button id="reset" onfocus='game.systems.menu.listenFor("reset", "reset")'>${game.controls.reset}</button>
+          </p>
+        </div>
+      `
+    } else if (state == "credits") {
+      menuElement.innerHTML += `
+        <div>
+          <p>
+            Sprites from Baba Is You, as hosted <a href="https://www.spriters-resource.com/pc_computer/babaisyou/sheet/115231/">here</a>, and a few custom ones.
+            <br>
+            Background is from <a href="https://i.pinimg.com/originals/b2/2a/a2/b22aa22b2f3f55b6468361158d52e2e7.gif">PinImg</a>.
+            <br>
+            Developed by Logan Hunt, Ethan Payne
+          </p>
+        </div>
+      `
+    } else if (state == "levelSelect") {
+      menuElement.innerHTML += `
+        <div>
+          <p> Select a level to play: </p>
+          ${
+            game.levels.map((level, index) => {
+              return `<div class='menu-button' onclick='game.systems.menu.setLevel(${index});'>${level.levelName}</div>`
+            }).join("")
+          }
+      `;
+    }
+    menuElement.innerHTML += "<div class='menu-button' onclick='game.systems.menu.hide()'>Resume Game</div>"
+    if (state !== "main") {
+      menuElement.innerHTML += "<div class='menu-button' onclick='game.systems.menu.setState(\"main\")'>Back</div>"
+    }
+  }
+
+  return { bringUpMenu, setState, listenFor, hide, setLevel, state };
+}
\ No newline at end of file