Added customizable controls

drollinger · Mar 24, 2021 · eb1feba · eb1feba
1 parent fb8ca7e
commit eb1feba
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset = "UTF-8">
-    <title>Maze</title>
+    <title>Luner Lander</title>
     <link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css"/>
     <link rel="stylesheet" type="text/css" href="styles/style.css"/>
     <script src='styles/bootstrap.bundle.min.js'></script>
@@ -75,13 +75,37 @@ <h2>HIGHSCORES</h2>
             </div>
         </div>
         <div id="customizeSection" class="row row-section">
-            <div class="col text-center" id="credits">
-                Customize Section
+            <div class="col text-center">
+                <h2>Customize Section</h2>
+                <div class="py-4">
+                <div class="row my-4">
+                    <div class="col text-center white-text">
+                        Boost:
+                        <button type="button" id="boost" class="btn btn-primary"></button>
+                    </div>
+                </div>
+                <div class="row my-4">
+                    <div class="col text-center white-text">
+                        Rotate Left:
+                        <button type="button" id="rotateLeft" class="btn btn-primary"></button>
+                    </div>
+                </div>
+                <div class="row my-4">
+                    <div class="col text-center white-text">
+                        Rotate Right:
+                        <button type="button" id="rotateRight" class="btn btn-primary"></button>
+                    </div>
+                </div>
+                </div>
+                <div class="row">
+                    <div id="msgText" class="col text-center white-text">
+                    </div>
+                </div>
             </div>
         </div>
         <div id="creditsSection" class="row row-section">
             <div class="col text-center" id="credits">
-                Assignment: Maze<br>
+                Assignment: Luner Lander<br>
                 Name: Dallin Drollinger<br>
                 A#: A01984170<br>
             </div>

diff --git a/scripts/input.js b/scripts/input.js
@@ -18,6 +18,10 @@ let Input = function() {
             };
         };
 
+        let UnregisterKey = function(key) {
+            delete handlers[key];
+        };
+
         let Update = function(elapsedTime) {
             for (let key in keys) {
                 handlers[key]?.(keys[key], elapsedTime);
@@ -45,6 +49,7 @@ let Input = function() {
             keys : keys,
             RegisterCommand : RegisterCommand,
             Update : Update,
+            UnregisterKey : UnregisterKey,
         };
     }
 

diff --git a/scripts/main.js b/scripts/main.js
@@ -12,17 +12,13 @@ function main() {
     let input = Input();
     let keyInput = input.Keyboard();
 
-    let menuing = Menuing();
-    menuing.InitMenuHandlers();
-    keyInput.RegisterCommand(['Escape'], menuing.MenuEsc);
-
     let terrain = Terrain();
     terrain.GenerateLine(terrain.Level.EASY);
 
     let ship = Ship();
-    keyInput.RegisterCommand(['ArrowUp'], ship.BoostHandler);
-    keyInput.RegisterCommand(['ArrowLeft'], ship.RotateLeftHandler);
-    keyInput.RegisterCommand(['ArrowRight'], ship.RotateRightHandler);
+
+    let menuing = Menuing(keyInput, ship);
+    menuing.InitMenuHandlers();
 
     let gamePlay = GamePlay(ship, terrain, menuing);
     menuing.CreateNewGame(gamePlay);
@@ -64,6 +60,7 @@ function main() {
         let gameInPlay = menuing.GetCurState()==menuing.States.GAME;
         ship.Update(elapsedTime, gameInPlay, terrain);
         gamePlay.Update(elapsedTime, gameInPlay);
+        menuing.Update();
     };
 
     function render() {

diff --git a/scripts/menuInput.js b/scripts/menuInput.js
@@ -5,15 +5,28 @@
  *************************************************/
 'use strict';
 
-let Menuing = function() {
+let Menuing = function(k, s) {
     let States = {
         GAME: 1,
         PAUSE: 2,
         MAIN: 3,
         SUB: 4,
     };
-    
+
     let curState;
+    let keyboard = k;
+    let ship = s;
+    let clickAssign = []
+    let gettingNextKey = false;
+    let buttons = {}
+    let idToHandler = {
+        boost : ship.BoostHandler,
+        rotateLeft : ship.RotateLeftHandler,
+        rotateRight : ship.RotateRightHandler,
+    }
+    buttons['boost'] = localStorage.getItem('lunerGame.boost') ?? 'ArrowUp';
+    buttons['rotateLeft'] = localStorage.getItem('lunerGame.rotateLeft') ?? 'ArrowLeft';
+    buttons['rotateRight'] = localStorage.getItem('lunerGame.rotateRight') ?? 'ArrowRight';
 
     let InitMenuHandlers = function() {
         document.getElementById('resumeMenu').addEventListener('click', function() {
@@ -46,6 +59,15 @@ let Menuing = function() {
                 curState = States.SUB;
             }
         );
+        document.getElementById('boost').addEventListener('click', listenAndGet('boost'))
+        document.getElementById('rotateLeft').addEventListener('click', listenAndGet('rotateLeft'));
+        document.getElementById('rotateRight').addEventListener('click', listenAndGet('rotateRight'));
+
+        keyboard.RegisterCommand(['Escape'], MenuEsc);
+        keyboard.RegisterCommand([buttons['boost']], ship.BoostHandler);
+        keyboard.RegisterCommand([buttons['rotateLeft']], ship.RotateLeftHandler);
+        keyboard.RegisterCommand([buttons['rotateRight']], ship.RotateRightHandler);
+
         toggleMenu('mainMenuSection');
         curState = States.MAIN;
     };
@@ -76,6 +98,34 @@ let Menuing = function() {
         document.getElementById('newGameMenu').addEventListener('click', gamePlay.RestartGameHandler);
     };
 
+    let Update = function() {
+        if (gettingNextKey) {
+            for (let key in keyboard.keys) {
+                clickAssign(key);
+                break;
+            }
+        }
+    }
+
+    function listenAndGet(id) {
+        return (function () {
+            document.getElementById("msgText").innerHTML = 'Please Press New Button<br>Or Esc to Exit';
+            gettingNextKey = true;
+            clickAssign = function(key) {
+                if (key != 'Escape') {
+                    keyboard.UnregisterKey(buttons[id]);
+                    keyboard.RegisterCommand([key], idToHandler[id]);
+                    buttons[id] = key;
+                    localStorage[`lunerGame.${id}`] = key;
+                    if (key === ' ') key = 'Space';
+                    document.getElementById(id).innerHTML = key;
+                };
+                gettingNextKey = false;
+                document.getElementById("msgText").innerHTML = '';
+            };
+        });
+    };
+
     function toggleMenu(id) {
         document.querySelectorAll('.row-section').forEach(item => {
             item.style.display='none';
@@ -96,5 +146,6 @@ let Menuing = function() {
         GetCurState : GetCurState,
         GoToMainMenu : GoToMainMenu,
         CreateNewGame : CreateNewGame,
+        Update : Update,
     };
 };
diff --git a/styles/style.css b/styles/style.css
@@ -13,7 +13,7 @@ body {
 }
 
 h1, h2, h3, li, #credits {
-    color: black;
+    color: white;
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* IE10+/Edge */
@@ -38,3 +38,12 @@ li {
     max-width: 100%;
     height: auto;
 }
+
+.white-text {
+    color: white;
+    font-size: 24px;
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE10+/Edge */
+    user-select: none; /* Standard */
+}