From f9427dac131fbc0c63659ed811361aa79f4c1df2 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 25 Sep 2025 16:29:13 -0500 Subject: [PATCH] Extract from drag and drop --- .../controllers/drag_and_drop_controller.js | 36 ------------------ ...roller.js => drag_and_strum_controller.js} | 26 ++++++------- app/views/cards/index.html.erb | 4 +- .../cards/index/engagement/_closed.html.erb | 1 + .../cards/index/engagement/_doing.html.erb | 1 + .../cards/index/engagement/_on_deck.html.erb | 1 + public/audio/{ => mandolin}/B3.mp3 | Bin public/audio/{ => mandolin}/C3.mp3 | Bin public/audio/{ => mandolin}/D4.mp3 | Bin public/audio/{ => mandolin}/E3.mp3 | Bin public/audio/{ => mandolin}/Fsharp4.mp3 | Bin public/audio/{ => mandolin}/G3.mp3 | Bin 12 files changed, 18 insertions(+), 51 deletions(-) rename app/javascript/controllers/{guitar_controller.js => drag_and_strum_controller.js} (71%) rename public/audio/{ => mandolin}/B3.mp3 (100%) rename public/audio/{ => mandolin}/C3.mp3 (100%) rename public/audio/{ => mandolin}/D4.mp3 (100%) rename public/audio/{ => mandolin}/E3.mp3 (100%) rename public/audio/{ => mandolin}/Fsharp4.mp3 (100%) rename public/audio/{ => mandolin}/G3.mp3 (100%) diff --git a/app/javascript/controllers/drag_and_drop_controller.js b/app/javascript/controllers/drag_and_drop_controller.js index 8452febc0..0c7c08e49 100644 --- a/app/javascript/controllers/drag_and_drop_controller.js +++ b/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) { diff --git a/app/javascript/controllers/guitar_controller.js b/app/javascript/controllers/drag_and_strum_controller.js similarity index 71% rename from app/javascript/controllers/guitar_controller.js rename to app/javascript/controllers/drag_and_strum_controller.js index 6aa222634..070542e48 100644 --- a/app/javascript/controllers/guitar_controller.js +++ b/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) diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb index 78cc261b7..826fdf123 100644 --- a/app/views/cards/index.html.erb +++ b/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 %> diff --git a/app/views/cards/index/engagement/_closed.html.erb b/app/views/cards/index/engagement/_closed.html.erb index 33eac95cb..49a467a75 100644 --- a/app/views/cards/index/engagement/_closed.html.erb +++ b/app/views/cards/index/engagement/_closed.html.erb @@ -6,6 +6,7 @@