Fix: toddler proof buttons

3 files changed, 27 insertions, 12 deletions

diff --git a/deck-button.js b/deck-button.js
index 03cd4de..793c83b 100644
--- a/deck-button.js
+++ b/deck-button.js
@@ -1,19 +1,20 @@
 const sfx = new Audio("audio/button-press.mp3");
 
 export function DeckButton(name) {
-    const elem = document.getElementById(`${name}-button`);
+    const button = document.getElementById(name);
+    const img = document.getElementById(`${name}-img`);
     const images = { up: `images/${name}-button-up.jpg`, down: `images/${name}-button-down.jpg` };
 
     let state = "off";
 
     const turnOn = function () {
         state = "on";
-        elem.src = images.down;
+        img.src = images.down;
     };
 
     const turnOff = function () {
         state = "off";
-        elem.src = images.up;
+        img.src = images.up;
     };
 
     return {
@@ -21,6 +22,8 @@ export function DeckButton(name) {
         toggle: (opts = {sound: true}) => {
             state === "off" ? turnOn(opts) : turnOff(opts);
             if (opts.sound) sfx.play();
-        }
+        },
+        disable: () => { button.disabled = true; },
+        enable: () => { button.disabled = false; },
     };
 }
diff --git a/tape-deck.html b/tape-deck.html
index f219b76..fec8fe7 100644
--- a/tape-deck.html
+++ b/tape-deck.html
@@ -11,14 +11,14 @@
                 <img id="tape-deck" class="tape-deck-img" src="images/cool-deck.png">
             </div>
             <div class="button-container">
-                <button onclick="rewind()" class="touch-button">
-                    <img class="play-button" id="rewind-button" src="images/rewind-button-up.jpg">
+                <button onclick="rewind()" id="rewind" class="touch-button">
+                    <img class="play-button" id="rewind-img" src="images/rewind-button-up.jpg">
                 </button>
-                <button onclick="play()" class="touch-button">
-                    <img class="play-button" id="play-button" src="images/play-button-up.jpg">
+                <button onclick="play()" id="play" class="touch-button">
+                    <img class="play-button" id="play-img" src="images/play-button-up.jpg">
                 </button>
-                <button onclick="ff()" class="touch-button">
-                    <img class="play-button" id="ff-button" src="images/ff-button-up.jpg">
+                <button onclick="ff()" id="ff" class="touch-button">
+                    <img class="play-button" id="ff-img" src="images/ff-button-up.jpg">
                 </button>
             </div>
             <div class="notes">
@@ -28,7 +28,6 @@
                 Start the tape with the play button, press it again to pause.
                 Fast-Forward and Rewind buttons are meant to be pressed once,
                 they'll advance the tape by 20s and then continue playing.
-                Those buttons are fragile, so try to just press once!
                 Hit the reset tape button to start it from the beginning, the
                 website will store your current position on the tape in your
                 browser, so it should resume the next time you play the tape.
diff --git a/tape-deck.js b/tape-deck.js
index 057c96b..8c0a2b1 100644
--- a/tape-deck.js
+++ b/tape-deck.js
@@ -37,6 +37,16 @@ let TapeDeck = {
         this.go();
         Cassette.play();
     },
+    disableButtons: function() {
+        this.playButton.disable();
+        this.ffButton.disable();
+        this.rewindButton.disable();
+    },
+    enableButtons: function() {
+        this.playButton.enable();
+        this.ffButton.enable();
+        this.rewindButton.enable();
+    }
 };
 
 ffSound.onended = (event) => {
@@ -45,8 +55,9 @@ ffSound.onended = (event) => {
     } else {
         TapeDeck.rewindButton.toggle();
     }
-    TapeDeck.playButton.toggle({sound: false});
+    TapeDeck.enableButtons();
     TapeDeck.resume();
+    TapeDeck.playButton.toggle({sound: false});
 };
 
 // button onclick points here
@@ -59,6 +70,7 @@ window.play = function () {
 
 window.ff = function () {
     if (TapeDeck.isPlaying) TapeDeck.pause();
+    TapeDeck.disableButtons();
     TapeDeck.ffButton.toggle();
     Cassette.currentTime = Cassette.currentTime + 20;
     ffSound.play();
@@ -66,6 +78,7 @@ window.ff = function () {
 
 window.rewind = function () {
     if (TapeDeck.isPlaying) TapeDeck.pause();
+    TapeDeck.disableButtons();
     TapeDeck.rewindButton.toggle();
     Cassette.currentTime = Cassette.currentTime - 20;
     ffSound.play();