diff options
Diffstat (limited to 'src/systems/menu.js')
| -rw-r--r-- | src/systems/menu.js | 107 |
1 files changed, 107 insertions, 0 deletions
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 |