Varie modifiche su HomePage.vue:
- Variabile servHome true|false per cui cambio servizio = !servHome e quando incrementa this.sp.servHome = (team == "home"); - Se cellulare speak() - I tasti speciali sono in una funzione - la funzione speak verifica il pari e il servHome - Dialog per cambiare nomi - ridisegnato il bot
This commit is contained in:
Attilio Grilli
@@ -14,7 +14,7 @@ export default {
|
||||
visuForm: false,
|
||||
visuButt: true,
|
||||
sp: {
|
||||
serv: "home",
|
||||
servHome: true,
|
||||
punt: { home: 0, guest: 0 },
|
||||
set: { home: 0, guest: 0 },
|
||||
nomi: { home: "Antoniana", guest: "Guest" },
|
||||
@@ -28,34 +28,12 @@ export default {
|
||||
mounted() {
|
||||
this.voices = window.speechSynthesis.getVoices();
|
||||
if (this.isMobile()) {
|
||||
this.speak();
|
||||
var noSleep = new NoSleep();
|
||||
noSleep.enable();
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
window.addEventListener("keydown", (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 == "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 { return false }
|
||||
})
|
||||
this.abilitaTastiSpeciali();
|
||||
},
|
||||
methods: {
|
||||
closeApp() {
|
||||
@@ -95,7 +73,7 @@ export default {
|
||||
},
|
||||
incPunt(team) {
|
||||
this.sp.punt[team]++;
|
||||
this.sp.serv = team;
|
||||
this.sp.servHome = (team == "home");
|
||||
this.sp.form[team].push(this.sp.form[team].shift());
|
||||
},
|
||||
decPunt(team) {
|
||||
@@ -105,21 +83,19 @@ export default {
|
||||
this.sp.form[team].unshift(this.sp.form[team].pop());
|
||||
}
|
||||
},
|
||||
changeServ() {
|
||||
// cambio servizio... usato per speak del punteggio
|
||||
if (this.sp.serv == "home") {
|
||||
this.sp.serv = "guest";
|
||||
} else {
|
||||
this.sp.serv = "home";
|
||||
}
|
||||
},
|
||||
speak() {
|
||||
const msg = new SpeechSynthesisUtterance();
|
||||
if (this.sp.serv == "home") {
|
||||
msg.text = this.sp.punt.home + " a " + this.sp.punt.guest;
|
||||
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 {
|
||||
msg.text = this.sp.punt.guest + " a " + this.sp.punt.home;
|
||||
}
|
||||
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)
|
||||
@@ -133,28 +109,68 @@ export default {
|
||||
// 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">
|
||||
<w-button @click="diaNomi.show = false">
|
||||
Chiudi
|
||||
<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 }} <span v-if="sp.serv == 'home'">X</span>
|
||||
{{ 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' }">
|
||||
<span v-if="sp.serv == 'guest'">X</span> {{ sp.nomi.guest }}
|
||||
<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>
|
||||
@@ -177,23 +193,28 @@ export default {
|
||||
<div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
|
||||
</span>
|
||||
|
||||
<div class="bot tal" v-if="visuButt">
|
||||
<w-confirm top left v-if="isMobile()" question="CHIUDO ?" cancel="NO" confirm="SI" @confirm="closeApp">
|
||||
exit
|
||||
</w-confirm>
|
||||
<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="changeServ">
|
||||
SERV
|
||||
</w-button>
|
||||
<w-button @click="speak">
|
||||
parla
|
||||
</w-button>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user