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>
|
<script setup>
|
||||||
import HomePage from './components/HomePage.vue'
|
import HomePage from './components/HomePage/index.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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;
|
background-color: blue;
|
||||||
color: white
|
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