Feature: Fast-Forward and Rewind buttons plus refactoring

13 files changed, 121 insertions, 26 deletions

diff --git a/audio/button-press.mp3 b/audio/button-press.mp3
index 91ae629..acf0ea8 100644
--- a/audio/button-press.mp3
+++ b/audio/button-press.mp3
diff --git a/audio/ff.mp3 b/audio/ff.mp3
new file mode 100644
index 0000000..3fd2226
--- /dev/null
+++ b/audio/ff.mp3
diff --git a/deck-button.js b/deck-button.js
new file mode 100644
index 0000000..03cd4de
--- /dev/null
+++ b/deck-button.js
@@ -0,0 +1,26 @@
+const sfx = new Audio("audio/button-press.mp3");
+
+export function DeckButton(name) {
+    const elem = document.getElementById(`${name}-button`);
+    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;
+    };
+
+    const turnOff = function () {
+        state = "off";
+        elem.src = images.up;
+    };
+
+    return {
+        state: () => state,
+        toggle: (opts = {sound: true}) => {
+            state === "off" ? turnOn(opts) : turnOff(opts);
+            if (opts.sound) sfx.play();
+        }
+    };
+}
diff --git a/deck-controls.js b/deck-controls.js
new file mode 100644
index 0000000..91d4494
--- /dev/null
+++ b/deck-controls.js
@@ -0,0 +1,51 @@
+import { DeckButton } from './deck-button.js';
+const pressSound = new Audio("audio/button-press.mp3");
+
+export function DeckControls(params) {
+  const { deck } = params;
+
+  return {
+    go: function () {
+        deck.elem.src = deck.images.go;
+        deck.isPlaying = true;
+        deck.playButton.toggle();
+    },
+    start: function () {
+        deck.hasStarted = true;
+        this.playButton.initSound.onended = (event) => { deck.cassette.play(); };
+        this.playButton.initSound.play();
+        this.go();
+    },
+    pause: function () {
+        this.playButton.toggle();
+        this.playButton.pressSound.play();
+        deck.cassette.pause();
+        deck.elem.src = deck.images.stop;
+        deck.isPlaying = false;
+    },
+    resume: function () {
+        this.playButton.pressSound.play();
+        this.go();
+        deck.cassette.play();
+    },
+    playButton: {
+        elem: document.getElementById("play-button"),
+        state: "off",
+        up: "images/play-button-up.jpg",
+        down: "images/play-button-down.jpg",
+        initSound: new Audio("audio/tape-start.mp3"),
+        pressSound: pressSound,
+        toggle: function () {
+            if (this.state === "off") {
+                this.elem.src = this.down;
+                this.state = "on";
+            } else {
+                this.elem.src = this.up;
+                this.state = "off";
+            }
+        }
+    },
+    ffButton: DeckButton("ff"),
+    rewindButton: DeckButton("rewind"),
+  };
+}
diff --git a/images/famicom-recorder.jpeg b/images/famicom-recorder.jpeg
new file mode 100644
index 0000000..a184937
--- /dev/null
+++ b/images/famicom-recorder.jpeg
diff --git a/images/ff-button-down.jpg b/images/ff-button-down.jpg
new file mode 100644
index 0000000..5216ae9
--- /dev/null
+++ b/images/ff-button-down.jpg
diff --git a/images/ff-button-up.jpg b/images/ff-button-up.jpg
new file mode 100644
index 0000000..60b6bf6
--- /dev/null
+++ b/images/ff-button-up.jpg
diff --git a/images/play-button-down.jpg b/images/play-button-down.jpg
new file mode 100644
index 0000000..86daa53
--- /dev/null
+++ b/images/play-button-down.jpg
diff --git a/images/play-button-up.jpg b/images/play-button-up.jpg
new file mode 100644
index 0000000..5b76e0b
--- /dev/null
+++ b/images/play-button-up.jpg
diff --git a/images/rewind-button-down.jpg b/images/rewind-button-down.jpg
new file mode 100644
index 0000000..941dcc5
--- /dev/null
+++ b/images/rewind-button-down.jpg
diff --git a/images/rewind-button-up.jpg b/images/rewind-button-up.jpg
new file mode 100644
index 0000000..048e4cb
--- /dev/null
+++ b/images/rewind-button-up.jpg
diff --git a/tape-deck.html b/tape-deck.html
index 1366fe5..ae8a5b7 100644
--- a/tape-deck.html
+++ b/tape-deck.html
@@ -11,8 +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>
                 <button onclick="play()" class="touch-button">
