porta homepage in un componente a parte dividendo il file

aggiunge la striscia del punteggio in basso.
aggiorna il file style.css

src/components/HomePage/HomePage.html

@@ -0,0 +1,86 @@
+<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 bg-color="success" @click="diaNomi.show = false">
+        Ok
+      </w-button>
+    </w-dialog>
+    <div class="campo">
+      <div class="hea home">
+        <span @click="decPunt('home')" :style="{ 'float': 'left' }">
+          {{ sp.nomi.home }} <img v-if="sp.servHome" src="/serv.png" width="25" />
+          <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' }">
+          <img v-if="!sp.servHome" src="/serv.png" width="25" /> {{ 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')">
+          <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
+            {{ sp.form.home[x] }}
+          </div>
+        </div>
+        <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>
+        </div>
+      </span>
+      <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="striscia" v-if="visuStriscia">
+      <div>
+        <span class="text-bold mr1">{{ sp.nomi.home }}</span>
+        <div v-for="h in sp.striscia.home" class="item">
+          {{String(h)}}
+        </div>
+      </div>
+      <div class="guest">
+        <span class="text-bold mr1">{{ sp.nomi.guest }}</span>
+        <div v-for="h in sp.striscia.guest" class="item">
+          {{String(h)}}
+        </div>
+      </div>
+      </div>
+
+      <div class="bot" v-if="visuButt">
+        <w-flex justify-space-between class="pa2">
+          <w-confirm right align-bottom v-if="isMobile()" question="CHIUDO ?" cancel="NO" confirm="SI" @confirm="closeApp">
+            <img src="/exit.png" width="25" />
+          </w-confirm>
+          <w-button @click="apriDialogConfig()">
+            <img src="/gear.png" width="25" />
+          </w-button>
+          <w-button @click="sp.servHome = !sp.servHome">
+            <img src="/serv.png" width="25" />
+          </w-button>
+          <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="visuStriscia = !visuStriscia">
+            STRISCIA
+          </w-button>
+          <w-button @click="speak">
+            <img src="/speaker.png" width="25" />
+          </w-button>
+        </w-flex>
+      </div>
+    </div>
+</section>
+