Permette di invertire l'ordine del segnapunti

Lo scambio puo' essere effettuato cliccando sul primo pulsante in basso
quello che apre il modal dove è possibiile modificare i nomi

src/components/HomePage/HomePage.html

@@ -2,11 +2,15 @@
     <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">
         Ok
       </w-button>
     </w-dialog>
     <div class="campo">
+
+      <span v-if="order">
+<!-- home guest -->
       <div class="hea home">
         <span @click="decPunt('home')" :style="{ 'float': 'left' }">
           {{ sp.nomi.home }} <img v-if="sp.servHome" src="/serv.png" width="25" />
@@ -22,7 +26,7 @@
         </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]">
@@ -40,6 +44,45 @@
         <div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
       </span>
   
+      </span>
+      <span v-else>
+<!-- guest home -->        
+
+      <div class="hea guest">
+        <span @click="decPunt('guest')" :style="{ 'float': 'left' }">
+          {{ sp.nomi.guest }} <img v-if="!sp.servHome" src="/serv.png" width="25" />
+          <span v-if="visuForm">{{ sp.punt.guest }}</span>
+        </span>
+        <span @click="incSet('guest')" class="mr3" :style="{ 'float': 'right' }">set {{ sp.set.guest }}</span>
+      </div>
+
+      <div class="hea home">
+        <span @click="decPunt('home')" :style="{ 'float': 'right' }">
+          <img v-if="sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.home }}
+          <span v-if="visuForm">{{ sp.punt.home }}</span>
+        </span>
+        <span @click="incSet('home')" class="ml3" :style="{ 'float': 'left' }">set {{ sp.set.home }}</span>
+      </div>
+
+      <span v-if="visuForm">
+        <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>
+        <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>
+      </span>
+      <span v-else>
+        <div class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
+        <div class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</div>        
+      </span>
+
+      </span>
+      
       <div class="striscia" v-if="visuStriscia">
       <div>
         <span class="text-bold mr1">{{ sp.nomi.home }}</span>

src/components/HomePage/HomePage.js

@@ -4,6 +4,7 @@ export default {
   components: {},
   data() {
     return {
+      order: true,
       voices: null,
       diaNomi: {
         show: false,