Implementa rotazione regolamentare con cambio palla

- La formazione ruota solo quando si conquista il servizio (cambio palla)
- Aggiunge array servizioPrecedente per tracciare i cambi palla
- Fix decPunt per annullare correttamente la rotazione
- Fix resetta per pulire lo stack dei servizi precedenti

src/components/HomePage/HomePage.html

@@ -1,9 +1,52 @@
 <section class="homepage">
-    <w-dialog v-model="diaNomi.show" :width="500" @close="abilitaTastiSpeciali()">
+    <w-dialog v-model="diaNomi.show" :width="600" @close="abilitaTastiSpeciali()">
-      <w-input v-model="sp.nomi.home" type="text" class="pa3">Home</w-input>
+      <w-input v-model="sp.nomi.home" type="text" class="pa3">Nome Home</w-input>
-      <w-input v-model="sp.nomi.guest" type="text" class="pa3">Guest</w-input>
+      <w-input v-model="sp.nomi.guest" type="text" class="pa3">Nome Guest</w-input>
-      <w-button @click="order = !order">Inverti ordine</w-button>
+
-      <w-button bg-color="success" @click="diaNomi.show = false">
+      <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"></w-input>
+              <w-input v-model="sp.form.home[2]" type="text" style="width: 50px; text-align: center;" class="ma1"></w-input>
+              <w-input v-model="sp.form.home[1]" type="text" style="width: 50px; text-align: center;" class="ma1"></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"></w-input>
+              <w-input v-model="sp.form.home[5]" type="text" style="width: 50px; text-align: center;" class="ma1"></w-input>
+              <w-input v-model="sp.form.home[0]" type="text" style="width: 50px; text-align: center;" class="ma1"></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"></w-input>
+              <w-input v-model="sp.form.guest[2]" type="text" style="width: 50px; text-align: center;" class="ma1"></w-input>
+              <w-input v-model="sp.form.guest[1]" type="text" style="width: 50px; text-align: center;" class="ma1"></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"></w-input>
+              <w-input v-model="sp.form.guest[5]" type="text" style="width: 50px; text-align: center;" class="ma1"></w-input>
+              <w-input v-model="sp.form.guest[0]" type="text" style="width: 50px; text-align: center;" class="ma1"></w-input>
+            </w-flex>
+          </div>
+        </div>
+      </w-flex>
+
+      <w-button @click="order = !order" class="ma2">Inverti ordine</w-button>
+      <w-button bg-color="success" @click="diaNomi.show = false" class="ma2">
         Ok
       </w-button>
     </w-dialog>

src/components/HomePage/HomePage.js

@@ -24,6 +24,7 @@ export default {
           home: ["1", "2", "3", "4", "5", "6"],
           guest: ["1", "2", "3", "4", "5", "6"],
         },
+        servizioPrecedente: [], // Stack per tracciare i cambi palla
       },
     }
   },
@@ -66,6 +67,7 @@ export default {
         guest: ["1", "2", "3", "4", "5", "6"],
       }
       this.sp.striscia = { home: [0], guest: [0] }
+      this.sp.servizioPrecedente = []
     },
     incSet(team) {
       if (this.sp.set[team] == 2) {
@@ -75,6 +77,12 @@ export default {
       }
     },
     incPunt(team) {
+      // Controlla se c'è già una condizione di vittoria
+      if (this.checkVittoria()) {
+        this.$waveui.notify("Il set è terminato!", "warning");
+        return;
+      }
+
       this.sp.punt[team]++;
       if (team == 'home') {
         this.sp.striscia.home.push(this.sp.punt.home)
@@ -83,21 +91,58 @@ export default {
         this.sp.striscia.guest.push(this.sp.punt.guest)
         this.sp.striscia.home.push(' ')
       }
-      this.sp.servHome = (team == "home");
+
+      // Ruota la formazione solo se c'è cambio palla (conquista del servizio)
+      const cambioPalla = (team == "home" && !this.sp.servHome) || (team == "guest" && this.sp.servHome);
+      this.sp.servizioPrecedente.push(cambioPalla); // Salva se c'è stato cambio palla
+
+      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 (5° set)
+      const 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) {
         var tmpHome = this.sp.striscia.home.pop()
         var tmpGuest = this.sp.striscia.guest.pop()
+        var cambioPalla = this.sp.servizioPrecedente.pop() // Recupera se c'era stato cambio palla
+
         if (tmpHome == ' ') {
           this.sp.punt.guest--
+          // Ruota indietro solo se c'era stato un cambio palla
+          if (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 (cambioPalla) {
             this.sp.form.home.unshift(this.sp.form.home.pop());
           }
         }
+      }
     },
     // decPunt(team) {
     //   // decrementa il punteggio se è > 0.

src/style.css

@@ -122,3 +122,43 @@ button:focus-visible {
   color: blue;
   border-radius: 5px;
 }
+
+.campo-config {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.campo-pallavolo {
+  border: 3px solid #999;
+  background-color: rgba(205, 133, 63, 0.25);
+  position: relative;
+  width: 220px;
+  height: 220px;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.fila-anteriore {
+  height: 33.33%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+}
+
+.fila-posteriore {
+  height: 66.67%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+}
+
+.linea-tre-metri {
+  border-top: 2px solid #666;
+  width: 100%;
+  height: 0;
+  margin: 0;
+}