attilio/segnapunti
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Modifiche per adattare il piu' possibile alla tipologia APP.

Browse Source 
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.
This commit is contained in:
Attilio Grilli
2023-06-07 14:46:09 +02:00
parent 6d58ed18c8
commit 8a4dc19542
6 changed files with 71 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>Segnapunti - Anto</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

BIN
public/segnap-192x192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 37 KiB

BIN
public/segnap-512x512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 206 KiB

After

Width:  |  Height:  |  Size: 124 KiB

48
src/components/HomePage.vue
View File

@@ -5,6 +5,7 @@ export default {
components: {}, components: {},
data() { data() {
return { return {
visuForm: false,
sp: { sp: {
punt: { home: 0, guest: 0 }, punt: { home: 0, guest: 0 },
set: { home: 0, guest: 0 }, set: { home: 0, guest: 0 },
@@ -15,13 +16,20 @@ export default {
}, },
} }
}, },
mounted () { mounted() {
if (this.isMobile()) { if (this.isMobile()) {
var noSleep = new NoSleep(); var noSleep = new NoSleep();
noSleep.enable(); noSleep.enable();
document.documentElement.requestFullscreen();
} }
}, },
methods: { methods: {
closeApp() {
if (confirm("Confermi di voler chiudere l'app ?")) {
var win = window.open("", "_self");
win.close();
}
},
fullScreen() { fullScreen() {
document.documentElement.requestFullscreen(); document.documentElement.requestFullscreen();
}, },
@@ -51,7 +59,9 @@ export default {
this.sp.form[team].push(this.sp.form[team].shift()); this.sp.form[team].push(this.sp.form[team].shift());
}, },
decPunt(team) { decPunt(team) {
if (this.sp.punt[team] > 0) { // 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.punt[team]--;
this.sp.form[team].unshift(this.sp.form[team].pop()); this.sp.form[team].unshift(this.sp.form[team].pop());
} }
@@ -62,15 +72,35 @@ export default {
<template> <template>
<div class="campo"> <div class="campo">
<div class="hea home" @click="decPunt('home')">HOME</div> <div class="hea home" @click="decPunt('home')">ANTONIANA
<div class="hea guest" @click="decPunt('guest')">GUEST</div> <span v-if="visuForm">- {{ sp.punt.home }}</span>
<div class="col home" @click="incPunt('home')">{{ sp.punt.home }}</div>
<div class="col guest" @click="incPunt('guest')">{{ sp.punt.guest }}</div>
<div class="bot tal">
<button @click="fullScreen">Fullscreen</button>
</div> </div>
<div class="bot tar"> <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 @click="resetta">RESET</button>
<button v-if="isMobile()" @click="closeApp">exit</button>
</div> </div>
</div> </div>
</template> </template>

35
src/style.css
View File

@@ -5,6 +5,7 @@
} }
body { body {
overscroll-behavior-y: contain;
margin: 0; margin: 0;
place-items: center; place-items: center;
min-width: 320px; min-width: 320px;
@@ -19,7 +20,7 @@ button {
border-radius: 8px; border-radius: 8px;
border: 1px solid #fff; border: 1px solid #fff;
padding: 0.6em 1.2em; padding: 0.6em 1.2em;
font-size: 1em; font-size: 0.8em;
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;
color: #fff; color: #fff;
@@ -40,7 +41,6 @@ button:focus-visible {
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
.campo { .campo {
user-select: none; user-select: none;
width: 100%; width: 100%;
@@ -59,16 +59,41 @@ button:focus-visible {
text-align: right; text-align: right;
} }
.bot { .bot {
float: left; position: fixed;
width: 50%; left: 0;
bottom: 0;
width: 100%;
margin-top: 10px; margin-top: 10px;
margin-bottom: 1px;
text-align: right;
background-color: #000; background-color: #000;
} }
.col { .col {
margin-left: auto;
margin-right: auto;
text-align: center;
float: left; float: left;
font-size: 60vh;
width: 50%; width: 50%;
} }
.punt {
font-size: 60vh;
}
.form {
font-size: 5vh;
border-top: #fff dashed 25px;
padding-top: 50px;
padding-bottom: 50px;
}
.formtit {
font-size: 5vh;
margin-top: 30px;
margin-bottom: 20px;
}
.formdiv {
font-size: 20vh;
float: left;
width: 32%;
}
.home { .home {
background-color: #00f; background-color: #00f;
} }

1
vite.config.js
View File

@@ -15,6 +15,7 @@ export default defineConfig({
description: "Segnapunti standalone.", description: "Segnapunti standalone.",
background_color: "#eee", background_color: "#eee",
theme_color: '#ffffff', theme_color: '#ffffff',
display: "fullscreen",
orientation: "landscape", orientation: "landscape",
icons: [ icons: [
{ {