Add menuing system with level select and control changing

index.html

@@ -21,11 +21,24 @@
 
     <script>
       const game = {
+        running: true,
+        lastTimeStamp: performance.now(),
+        controls: JSON.parse(
+          localStorage.getItem("controls") || JSON.stringify({
+            left: "ArrowLeft",
+            right: "ArrowRight",
+            up: "ArrowUp",
+            down: "ArrowDown",
+            undo: "z",
+            reset: "r",
+          })
+        ),
+        level: 0,
         canvas: {
           width: document.getElementById('game-canvas').width,
           height: document.getElementById('game-canvas').height,
           context: document.getElementById('game-canvas').getContext("2d"),
-        }
+        },
       };
     </script>
 

src/bootstrap.js

@@ -34,7 +34,7 @@ game.bootstrap = (() => {
     { 
       src: [
         'src/systems/render.js', 'src/systems/grid.js', 'src/systems/physics.js', 'src/systems/keyboardInput.js', 
-        'src/systems/collision.js', 'src/systems/undo.js', 'src/systems/particle.js'
+        'src/systems/collision.js', 'src/systems/undo.js', 'src/systems/particle.js', 'src/systems/menu.js'
       ],
       id: 'systems' },
     { src: ['src/game.js'], id: 'game' },

src/game.js

@@ -1,8 +1,10 @@
-let lastTimeStamp;
 game.loop = (timeStamp) => {
-  let elapsedTime = timeStamp - lastTimeStamp;
-  lastTimeStamp = timeStamp;
+  if (!game.running) {
+    return;
+  }  
 
+  let elapsedTime = timeStamp - game.lastTimeStamp;
+  game.lastTimeStamp = timeStamp;
 
   const changedIds = new Set();
   game.systemOrder.map((i) => {
@@ -20,22 +22,39 @@ game.loop = (timeStamp) => {
   requestAnimationFrame(game.loop);
 }
 
-game.initialize = () => {
-  [game.entities, game.config] = game.loadLevel(game.levels[4]);
+game.toggleRunning = () => {
+  game.running = !game.running;
+}
 
-  // Maintained by gridSystem as a side-effect
-  game.entitiesGrid = Array(game.config.yDim).fill(null).map(() => Array(game.config.xDim).fill(null).map(() => new Map()));
-
-  game.systemOrder = ["gridSystem", "collisionSystem", "physics", "keyboardInput", "undo", "particle", "render"];
-  game.systems = { };
-  game.systems.physics = game.system.Physics(),
-  game.systems.gridSystem = game.system.Grid(game.entitiesGrid);
-  game.systems.collisionSystem = game.system.Collision(game.entitiesGrid);
-  game.systems.render = game.system.Render(game.graphics);
-  game.systems.undo = game.system.Undo(game.entitiesGrid);
-  game.systems.keyboardInput = game.system.KeyboardInput(game.systems.undo);
-  game.systems.particle = game.system.Particle(game.canvas.context);
-
-  lastTimeStamp = performance.now()
+game.startLoop = () => {
+  game.running = true;
+  game.lastTimeStamp = performance.now();
   requestAnimationFrame(game.loop);
 }
+
+game.loadSystems = () => {
+  game.systemOrder = ["grid", "collision", "physics", "keyboardInput", "undo", "particle", "render"];
+  game.systems = { };
+  game.systems.physics = game.system.Physics(),
+  game.systems.grid = game.system.Grid(game.entitiesGrid);
+  game.systems.collision = game.system.Collision(game.entitiesGrid);
+  game.systems.render = game.system.Render(game.graphics);
+  game.systems.undo = game.system.Undo(game.entitiesGrid);
+  game.systems.particle = game.system.Particle(game.canvas.context);
+  game.systems.keyboardInput = game.system.KeyboardInput();
+  game.systems.menu = game.system.Menu();
+}
+
+game.loadLevelIndex = (level) => {
+  game.level = level;
+  [game.entities, game.config] = game.loadLevel(game.levels[game.level]);
+
+  // Maintained by grid system as a side-effect
+  game.entitiesGrid = Array(game.config.yDim).fill(null).map(() => Array(game.config.xDim).fill(null).map(() => new Map()));
+  game.loadSystems();
+}
+
+game.initialize = () => {
+  game.loadLevelIndex(0);
+  game.startLoop();
+}

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);
     });

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 };
 }

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 };
+}

styles/style.css

@@ -46,13 +46,14 @@ body {
 
 .menu {
   text-align:center;
+  max-width: 400px;
   left: 50%;
   top: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   position:absolute;
 
-  background-color: rgba(255,255,255,0.75);
+  background-color: rgba(200,200,255,0.90);
   border: 1px solid #fff;
   border-radius: 5px;
   padding: 12px;
@@ -69,4 +70,4 @@ body {
 
 .menu-button:hover {
   background-color: #d0d0d0;
-}
+}