feat(striscia): nomi fissi a sinistra, punti scorrono verso destra

- 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

@@ -90,15 +90,17 @@
       </span>
 
       <div class="striscia" v-if="state.visuStriscia">
-        <div>
+        <span class="striscia-nome text-bold">{{ state.sp.nomi.home }}</span>
-          <span class="text-bold mr1">{{ 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">
+          <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="striscia-nome text-bold guest-striscia">{{ state.sp.nomi.guest }}</span>
-          <span class="text-bold mr1">{{ 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">
+          <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)

src/style.css

@@ -135,20 +135,35 @@ button:focus-visible {
   color: white
 }
 .striscia {
-  position:fixed;
+  position: fixed;
-  text-align: right;
   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 {