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.
107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
<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>
|