Option to hold score buttons to add 3x of the given score

kcapp · Nov 11, 2024 · b9b143c · b9b143c
1 parent 9b4c98b
commit b9b143c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 10 deletions.
diff --git a/...es/leg/components/button-input-table/components/all-buttons-input/all-buttons-input.marko b/...es/leg/components/button-input-table/components/all-buttons-input/all-buttons-input.marko
@@ -2,7 +2,7 @@
     <td>
         <score-button text="Miss" clazz="btn-score" value=0 multiplier=1 on-button-press("onButtonPress")/>
     </td>
-    <button-row numbers=[ 20, 19, 18, 17 ] on-button-press("onButtonPress")/>
+    <button-row numbers=[ 20, 19, 18, 17 ]/>
     <td rowspan='2' style="width: 5%;" class="btn-cell" on-click("onButtonPress", null, null, true)>
         <score-button icon="fas fa-long-arrow-alt-left" clazz='btn-single btn-score-tall' isUndo=true/>
     </td>
@@ -11,20 +11,20 @@
     <td rowspan='2'>
         <score-button text="Bull" value=25 multiplier=1 clazz='btn-single btn-score-tall' on-button-press("onButtonPress")/>
     </td>
-    <button-row numbers=[ 16, 15, 14, 13 ] on-button-press("onButtonPress")/>
+    <button-row numbers=[ 16, 15, 14, 13 ]/>
 </tr>
 <tr class='row'>
-    <button-row numbers=[ 12, 11, 10, 9 ] on-button-press("onButtonPress")/>
+    <button-row numbers=[ 12, 11, 10, 9 ]/>
     <td style="border: 0;"/>
 </tr>
 <tr class='row btn-score-small'>
     <td rowspan='2'>
         <score-button text="Bull" value=25 multiplier=2 clazz='btn-double btn-score-tall' on-button-press("onButtonPress")/>
     </td>
-    <button-row numbers=[ 8, 7, 6, 5 ] on-button-press("onButtonPress")/>
+    <button-row numbers=[ 8, 7, 6, 5 ]/>
     <td style="border: 0;"/>
 </tr>
 <tr class='row'>
-    <button-row numbers=[ 4, 3, 2, 1 ] on-button-press("onButtonPress")/>
+    <button-row numbers=[ 4, 3, 2, 1 ]/>
     <td style="border: 0;"/>
 </tr>
diff --git a/src/pages/leg/components/button-input-table/components/button-row/button-row.marko b/src/pages/leg/components/button-input-table/components/button-row/button-row.marko
@@ -1,15 +1,15 @@
 <if(input.multiplier)>
     <for|value| of=input.numbers>
         <td>
-            <score-button value=value multiplier=input.multiplier on-button-press("onButtonPressed")/>
+            <score-button value=value multiplier=input.multiplier />
         </td>
     </for>
 </if>
 <else>
     <for|multiplier| from=1 to=3>
         <for|value| of=input.numbers>
             <td>
-                <score-button value=value multiplier=multiplier on-button-press("onButtonPressed")/>
+                <score-button value=value multiplier=multiplier />
             </td>
         </for>
     </for>

diff --git a/...pages/leg/components/button-input-table/components/score-button/score-button.component.js b/...pages/leg/components/button-input-table/components/score-button/score-button.component.js
@@ -1,3 +1,5 @@
+const alertify = require('../../../../../../util/alertify');
+
 module.exports = {
     onInput(input) {
         let clazz = 'btn-score btn-info btn-lg btn-block btn-score';
@@ -18,15 +20,61 @@ module.exports = {
         }
     },
 
+    onMount() {
+        let holdTimer;
+        let isHolding = false;
+        let isTouch = false;
+
+        const $buttons = $('[id^="btn-score-1-"], [id^="btn-score-2-"], [id^="btn-score-3-"]');
+        $buttons.off('click mousedown touchstart mouseup touchend');
+        $buttons.on('mousedown touchstart', (event) => {
+            if (isTouch && event.type === 'touchstart') {
+                return;
+            }
+
+            isHolding = false;
+            isTouch = event.type === 'touchstart';
+
+            holdTimer = setTimeout(() => {
+                isHolding = true;
+
+                this.emitButtonPress(event.target);
+                this.emitButtonPress(event.target);
+                this.emitButtonPress(event.target);
+            }, 500);
+
+            if (isTouch) {
+                event.preventDefault();
+            }
+        });
+        $buttons.on('mouseup touchend', (event) => {
+            clearTimeout(holdTimer);
+
+            if (!isHolding) {
+                this.emitButtonPress(event.target);
+            }
+            isTouch = false;
+            event.stopImmediatePropagation();
+        });
+    },
+
     onClick(event) {
         const target = event.target;
         if (this.state.isUndo) {
             this.emit('button-press', null, null, true);
-        } else {
+        }
+        /* else {
             const score = parseInt(target.getAttribute('data-score'));
             const multiplier = parseInt(target.getAttribute('data-multiplier'));
             this.emit('button-press', score, multiplier, false);
-        }
+        }*/
+        target.blur();
+    },
+
+    emitButtonPress(target) {
+        const score = parseInt(target.getAttribute('data-score'));
+        const multiplier = parseInt(target.getAttribute('data-multiplier'));
+        this.emit('button-press', score, multiplier, false);
         target.blur();
     }
 }
diff --git a/src/pages/leg/components/button-input-table/components/score-button/score-button.marko b/src/pages/leg/components/button-input-table/components/score-button/score-button.marko
@@ -1,7 +1,8 @@
 $ const clazz = state.clazz;
 $ const text = input.text || input.value;
+$ const id = input.value !== undefined && input.multiplier !== undefined ? `btn-score-${input.multiplier}-${input.value}` : null;
 
-<button type='button' class=clazz data-score=input.value data-multiplier=input.multiplier on-click("onClick")>
+<button type='button' id=id class=`${clazz}` data-score=input.value data-multiplier=input.multiplier on-click("onClick")>
      <if(input.icon)>
           <i class=input.icon></i>
      </if>