Extract from drag and drop

app/javascript/controllers/drag_and_drop_controller.js

@@ -7,23 +7,6 @@ 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) {
@@ -49,18 +32,6 @@ 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)
 
@@ -96,13 +67,6 @@ 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/drag_and_strum_controller.js

@@ -2,22 +2,22 @@ import { Controller } from "@hotwired/stimulus"
 import { post } from "@rails/request.js"
 import { nextFrame } from "helpers/timing_helpers"
 
+const MANDOLIN_NOTES = [
+  "/audio/mandolin/B3.mp3",
+  "/audio/mandolin/C3.mp3",
+  "/audio/mandolin/D4.mp3",
+  "/audio/mandolin/E3.mp3",
+  "/audio/mandolin/Fsharp4.mp3",
+  "/audio/mandolin/G3.mp3"
+]
+
 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 => {
+    this.preloadedAudioFiles = MANDOLIN_NOTES.map(file => {
       const audio = new Audio(file)
       audio.load()
       return audio
@@ -30,8 +30,8 @@ export default class extends Controller {
 
     if (!container) { return }
 
-    if (container !== this.sourceContainer) {
-      this.#playZither()
+    if (container !== this.sourceContainer && event.shiftKey) {
+      this.#playSound()
     }
   }
 
@@ -39,7 +39,7 @@ export default class extends Controller {
     return this.containerTargets.find(container => container.contains(element) || container === element)
   }
 
-  #playZither() {
+  #playSound() {
     const randomIndex = Math.floor(Math.random() * this.preloadedAudioFiles.length)
     const audio = this.preloadedAudioFiles[randomIndex]
     const audioInstance = new Audio(audio.src)

app/views/cards/index.html.erb

@@ -32,14 +32,14 @@
 <%= render "filters/settings", user_filtering: @user_filtering %>
 
 <%= tag.div data: {
-      controller: "drag-and-drop",
+      controller: "drag-and-drop drag-and-strum",
       drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item",
       drag_and_drop_hover_container_class: "drag-and-drop__hover-container",
       drag_and_drop_url_value: cards_drops_path(**@filter.as_params),
       action: "
         dragstart->drag-and-drop#dragStart
         dragover->drag-and-drop#dragOver
-        dragenter->drag-and-drop#dragEnter
+        dragenter->drag-and-strum#dragEnter
         drop->drag-and-drop#drop
         dragend->drag-and-drop#dragEnd" } do %>
 

app/views/cards/index/engagement/_closed.html.erb

@@ -6,6 +6,7 @@
 
 <section id="closed-cards" class="cards cards--closed is-collapsed" style="--card-color: var(--color-card-complete);"
     data-drag-and-drop-target="container"
+    data-drag-and-strum-target="container"
     data-drop-target="closed"
     data-collapsible-columns-target="column">
 

app/views/cards/index/engagement/_doing.html.erb

@@ -2,6 +2,7 @@
     class="cards cards--doing is-collapsed" style="--card-color: <%= stage.color if defined?(stage) && stage %>"
     data-collapsible-columns-target="column"
     data-drag-and-drop-target="container"
+    data-drag-and-strum-target="container"
     data-drop-target="doing"
     data-stage-id="<%= stage.id if defined?(stage) && stage %>">
   <%

app/views/cards/index/engagement/_on_deck.html.erb

@@ -1,6 +1,7 @@
 <section id="on-deck-cards" class="cards cards--on-deck is-collapsed" style="--card-color: var(--color-card-complete);"
     data-collapsible-columns-target="column"
     data-drag-and-drop-target="container"
+    data-drag-and-strum-target="container"
     data-drop-target="on_deck">
 
   <%= cards_expander "Not Now", column.filter.cards.count %>