One step away from completion...I think

Managed to get everything how I want it near enough. Not completely satisfied with the scoreBox.innerHTML during some screen sizes but not the end of the world. The biggest problem I have now is the soundOn function. Can't get the damn thing to turn the sound back on. I'll figure it out eventually.
StevieBrooks · Jan 13, 2023 · 6b98b11 · 6b98b11
1 parent b033039
commit 6b98b11
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
     <title>Rock, Paper, Scissors (Well...Romeo, Present, Syphillis!)</title>
 </head>
 <body>
+    <audio class="music" src="" controls></audio>
     <audio class="sfx" src="" controls></audio>
     <div class="main-box">
         <div class="score-box"></div>
@@ -39,6 +40,7 @@
         </div>
         <section class="menu-buttons">
             <button class="master-reset">Reset Game</button>
+            <button class="toggle-sound">Sound On / Off</button>
             <button class="brookscode"><a href="http://www.brookscode.com/" target="_blank">Go to <span class="but-logo">Brooks[ode</span></a></button>
         </section>
     </div>

diff --git a/script.js b/script.js
@@ -1,8 +1,51 @@
 // MISC
 const blinkSpeed1 = 0250;
 const darkRed = 'rgb(70, 18, 32)';
+const music = document.querySelector('.music');
 const soundFX = document.querySelector('.sfx');
 
+const brooksCode = document.querySelector('.brookscode');
+brooksCode.addEventListener('click', brooksFunc);
+function brooksFunc() {
+    soundStatus == false ? soundFX.src = '' : soundFX.src = 'audio/click.mp3';
+    soundFX.play();
+}
+
+setTimeout( () => {
+    music.src = 'audio/song.mp3';
+    music.play();
+}, 2000);
+
+const toggleSound = document.querySelector('.toggle-sound');
+let soundStatus = true;
+const soundControl = {
+    on: function() {
+        music.src = 'audio/song.mp3';
+        music.play();
+    },
+    off: function () {
+        music.src = '';
+        music.play();
+        soundFX.src = '';
+        soundFX.play();
+    }
+}
+toggleSound.addEventListener('click', soundOff);
+function soundOff() {
+    soundStatus = false;
+    soundFX.src = 'audio/click.mp3';
+    soundFX.play();
+    soundControl.on() ? soundControl.off() : soundControl.on();
+}
+toggleSound.addEventListener('click', soundOn);
+function soundOn() {
+    soundFX.src = 'audio/click.mp3';
+    soundFX.play();
+    soundControl.off() ? soundControl.on() : soundControl.off();
+}
+// NEED TO TURN SOUND BACK ON BY CLICKING SAME BUTTON - SOUNDon AND ITS TERNARY NOT WORKING!
+
+
 // SCOREBOX
 const scoreBox = document.querySelector('.score-box');
 const scoreBoxFlash = {
@@ -79,6 +122,8 @@ const userImage = document.getElementById('userImage');
 
 romeo.addEventListener('click', romFunc);
 function romFunc() {
+    soundStatus == false ? soundFX.src = '' : soundFX.src = 'audio/click.mp3';
+    soundFX.play();
     userChoice.children[1].style.display = 'block';
     userChoice.children[1].style.bottom = '40px';
     userChoice.children[1].innerHTML = 'Romeo';
@@ -87,6 +132,8 @@ function romFunc() {
 
 present.addEventListener('click', preFunc);
 function preFunc() {
+    soundStatus == false ? soundFX.src = '' : soundFX.src = 'audio/click.mp3';
+    soundFX.play();
     userChoice.children[1].style.display = 'block';
     userChoice.children[1].style.bottom = '33px';
     userChoice.children[1].innerHTML = 'Present';
@@ -95,6 +142,8 @@ function preFunc() {
 
 syphillis.addEventListener('click', sypFunc);
 function sypFunc() {
+    soundStatus == false ? soundFX.src = '' : soundFX.src = 'audio/click.mp3';
+    soundFX.play();
     userChoice.children[1].style.display = 'block';
     userChoice.children[1].style.bottom = '40px';
     userChoice.children[1].innerHTML = 'Syphillis';
@@ -103,6 +152,8 @@ function sypFunc() {
 
 select.addEventListener('click', selectFunc);
 function selectFunc() {
+    soundStatus == false ? soundFX.src = '' : soundFX.src = 'audio/click.mp3';
+    soundFX.play();
     console.log(`User choice: ${userChoice.children[1].innerHTML}`);
     if(userChoice.children[1].innerHTML.length > 0) {
         setTimeout(compFunc, 0500);
@@ -156,6 +207,8 @@ function determineFunc() {
         } else if((userChoice.children[1].innerHTML === 'Romeo' && compChoice.children[1].innerHTML === 'Present') ||
                     (userChoice.children[1].innerHTML === 'Present' && compChoice.children[1].innerHTML === 'Syphillis') ||
                     (userChoice.children[1].innerHTML === 'Syphillis' && compChoice.children[1].innerHTML === 'Romeo')) {
+                        soundStatus == false ? soundFX.src = '' : soundFX.src = 'audio/yay.mp3';
+                        soundFX.play();
                         playerScore++;
                         scoreBox.style.fontFamily = 'Arial, Helvetica, sans-serif';
                         scoreBox.innerHTML = winComment[commentIndex];
@@ -167,6 +220,8 @@ function determineFunc() {
                         }
                         setTimeout(winReset, 2000);
                     } else {
+                        soundStatus == false ? soundFX.src = '' : soundFX.src = 'audio/boo.mp3';
+                        soundFX.play();
                         compScore++;
                         scoreBox.style.fontFamily = 'Arial, Helvetica, sans-serif';
                         scoreBox.innerHTML = loseComment[commentIndex];
@@ -203,6 +258,8 @@ function winReset() {
 const masterReset = document.querySelector('.master-reset');
 masterReset.addEventListener('click', masReset)
 function masReset() {
+    soundStatus == false ? soundFX.src = '' : soundFX.src = 'audio/click.mp3';
+    soundFX.play();
     playerScore = 0;
     compScore = 0;
     scoreBox.style.fontFamily = "'Courier New', Courier, monospace";
@@ -222,6 +279,8 @@ function finalDet() {
     const loseComment = ["MACHINE WINS!", "OH NO. YOU'VE LOST!", "WWHHHYHYYYYYYY!!!", "BETTER LUCK NEXT TIME!"];
     const detIndex = Math.floor(Math.random() * 4);
     if(playerScore > 4) {
+        soundStatus == false ? soundFX.src = '' : soundFX.src = 'audio/cheers.mp3';
+        soundFX.play();
         scoreBox.innerHTML = winComment[detIndex];
         // scoreBox.innerHTML.includes('E') ? soundFX.play() : soundFX; // USE LATER
         playerScore = 0;
@@ -236,17 +295,6 @@ function finalDet() {
 
 
 
-/*IDEAS:
-
-5. Music, sfx (speak to Nelson).
-*/
-
-// NEED THIS LATER FOR ADDING SFX - REMEMBER SOUNDfx IS CURRENTLY SET TO DISPLAY:NONE - do sfx last
-// soundFX.src = 'audio/rocketWhoosh.wav';
-// soundFX.play();
 
-// if(scoreBox.style.width < 200) {
-//     scoreBox.innerHTML = 'oh yeah';
-// } // NEED TO FIGURE WAY OF MAKING SCOREBOX MORE RESPONSIVE
 
 
diff --git a/style.css b/style.css
@@ -11,7 +11,7 @@
             flex-direction: column;
             align-items: center;
         }
-        .sfx {
+        .music, .sfx {
             display: none;
         }
         .main-box {
@@ -51,6 +51,7 @@
             display: grid;
             place-items: center;
             padding: .5rem 1rem;
+            text-align: center;
         }
         .player-boxes {
             display: flex;
@@ -169,7 +170,7 @@
             text-decoration: none;
             color: #FED0BB;
         }
-        .master-reset, .brookscode {
+        .master-reset, .brookscode, .toggle-sound {
             width: 200px;
             margin: auto;
             font-size: 1.2rem;
@@ -179,7 +180,7 @@
             border: 1px solid #FED0BB;
             border-radius: 5px;
         }
-        .master-reset:hover, .brookscode:hover {
+        .master-reset:hover, .brookscode:hover, .toggle-sound:hover {
             cursor: pointer;
             transform: scale(1.05);
             background-color: #FED0BB;
@@ -193,7 +194,6 @@
         @media (max-width: 860px) {
             .score-box {
                 font-size: 1.8rem;
-                text-align: center;
             }
             .player-boxes {
                 flex-direction: column-reverse;