From a2cf9854aa931bed12a0a6ef7c68679e80854e55 Mon Sep 17 00:00:00 2001 From: Nicolas Mafra Date: Fri, 2 Feb 2024 19:35:42 -0300 Subject: [PATCH] feat: add support for mobile --- piano/index.html | 2 ++ piano/svg/PianoSvg.mjs | 11 +++++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/piano/index.html b/piano/index.html index 4f8ebf2..80c665a 100644 --- a/piano/index.html +++ b/piano/index.html @@ -1,7 +1,9 @@ + + Piano Web
diff --git a/piano/svg/PianoSvg.mjs b/piano/svg/PianoSvg.mjs index fde9c9e..c9ecb74 100644 --- a/piano/svg/PianoSvg.mjs +++ b/piano/svg/PianoSvg.mjs @@ -27,6 +27,8 @@ const strokeWidth = 1; class PianoKeySvg { + pressed = false; + constructor(data, piano) { this.data = data; this.piano = piano; @@ -41,17 +43,22 @@ class PianoKeySvg { this.element.addEventListener('mousedown', () => this.onClickStart()); this.element.addEventListener('mouseup', () => this.onClickEnd()); this.element.addEventListener('mouseout', () => this.onClickEnd()); + this.element.addEventListener('touchstart', () => this.onClickStart()); + this.element.addEventListener('touchend', () => this.onClickEnd()); + this.element.addEventListener('touchcancel', () => this.onClickEnd()); this.element.classList.add(this.data.typeClass); } onClickStart() { - if (this.piano.onKeyPress) + if (!this.pressed && this.piano.onKeyPress) this.piano.onKeyPress(this); + this.pressed = true; } onClickEnd() { - if (this.piano.onKeyRelease) + if (this.pressed && this.piano.onKeyRelease) this.piano.onKeyRelease(this); + this.pressed = false; } addHighlight() {