segnapunti/src/components/HomePage/HomePage.html

<section class="homepage">
    <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-center align-center class="pa3">
        <span class="mr3">Modalità partita:</span>
        <w-button
          @click="modalitaPartita = '2/3'"
          :bg-color="modalitaPartita === '2/3' ? 'success' : 'grey-light4'"
          :dark="modalitaPartita === '2/3'"
          class="ma1">
          2/3
        </w-button>
        <w-button
          @click="modalitaPartita = '3/5'"
          :bg-color="modalitaPartita === '3/5' ? 'success' : 'grey-light4'"
          :dark="modalitaPartita === '3/5'"
          class="ma1">
          3/5
        </w-button>
      </w-flex>

      <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>
    <div class="campo">

      <span v-if="order">
<!-- home guest -->
      <div class="hea home">
        <span @click="decPunt('home')" :style="{ 'float': 'left' }">
          {{ sp.nomi.home }}
          <span class="serv-slot">
            <img v-show="sp.servHome" src="/serv.png" width="25" />
          </span>
          <span v-if="visuForm" class="score-inline">{{ 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' }">
          <span class="serv-slot">
            <img v-show="!sp.servHome" src="/serv.png" width="25" />
          </span>
          {{ sp.nomi.guest }}
          <span v-if="visuForm" class="score-inline">{{ 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>
        <w-flex class="punteggio-container">
          <w-flex justify-center align-center class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</w-flex>
          <w-flex justify-center align-center class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</w-flex>
        </w-flex>
      </span>
  
      </span>
      <span v-else>
<!-- guest home -->        

      <div class="hea guest">
        <span @click="decPunt('guest')" :style="{ 'float': 'left' }">
          {{ sp.nomi.guest }}
          <span class="serv-slot">
            <img v-show="!sp.servHome" src="/serv.png" width="25" />
          </span>
          <span v-if="visuForm" class="score-inline">{{ 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' }">
          <span class="serv-slot">
            <img v-show="sp.servHome" src="/serv.png" width="25" />
          </span>
          {{ sp.nomi.home }}
          <span v-if="visuForm" class="score-inline">{{ 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>
        <w-flex class="punteggio-container">
          <w-flex justify-center align-center class="col punt guest" @click="incPunt('guest')">{{ sp.punt.guest }}</w-flex>
          <w-flex justify-center align-center class="col punt home" @click="incPunt('home')">{{ sp.punt.home }}</w-flex>
        </w-flex>
      </span>

      </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="cambiaPalla" :disabled="!isPunteggioZeroZero">
            <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>