From 5ce1a32bdb792bbc35d534cfde19b54c623ef99c Mon Sep 17 00:00:00 2001 From: Thord Setsaas Date: Thu, 7 Nov 2024 21:36:45 +0100 Subject: [PATCH] Ability to configure auto bust and auto leg finish from frontend --- CHANGELOG.md | 2 +- .../configure-kcapp-modal.component.js | 38 ++++++++++++-- .../configure-kcapp-modal.marko | 41 ++++++++++++--- .../configure-kcapp-modal.style.less | 52 +++++++++++++++++++ .../scorecard-header/scorecard-header.marko | 2 +- .../scorecard-header.style.less | 21 +++++++- src/components/scorecard/components/x01.js | 39 +++++++------- .../scorecard/scorecard.component.js | 34 ++++++++++-- src/util/alertify.js | 2 +- src/util/localstorage.js | 7 +++ 10 files changed, 202 insertions(+), 36 deletions(-) create mode 100644 src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.style.less diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a323d33..9b85d115 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.component.js b/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.component.js index e452eaf8..c1896893 100644 --- a/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.component.js +++ b/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); }, } diff --git a/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.marko b/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.marko index 10e728bd..548826dc 100644 --- a/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.marko +++ b/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.marko @@ -11,11 +11,11 @@
- +
@@ -30,6 +30,35 @@ +
+
+ Leg Options +
+
+
+ + + Auto Finish Legs +
+ +
+ + seconds +
+ +
+
+
+ + + Confirm Busts? +
+
+
@@ -37,4 +66,4 @@
- \ No newline at end of file + diff --git a/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.style.less b/src/components/navbar/components/configure-kcapp-modal/configure-kcapp-modal.style.less new file mode 100644 index 00000000..9f3aec2b --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/scorecard-header/scorecard-header.marko b/src/components/scorecard-header/scorecard-header.marko index f960bca6..5eeb1590 100644 --- a/src/components/scorecard-header/scorecard-header.marko +++ b/src/components/scorecard-header/scorecard-header.marko @@ -1,7 +1,7 @@ $ const types = require("../scorecard/components/match_types"); -
+
diff --git a/src/components/scorecard-header/scorecard-header.style.less b/src/components/scorecard-header/scorecard-header.style.less index d5bcc481..17907cc9 100644 --- a/src/components/scorecard-header/scorecard-header.style.less +++ b/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 { diff --git a/src/components/scorecard/components/x01.js b/src/components/scorecard/components/x01.js index c1f48336..99d9b4ff 100644 --- a/src/components/scorecard/components/x01.js +++ b/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; } + diff --git a/src/components/scorecard/scorecard.component.js b/src/components/scorecard/scorecard.component.js index 2222f765..b9ccbbc5 100644 --- a/src/components/scorecard/scorecard.component.js +++ b/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 (${countdown}s)`); + const countdownInterval = setInterval(() => { + countdown--; + confirmDialog.setContent(`Leg will be finished (${countdown}s)`); + + if (countdown <= 0) { + clearInterval(countdownInterval); + if (!confirmed) { + okFunction(); + } + } + }, 1000); + confirmDialog.set('onclose', function() { + clearInterval(countdownInterval); }); + } } }; diff --git a/src/util/alertify.js b/src/util/alertify.js index 890d2751..7826e0b0 100644 --- a/src/util/alertify.js +++ b/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', diff --git a/src/util/localstorage.js b/src/util/localstorage.js index cf579808..679f5eab 100644 --- a/src/util/localstorage.js +++ b/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;