MNG-88_StartButtonActivation

index.html

@@ -40,7 +40,7 @@
             <div id="start-game-border">
                 <div id="start-game-bg1">
                     <div id="start-game-bg2">
-                        <div id="start-game-button">
+                        <div id="start-game-button" class="button-disabled">
                             Start
                         </div>
                     </div>

src/activateStart.ts

@@ -0,0 +1,7 @@
+export const activateStart = (name1Input: HTMLInputElement, name2Input: HTMLInputElement, startButton: HTMLDivElement) => {
+    if (name1Input.value.length > 0 && name2Input.value.length > 0) {
+        startButton.className = 'button-enabled'
+    } else {
+        startButton.className = 'button-disabled'
+    }
+}

src/index.ts

@@ -1,4 +1,5 @@
 import { showModal, hideModal } from "./modalPopUpFunctions";
+import { activateStart } from './activateStart';
 
 const renderStartingPage = (appDiv: HTMLDivElement) => {
   const startingPage = document.querySelector(
@@ -24,11 +25,25 @@ const createHowToPlayButton = () => {
   });
     hideModal(infoModal);
 };
+const activateStartButton = () => {
+    const player1NameInput = document.querySelector('#enter-player1-name') as HTMLInputElement;
+    const player2NameInput = document.querySelector('#enter-player2-name') as HTMLInputElement;
+    const startButton = document.querySelector("#start-game-button") as HTMLDivElement;
+    player1NameInput.addEventListener("keyup", () => {
+        activateStart(player1NameInput, player2NameInput, startButton)
+    })
+    player2NameInput.addEventListener("keyup", () => {
+        activateStart(player1NameInput, player2NameInput, startButton)
+    })
+};
+
 const renderApp = () => {
   const app = document.querySelector("#app") as HTMLDivElement;
   renderStartingPage(app);
   renderHowToPlayModal(app);
+  activateStartButton();
   createHowToPlayButton();
+
 };
 
 setTimeout(renderApp, 2000);

styles/SASS/_start-view.scss

@@ -92,22 +92,28 @@
                 #start-game-button {
                     @include centerpokeball;
                     @include boxshadow;
-                    background-color: $color-primary;
                     width: 110px;
                     height: 110px;
                     text-align: center;
                     font-family: 'Pokemon Solid';
                     font-size: 1em;
-                    color: $color-primary;
                     padding-top: 15%;
 
                     &:hover {
-                        background-color: $color-bg;
-                        color: $color-text;
-
+                        @include dropshadow
                     }
 
                 }
+
+                .button-enabled {
+                    background-color: $color-bg;
+                    color: $color-text;
+                }
+
+                .button-disabled {
+                    background-color: $color-primary;
+                    color: $color-primary;
+                }
             }
         }
     }