bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract from drag and drop

Browse Source
This commit is contained in:
Andy Smith
2025-09-25 16:29:13 -05:00
parent 8097e15c7e
commit f9427dac13
12 changed files with 18 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/controllers/drag_and_drop_controller.js
-36
View File
@@ -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/guitar_controller.js → app/javascript/controllers/drag_and_strum_controller.js
+13 -13
View File
@@ -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)