Modifiche per adattare il piu' possibile alla tipologia APP.

Aggiunto un bordo trasparente alle 2 icone.
In manifest forzata la modalità fullscreen landscape, aiutandosi
anche con documentElement.requestFullscreen().
Le formazioni vengono visualizzate cambiando posto con il punteggio.
inseriti opportuni cambiamenti su style.css.
inserito in css-body overscroll-behavior-y: contain;
per prevenire la ricarica della pagina con swipe-down.
modificato il title direttamente in index.html.

src/components/HomePage.vue

@@ -5,6 +5,7 @@ export default {
   components: {},
   data() {
     return {
+      visuForm: false,
       sp: {
         punt: { home: 0, guest: 0 },
         set: { home: 0, guest: 0 },
@@ -15,13 +16,20 @@ export default {
       },
     }
   },
-  mounted () {
+  mounted() {
     if (this.isMobile()) {
       var noSleep = new NoSleep();
       noSleep.enable();
+      document.documentElement.requestFullscreen();
     }
   },
   methods: {
+    closeApp() {
+      if (confirm("Confermi di voler chiudere l'app ?")) {
+        var win = window.open("", "_self");
+        win.close();
+      }
+    },
     fullScreen() {
       document.documentElement.requestFullscreen();
     },
@@ -51,7 +59,9 @@ export default {
       this.sp.form[team].push(this.sp.form[team].shift());
     },
     decPunt(team) {
-      if (this.sp.punt[team] > 0) {
+      // decrementa il punteggio se è > 0 e non siamo in
+      // visualizza formazioni.
+      if (this.sp.punt[team] > 0 && !this.visuForm) {
         this.sp.punt[team]--;
         this.sp.form[team].unshift(this.sp.form[team].pop());
       }
@@ -62,15 +72,35 @@ export default {
 
 <template>
   <div class="campo">
-    <div class="hea home" @click="decPunt('home')">HOME</div>
-    <div class="hea guest" @click="decPunt('guest')">GUEST</div>
-    <div class="col home" @click="incPunt('home')">{{ sp.punt.home }}</div>
-    <div class="col guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
-    <div class="bot tal">
-      <button @click="fullScreen">Fullscreen</button>
+    <div class="hea home" @click="decPunt('home')">ANTONIANA
+      <span v-if="visuForm">- {{ sp.punt.home }}</span>
     </div>
-    <div class="bot tar">
+    <div class="hea guest" @click="decPunt('guest')">GUEST
+      <span v-if="visuForm">- {{ sp.punt.guest }}</span>
+    </div>
+    <span v-if="visuForm">
+      <div class="col form 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="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]">
+          {{ sp.form.guest[x] }}
+        </div>
+      </div>
+    </span>
+    <span v-if="!visuForm">
+      <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="bot tal">
+      <button @click="visuForm = !visuForm">
+        <span v-if="visuForm">PUNTEGGI</span>
+        <span v-if="!visuForm">FORMAZIONI</span>
+      </button>
       <button @click="resetta">RESET</button>
+      <button v-if="isMobile()" @click="closeApp">exit</button>
     </div>
   </div>
 </template>