Embed scoreboard panel in dashboard

src/dashboard/example/components/ScoreboardPanel.vue

@@ -0,0 +1,140 @@
+<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>

src/dashboard/example/views/Dashboard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
+import ScoreboardPanel from '../components/ScoreboardPanel.vue';
 
 useHead({ title: 'Dashboard' });
 </script>
@@ -10,5 +11,25 @@ useHead({ title: 'Dashboard' });
     <div class="text-body1">
       Panel principal del dashboard.
     </div>
+    <QCard bordered class="dashboard-scoreboard-window q-mt-lg">
+      <QCardSection class="dashboard-scoreboard-content">
+        <ScoreboardPanel />
+      </QCardSection>
+    </QCard>
   </QPage>
 </template>
+
+<style scoped>
+.dashboard-scoreboard-window {
+  width: 50vw;
+  height: 50vh;
+  min-width: 320px;
+  min-height: 320px;
+  overflow: hidden;
+}
+
+.dashboard-scoreboard-content {
+  height: 100%;
+  overflow-y: auto;
+}
+</style>

src/dashboard/example/views/Scoreboard.vue

@@ -1,143 +1,12 @@
 <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';
+import ScoreboardPanel from '../components/ScoreboardPanel.vue';
 
 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 class="q-pa-lg">
+    <ScoreboardPanel />
   </QPage>
 </template>
-
-<style scoped>
-.scoreboard-page {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-</style>