1 files changed, 36 insertions, 24 deletions

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;
 }