Add: hardware image play/pause button

5 files changed, 33 insertions, 10 deletions

diff --git a/images/play-button-down.png b/images/play-button-down.png
new file mode 100644
index 0000000..9073a2f
--- /dev/null
+++ b/images/play-button-down.png
diff --git a/images/play-button-up.png b/images/play-button-up.png
new file mode 100644
index 0000000..f11b0f0
--- /dev/null
+++ b/images/play-button-up.png
diff --git a/style.css b/style.css
index c2b9668..b76978d 100644
--- a/style.css
+++ b/style.css
@@ -41,8 +41,21 @@ p {
     margin-top: 1em;
 }
 
-.buttons {
-    margin: auto;
+.button-container {
+    display: flex;
+    justify-content: center;
+}
+
+button {
+    margin: 0;
+    padding: 0;
+    background: lightblue;
+    width: 130px;
+    border: none;
+}
+
+.play-button {
+    width: 130px;
 }
 
 .tape-deck-img {
diff --git a/tape-deck.html b/tape-deck.html
index 8ad58f1..1747c75 100644
--- a/tape-deck.html
+++ b/tape-deck.html
@@ -10,9 +10,8 @@
             <div class="tape-deck">
                 <img id="tape-deck" class="tape-deck-img" src="images/cool-deck.png">
             </div>
-            <div class="buttons" display="flex" flex-direction="row" justify-content="center">
-                <button id="playButton" onclick="play()">Play</button>
-                <button id="pauseButton" onclick="pause()">Pause</button>
+            <div class="button-container">
+                <button onclick="play()"><img class="play-button" id="play-button" src="images/play-button-up.png"></button>
             </div>
             <div class="notes">
                 <p id="notes"></p>
diff --git a/tape-deck.js b/tape-deck.js
index 04b6d2d..3d10fe8 100644
--- a/tape-deck.js
+++ b/tape-deck.js
@@ -8,11 +8,16 @@ pressPlaySound.onended = (event) => { tape.play(); };
 const stopImage = "images/cool-deck.png";
 const playImage = "images/cool-deck.gif";
 
+let playButton = document.getElementById("play-button");
+const playButtonUp = "images/play-button-up.png";
+const playButtonDown = "images/play-button-down.png";
+
 let deck = document.getElementById("tape-deck");
 let notes = document.getElementById("notes");
 let trackData = [];
 let currentTrackIndex = 0;
 let hasStarted = false;
+let isPlaying = false;
 
 function loadTrackData() {
     fetch(`side${currentSide}.json`)
@@ -23,18 +28,24 @@ function loadTrackData() {
 }
 
 function play() {
+    if (isPlaying) {
+        playButton.src = playButtonUp;
+        tape.pause();
+        isPlaying = false;
+        deck.src = stopImage;
+        return;
+    }
+
     if (!hasStarted) {
         pressPlaySound.play();
         hasStarted = true;
     } else {
         tape.play();
     }
-    deck.src = playImage;
-}
 
-function pause() {
-    tape.pause();
-    deck.src = stopImage;
+    isPlaying = true;
+    playButton.src = playButtonDown;
+    deck.src = playImage;
 }
 
 function isLastTrack(current, tracks) {