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

src/components/HomePage.vue

@@ -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) => {
+    this.abilitaTastiSpeciali();
-      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 }
-    })
   },
   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") {
+      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)
@@ -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-dialog v-model="diaNomi.show" :width="500" @close="abilitaTastiSpeciali()">
-    <w-button @click="diaNomi.show = false">
+    <w-input v-model="sp.nomi.home" type="text" class="pa3">Home</w-input>
-      Chiudi
+    <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,10 +193,17 @@ export default {
       <div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
     </span>
 
-    <div class="bot tal" v-if="visuButt">
+    <div class="bot" v-if="visuButt">
-      <w-confirm top left v-if="isMobile()" question="CHIUDO ?" cancel="NO" confirm="SI" @confirm="closeApp">
+      <w-flex justify-space-between class="pa2">
-        exit
+        <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>
@@ -188,12 +211,10 @@ export default {
           <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
+          <img src="/speaker.png" width="25" />
         </w-button>
+      </w-flex>
     </div>
   </div>
 </template>