-                    <img class="play-button" id="play-button" src="images/play-button-up.png">
+                    <img class="play-button" id="play-button" 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>
             </div>
             <div class="notes">
@@ -20,6 +26,6 @@
             </div>
             <button onclick="reset()"> reset tape </button>
         </div>
-        <script src="tape-deck.js"></script>
+        <script type="module" src="tape-deck.js"></script>
     </body>
 </html>
diff --git a/tape-deck.js b/tape-deck.js
index 14524de..057c96b 100644
--- a/tape-deck.js
+++ b/tape-deck.js
@@ -1,6 +1,9 @@
+import { DeckButton } from './deck-button.js';
+
 const urlParams = new URLSearchParams(window.location.search);
 const currentSide = urlParams.get("side");
 const Cassette = new Audio(`audio/2019-mix-side-${currentSide}.mp3`);
+const ffSound = new Audio("audio/ff.mp3");
 
 let TapeDeck = {
     elem: document.getElementById("tape-deck"),
@@ -10,56 +13,65 @@ let TapeDeck = {
     hasStarted: false,
     isPlaying: false,
     images: { stop: "images/cool-deck.png", go: "images/cool-deck.gif" },
+    initSound: new Audio("audio/tape-start.mp3"),
+    playButton: DeckButton("play"),
+    ffButton: DeckButton("ff"),
+    rewindButton: DeckButton("rewind"),
     go: function () {
         this.elem.src = this.images.go;
         this.isPlaying = true;
-        this.playButton.toggle();
     },
     start: function () {
         this.hasStarted = true;
-        this.playButton.initSound.onended = (event) => { Cassette.play(); };
-        this.playButton.initSound.play();
+        this.initSound.onended = (event) => { Cassette.play(); };
+        this.initSound.play();
         this.go();
     },
     pause: function () {
         this.playButton.toggle();
-        this.playButton.pressSound.play();
         Cassette.pause();
         this.elem.src = this.images.stop;
         this.isPlaying = false;
     },
     resume: function () {
-        this.playButton.pressSound.play();
         this.go();
         Cassette.play();
     },
-    playButton: {
-        elem: document.getElementById("play-button"),
-        state: "off",
-        up: "images/play-button-up.png",
-        down: "images/play-button-down.png",
-        initSound: new Audio("audio/tape-start.mp3"),
-        pressSound: new Audio("audio/button-press.mp3"),
-        toggle: function () {
-            if (this.state === "off") {
-                this.elem.src = this.down;
-                this.state = "on";
-            } else {
-                this.elem.src = this.up;
-                this.state = "off";
-            }
-        }
+};
+
+ffSound.onended = (event) => {
+    if (TapeDeck.ffButton.state() === "on") {
+        TapeDeck.ffButton.toggle();
+    } else {
+        TapeDeck.rewindButton.toggle();
     }
+    TapeDeck.playButton.toggle({sound: false});
+    TapeDeck.resume();
 };
 
 // button onclick points here
-function play() {
+window.play = function () {
     if (TapeDeck.isPlaying) { TapeDeck.pause(); return; }
-
+    // figure out better way of handling play button
+    TapeDeck.playButton.toggle();
     TapeDeck.hasStarted ? TapeDeck.resume() : TapeDeck.start();
 }
 
-function reset() {
+window.ff = function () {
+    if (TapeDeck.isPlaying) TapeDeck.pause();
+    TapeDeck.ffButton.toggle();
+    Cassette.currentTime = Cassette.currentTime + 20;
+    ffSound.play();
+}
+
+window.rewind = function () {
+    if (TapeDeck.isPlaying) TapeDeck.pause();
+    TapeDeck.rewindButton.toggle();
+    Cassette.currentTime = Cassette.currentTime - 20;
+    ffSound.play();
+}
+
+window.reset = function () {
     Cassette.currentTime = 0;
 }