From 26d647dce7acdd50970c45087c1d0417aebe8261 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sun, 25 Jan 2026 17:46:31 +0100
Subject: [PATCH] Aggiunge configurazione manuale numeri di maglia
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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à
---
 src/components/HomePage/HomePage.html | 53 ++++++++++++++++++++++++---
 src/style.css                         | 40 ++++++++++++++++++++
 2 files changed, 88 insertions(+), 5 deletions(-)

diff --git a/src/components/HomePage/HomePage.html b/src/components/HomePage/HomePage.html
index 38b97c7..2298f88 100644
--- a/src/components/HomePage/HomePage.html
+++ b/src/components/HomePage/HomePage.html
@@ -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>
diff --git a/src/style.css b/src/style.css
index 03f06b1..166e800 100644
--- a/src/style.css
+++ b/src/style.css
@@ -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;
 }
\ No newline at end of file