chore(cleanup): rimuove l'implementazione HomePage legacy non più utilizzata
Elimina componenti, template e stili della vecchia HomePage. Riduce codice morto e semplifica la manutenzione del progetto.
This commit is contained in:
@@ -1,220 +0,0 @@
|
||||
<script>
|
||||
import NoSleep from "nosleep.js";
|
||||
export default {
|
||||
name: "HomePage",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
voices: null,
|
||||
diaNomi: {
|
||||
show: false,
|
||||
home: "",
|
||||
guest: "",
|
||||
},
|
||||
visuForm: false,
|
||||
visuButt: true,
|
||||
sp: {
|
||||
servHome: true,
|
||||
punt: { home: 0, guest: 0 },
|
||||
set: { home: 0, guest: 0 },
|
||||
nomi: { home: "Antoniana", guest: "Guest" },
|
||||
form: {
|
||||
home: ["1", "2", "3", "4", "5", "6"],
|
||||
guest: ["1", "2", "3", "4", "5", "6"],
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.voices = window.speechSynthesis.getVoices();
|
||||
if (this.isMobile()) {
|
||||
this.speak();
|
||||
var noSleep = new NoSleep();
|
||||
noSleep.enable();
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
this.abilitaTastiSpeciali();
|
||||
},
|
||||
methods: {
|
||||
closeApp() {
|
||||
var win = window.open("", "_self");
|
||||
win.close();
|
||||
},
|
||||
fullScreen() {
|
||||
document.documentElement.requestFullscreen();
|
||||
},
|
||||
isMobile() {
|
||||
if (
|
||||
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||||
navigator.userAgent
|
||||
)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
resetta() {
|
||||
this.$waveui.notify("Punteggio<br />RESETTATO", "success");
|
||||
this.visuForm = false;
|
||||
this.sp.punt.home = 0;
|
||||
this.sp.punt.guest = 0;
|
||||
this.sp.form = {
|
||||
home: ["1", "2", "3", "4", "5", "6"],
|
||||
guest: ["1", "2", "3", "4", "5", "6"],
|
||||
}
|
||||
},
|
||||
incSet(team) {
|
||||
if (this.sp.set[team] == 2) {
|
||||
this.sp.set[team] = 0;
|
||||
} else {
|
||||
this.sp.set[team]++;
|
||||
}
|
||||
},
|
||||
incPunt(team) {
|
||||
this.sp.punt[team]++;
|
||||
this.sp.servHome = (team == "home");
|
||||
this.sp.form[team].push(this.sp.form[team].shift());
|
||||
},
|
||||
decPunt(team) {
|
||||
// decrementa il punteggio se è > 0.
|
||||
if (this.sp.punt[team] > 0) {
|
||||
this.sp.punt[team]--;
|
||||
this.sp.form[team].unshift(this.sp.form[team].pop());
|
||||
}
|
||||
},
|
||||
speak() {
|
||||
const msg = new SpeechSynthesisUtterance();
|
||||
if (this.sp.punt.home + this.sp.punt.guest == 0) {
|
||||
msg.text = "zero a zero";
|
||||
} else if (this.sp.punt.home == this.sp.punt.guest) {
|
||||
msg.text = this.sp.punt.home + " pari";
|
||||
} else {
|
||||
if (this.sp.servHome) {
|
||||
msg.text = this.sp.punt.home + " a " + this.sp.punt.guest;
|
||||
} else {
|
||||
msg.text = this.sp.punt.guest + " a " + this.sp.punt.home;
|
||||
}
|
||||
}
|
||||
// msg.volume = 1.0; // speech volume (default: 1.0)
|
||||
// msg.pitch = 1.0; // speech pitch (default: 1.0)
|
||||
// msg.rate = 1.0; // speech rate (default: 1.0)
|
||||
msg.lang = 'it_IT'; // speech language (default: 'en-US')
|
||||
const voices = window.speechSynthesis.getVoices();
|
||||
msg.voice = voices.find(voice => voice.name === 'Google italiano'); // voice URI (default: platform-dependent)
|
||||
// msg.onboundary = function (event) {
|
||||
// console.log('Speech reached a boundary:', event.name);
|
||||
// };
|
||||
// msg.onpause = function (event) {
|
||||
// console.log('Speech paused:', event.utterance.text.substring(event.charIndex));
|
||||
// };
|
||||
window.speechSynthesis.speak(msg);
|
||||
},
|
||||
apriDialogConfig() {
|
||||
this.disabilitaTastiSpeciali();
|
||||
this.diaNomi.show = true;
|
||||
},
|
||||
disabilitaTastiSpeciali() {
|
||||
window.removeEventListener("keydown", this.funzioneTastiSpeciali);
|
||||
},
|
||||
abilitaTastiSpeciali() {
|
||||
window.addEventListener("keydown", this.funzioneTastiSpeciali);
|
||||
},
|
||||
funzioneTastiSpeciali(e) {
|
||||
e.preventDefault();
|
||||
if (e.ctrlKey && e.key == "m") {
|
||||
this.diaNomi.show = true
|
||||
} else if (e.ctrlKey && e.key == "b") {
|
||||
this.visuButt = !this.visuButt
|
||||
} else if (e.ctrlKey && e.key == "f") {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else if (e.ctrlKey && e.key == "s") {
|
||||
this.speak();
|
||||
} else if (e.ctrlKey && e.key == "z") {
|
||||
this.visuForm = !this.visuForm
|
||||
} else if (e.ctrlKey && e.key == "ArrowUp") {
|
||||
this.incPunt("home")
|
||||
} else if (e.ctrlKey && e.key == "ArrowDown") {
|
||||
this.decPunt("home")
|
||||
} else if (e.ctrlKey && e.key == "ArrowRight") {
|
||||
this.incSet("home")
|
||||
} else if (e.shiftKey && e.key == "ArrowUp") {
|
||||
this.incPunt("guest")
|
||||
} else if (e.shiftKey && e.key == "ArrowDown") {
|
||||
this.decPunt("guest")
|
||||
} else if (e.shiftKey && e.key == "ArrowRight") {
|
||||
this.incSet("guest")
|
||||
} else if (e.ctrlKey && e.key == "ArrowLeft") {
|
||||
this.sp.servHome = !this.sp.servHome
|
||||
} else { return false }
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<w-dialog v-model="diaNomi.show" :width="500" @close="abilitaTastiSpeciali()">
|
||||
<w-input v-model="sp.nomi.home" type="text" class="pa3">Home</w-input>
|
||||
<w-input v-model="sp.nomi.guest" type="text" class="pa3">Guest</w-input>
|
||||
<w-button bg-color="success" @click="diaNomi.show = false">
|
||||
Ok
|
||||
</w-button>
|
||||
</w-dialog>
|
||||
<div class="campo">
|
||||
<div class="hea home">
|
||||
<span @click="decPunt('home')" :style="{ 'float': 'left' }">
|
||||
{{ sp.nomi.home }} <img v-if="sp.servHome" src="/serv.png" width="25" />
|
||||
<span v-if="visuForm">{{ sp.punt.home }}</span>
|
||||
</span>
|
||||
<span @click="incSet('home')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.home }}</span>
|
||||
</div>
|
||||
<div class="hea guest">
|
||||
<span @click="decPunt('guest')" :style="{ 'float': 'right' }">
|
||||
<img v-if="!sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.guest }}
|
||||
<span v-if="visuForm">{{ sp.punt.guest }}</span>
|
||||
</span>
|
||||
<span @click="incSet('guest')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.guest }}</span>
|
||||
|
||||
</div>
|
||||
<span v-if="visuForm">
|
||||
<div class="col form home" @click="incPunt('home')">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.home[x] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col form guest" @click="incPunt('guest')">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.guest[x] }}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span v-else>
|
||||
<div class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</div>
|
||||
<div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
|
||||
</span>
|
||||
|
||||
<div class="bot" v-if="visuButt">
|
||||
<w-flex justify-space-between class="pa2">
|
||||
<w-confirm right align-bottom v-if="isMobile()" question="CHIUDO ?" cancel="NO" confirm="SI" @confirm="closeApp">
|
||||
<img src="/exit.png" width="25" />
|
||||
</w-confirm>
|
||||
<w-button @click="apriDialogConfig()">
|
||||
<img src="/gear.png" width="25" />
|
||||
</w-button>
|
||||
<w-button @click="sp.servHome = !sp.servHome">
|
||||
<img src="/serv.png" width="25" />
|
||||
</w-button>
|
||||
<w-confirm top left question="Azzero punteggio ?" cancel="NO" confirm="SI" @confirm="resetta">
|
||||
RESET
|
||||
</w-confirm>
|
||||
<w-button @click="visuForm = !visuForm">
|
||||
<span v-if="visuForm">PUNTEGGIO</span>
|
||||
<span v-if="!visuForm">FORMAZIONI</span>
|
||||
</w-button>
|
||||
<w-button @click="speak">
|
||||
<img src="/speaker.png" width="25" />
|
||||
</w-button>
|
||||
</w-flex>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,240 +0,0 @@
|
||||
<section class="homepage">
|
||||
<w-dialog v-model="diaNomi.show" :width="600" @close="chiudiDialogConfig()">
|
||||
<w-input v-model="sp.nomi.home" type="text" class="pa3" tabindex="1">Nome Home</w-input>
|
||||
<w-input v-model="sp.nomi.guest" type="text" class="pa3" tabindex="2">Nome Guest</w-input>
|
||||
|
||||
<w-flex justify-center align-center class="pa3">
|
||||
<span class="mr3">Modalità partita:</span>
|
||||
<w-button
|
||||
@click="modalitaPartita = '2/3'"
|
||||
:bg-color="modalitaPartita === '2/3' ? 'success' : 'grey-light4'"
|
||||
:dark="modalitaPartita === '2/3'"
|
||||
class="ma1"
|
||||
tabindex="-1">
|
||||
2/3
|
||||
</w-button>
|
||||
<w-button
|
||||
@click="modalitaPartita = '3/5'"
|
||||
:bg-color="modalitaPartita === '3/5' ? 'success' : 'grey-light4'"
|
||||
:dark="modalitaPartita === '3/5'"
|
||||
class="ma1"
|
||||
tabindex="-1">
|
||||
3/5
|
||||
</w-button>
|
||||
</w-flex>
|
||||
|
||||
<w-flex justify-space-around class="pa3">
|
||||
<div class="campo-config">
|
||||
<div class="text-bold mb3 text-center">Formazione Home</div>
|
||||
<div class="campo-pallavolo">
|
||||
<!-- Fila anteriore - index [3, 2, 1] - VICINO ALLA RETE (prima fila visualizzata) -->
|
||||
<w-flex justify-center class="fila-anteriore">
|
||||
<w-input v-model="sp.form.home[3]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="6"></w-input>
|
||||
<w-input v-model="sp.form.home[2]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="5"></w-input>
|
||||
<w-input v-model="sp.form.home[1]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="4"></w-input>
|
||||
</w-flex>
|
||||
<!-- Linea dei 3 metri -->
|
||||
<div class="linea-tre-metri"></div>
|
||||
<!-- Fila posteriore - index [4, 5, 0] - ZONA DIFESA (seconda fila visualizzata) -->
|
||||
<w-flex justify-center class="fila-posteriore">
|
||||
<w-input v-model="sp.form.home[4]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="7"></w-input>
|
||||
<w-input v-model="sp.form.home[5]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="8"></w-input>
|
||||
<w-input v-model="sp.form.home[0]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="3"></w-input>
|
||||
</w-flex>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="campo-config">
|
||||
<div class="text-bold mb3 text-center">Formazione Guest</div>
|
||||
<div class="campo-pallavolo">
|
||||
<!-- Fila anteriore - index [3, 2, 1] - VICINO ALLA RETE (prima fila visualizzata) -->
|
||||
<w-flex justify-center class="fila-anteriore">
|
||||
<w-input v-model="sp.form.guest[3]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="12"></w-input>
|
||||
<w-input v-model="sp.form.guest[2]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="11"></w-input>
|
||||
<w-input v-model="sp.form.guest[1]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="10"></w-input>
|
||||
</w-flex>
|
||||
<!-- Linea dei 3 metri -->
|
||||
<div class="linea-tre-metri"></div>
|
||||
<!-- Fila posteriore - index [4, 5, 0] - ZONA DIFESA (seconda fila visualizzata) -->
|
||||
<w-flex justify-center class="fila-posteriore">
|
||||
<w-input v-model="sp.form.guest[4]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="13"></w-input>
|
||||
<w-input v-model="sp.form.guest[5]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="14"></w-input>
|
||||
<w-input v-model="sp.form.guest[0]" type="text" style="width: 50px; text-align: center;" class="ma1" tabindex="9"></w-input>
|
||||
</w-flex>
|
||||
</div>
|
||||
</div>
|
||||
</w-flex>
|
||||
|
||||
<w-button @click="order = !order" class="ma2" tabindex="-1">Inverti ordine</w-button>
|
||||
<w-button bg-color="success" @click="diaNomi.show = false" class="ma2" tabindex="-1">
|
||||
Ok
|
||||
</w-button>
|
||||
</w-dialog>
|
||||
<w-dialog v-model="diaCambiTeam.show" :width="420" @close="abilitaTastiSpeciali()">
|
||||
<div class="text-bold text-center mb2">Scegli squadra</div>
|
||||
<w-flex justify-center class="pa3">
|
||||
<w-button class="ma2" @click="selezionaTeamCambi('home')">{{ sp.nomi.home }}</w-button>
|
||||
<w-button class="ma2" @click="selezionaTeamCambi('guest')">{{ sp.nomi.guest }}</w-button>
|
||||
</w-flex>
|
||||
</w-dialog>
|
||||
<w-dialog v-model="diaCambi.show" :width="360" @close="chiudiDialogCambi">
|
||||
<div class="cambi-dialog">
|
||||
<div class="cambi-title">{{ sp.nomi[diaCambi.team] }}: CAMBIO</div>
|
||||
<div class="cambi-rows">
|
||||
<div class="cambi-row">
|
||||
<w-input v-model="diaCambi[diaCambi.team].cambi[0].in" type="text" class="cambi-input cambi-in"></w-input>
|
||||
<span class="cambi-arrow">→</span>
|
||||
<w-input v-model="diaCambi[diaCambi.team].cambi[0].out" type="text" class="cambi-input cambi-out"></w-input>
|
||||
</div>
|
||||
<div class="cambi-row">
|
||||
<w-input v-model="diaCambi[diaCambi.team].cambi[1].in" type="text" class="cambi-input cambi-in"></w-input>
|
||||
<span class="cambi-arrow">→</span>
|
||||
<w-input v-model="diaCambi[diaCambi.team].cambi[1].out" type="text" class="cambi-input cambi-out"></w-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<w-flex justify-end class="pa3">
|
||||
<w-button bg-color="success" :disabled="!cambiConfermabili" @click="confermaCambi">
|
||||
CONFERMA
|
||||
</w-button>
|
||||
</w-flex>
|
||||
</w-dialog>
|
||||
<div class="campo">
|
||||
|
||||
<span v-if="order">
|
||||
<!-- home guest -->
|
||||
<div class="hea home">
|
||||
<span @click="decPunt('home')" :style="{ 'float': 'left' }">
|
||||
{{ sp.nomi.home }}
|
||||
<span class="serv-slot">
|
||||
<img v-show="sp.servHome" src="/serv.png" width="25" />
|
||||
</span>
|
||||
<span v-if="visuForm" class="score-inline">{{ sp.punt.home }}</span>
|
||||
</span>
|
||||
<span @click="incSet('home')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.home }}</span>
|
||||
</div>
|
||||
|
||||
<div class="hea guest">
|
||||
<span @click="decPunt('guest')" :style="{ 'float': 'right' }">
|
||||
<span v-if="visuForm" class="score-inline">{{ sp.punt.guest }}</span>
|
||||
<span class="serv-slot">
|
||||
<img v-show="!sp.servHome" src="/serv.png" width="25" />
|
||||
</span>
|
||||
{{ sp.nomi.guest }}
|
||||
</span>
|
||||
<span @click="incSet('guest')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.guest }}</span>
|
||||
</div>
|
||||
|
||||
<span v-if="visuForm">
|
||||
<div class="col form home" @click="incPunt('home')">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.home[x] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col form guest" @click="incPunt('guest')">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.guest[x] }}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span v-else>
|
||||
<w-flex class="punteggio-container">
|
||||
<w-flex justify-center align-center class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</w-flex>
|
||||
<w-flex justify-center align-center class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</w-flex>
|
||||
</w-flex>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
<span v-else>
|
||||
<!-- guest home -->
|
||||
|
||||
<div class="hea guest">
|
||||
<span @click="decPunt('guest')" :style="{ 'float': 'left' }">
|
||||
{{ sp.nomi.guest }}
|
||||
<span class="serv-slot">
|
||||
<img v-show="!sp.servHome" src="/serv.png" width="25" />
|
||||
</span>
|
||||
<span v-if="visuForm" class="score-inline">{{ sp.punt.guest }}</span>
|
||||
</span>
|
||||
<span @click="incSet('guest')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.guest }}</span>
|
||||
</div>
|
||||
|
||||
<div class="hea home">
|
||||
<span @click="decPunt('home')" :style="{ 'float': 'right' }">
|
||||
<span v-if="visuForm" class="score-inline">{{ sp.punt.home }}</span>
|
||||
<span class="serv-slot">
|
||||
<img v-show="sp.servHome" src="/serv.png" width="25" />
|
||||
</span>
|
||||
{{ sp.nomi.home }}
|
||||
</span>
|
||||
<span @click="incSet('home')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.home }}</span>
|
||||
</div>
|
||||
|
||||
<span v-if="visuForm">
|
||||
<div class="col form guest" @click="incPunt('guest')">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.guest[x] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col form home" @click="incPunt('home')">
|
||||
<div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
|
||||
{{ sp.form.home[x] }}
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span v-else>
|
||||
<w-flex class="punteggio-container">
|
||||
<w-flex justify-center align-center class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</w-flex>
|
||||
<w-flex justify-center align-center class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</w-flex>
|
||||
</w-flex>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
|
||||
<div class="striscia" v-if="visuStriscia">
|
||||
<div>
|
||||
<span class="text-bold mr1">{{ sp.nomi.home }}</span>
|
||||
<div v-for="h in sp.striscia.home" class="item">
|
||||
{{String(h)}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="guest">
|
||||
<span class="text-bold mr1">{{ sp.nomi.guest }}</span>
|
||||
<div v-for="h in sp.striscia.guest" class="item">
|
||||
{{String(h)}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bot" v-if="visuButt">
|
||||
<w-flex justify-space-between class="pa2">
|
||||
<w-confirm right align-bottom v-if="isMobile()" question="CHIUDO ?" cancel="NO" confirm="SI" @confirm="closeApp">
|
||||
<img src="/exit.png" width="25" />
|
||||
</w-confirm>
|
||||
<w-button @click="apriDialogConfig()">
|
||||
<img src="/gear.png" width="25" />
|
||||
</w-button>
|
||||
<w-button @click="cambiaPalla" :disabled="!isPunteggioZeroZero">
|
||||
<img src="/serv.png" width="25" />
|
||||
</w-button>
|
||||
<w-confirm top left question="Azzero punteggio ?" cancel="NO" confirm="SI" @confirm="resetta">
|
||||
RESET
|
||||
</w-confirm>
|
||||
<w-button @click="visuForm = !visuForm">
|
||||
<span v-if="visuForm">PUNTEGGIO</span>
|
||||
<span v-if="!visuForm">FORMAZIONI</span>
|
||||
</w-button>
|
||||
<w-button @click="apriDialogCambi">
|
||||
CAMBI
|
||||
</w-button>
|
||||
<w-button @click="visuStriscia = !visuStriscia">
|
||||
STRISCIA
|
||||
</w-button>
|
||||
<w-button @click="speak">
|
||||
<img src="/speaker.png" width="25" />
|
||||
</w-button>
|
||||
</w-flex>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,479 +0,0 @@
|
||||
import NoSleep from "nosleep.js";
|
||||
export default {
|
||||
name: "HomePage",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
order: true,
|
||||
voices: null,
|
||||
diaNomi: {
|
||||
show: false,
|
||||
home: "",
|
||||
guest: "",
|
||||
},
|
||||
diaCambi: {
|
||||
show: false,
|
||||
team: "home",
|
||||
guest: { cambi: [{ in: "", out: "" }, { in: "", out: "" }] },
|
||||
home: { cambi: [{ in: "", out: "" }, { in: "", out: "" }] },
|
||||
},
|
||||
diaCambiTeam: {
|
||||
show: false,
|
||||
},
|
||||
visuForm: false,
|
||||
visuButt: true,
|
||||
visuStriscia: true,
|
||||
modalitaPartita: "3/5", // "2/3" o "3/5"
|
||||
sp: {
|
||||
striscia: { home: [0], guest: [0] },
|
||||
servHome: true,
|
||||
punt: { home: 0, guest: 0 },
|
||||
set: { home: 0, guest: 0 },
|
||||
nomi: { home: "Antoniana", guest: "Guest" },
|
||||
form: {
|
||||
home: ["1", "2", "3", "4", "5", "6"],
|
||||
guest: ["1", "2", "3", "4", "5", "6"],
|
||||
},
|
||||
storicoServizio: [], // Stack per tracciare lo stato del servizio prima di ogni punto
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.voices = window.speechSynthesis.getVoices();
|
||||
if (this.isMobile()) {
|
||||
this.speak();
|
||||
var noSleep = new NoSleep();
|
||||
noSleep.enable();
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
this.abilitaTastiSpeciali();
|
||||
},
|
||||
computed: {
|
||||
isPunteggioZeroZero() {
|
||||
return this.sp.punt.home === 0 && this.sp.punt.guest === 0;
|
||||
},
|
||||
cambiConfermabili() {
|
||||
const team = this.diaCambi.team;
|
||||
const cambi = this.diaCambi[team].cambi || [];
|
||||
let hasComplete = false;
|
||||
let allValid = true;
|
||||
|
||||
cambi.forEach((cambio) => {
|
||||
const teamIn = (cambio.in || "").trim();
|
||||
const teamOut = (cambio.out || "").trim();
|
||||
|
||||
if (!teamIn && !teamOut) {
|
||||
return;
|
||||
}
|
||||
if (!teamIn || !teamOut) {
|
||||
allValid = false;
|
||||
return;
|
||||
}
|
||||
hasComplete = true;
|
||||
});
|
||||
|
||||
return allValid && hasComplete;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeApp() {
|
||||
var win = window.open("", "_self");
|
||||
win.close();
|
||||
},
|
||||
fullScreen() {
|
||||
document.documentElement.requestFullscreen();
|
||||
},
|
||||
isMobile() {
|
||||
if (
|
||||
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||||
navigator.userAgent
|
||||
)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
resetta() {
|
||||
this.$waveui.notify("Punteggio<br />RESETTATO", "success");
|
||||
this.visuForm = false;
|
||||
this.sp.punt.home = 0;
|
||||
this.sp.punt.guest = 0;
|
||||
this.sp.form = {
|
||||
home: ["1", "2", "3", "4", "5", "6"],
|
||||
guest: ["1", "2", "3", "4", "5", "6"],
|
||||
}
|
||||
this.sp.striscia = { home: [0], guest: [0] }
|
||||
this.sp.storicoServizio = []
|
||||
},
|
||||
cambiaPalla() {
|
||||
if (!this.isPunteggioZeroZero) {
|
||||
this.$waveui.notify("Cambio palla consentito solo a inizio set (0-0)", "warning");
|
||||
return;
|
||||
}
|
||||
this.sp.servHome = !this.sp.servHome;
|
||||
},
|
||||
incSet(team) {
|
||||
if (this.sp.set[team] == 2) {
|
||||
this.sp.set[team] = 0;
|
||||
} else {
|
||||
this.sp.set[team]++;
|
||||
}
|
||||
},
|
||||
incPunt(team) {
|
||||
// Se il set è già terminato, evita ulteriori incrementi
|
||||
if (this.checkVittoria()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Salva lo stato del servizio PRIMA di modificarlo
|
||||
this.sp.storicoServizio.push({
|
||||
servHome: this.sp.servHome,
|
||||
cambioPalla: (team == "home" && !this.sp.servHome) || (team == "guest" && this.sp.servHome)
|
||||
});
|
||||
|
||||
this.sp.punt[team]++;
|
||||
if (team == 'home') {
|
||||
this.sp.striscia.home.push(this.sp.punt.home)
|
||||
this.sp.striscia.guest.push(' ')
|
||||
} else {
|
||||
this.sp.striscia.guest.push(this.sp.punt.guest)
|
||||
this.sp.striscia.home.push(' ')
|
||||
}
|
||||
|
||||
// Ruota la formazione solo se c'è cambio palla (conquista del servizio)
|
||||
const cambioPalla = (team == "home" && !this.sp.servHome) || (team == "guest" && this.sp.servHome);
|
||||
|
||||
if (cambioPalla) {
|
||||
this.sp.form[team].push(this.sp.form[team].shift());
|
||||
}
|
||||
|
||||
this.sp.servHome = (team == "home");
|
||||
},
|
||||
checkVittoria() {
|
||||
const puntHome = this.sp.punt.home;
|
||||
const puntGuest = this.sp.punt.guest;
|
||||
const setHome = this.sp.set.home;
|
||||
const setGuest = this.sp.set.guest;
|
||||
const totSet = setHome + setGuest;
|
||||
|
||||
// Determina se siamo nel set decisivo in base alla modalità partita
|
||||
let isSetDecisivo = false;
|
||||
if (this.modalitaPartita === "2/3") {
|
||||
// Tie-break al 3° set (quando totSet >= 2)
|
||||
isSetDecisivo = totSet >= 2;
|
||||
} else {
|
||||
// Tie-break al 5° set (quando totSet >= 4)
|
||||
isSetDecisivo = totSet >= 4;
|
||||
}
|
||||
|
||||
const punteggioVittoria = isSetDecisivo ? 15 : 25;
|
||||
|
||||
// Vittoria con punteggio >= 25 (o 15 per set decisivo) e almeno 2 punti di vantaggio
|
||||
if (puntHome >= punteggioVittoria && puntHome - puntGuest >= 2) {
|
||||
return true; // Home ha vinto
|
||||
}
|
||||
if (puntGuest >= punteggioVittoria && puntGuest - puntHome >= 2) {
|
||||
return true; // Guest ha vinto
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
decPunt() {
|
||||
if (this.sp.striscia.home.length > 1 && this.sp.storicoServizio.length > 0) {
|
||||
var tmpHome = this.sp.striscia.home.pop()
|
||||
var tmpGuest = this.sp.striscia.guest.pop()
|
||||
var statoServizio = this.sp.storicoServizio.pop() // Recupera lo stato completo del servizio
|
||||
|
||||
if (tmpHome == ' ') {
|
||||
this.sp.punt.guest--
|
||||
// Ruota indietro solo se c'era stato un cambio palla
|
||||
if (statoServizio.cambioPalla) {
|
||||
this.sp.form.guest.unshift(this.sp.form.guest.pop());
|
||||
}
|
||||
} else {
|
||||
this.sp.punt.home--
|
||||
// Ruota indietro solo se c'era stato un cambio palla
|
||||
if (statoServizio.cambioPalla) {
|
||||
this.sp.form.home.unshift(this.sp.form.home.pop());
|
||||
}
|
||||
}
|
||||
|
||||
// Ripristina il servizio allo stato precedente
|
||||
this.sp.servHome = statoServizio.servHome;
|
||||
|
||||
}
|
||||
},
|
||||
// decPunt(team) {
|
||||
// // decrementa il punteggio se è > 0.
|
||||
// if (this.sp.punt[team] > 0) {
|
||||
// this.sp.punt[team]--;
|
||||
// this.sp.striscia.home.pop()
|
||||
// this.sp.striscia.guest.pop()
|
||||
// this.sp.form[team].unshift(this.sp.form[team].pop());
|
||||
// }
|
||||
// },
|
||||
speak() {
|
||||
const msg = new SpeechSynthesisUtterance();
|
||||
if (this.sp.punt.home + this.sp.punt.guest == 0) {
|
||||
msg.text = "zero a zero";
|
||||
} else if (this.sp.punt.home == this.sp.punt.guest) {
|
||||
msg.text = this.sp.punt.home + " pari";
|
||||
} else {
|
||||
if (this.sp.servHome) {
|
||||
msg.text = this.sp.punt.home + " a " + this.sp.punt.guest;
|
||||
} else {
|
||||
msg.text = this.sp.punt.guest + " a " + this.sp.punt.home;
|
||||
}
|
||||
}
|
||||
// msg.volume = 1.0; // speech volume (default: 1.0)
|
||||
// msg.pitch = 1.0; // speech pitch (default: 1.0)
|
||||
// msg.rate = 1.0; // speech rate (default: 1.0)
|
||||
// msg.lang = 'it_IT'; // speech language (default: 'en-US')
|
||||
const voices = window.speechSynthesis.getVoices();
|
||||
msg.voice = voices.find(voice => voice.name === 'Google italiano');
|
||||
// voice URI (default: platform-dependent)
|
||||
// msg.onboundary = function (event) {
|
||||
// console.log('Speech reached a boundary:', event.name);
|
||||
// };
|
||||
// msg.onpause = function (event) {
|
||||
// console.log('Speech paused:', event.utterance.text.substring(event.charIndex));
|
||||
// };
|
||||
window.speechSynthesis.speak(msg);
|
||||
},
|
||||
apriDialogConfig() {
|
||||
this.disabilitaTastiSpeciali();
|
||||
this.diaNomi.show = true;
|
||||
|
||||
// Aggiungi gestore Tab per il dialog
|
||||
this.dialogConfigTabHandler = (e) => {
|
||||
if (e.key === 'Tab' && this.diaNomi.show) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const dialog = document.querySelector('.w-dialog');
|
||||
if (!dialog) return;
|
||||
|
||||
const allInputs = Array.from(dialog.querySelectorAll('input[type="text"]'))
|
||||
.sort((a, b) => {
|
||||
const tabA = parseInt(a.closest('[tabindex]')?.getAttribute('tabindex') || '0');
|
||||
const tabB = parseInt(b.closest('[tabindex]')?.getAttribute('tabindex') || '0');
|
||||
return tabA - tabB;
|
||||
});
|
||||
|
||||
if (allInputs.length === 0) return;
|
||||
|
||||
// Verifica se il focus è già dentro il dialog
|
||||
const focusInDialog = dialog.contains(document.activeElement);
|
||||
|
||||
// Se non è nel dialog o non è in un input, vai al primo
|
||||
if (!focusInDialog || !allInputs.includes(document.activeElement)) {
|
||||
allInputs[0].focus();
|
||||
return;
|
||||
}
|
||||
|
||||
// Navigazione normale tra i campi
|
||||
const currentIndex = allInputs.indexOf(document.activeElement);
|
||||
let nextIndex;
|
||||
|
||||
if (e.shiftKey) {
|
||||
nextIndex = currentIndex <= 0 ? allInputs.length - 1 : currentIndex - 1;
|
||||
} else {
|
||||
nextIndex = currentIndex >= allInputs.length - 1 ? 0 : currentIndex + 1;
|
||||
}
|
||||
|
||||
if (allInputs[nextIndex]) {
|
||||
allInputs[nextIndex].focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', this.dialogConfigTabHandler, true);
|
||||
|
||||
// Focus immediato + retry con timeout
|
||||
this.$nextTick(() => {
|
||||
const focusFirst = () => {
|
||||
const dialog = document.querySelector('.w-dialog');
|
||||
if (dialog) {
|
||||
const firstInput = dialog.querySelector('input[type="text"]');
|
||||
if (firstInput) {
|
||||
firstInput.focus();
|
||||
firstInput.select();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// Prova immediatamente
|
||||
if (!focusFirst()) {
|
||||
// Se fallisce, riprova dopo un breve delay
|
||||
setTimeout(focusFirst, 100);
|
||||
}
|
||||
});
|
||||
},
|
||||
chiudiDialogConfig() {
|
||||
if (this.dialogConfigTabHandler) {
|
||||
window.removeEventListener('keydown', this.dialogConfigTabHandler, true);
|
||||
this.dialogConfigTabHandler = null;
|
||||
}
|
||||
this.abilitaTastiSpeciali();
|
||||
},
|
||||
resettaCambi(team) {
|
||||
const teams = team ? [team] : ["home", "guest"];
|
||||
teams.forEach((t) => {
|
||||
this.diaCambi[t].cambi.forEach((cambio) => {
|
||||
cambio.in = "";
|
||||
cambio.out = "";
|
||||
});
|
||||
});
|
||||
},
|
||||
apriDialogCambi() {
|
||||
this.disabilitaTastiSpeciali();
|
||||
this.diaCambiTeam.show = true;
|
||||
},
|
||||
apriDialogCambiTeam(team) {
|
||||
this.disabilitaTastiSpeciali();
|
||||
this.diaCambi.team = team;
|
||||
this.resettaCambi(team);
|
||||
this.diaCambi.show = true;
|
||||
},
|
||||
selezionaTeamCambi(team) {
|
||||
this.diaCambiTeam.show = false;
|
||||
this.apriDialogCambiTeam(team);
|
||||
},
|
||||
chiudiDialogCambi() {
|
||||
this.diaCambi.show = false;
|
||||
this.resettaCambi(this.diaCambi.team);
|
||||
this.abilitaTastiSpeciali();
|
||||
},
|
||||
confermaCambi() {
|
||||
if (!this.cambiConfermabili) {
|
||||
return;
|
||||
}
|
||||
|
||||
const team = this.diaCambi.team;
|
||||
const cambi = (this.diaCambi[team].cambi || [])
|
||||
.map((cambio) => ({
|
||||
team,
|
||||
in: (cambio.in || "").trim(),
|
||||
out: (cambio.out || "").trim(),
|
||||
}))
|
||||
.filter((cambio) => cambio.in || cambio.out);
|
||||
|
||||
const form = this.sp.form[team].map((val) => String(val).trim());
|
||||
const formAggiornata = [...form];
|
||||
|
||||
for (const cambio of cambi) {
|
||||
if (!/^\d+$/.test(cambio.in) || !/^\d+$/.test(cambio.out)) {
|
||||
this.$waveui.notify("Inserisci solo numeri nei campi", "warning");
|
||||
return;
|
||||
}
|
||||
if (cambio.in === cambio.out) {
|
||||
this.$waveui.notify(`Numero IN e OUT uguali per ${cambio.team}`, "warning");
|
||||
return;
|
||||
}
|
||||
if (formAggiornata.includes(cambio.in)) {
|
||||
this.$waveui.notify(`Numero ${cambio.in} già presente in formazione ${cambio.team}`, "warning");
|
||||
return;
|
||||
}
|
||||
if (!formAggiornata.includes(cambio.out)) {
|
||||
this.$waveui.notify(`Numero ${cambio.out} non presente in formazione ${cambio.team}`, "warning");
|
||||
return;
|
||||
}
|
||||
|
||||
const idx = formAggiornata.findIndex((val) => String(val).trim() === cambio.out);
|
||||
if (idx !== -1) {
|
||||
formAggiornata.splice(idx, 1, cambio.in);
|
||||
}
|
||||
}
|
||||
|
||||
this.sp.form[team] = formAggiornata;
|
||||
|
||||
this.chiudiDialogCambi();
|
||||
},
|
||||
disabilitaTastiSpeciali() {
|
||||
window.removeEventListener("keydown", this.funzioneTastiSpeciali);
|
||||
},
|
||||
abilitaTastiSpeciali() {
|
||||
window.addEventListener("keydown", this.funzioneTastiSpeciali);
|
||||
},
|
||||
funzioneTastiSpeciali(e) {
|
||||
if (this.diaNomi.show || this.diaCambi.show || this.diaCambiTeam.show) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = e.target;
|
||||
const path = typeof e.composedPath === "function" ? e.composedPath() : [];
|
||||
const elements = [target, ...path].filter(Boolean);
|
||||
const isTypingField = elements.some((el) => {
|
||||
if (!el || !el.tagName) {
|
||||
return false;
|
||||
}
|
||||
const tag = String(el.tagName).toLowerCase();
|
||||
if (tag === "input" || tag === "textarea") {
|
||||
return true;
|
||||
}
|
||||
if (el.isContentEditable) {
|
||||
return true;
|
||||
}
|
||||
if (el.classList && (el.classList.contains("w-input") || el.classList.contains("w-textarea"))) {
|
||||
return true;
|
||||
}
|
||||
const contentEditable = el.getAttribute && el.getAttribute("contenteditable");
|
||||
return contentEditable === "true";
|
||||
});
|
||||
if (isTypingField) {
|
||||
return;
|
||||
}
|
||||
|
||||
let handled = false;
|
||||
if (e.ctrlKey && e.key == "m") {
|
||||
this.diaNomi.show = true
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "b") {
|
||||
this.visuButt = !this.visuButt
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "f") {
|
||||
document.documentElement.requestFullscreen();
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "s") {
|
||||
this.speak();
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "z") {
|
||||
this.visuForm = !this.visuForm
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "ArrowUp") {
|
||||
this.incPunt("home")
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "ArrowDown") {
|
||||
this.decPunt("home")
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "ArrowRight") {
|
||||
this.incSet("home")
|
||||
handled = true;
|
||||
} else if (e.shiftKey && e.key == "ArrowUp") {
|
||||
this.incPunt("guest")
|
||||
handled = true;
|
||||
} else if (e.shiftKey && e.key == "ArrowDown") {
|
||||
this.decPunt("guest")
|
||||
handled = true;
|
||||
} else if (e.shiftKey && e.key == "ArrowRight") {
|
||||
this.incSet("guest")
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && e.key == "ArrowLeft") {
|
||||
this.cambiaPalla()
|
||||
handled = true;
|
||||
} else if (e.ctrlKey && (e.key == "c" || e.key == "C")) {
|
||||
this.apriDialogCambiTeam("home")
|
||||
handled = true;
|
||||
} else if (e.shiftKey && (e.key == "c" || e.key == "C")) {
|
||||
this.apriDialogCambiTeam("guest")
|
||||
handled = true;
|
||||
} else { return false }
|
||||
|
||||
if (handled) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
.homepage {
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
touch-action: pan-x pan-y;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
overscroll-behavior-y: contain;
|
||||
margin: 0;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #fff;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
background-color: #333;
|
||||
}
|
||||
button:focus, button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
#app {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.campo {
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
display: table;
|
||||
color: #fff;
|
||||
}
|
||||
.hea {
|
||||
float: left;
|
||||
width: 50%;
|
||||
font-size: xx-large;
|
||||
}
|
||||
.hea span {
|
||||
/* border: 1px solid #f3fb00; */
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.tal {
|
||||
text-align: left;
|
||||
}
|
||||
.tar {
|
||||
text-align: right;
|
||||
}
|
||||
.bot {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 1px;
|
||||
background-color: #111;
|
||||
}
|
||||
.col {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.punt {
|
||||
font-size: 60vh;
|
||||
}
|
||||
.form {
|
||||
font-size: 5vh;
|
||||
border-top: #fff dashed 25px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
.formtit {
|
||||
font-size: 5vh;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.formdiv {
|
||||
font-size: 20vh;
|
||||
float: left;
|
||||
width: 32%;
|
||||
}
|
||||
.home {
|
||||
background-color: black;
|
||||
color: yellow;
|
||||
}
|
||||
.guest {
|
||||
background-color: blue;
|
||||
color: white
|
||||
}
|
||||
.item-stri {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<template src="./HomePage.html"></template>
|
||||
<script src="./HomePage.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user