Add Pinia persistence and scoreboard support (#15)

* Add scoreboard replicant and Pinia persistence

* Fix scoreboard replicant sync (#16)

src/dashboard/example/views/Scoreboard.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue';
+import { computed } from 'vue';
+import type { Schemas } from '../../../types';
+import { usePlayersStore } from '../stores/players';
+import { useScoreboardStore } from '../stores/scoreboard';
+
+useHead({ title: '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>
+  <QPage class="q-pa-lg scoreboard-page">
+    <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>
+  </QPage>
+</template>
+
+<style scoped>
+.scoreboard-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>