Ability to configure auto bust and auto leg finish from frontend

Author: thordy

CHANGELOG.md

@@ -8,7 +8,7 @@ A preview of major changes can be found in the Wiki ([Latest Changes](https://gi
 - New "Explore" tab on player statistics, to explore darts thrown
 - Support for `ANY` and `MASTER` outs for `x01` legs
 - Simplified input for `x01` legs
-- Ability to configure volume of announcer from frontend
+- Ability to configure: "Announcement Volume", "Auto Busting" and "Auto Leg Finish" from frontend
 
 #### Changed
 - Updated to use `Node.js v18`

src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.component.js

@@ -4,7 +4,10 @@ module.exports = {
     onCreate(input) {
         this.state = {
             buttonLayout: "wide",
-            volume: 100
+            volume: 100,
+            confirmBusts: true,
+            autoFinishLegs: false,
+            autoFinishTime: 10
         }
     },
     onMount() {
@@ -17,13 +20,40 @@ module.exports = {
         if (volume) {
             this.state.volume = Math.min(Math.max(parseInt(volume * 100), 0), 100);
         }
+
+        const confirmBusts = localStorage.get("confirm-busts");
+        if (confirmBusts !== null) {
+            this.state.confirmBusts = confirmBusts === 'true';
+        }
+
+        const autoFinishLegs = localStorage.get("auto-finish-legs");
+        if (autoFinishLegs !== null) {
+            this.state.autoFinishLegs = autoFinishLegs === 'true';
+        }
+
+        const autoFinishTime = localStorage.get("auto-finish-time");
+        if (autoFinishTime !== null) {
+            this.state.autoFinishTime = parseInt(autoFinishTime, 10) || 10;
+        }
+    },
+    updateVolume(event, selected) {
+        this.state.volume = selected.value;
+    },
+    toggleConfirmBusts(event) {
+        this.state.confirmBusts = event.target.checked;
+    },
+    toggleAutoFinishLegs(event) {
+        this.state.autoFinishLegs = event.target.checked;
+    },
+    updateAutoFinishTime(event) {
+        this.state.autoFinishTime = parseInt(event.target.value, 10);
     },
     onSave() {
         this.state.buttonLayout = document.getElementById("buttonLayout").value;
         localStorage.set('button-layout', this.state.buttonLayout);
-    },
-    updateVolume(event, selected) {
-        this.state.volume = selected.value;
+        localStorage.set('confirm-busts', this.state.confirmBusts);
+        localStorage.set('auto-finish-legs', this.state.autoFinishLegs);
+        localStorage.set('auto-finish-time', this.state.autoFinishTime);
         localStorage.set('volume', this.state.volume / 100);
     },
 }

src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.marko

@@ -11,11 +11,11 @@
           </div>
           <div class="block-container-with-header">
             <div class="form-group form-check">
-                <select id="buttonLayout" class="form-select" style="width: 100%" name="button-layout">
-                  <for|layout| of=[ "Wide", "Compact" ]>
-                    <option style="text-transform: capitalize;" value=layout.toLowerCase() selected=(layout.toLowerCase() === state.buttonLayout)>${layout}</option>
-                  </for>
-                </select>
+              <select id="buttonLayout" class="form-select" style="width: 100%" name="button-layout">
+                <for|layout| of=[ "Wide", "Compact" ]>
+                  <option style="text-transform: capitalize;" value=layout.toLowerCase() selected=(layout.toLowerCase() === state.buttonLayout)>${layout}</option>
+                </for>
+              </select>
             </div>
           </div>
         </div>
@@ -30,11 +30,40 @@
             </div>
           </div>
         </div>
+        <div>
+          <div class="block-container-header">
+            <span>Leg Options</span>
+          </div>
+          <div class="block-container-with-header" style="display: flex; align-items: center; min-height: 81px;">
+            <div class="form-group form-check mr-2">
+              <input type="checkbox" id="autoFinishLegs" class="form-check-input" checked=state.autoFinishLegs on-change("toggleAutoFinishLegs")>
+              <label class="toggle-button" for="autoFinishLegs">
+                <span class="toggle-slider"></span>
+              </label>
+              <span style="margin-left: 8px;">Auto Finish Legs</span>
+            </div>
+            <if(state.autoFinishLegs)>
+              <div class="form-group" style="margin-left: 10px; margin-top: 5px; display: flex; align-items: center;">
+                <input type="number" id="autoFinishTime" class="form-control" min="0" value=state.autoFinishTime on-input("updateAutoFinishTime") style="width: 70px; margin-right: 5px;">
+                <span>seconds</span>
+              </div>
+            </if>
+          </div>
+          <div class="block-container-with-header" style="margin-top: -30px;">
+            <div class="form-group form-check">
+              <input type="checkbox" id="confirmBusts" class="form-check-input" checked=state.confirmBusts on-change("toggleConfirmBusts")>
+              <label class="toggle-button" for="confirmBusts">
+                <span class="toggle-slider"></span>
+              </label>
+              <span style="margin-left: 8px;">Confirm Busts?</span>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="modal-footer">
         <button class="btn btn-primary" type="button" on-click("onSave") data-dismiss="modal">Save</button>
         <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
       </div>
     </div>
   </div>
-</div>
+</div>

src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.style.less

@@ -0,0 +1,52 @@
+.block-container-header > span {
+    font-weight: 700;
+}
+
+.form-check-input {
+    display: none;
+}
+
+.toggle-button {
+    width: 50px;
+    height: 24px;
+    background-color: #ccc;
+    border-radius: 12px;
+    position: relative;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    margin-bottom: -5px;
+}
+
+.toggle-button .toggle-slider {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    background-color: white;
+    border-radius: 50%;
+    transition: transform 0.3s;
+}
+
+.form-check-input:checked + .toggle-button {
+    background-color: #4caf50;
+}
+
+.form-check-input:checked + .toggle-button .toggle-slider {
+    transform: translateX(26px);
+}
+
+.block-container-with-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0px;
+    margin-top: 0px;
+}
+
+.form-group {
+    margin-bottom: 0;
+}
+
+.toggle-button {
+    display: inline-block;
+}

src/components/scorecard-header/scorecard-header.marko

@@ -1,7 +1,7 @@
 $ const types = require("../scorecard/components/match_types");
 
 <td>
-  <div style=`position: relative; opacity: ${state.player.lives !== null && state.player.lives <= 0 ? "35%" : "100%"};` class=(input.player.is_current_player ? "scorecard scorecard-active" : "scorecard scorecard-inactive")>
+  <div style=`position: relative; opacity: ${state.player.lives !== null && state.player.lives <= 0 ? "35%" : "100%"};` class=`${(input.player.is_current_player ? "scorecard scorecard-active" : "scorecard scorecard-inactive")} scorecard-header`>
     <if(state.player.player.board_stream_url)>
       <i style="position: absolute; top: 5px; right: 5px; cursor: pointer;" class="fas fa-video fa-2x" title="Toggle Camera" on-click("toggleCamera")></i>
     </if>

src/components/scorecard-header/scorecard-header.style.less

@@ -1,3 +1,20 @@
+/*@media (max-width: 1340px) {
+    .scorecard-header {
+        overflow: hidden;
+        transform: scaleY(0.75);
+        transform-origin: top left;
+        margin-bottom: -40px !important;
+    }
+
+    .label-player-name {
+        font-size: 14pt;
+    }
+
+    .label-player-score {
+        font-size: 24pt;
+    }
+}*/
+
 table {
     width: 100%;
     table-layout: fixed;
@@ -35,7 +52,7 @@ table {
 }
 
 .label-player-name {
-    font-size: 10pt;
+    font-size: 18pt;
     padding: 0px;
     margin: 0px;
     color: #ffffff;
@@ -50,7 +67,7 @@ table {
 .label-player-score {
     font-weight: 700;
     padding: 10px 0px 0px 0px;
-    font-size: 40pt;
+    font-size: 32pt;
 }
 
 .player-legs {

src/components/scorecard/components/x01.js

@@ -1,4 +1,5 @@
 const alertify = require("../../../util/alertify");
+const localStorage = require("../../../util/localstorage");
 const types = require("./match_types");
 
 exports.removeLast = function(dart, external) {
@@ -66,26 +67,27 @@ exports.confirmThrow = function (external) {
     const isBust = module.exports.isBust(this.state.player, dart, this.state.totalScore, this.state.leg);
     if (isCheckout) {
         submitting = true;
-        alertify.confirm('Leg will be finished.',
-            () => {
-                this.emit('leg-finished', true);
-            }, () => {
-                this.removeLast();
-                this.emit('leg-finished', false);
-            });
-    } else if (isBust) {
+    }
+    else if (isBust) {
         submitting = true;
         this.state.isBusted = true;
-        alertify.confirm('Player busted',
-            () => {
-                alertify.success('Player busted');
-                this.emit('player-busted', true);
-            },
-            () => {
-                this.removeLast();
-                this.state.isBusted = false;
-                this.emit('player-busted', false);
-            });
+        const isConfirmBust = localStorage.getBool('confirm-busts');
+
+        if (isConfirmBust) {
+            alertify.confirm('Player busted',
+                () => {
+                    alertify.success('Player busted');
+                    this.emit('player-busted', true);
+                },
+                () => {
+                    this.removeLast();
+                    this.state.isBusted = false;
+                    this.emit('player-busted', false);
+                });
+        } else {
+            alertify.success('Player busted');
+            this.emit('player-busted', true);
+        }
     }
     if (!this.state.player.player.options || this.state.player.player.options.subtract_per_dart) {
         this.state.player.current_score -= scored;
@@ -96,3 +98,4 @@ exports.confirmThrow = function (external) {
     }
     return submitting;
 }
+

src/components/scorecard/scorecard.component.js

@@ -1,4 +1,5 @@
 const alertify = require("../../util/alertify");
+const localStorage = require("../../util/localstorage");
 
 const x01 = require("./components/x01");
 const shootout = require("./components/shootout");
@@ -253,12 +254,39 @@ module.exports = {
     },
 
     confirmLegFinish() {
-        alertify.confirm('Leg will be finished.',
+        let countdown = localStorage.get('auto-finish-time') || 10;
+        let confirmed = false;
+
+        const okFunction = () => {
+            confirmed = true;
+            this.emit('leg-finished', true);
+        };
+
+        const confirmDialog = alertify.confirm(`Leg will be finished`,
+            okFunction,
             () => {
-                this.emit('leg-finished', true);
-            }, () => {
                 this.removeLast();
                 this.emit('leg-finished', false);
+            }
+        );
+
+        const isAutoFinish = localStorage.getBool('auto-finish-legs');
+        if (isAutoFinish) {
+            confirmDialog.setContent(`Leg will be finished (<strong>${countdown}s</strong>)`);
+            const countdownInterval = setInterval(() => {
+                countdown--;
+                confirmDialog.setContent(`Leg will be finished (<strong>${countdown}s</strong>)`);
+
+                if (countdown <= 0) {
+                    clearInterval(countdownInterval);
+                    if (!confirmed) {
+                        okFunction();
+                    }
+                }
+            }, 1000);
+            confirmDialog.set('onclose', function() {
+                clearInterval(countdownInterval);
             });
+        }
     }
 };

src/util/alertify.js

@@ -32,7 +32,7 @@ exports.alert = (text, okFnc) => {
         .show();
 }
 exports.confirm = (text, okFnc, cancelFnc) => {
-    bootstrap().confirm(text, okFnc, cancelFnc)
+    return bootstrap().confirm(text, okFnc, cancelFnc)
         .setting({
             title: TITLE,
             defaultFocus: 'ok',

src/util/localstorage.js

@@ -4,6 +4,13 @@ function getKey(key) {
 
 exports.get = key => localStorage.getItem(getKey(key));
 exports.getInt = key => parseInt(localStorage.getItem(getKey(key)));
+exports.getBool = key => {
+    const item = localStorage.getItem(getKey(key));
+    if (!item) {
+        return false;
+    }
+    return item === 'true';
+}
 exports.set = (key, value) =>
     localStorage.setItem(getKey(key), value);
 exports.getKey = getKey;