From d1e8279608d189b0a96bdc47ebea3b771d5447b9 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 21 Feb 2026 11:19:38 +0100
Subject: [PATCH] feat(striscia): nomi fissi a sinistra, punti scorrono verso
 destra
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Layout ora usa CSS Grid (max-content 1fr) per allineare le colonne
  dei nomi indipendentemente dalla loro lunghezza
- I punti crescono da sinistra verso destra; un watcher Vue imposta
  scrollLeft al massimo ad ogni aggiornamento, mantenendo visibili
  gli ultimi punti a destra quando la striscia va oltre lo schermo
- Le celle vuote (spazio al posto del punto) non mostrano più
  lo sfondo giallo-verde (classe item-vuoto)
---
 src/components/DisplayPage.vue | 32 ++++++++++++++++++++++++++------
 src/style.css                  | 25 ++++++++++++++++++++-----
 2 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/components/DisplayPage.vue b/src/components/DisplayPage.vue
index e1ab84b..baba1fe 100644
--- a/src/components/DisplayPage.vue
+++ b/src/components/DisplayPage.vue
@@ -90,15 +90,17 @@
       </span>
 
       <div class="striscia" v-if="state.visuStriscia">
-        <div>
-          <span class="text-bold mr1">{{ state.sp.nomi.home }}</span>
-          <div v-for="(h, i) in state.sp.striscia.home" :key="'sh'+i" class="item">
+        <span class="striscia-nome text-bold">{{ state.sp.nomi.home }}</span>
+        <div class="striscia-items" ref="homeItems">
+          <div v-for="(h, i) in state.sp.striscia.home" :key="'sh'+i"
+               class="item" :class="{ 'item-vuoto': String(h).trim() === '' }">
             {{ String(h) }}
           </div>
         </div>
-        <div class="guest-striscia">
-          <span class="text-bold mr1">{{ state.sp.nomi.guest }}</span>
-          <div v-for="(h, i) in state.sp.striscia.guest" :key="'sg'+i" class="item">
+        <span class="striscia-nome text-bold guest-striscia">{{ state.sp.nomi.guest }}</span>
+        <div class="striscia-items guest-striscia" ref="guestItems">
+          <div v-for="(h, i) in state.sp.striscia.guest" :key="'sg'+i"
+               class="item" :class="{ 'item-vuoto': String(h).trim() === '' }">
             {{ String(h) }}
           </div>
         </div>
@@ -190,6 +192,24 @@ export default {
       this.ws = null
     }
   },
+  watch: {
+    'state.sp.striscia.home': {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          if (this.$refs.homeItems) this.$refs.homeItems.scrollLeft = this.$refs.homeItems.scrollWidth
+        })
+      }
+    },
+    'state.sp.striscia.guest': {
+      deep: true,
+      handler() {
+        this.$nextTick(() => {
+          if (this.$refs.guestItems) this.$refs.guestItems.scrollLeft = this.$refs.guestItems.scrollWidth
+        })
+      }
+    }
+  },
   methods: {
     isMobile() {
       return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
diff --git a/src/style.css b/src/style.css
index 9ee314f..d4325ee 100644
--- a/src/style.css
+++ b/src/style.css
@@ -135,20 +135,35 @@ button:focus-visible {
   color: white
 }
 .striscia {
-  position:fixed;
-  text-align: right;
+  position: fixed;
   bottom: 50px;
+  left: 10px;
   right: 10px;
-  margin-left: -10000px;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  row-gap: 2px;
+  align-items: center;
+}
+.striscia-nome {
+  white-space: nowrap;
+  padding-right: 6px;
+}
+.striscia-items {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow: hidden;
 }
 .striscia .item {
   width: 25px;
+  min-width: 25px;
   text-align: center;
   font-weight: bold;
-  display: inline-block;
+  flex-shrink: 0;
+  border-radius: 5px;
+}
+.striscia .item:not(.item-vuoto) {
   background-color: rgb(206, 247, 3);
   color: blue;
-  border-radius: 5px;
 }
 
 .campo-config {