segnapunti/src/components/DisplayPage.vue

<template>
  <section class="display-page">
    <div class="campo">
      <span v-if="state.order">
        <!-- Ordine visualizzazione: home / guest -->
        <div class="hea home">
          <span :style="{ 'float': 'left' }">
            {{ state.sp.nomi.home }}
            <span class="serv-slot">
              <img v-show="servHome" src="/serv.png" width="25" alt="Servizio" />
            </span>
            <span v-if="state.visuForm" class="score-inline">{{ punt.home }}</span>
          </span>
          <span class="mr3" :style="{ 'float': 'right' }">set {{ set.home }}</span>
        </div>

        <div class="hea guest">
          <span :style="{ 'float': 'right' }">
            <span v-if="state.visuForm" class="score-inline">{{ punt.guest }}</span>
            <span class="serv-slot">
              <img v-show="!servHome" src="/serv.png" width="25" alt="Servizio" />
            </span>
            {{ state.sp.nomi.guest }}
          </span>
          <span class="ml3" :style="{ 'float': 'left' }">set {{ set.guest }}</span>
        </div>

        <span v-if="state.visuForm">
          <div class="col form home">
            <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]" :key="'hf'+x">
              {{ state.sp.form.home[x] }}
            </div>
          </div>
          <div class="col form guest">
            <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]" :key="'gf'+x">
              {{ state.sp.form.guest[x] }}
            </div>
          </div>
        </span>
        <span v-else>
          <div class="punteggio-container">
            <div class="col punt home">{{ punt.home }}</div>
            <div class="col punt guest">{{ punt.guest }}</div>
          </div>
        </span>
      </span>

      <span v-else>
        <!-- Ordine visualizzazione: guest / home -->
        <div class="hea guest">
          <span :style="{ 'float': 'left' }">
            {{ state.sp.nomi.guest }}
            <span class="serv-slot">
              <img v-show="!servHome" src="/serv.png" width="25" alt="Servizio" />
            </span>
            <span v-if="state.visuForm" class="score-inline">{{ punt.guest }}</span>
          </span>
          <span class="mr3" :style="{ 'float': 'right' }">set {{ set.guest }}</span>
        </div>

        <div class="hea home">
          <span :style="{ 'float': 'right' }">
            <span v-if="state.visuForm" class="score-inline">{{ punt.home }}</span>
            <span class="serv-slot">
              <img v-show="servHome" src="/serv.png" width="25" alt="Servizio" />
            </span>
            {{ state.sp.nomi.home }}
          </span>
          <span class="ml3" :style="{ 'float': 'left' }">set {{ set.home }}</span>
        </div>

        <span v-if="state.visuForm">
          <div class="col form guest">
            <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]" :key="'gf2'+x">
              {{ state.sp.form.guest[x] }}
            </div>
          </div>
          <div class="col form home">
            <div class="formdiv" v-for="x in [3, 2, 1, 4, 5, 0]" :key="'hf2'+x">
              {{ state.sp.form.home[x] }}
            </div>
          </div>
        </span>
        <span v-else>
          <div class="punteggio-container">
            <div class="col punt guest">{{ punt.guest }}</div>
            <div class="col punt home">{{ punt.home }}</div>
          </div>
        </span>
      </span>

      <div class="striscia" v-if="state.visuStriscia">
        <span class="striscia-nome text-bold">{{ state.sp.nomi.home }}</span>
        <div class="striscia-items" ref="homeItems">
          <div v-for="(h, i) in stricciaStrip.home" :key="'sh'+i"
               class="item" :class="{ 'item-vuoto': h === ' ' }">
            {{ h }}
          </div>
        </div>
        <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 stricciaStrip.guest" :key="'sg'+i"
               class="item" :class="{ 'item-vuoto': h === ' ' }">
            {{ h }}
          </div>
        </div>
      </div>

      <!-- Indicatore stato connessione -->
      <div class="connection-status" :class="{ connected: wsConnected, disconnected: !wsConnected }">
        <span class="dot"></span>
        {{ wsConnected ? '' : 'Disconnesso' }}
      </div>
    </div>
  </section>
</template>

<script>
import { createWsMixin } from '../wsMixin.js'

export default {
  name: "DisplayPage",
  mixins: [createWsMixin('display')],
  mounted() {
    if (this.isMobile()) {
      try { document.documentElement.requestFullscreen() } catch (e) {}
    }
  },
  computed: {
    stricciaStrip() {
      const currentSet = this.state.sp.striscia.at(-1)
      if (!currentSet) return { home: [], guest: [] }
      let h = 0, g = 0
      const home = [], guest = []
      for (const scorer of currentSet.ris) {
        if (scorer === 'h') { h++; home.push(h); guest.push(' ') }
        else               { g++; guest.push(g); home.push(' ') }
      }
      return { home, guest }
    },
  },
  watch: {
    'state.sp.striscia': {
      deep: true,
      handler() {
        this.$nextTick(() => {
          if (this.$refs.homeItems)  this.$refs.homeItems.scrollLeft  = this.$refs.homeItems.scrollWidth
          if (this.$refs.guestItems) this.$refs.guestItems.scrollLeft = this.$refs.guestItems.scrollWidth
        })
      }
    },
  },
  methods: {
    onWsMessage(msg) {
      if (msg.type === 'speak') this.speakOnDisplay(msg.text)
      else if (msg.type === 'error') console.error('[Display] Server error:', msg.message)
    },
    isMobile() {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    },
    speakOnDisplay(text) {
      if (typeof text !== 'string' || !text.trim() || !('speechSynthesis' in window)) return
      const utterance = new SpeechSynthesisUtterance(text.trim())
      const voices = window.speechSynthesis.getVoices()
      utterance.voice = voices.find(v => v.name === 'Google italiano')
        || voices.find(v => v.lang?.toLowerCase().startsWith('it'))
        || null
      utterance.lang = 'it-IT'
      window.speechSynthesis.cancel()
      window.speechSynthesis.speak(utterance)
    },
  },
}
</script>

<style scoped>
.display-page {
  width: 100%;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

.connection-status {
  position: fixed;
  top: 8px;
  right: 8px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 100;
  transition: opacity 0.5s;
}

.connection-status.connected {
  opacity: 0;
}

.connection-status.disconnected {
  background: rgba(255, 50, 50, 0.8);
  color: white;
  opacity: 1;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.connected .dot {
  background: #4caf50;
}

.disconnected .dot {
  background: #f44336;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.guest-striscia {
  color: white;
}

.punteggio-container {
  width: 100%;
  display: flex;
}

.punt {
  font-size: 60vh;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  min-width: 50vw;
  max-width: 50vw;
  overflow: hidden;
  box-sizing: border-box;
}
</style>