Working guitar sounds

app/javascript/controllers/drag_and_drop_controller.js

@@ -7,6 +7,23 @@ export default class extends Controller {
   static values = { url: String }
   static classes = [ "draggedItem", "hoverContainer" ]
 
+  connect() {
+    this.audioFiles = [
+      "/audio/B3.mp3",
+      "/audio/C3.mp3",
+      "/audio/D4.mp3",
+      "/audio/E3.mp3",
+      "/audio/Fsharp4.mp3",
+      "/audio/G3.mp3"
+    ]
+
+    this.preloadedAudioFiles = this.audioFiles.map(file => {
+      const audio = new Audio(file)
+      audio.load()
+      return audio
+    });
+  }
+
   // Actions
 
   async dragStart(event) {
@@ -32,6 +49,18 @@ export default class extends Controller {
     }
   }
 
+  dragEnter(event) {
+    event.preventDefault()
+    const container = this.#containerContaining(event.target)
+    this.#clearContainerHoverClasses()
+
+    if (!container) { return }
+
+    if (container !== this.sourceContainer) {
+      this.#playZither()
+    }
+  }
+
   async drop(event) {
     const container = this.#containerContaining(event.target)
 
@@ -67,6 +96,13 @@ export default class extends Controller {
     this.containerTargets.forEach(container => container.classList.remove(this.hoverContainerClass))
   }
 
+  #playZither() {
+    const randomIndex = Math.floor(Math.random() * this.preloadedAudioFiles.length)
+    const audio = this.preloadedAudioFiles[randomIndex]
+    const audioInstance = new Audio(audio.src)
+    audioInstance.play()
+  }
+
   // Private
 
   async #submitDropRequest(item, container) {

app/javascript/controllers/guitar_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+import { post } from "@rails/request.js"
+import { nextFrame } from "helpers/timing_helpers"
+
+export default class extends Controller {
+  static targets = [ "item", "container" ]
+  static values = { url: String }
+  static classes = [ "draggedItem", "hoverContainer" ]
+
+  connect() {
+    this.audioFiles = [
+      "/audio/B3.mp3",
+      "/audio/C3.mp3",
+      "/audio/D4.mp3",
+      "/audio/E3.mp3",
+      "/audio/Fsharp4.mp3",
+      "/audio/G3.mp3"
+    ]
+
+    this.preloadedAudioFiles = this.audioFiles.map(file => {
+      const audio = new Audio(file)
+      audio.load()
+      return audio
+    });
+  }
+
+  dragEnter(event) {
+    event.preventDefault()
+    const container = this.#containerContaining(event.target)
+
+    if (!container) { return }
+
+    if (container !== this.sourceContainer) {
+      this.#playZither()
+    }
+  }
+
+  #containerContaining(element) {
+    return this.containerTargets.find(container => container.contains(element) || container === element)
+  }
+
+  #playZither() {
+    const randomIndex = Math.floor(Math.random() * this.preloadedAudioFiles.length)
+    const audio = this.preloadedAudioFiles[randomIndex]
+    const audioInstance = new Audio(audio.src)
+    audioInstance.play()
+  }
+}

app/views/cards/index.html.erb

@@ -39,6 +39,7 @@
       action: "
         dragstart->drag-and-drop#dragStart
         dragover->drag-and-drop#dragOver
+        dragenter->drag-and-drop#dragEnter
         drop->drag-and-drop#drop
         dragend->drag-and-drop#dragEnd" } do %>