scoreko-dev/src/dashboard/example/components/ScoreboardPanel.vue

<script setup lang="ts">
import { computed } from 'vue';
import type { Schemas } from '../../../types';
import { usePlayersStore } from '../stores/players';
import { useScoreboardStore } from '../stores/scoreboard';

const playersStore = usePlayersStore();
const scoreboardStore = useScoreboardStore();

const playerOptions = computed(() => {
  const base = [{ label: '(Sin asignar)', value: '' }];
  const entries = Object.entries(playersStore.players) as [string, Schemas.Players[string]][];
  const options = entries.map(([id, player]) => ({
    value: id,
    label: player.gamertag || id,
  }));
  return base.concat(options);
});
</script>

<template>
  <div class="scoreboard-panel">
    <div class="row items-center q-mb-md">
      <div class="text-h4">Scoreboard</div>
      <QSpace />
      <QBtn
        color="secondary"
        outline
        icon="swap_horiz"
        label="Intercambiar lados"
        class="q-mr-sm"
        @click="scoreboardStore.swapPlayers"
      />
      <QBtn
        color="secondary"
        outline
        icon="restart_alt"
        label="Reset scores"
        @click="scoreboardStore.resetScores"
      />
    </div>

    <div class="row q-col-gutter-lg">
      <div class="col-12 col-md-6">
        <QCard flat bordered>
          <QCardSection>
            <div class="text-subtitle1 text-weight-bold">Lado izquierdo</div>
          </QCardSection>
          <QSeparator />
          <QCardSection>
            <QSelect
              v-model="scoreboardStore.scoreboard.leftPlayerId"
              :options="playerOptions"
              label="Jugador"
              dense
              outlined
              emit-value
              map-options
            />
            <QInput
              v-model="scoreboardStore.scoreboard.leftNameOverride"
              label="Nombre override"
              dense
              outlined
              class="q-mt-md"
            />
            <QInput
              v-model.number="scoreboardStore.leftScore"
              type="number"
              label="Score"
              dense
              outlined
              class="q-mt-md"
              min="0"
            />
          </QCardSection>
        </QCard>
      </div>

      <div class="col-12 col-md-6">
        <QCard flat bordered>
          <QCardSection>
            <div class="text-subtitle1 text-weight-bold">Lado derecho</div>
          </QCardSection>
          <QSeparator />
          <QCardSection>
            <QSelect
              v-model="scoreboardStore.scoreboard.rightPlayerId"
              :options="playerOptions"
              label="Jugador"
              dense
              outlined
              emit-value
              map-options
            />
            <QInput
              v-model="scoreboardStore.scoreboard.rightNameOverride"
              label="Nombre override"
              dense
              outlined
              class="q-mt-md"
            />
            <QInput
              v-model.number="scoreboardStore.rightScore"
              type="number"
              label="Score"
              dense
              outlined
              class="q-mt-md"
              min="0"
            />
          </QCardSection>
        </QCard>
      </div>
    </div>

    <QCard flat bordered class="q-mt-lg">
      <QCardSection>
        <div class="text-subtitle1 text-weight-bold">Detalles de la ronda</div>
      </QCardSection>
      <QSeparator />
      <QCardSection>
        <QInput
          v-model="scoreboardStore.scoreboard.round"
          label="Ronda (ej. Winners Finals)"
          dense
          outlined
        />
      </QCardSection>
    </QCard>
  </div>
</template>

<style scoped>
.scoreboard-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>