bordi controlli tastiera e punteggio vocale.

Eliminati i bordi sui titoli e sui set.
Eliminato HelloWorld.vue.
Inseriti alcuni controlli via tastiera tra cui:
ctrl+B = toggle visualizzazione bottoni.
ctrl+H = passaggio a fullscreen (per PC).
ctrl o shift + freccia su o giu per i punteggi.
ctrl o shifth + freccia dx incrementa i set.
inserito il servizio - serve per il punteggio vocale.
Quindi inserito il punteggio vocale.
Si deve usare una iconcina per indicare il servizio,
adesso è visualizzata una x.

.gitignore

@@ -7,6 +7,9 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+# DEscrizione ultimo commit (memoria corta...)
+currentCommit.txt
+
 node_modules
 dist
 dist-ssr

src/components/HelloWorld.vue

@@ -1,40 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/HomePage.vue

@@ -5,10 +5,19 @@ export default {
   components: {},
   data() {
     return {
+      voices: null,
+      diaNomi: {
+        show: false,
+        home: "",
+        guest: "",
+      },
       visuForm: false,
+      visuButt: true,
       sp: {
+        serv: "home",
         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"],
@@ -17,11 +26,36 @@ export default {
     }
   },
   mounted() {
+    this.voices = window.speechSynthesis.getVoices();
     if (this.isMobile()) {
       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 }
+    })
   },
   methods: {
     closeApp() {
@@ -43,12 +77,10 @@ export default {
       }
     },
     resetta() {
-      this.$waveui.notify("RESETTATO", "success");
+      this.$waveui.notify("Punteggio<br />RESETTATO", "success");
       this.visuForm = false;
       this.sp.punt.home = 0;
       this.sp.punt.guest = 0;
-      this.sp.set.home = 0;
-      this.sp.set.guest = 0;
       this.sp.form = {
         home: ["1", "2", "3", "4", "5", "6"],
         guest: ["1", "2", "3", "4", "5", "6"],
@@ -63,36 +95,70 @@ export default {
     },
     incPunt(team) {
       this.sp.punt[team]++;
+      this.sp.serv = team;
       this.sp.form[team].push(this.sp.form[team].shift());
     },
     decPunt(team) {
-      // decrementa il punteggio se è > 0 e non siamo in
+      // decrementa il punteggio se è > 0.
-      // visualizza formazioni.
       if (this.sp.punt[team] > 0) {
         this.sp.punt[team]--;
         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;
+      } 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);
     }
   }
 };
 </script>
 
 <template>
+  <w-dialog v-model="diaNomi.show" :width="500">
+    <w-button @click="diaNomi.show = false">
+      Chiudi
+    </w-button>
+  </w-dialog>
   <div class="campo">
     <div class="hea home">
       <span @click="decPunt('home')" :style="{ 'float': 'left' }">
-        Antoniana
+        {{ sp.nomi.home }} <span v-if="sp.serv == 'home'">X</span>
         <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' }">
-        Guest
+        <span v-if="sp.serv == 'guest'">X</span> {{ 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')">
@@ -106,21 +172,28 @@ export default {
         </div>
       </div>
     </span>
-    <span v-if="!visuForm">
+    <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 tal">
+
+    <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 tutto ?" cancel="NO" confirm="SI" @confirm="resetta">
+      <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>
   </div>
 </template>

src/style.css

@@ -53,7 +53,7 @@ button:focus-visible {
   font-size: xx-large;
 }
 .hea span {
-  border: 1px solid #f3fb00;
+/* border: 1px solid #f3fb00; */
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 5px;