From 40b5751440f529664de2e4d6f6dd404411fb6d69 Mon Sep 17 00:00:00 2001
From: Attilio Grilli <attilio.grilli@unich.it>
Date: Tue, 25 Mar 2025 15:14:03 +0100
Subject: [PATCH] porta homepage in un componente a parte dividendo il file

aggiunge la striscia del punteggio in basso.
aggiorna il file style.css
---
 src/App.vue                           |   2 +-
 src/components/HomePage/HomePage.html |  86 +++++++++++++
 src/components/HomePage/HomePage.js   | 177 ++++++++++++++++++++++++++
 src/components/HomePage/HomePage.scss | 112 ++++++++++++++++
 src/components/HomePage/index.vue     |   3 +
 src/style.css                         |  16 +++
 6 files changed, 395 insertions(+), 1 deletion(-)
 create mode 100644 src/components/HomePage/HomePage.html
 create mode 100644 src/components/HomePage/HomePage.js
 create mode 100644 src/components/HomePage/HomePage.scss
 create mode 100644 src/components/HomePage/index.vue

diff --git a/src/App.vue b/src/App.vue
index 9265544..8355651 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import HomePage from './components/HomePage.vue'
+import HomePage from './components/HomePage/index.vue'
 </script>
 
 <template>
diff --git a/src/components/HomePage/HomePage.html b/src/components/HomePage/HomePage.html
new file mode 100644
index 0000000..84f61e8
--- /dev/null
+++ b/src/components/HomePage/HomePage.html
@@ -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>
+  
\ No newline at end of file
diff --git a/src/components/HomePage/HomePage.js b/src/components/HomePage/HomePage.js
new file mode 100644
index 0000000..2dae59f
--- /dev/null
+++ b/src/components/HomePage/HomePage.js
@@ -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 }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/HomePage/HomePage.scss b/src/components/HomePage/HomePage.scss
new file mode 100644
index 0000000..b1a9d99
--- /dev/null
+++ b/src/components/HomePage/HomePage.scss
@@ -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;
+    }
+}
\ No newline at end of file
diff --git a/src/components/HomePage/index.vue b/src/components/HomePage/index.vue
new file mode 100644
index 0000000..156fdba
--- /dev/null
+++ b/src/components/HomePage/index.vue
@@ -0,0 +1,3 @@
+<template src="./HomePage.html"></template>
+<script src="./HomePage.js"></script>
+
diff --git a/src/style.css b/src/style.css
index 0809ea6..03f06b1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -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;
+}
\ No newline at end of file