<script>
import NoSleep from "nosleep.js";
export default {
  name: "HomePage",
  components: {},
  data() {
    return {
      visuForm: false,
      sp: {
        punt: { home: 0, guest: 0 },
        set: { home: 0, guest: 0 },
        form: {
          home: ["1", "2", "3", "4", "5", "6"],
          guest: ["1", "2", "3", "4", "5", "6"],
        },
      },
    }
  },
  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();
    },
    isMobile() {
      if (
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        )
      ) {
        return true;
      } else {
        return false;
      }
    },
    resetta() {
      if (confirm("Confermi il reset del punteggio ?")) {
        this.sp.punt.home = 0;
        this.sp.punt.guest = 0;
        this.sp.form = {
          home: ["1", "2", "3", "4", "5", "6"],
          guest: ["1", "2", "3", "4", "5", "6"],
        }
      }
    },
    incPunt(team) {
      this.sp.punt[team]++;
      this.sp.form[team].push(this.sp.form[team].shift());
    },
    decPunt(team) {
      // 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());
      }
    }
  }
};
</script>

<template>
  <div class="campo">
    <div class="hea home" @click="decPunt('home')">ANTONIANA
      <span v-if="visuForm">- {{ sp.punt.home }}</span>
    </div>
    <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>
