Aggiunto vawe-ui per gli alert.

piccoli aggiustamenti sulla visualizzazione.
adesso il punteggio inc e dec anche con le formazioni.

package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "nosleep.js": "^0.12.0",
-    "vue": "^3.2.47"
+    "vue": "^3.2.47",
+    "wave-ui": "^3.3.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",

src/components/HomePage.vue

@@ -25,10 +25,8 @@ export default {
   },
   methods: {
     closeApp() {
-      if (confirm("Confermi di voler chiudere l'app ?")) {
-        var win = window.open("", "_self");
-        win.close();
-      }
+      var win = window.open("", "_self");
+      win.close();
     },
     fullScreen() {
       document.documentElement.requestFullscreen();
@@ -45,13 +43,22 @@ export default {
       }
     },
     resetta() {
-      if (confirm("Confermi il reset del punteggio ?")) {
-        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.$waveui.notify("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"],
+      }
+    },
+    incSet(team) {
+      if (this.sp.set[team] == 2) {
+        this.sp.set[team] = 0;
+      } else {
+        this.sp.set[team]++;
       }
     },
     incPunt(team) {
@@ -61,7 +68,7 @@ export default {
     decPunt(team) {
       // decrementa il punteggio se è > 0 e non siamo in
       // visualizza formazioni.
-      if (this.sp.punt[team] > 0 && !this.visuForm) {
+      if (this.sp.punt[team] > 0) {
         this.sp.punt[team]--;
         this.sp.form[team].unshift(this.sp.form[team].pop());
       }
@@ -72,19 +79,28 @@ export default {
 
 <template>
   <div class="campo">
-    <div class="hea home" @click="decPunt('home')">ANTONIANA
-      <span v-if="visuForm">- {{ sp.punt.home }}</span>
+    <div class="hea home">
+      <span @click="decPunt('home')" :style="{ 'float': 'left' }">
+        Antoniana
+        <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" @click="decPunt('guest')">GUEST
-      <span v-if="visuForm">- {{ sp.punt.guest }}</span>
+    <div class="hea guest">
+      <span @click="decPunt('guest')" :style="{ 'float': 'right' }">
+        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">
+      <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">
+      <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>
@@ -95,12 +111,16 @@ export default {
       <div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
     </span>
     <div class="bot tal">
-      <button @click="visuForm = !visuForm">
-        <span v-if="visuForm">PUNTEGGI</span>
+      <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">
+        RESET
+      </w-confirm>
+      <w-button @click="visuForm = !visuForm">
+        <span v-if="visuForm">PUNTEGGIO</span>
         <span v-if="!visuForm">FORMAZIONI</span>
-      </button>
-      <button @click="resetta">RESET</button>
-      <button v-if="isMobile()" @click="closeApp">exit</button>
+      </w-button>
     </div>
   </div>
 </template>

src/main.js

@@ -1,5 +1,10 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import WaveUI from 'wave-ui'
+import 'wave-ui/dist/wave-ui.css'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+app.use(WaveUI)
+app.mount('#app')

src/style.css

@@ -52,6 +52,12 @@ button:focus-visible {
   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;
 }
@@ -82,7 +88,6 @@ button:focus-visible {
   font-size: 5vh;
   border-top: #fff dashed 25px;
   padding-top: 50px;
-  padding-bottom: 50px;
 }
 .formtit {
   font-size: 5vh;