Updates Team Selector indicator

tonyedwardspz · May 15, 2022 · a0d222a · a0d222a
1 parent ed95751
commit a0d222a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git a/audio/effects/team-buzzer.mp3 b/audio/effects/team-buzzer.mp3
diff --git a/css/styles.css b/css/styles.css
@@ -21,6 +21,17 @@ footer ul li {
     min-width: 15vw;
 }
 
+.blink {
+    animation: blinker 1s infinite;
+    text-decoration: underline;
+}
+
+@keyframes blinker {
+    from { opacity: 1.0; }
+    50% { opacity: 0.5; }
+    to { opacity: 1.0; }
+}
+
 
 /* ----- Flock Fortunes Game ----- */
 

diff --git a/demo-1.html b/demo-1.html
@@ -25,7 +25,7 @@
     </header>
 
     <aside>
-        <h2>Team 1</h2>
+        <h2 id="team-1">Team 1</h2>
         <ul id="team-1-guess-board">
             <li class="team-1-guess-empty">&nbsp;</li>
             <li class="team-1-guess-empty">&nbsp;</li>
@@ -47,7 +47,7 @@ <h1>Flock Fortunes</h1>
     </main>
 
     <aside>
-        <h2>Team 2</h2>
+        <h2 id="team-2">Team 2</h2>
         <ul id="team-2-guess-board">
             <li class="team-2-guess-empty">&nbsp;</li>
             <li class="team-2-guess-empty">&nbsp;</li>

diff --git a/js/fortunesGame.js b/js/fortunesGame.js
@@ -21,30 +21,39 @@ class FortunesGame{
         this.teamTwoWrongButton = 37;
         this.teamTwoIncorrectGuesses = 0;
 
+        this.teamSelected = false;
+
         this.lastPad = 0;
         padColorMap = padTeam1.concat(padTeam2).concat(padIncorrect);
     }
 
     processKeyPress(state, key, velocity){
-        if ((key >= 48 && key <= 72) && state === 145){ // Keyboard/On
+        if ((key >= 48 && key <= 72) && state === 145 && (this.teamSelected === false)){ // Keyboard/On
             console.log('GAME: Key press received in game controller');
 
             if (this.guessNumber === 0){
                 app.midi.switchOnLights(padColorMap);
+                this.teamSelected = true;
 
                 if (key === 48) { // Team 1
+                    new Audio('./audio/effects/team-buzzer.mp3').play();
                     console.log('Team 1 won the buzzer press');
                     this.currentTeam = 1;
-                    alert('Team 1');
+                    document.getElementById('team-1').classList.add('blink');
                 } else if (key === 72) { // Team 2
+                    new Audio('./audio/effects/team-buzzer.mp3').play();
                     console.log('Team 2 won the buzzer press');
                     this.currentTeam = 2;
-                    alert('Team 2');
+                    document.getElementById('team-2').classList.add('blink');
                 } 
             }
         }
 
         if ((key >= 0 && key <= 39) && state === 144){ // pad/on
+            // TODO: Make this more fancy
+            document.getElementById('team-1').classList.remove('blink');
+            document.getElementById('team-2').classList.remove('blink');
+
             console.log('GAME: Pad press received in game controller');
             this.lastPad = key;
 
@@ -71,10 +80,6 @@ class FortunesGame{
     setupGameBoard (){
         console.log('GAME: Setting up Game Board')
 
-        this.teamOneScoreBoard = document.getElementById('team-1-guess-board');
-        this.teamTwoScoreBoard = document.getElementById('team-2-guess-board');
-        this.gameBoard = document.getElementById('game-board');
-
         let sortedBirds = Bird.sortBirdsBySighting();
 
         for (let i = 0; i < 6; i++) {
@@ -153,14 +158,13 @@ class FortunesGame{
         this.currentTeam = team;
         team === 1 ? this.teamOneIncorrectGuesses++ : this.teamTwoIncorrectGuesses++;
 
-        if (this.teamOneIncorrectGuesses === 3 || this.teamTwoIncorrectGuesses === 3) {
-            this.gameOver('maxGuesses');
-        }
-
         let guessLi = document.querySelectorAll('li.team-' + team + '-guess-empty');
         guessLi[0].classList.remove('team-' + team + '-guess-empty');
-        console.log(guessLi);
         guessLi[0].innerHTML = 'X'
+
+        if (this.teamOneIncorrectGuesses === 3 || this.teamTwoIncorrectGuesses === 3) {
+            this.gameOver('maxGuesses');
+        }
     }
 
     gameOver(type){