porta homepage in un componente a parte dividendo il file
aggiunge la striscia del punteggio in basso. aggiorna il file style.css
This commit is contained in:
Attilio Grilli
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import HomePage from './components/HomePage.vue'
|
||||
import HomePage from './components/HomePage/index.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
86
src/components/HomePage/HomePage.html
Normal file
86
src/components/HomePage/HomePage.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<section class="homepage">
|
||||
<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 bg-color="success" @click="diaNomi.show = false">
|
||||
Ok
|
||||
</w-button>
|
||||
</w-dialog>
|
||||
<div class="campo">
|
||||
<div class="hea home">
|
||||
<span @click="decPunt('home')" :style="{ 'float': 'left' }">
|
||||
{{ sp.nomi.home }} <img v-if="sp.servHome" src="/serv.png" width="25" />
|
||||
<span v-if="visuForm">{{ 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' }">
|
||||
<img v-if="!sp.servHome" src="/serv.png" width="25" /> {{ sp.nomi.guest }}
|
||||
<span v-if="visuForm">{{ 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>
|
||||
<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="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="sp.servHome = !sp.servHome">
|
||||
<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>
|
||||
|
||||
177
src/components/HomePage/HomePage.js
Normal file
177
src/components/HomePage/HomePage.js
Normal file
@@ -0,0 +1,177 @@
|
||||
import NoSleep from "nosleep.js";
|
||||
export default {
|
||||
name: "HomePage",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
voices: null,
|
||||
diaNomi: {
|
||||
show: false,
|
||||
home: "",
|
||||
guest: "",
|
||||
},
|
||||
visuForm: false,
|
||||
visuButt: true,
|
||||
visuStriscia: true,
|
||||
sp: {
|
||||
striscia: { home: [0], guest: [0] },
|
||||
servHome: true,
|
||||
punt: { home: 0, guest: 0 },
|
||||
set: { home: 0, guest: 0 },
|
||||
nomi: { home: "Antoniana", guest: "Guest" },
|
||||
form: {
|
||||
home: ["1", "2", "3", "4", "5", "6"],
|
||||
guest: ["1", "2", "3", "4", "5", "6"],
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.voices = window.speechSynthesis.getVoices();
|
||||
if (this.isMobile()) {
|
||||
this.speak();
|
||||
var noSleep = new NoSleep();
|
||||
noSleep.enable();
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
this.abilitaTastiSpeciali();
|
||||
},
|
||||
methods: {
|
||||
closeApp() {
|
||||
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() {
|
||||
this.$waveui.notify("Punteggio<br />RESETTATO", "success");
|
||||
this.visuForm = false;
|
||||
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"],
|
||||
}
|
||||
this.sp.striscia = { home: [0], guest: [0] }
|
||||
},
|
||||
incSet(team) {
|
||||
if (this.sp.set[team] == 2) {
|
||||
this.sp.set[team] = 0;
|
||||
} else {
|
||||
this.sp.set[team]++;
|
||||
}
|
||||
},
|
||||
incPunt(team) {
|
||||
this.sp.punt[team]++;
|
||||
if (team == 'home') {
|
||||
this.sp.striscia.home.push(this.sp.punt.home)
|
||||
this.sp.striscia.guest.push(' ')
|
||||
} else {
|
||||
this.sp.striscia.guest.push(this.sp.punt.guest)
|
||||
this.sp.striscia.home.push(' ')
|
||||
}
|
||||
this.sp.servHome = (team == "home");
|
||||
this.sp.form[team].push(this.sp.form[team].shift());
|
||||
},
|
||||
decPunt() {
|
||||
if (this.sp.striscia.home.length > 1) {
|
||||
var tmpHome = this.sp.striscia.home.pop()
|
||||
var tmpGuest = this.sp.striscia.guest.pop()
|
||||
if (tmpHome == ' ') {
|
||||
this.sp.punt.guest--
|
||||
this.sp.form.guest.unshift(this.sp.form.guest.pop());
|
||||
} else {
|
||||
this.sp.punt.home--
|
||||
this.sp.form.home.unshift(this.sp.form.home.pop());
|
||||
}
|
||||
}
|
||||
},
|
||||
// decPunt(team) {
|
||||
// // decrementa il punteggio se è > 0.
|
||||
// if (this.sp.punt[team] > 0) {
|
||||
// this.sp.punt[team]--;
|
||||
// this.sp.striscia.home.pop()
|
||||
// this.sp.striscia.guest.pop()
|
||||
// this.sp.form[team].unshift(this.sp.form[team].pop());
|
||||
// }
|
||||
// },
|
||||
speak() {
|
||||
const msg = new SpeechSynthesisUtterance();
|
||||
if (this.sp.punt.home + this.sp.punt.guest == 0) {
|
||||
msg.text = "zero a zero";
|
||||
} else if (this.sp.punt.home == this.sp.punt.guest) {
|
||||
msg.text = this.sp.punt.home + " pari";
|
||||
} else {
|
||||
if (this.sp.servHome) {
|
||||
msg.text = this.sp.punt.home + " a " + this.sp.punt.guest;
|
||||
} else {
|
||||
msg.text = this.sp.punt.guest + " a " + this.sp.punt.home;
|
||||
}
|
||||
}
|
||||
// msg.volume = 1.0; // speech volume (default: 1.0)
|
||||
// msg.pitch = 1.0; // speech pitch (default: 1.0)
|
||||
// msg.rate = 1.0; // speech rate (default: 1.0)
|
||||
// msg.lang = 'it_IT'; // speech language (default: 'en-US')
|
||||
const voices = window.speechSynthesis.getVoices();
|
||||
msg.voice = voices.find(voice => voice.name === 'Google italiano');
|
||||
// voice URI (default: platform-dependent)
|
||||
// msg.onboundary = function (event) {
|
||||
// console.log('Speech reached a boundary:', event.name);
|
||||
// };
|
||||
// msg.onpause = function (event) {
|
||||
// console.log('Speech paused:', event.utterance.text.substring(event.charIndex));
|
||||
// };
|
||||
window.speechSynthesis.speak(msg);
|
||||
},
|
||||
apriDialogConfig() {
|
||||
this.disabilitaTastiSpeciali();
|
||||
this.diaNomi.show = true;
|
||||
},
|
||||
disabilitaTastiSpeciali() {
|
||||
window.removeEventListener("keydown", this.funzioneTastiSpeciali);
|
||||
},
|
||||
abilitaTastiSpeciali() {
|
||||
window.addEventListener("keydown", this.funzioneTastiSpeciali);
|
||||
},
|
||||
funzioneTastiSpeciali(e) {
|
||||
e.preventDefault();
|
||||
if (e.ctrlKey && e.key == "m") {
|
||||
this.diaNomi.show = true
|
||||
} else if (e.ctrlKey && e.key == "b") {
|
||||
this.visuButt = !this.visuButt
|
||||
} else if (e.ctrlKey && e.key == "f") {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else if (e.ctrlKey && e.key == "s") {
|
||||
this.speak();
|
||||
} else if (e.ctrlKey && e.key == "z") {
|
||||
this.visuForm = !this.visuForm
|
||||
} else if (e.ctrlKey && e.key == "ArrowUp") {
|
||||
this.incPunt("home")
|
||||
} else if (e.ctrlKey && e.key == "ArrowDown") {
|
||||
this.decPunt("home")
|
||||
} else if (e.ctrlKey && e.key == "ArrowRight") {
|
||||
this.incSet("home")
|
||||
} else if (e.shiftKey && e.key == "ArrowUp") {
|
||||
this.incPunt("guest")
|
||||
} else if (e.shiftKey && e.key == "ArrowDown") {
|
||||
this.decPunt("guest")
|
||||
} else if (e.shiftKey && e.key == "ArrowRight") {
|
||||
this.incSet("guest")
|
||||
} else if (e.ctrlKey && e.key == "ArrowLeft") {
|
||||
this.sp.servHome = !this.sp.servHome
|
||||
} else { return false }
|
||||
}
|
||||
}
|
||||
}
|
||||
112
src/components/HomePage/HomePage.scss
Normal file
112
src/components/HomePage/HomePage.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
.homepage {
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
touch-action: pan-x pan-y;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
overscroll-behavior-y: contain;
|
||||
margin: 0;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #fff;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
background-color: #333;
|
||||
}
|
||||
button:focus, button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
#app {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.campo {
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
display: table;
|
||||
color: #fff;
|
||||
}
|
||||
.hea {
|
||||
float: left;
|
||||
width: 50%;
|
||||
font-size: xx-large;
|
||||
}
|
||||
.hea span {
|
||||
/* border: 1px solid #f3fb00; */
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.tal {
|
||||
text-align: left;
|
||||
}
|
||||
.tar {
|
||||
text-align: right;
|
||||
}
|
||||
.bot {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 1px;
|
||||
background-color: #111;
|
||||
}
|
||||
.col {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
.punt {
|
||||
font-size: 60vh;
|
||||
}
|
||||
.form {
|
||||
font-size: 5vh;
|
||||
border-top: #fff dashed 25px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
.formtit {
|
||||
font-size: 5vh;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.formdiv {
|
||||
font-size: 20vh;
|
||||
float: left;
|
||||
width: 32%;
|
||||
}
|
||||
.home {
|
||||
background-color: black;
|
||||
color: yellow;
|
||||
}
|
||||
.guest {
|
||||
background-color: blue;
|
||||
color: white
|
||||
}
|
||||
.item-stri {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
3
src/components/HomePage/index.vue
Normal file
3
src/components/HomePage/index.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template src="./HomePage.html"></template>
|
||||
<script src="./HomePage.js"></script>
|
||||
|
||||
@@ -106,3 +106,19 @@ button:focus-visible {
|
||||
background-color: blue;
|
||||
color: white
|
||||
}
|
||||
.striscia {
|
||||
position:fixed;
|
||||
text-align: right;
|
||||
bottom: 50px;
|
||||
right: 10px;
|
||||
margin-left: -10000px;
|
||||
}
|
||||
.striscia .item {
|
||||
width: 25px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
background-color: rgb(206, 247, 3);
|
||||
color: blue;
|
||||
border-radius: 5px;
|
||||
}
|
||||
Reference in New Issue
Block a user