Added shake and punch sound effects

yuridekim · Aug 9, 2020 · dc92174 · dc92174
1 parent 3272e7f
commit dc92174
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -112,6 +112,10 @@ Note: The React web app needs to get built, whereas the node server does not.
 
 ### Not yet started
 
+- be able to switch between minigames without having to go back to lobby (allow changing room options outside of /create)
+- be able to switch between minigames and quiplash without having to go back to lobby
+- play punch sound effect when stop accelerating
+- play soda sound effect when shaking
 - prevent excess image GET calls (base64?)
 - Prevent undo text popup in iOS (issue with inputs being in PlayerGame, even though they are not rendered )
 - more intense versions of shake images to indicate power (requires tracking intensity)

diff --git a/public/index.html b/public/index.html
@@ -23,6 +23,8 @@
         loop="true"
       ></audio>
       <audio id="sound-punch" src="./punch.wav" type="audio/wav" autostart="0"></audio>
+      <audio id="sound-punch-hit" src="./punch-hit.wav" type="audio/wav" autostart="0"></audio>
+      <audio id="sound-shake" src="./shake.wav" type="audio/wav" autostart="0"></audio>
       <audio id="sound-woo-yeah" src="./woo-yeah.wav" type="audio/wav" autostart="0"></audio>
     </div>
   </body>

diff --git a/public/punch-hit.wav b/public/punch-hit.wav
diff --git a/public/shake.wav b/public/shake.wav
diff --git a/src/pages/host/HostsGame.css b/src/pages/host/HostsGame.css
@@ -4,6 +4,12 @@
   margin-top: 30px;
 }
 
+.button-bar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .shake-player-avatar {
   display: flex;
   flex-direction: column;

diff --git a/src/pages/host/HostsGame.jsx b/src/pages/host/HostsGame.jsx
@@ -3,7 +3,7 @@ import { withRouter } from "react-router";
 import "./HostsGame.css";
 import { getHostSocket } from "../../SocketIoConnection";
 import Countdown from "react-countdown";
-import { playBackgroundMusic, playPunchSound, speakText } from "./Sounds";
+import { playBackgroundMusic, playPunchSound, playPunchHitSound, playShakeSound, speakText } from "./Sounds";
 import holdPhoneDownImage from "../../images/hold-phone-down.png";
 import holdPhoneMidImage from "../../images/hold-phone-mid.png";
 import holdPhoneUpImage from "../../images/hold-phone-up.png";
@@ -144,6 +144,7 @@ class HostsGame extends Component {
     });
     socket.on("SHAKE_COUNT_UP", (playerName) => {
       this.state.shakePlayers[playerName]++;
+      playShakeSound();
       this.setState({ shakePlayers: this.state.shakePlayers });
     });
     socket.on("SHOW_SHAKE_RESULTS", () => {
@@ -184,6 +185,7 @@ class HostsGame extends Component {
       } else {
         this.state.punchPlayers[playerName].state = "STARTING_PUNCH";
       }
+      playPunchHitSound();
       this.setState({ punchPlayers: this.state.punchPlayers });
     });
     socket.on("STOPPED_PUNCH", (playerName) => {
@@ -420,12 +422,14 @@ class HostsGame extends Component {
             <div className="all-shake-players">
               {getShakeGamePlayersComponent(this.state.shakePlayers, true, this.state.gamePlayersResults)}
             </div>
-            <button className="submit-form-button start-new-round-button" onClick={this.onStartShakeRoundClick}>
-              Play Again
-            </button>
-            <button className="submit-form-button start-new-game-button" onClick={this.onStartNewGameNewPlayersClick}>
-              Different Game
-            </button>
+            <div className="button-bar">
+              <button className="submit-form-button start-new-round-button" onClick={this.onStartShakeRoundClick}>
+                Play Again
+              </button>
+              <button className="submit-form-button start-new-game-button" onClick={this.onStartNewGameNewPlayersClick}>
+                Play Different Game
+              </button>
+            </div>
           </div>
         );
       case "SHOW_PUNCH_INSTRUCTIONS":
@@ -479,12 +483,14 @@ class HostsGame extends Component {
             <div className="all-shake-players">
               {getPunchGamePlayersComponent(this.state.punchPlayers, true, this.state.gamePlayersResults)}
             </div>
-            <button className="submit-form-button start-new-round-button" onClick={this.onStartPunchRoundClick}>
-              Play Again
-            </button>
-            <button className="submit-form-button start-new-game-button" onClick={this.onStartNewGameNewPlayersClick}>
-              Different Game
-            </button>
+            <div className="button-bar">
+              <button className="submit-form-button start-new-round-button" onClick={this.onStartPunchRoundClick}>
+                Play Again
+              </button>
+              <button className="submit-form-button start-new-game-button" onClick={this.onStartNewGameNewPlayersClick}>
+                Play Different Game
+              </button>
+            </div>
           </div>
         );
       default:

diff --git a/src/pages/host/Sounds.js b/src/pages/host/Sounds.js
@@ -10,6 +10,14 @@ export function playPunchSound() {
   playSound("sound-punch");
 }
 
+export function playPunchHitSound() {
+  playSound("sound-punch-hit");
+}
+
+export function playShakeSound() {
+  playSound("sound-shake");
+}
+
 export function playWooYeahSound() {
   playSound("sound-woo-yeah");
 }