feat: add support for mobile

nicolasmafra · Feb 2, 2024 · a2cf985 · a2cf985
1 parent fab6bb0
commit a2cf985
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/piano/index.html b/piano/index.html
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="./svg/style.css">
+        <title>Piano Web</title>
     </head>
     <body>
         <div id="container"></div>

diff --git 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() {