Compare commits

...

2 Commits

Author SHA1 Message Date
bbe0862241 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
2026-01-25 17:57:22 +01:00
26d647dce7 Aggiunge configurazione manuale numeri di maglia
- Aggiunge campi input nel dialog configurazione per modificare manualmente i numeri di maglia dei giocatori
- Disegna campi da pallavolo stilizzati (220x220px) con linea dei 3 metri posizionata a 1/3 dall'alto
- Layout corrisponde alla visualizzazione sul campo (ordine rotazione [3,2,1,4,5,0])
- Proporzioni realistiche: zona anteriore 33%, zona posteriore 67%
- Sfondo marrone chiaro e bordi grigi per migliore leggibilità
2026-01-25 17:46:31 +01:00
3 changed files with 109 additions and 8 deletions

View File

@@ -1,9 +1,52 @@
<section class="homepage">
<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 @click="order = !order">Inverti ordine</w-button>
<w-button bg-color="success" @click="diaNomi.show = false">
<w-dialog v-model="diaNomi.show" :width="600" @close="abilitaTastiSpeciali()">
<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">Nome Guest</w-input>
<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>

View File

@@ -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) {
@@ -89,8 +91,16 @@ export default {
this.sp.striscia.guest.push(this.sp.punt.guest)
this.sp.striscia.home.push(' ')
}
// 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");
this.sp.form[team].push(this.sp.form[team].shift());
},
checkVittoria() {
const puntHome = this.sp.punt.home;
@@ -117,12 +127,20 @@ export default {
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--
this.sp.form.guest.unshift(this.sp.form.guest.pop());
// 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--
this.sp.form.home.unshift(this.sp.form.home.pop());
// Ruota indietro solo se c'era stato un cambio palla
if (cambioPalla) {
this.sp.form.home.unshift(this.sp.form.home.pop());
}
}
}
},

View File

@@ -121,4 +121,44 @@ button:focus-visible {
background-color: rgb(206, 247, 3);
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;
}