Merge pull request #18 from Pandipipas/actualizar-scoreboard-en-tiempo-real

Save dashboard updates to NodeCG replicants for realtime graphics

src/dashboard/example/stores/players.ts

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia';
 import { computed, ref, watch } from 'vue';
-import type { Ref } from 'vue';
 import { playersReplicant } from '../../../browser_shared/replicants';
 import type { Schemas } from '../../../types';
 
@@ -66,7 +65,7 @@ const writeStorage = (value: PlayersMap) => {
 
 export const usePlayersStore = defineStore('players', () => {
   const players = ref<PlayersMap>({});
-  const replicantRef = playersReplicant?.data as unknown as Ref<PlayersMap | undefined> | undefined;
+  const replicant = playersReplicant;
   const storageSnapshot = readStorage();
   if (storageSnapshot) {
     players.value = storageSnapshot;
@@ -75,7 +74,7 @@ export const usePlayersStore = defineStore('players', () => {
   const isApplyingReplicant = ref(false);
 
   watch(
-    () => replicantRef?.value,
+    () => replicant?.data,
     (value) => {
       if (!value) {
         return;
@@ -92,12 +91,13 @@ export const usePlayersStore = defineStore('players', () => {
     players,
     (value) => {
       writeStorage(value);
-      if (isApplyingReplicant.value || !replicantRef) {
+      if (isApplyingReplicant.value || !replicant) {
         return;
       }
-      replicantRef.value = normalizePlayers(value);
+      replicant.data = normalizePlayers(value);
+      replicant.save();
     },
-    { deep: true }
+    { deep: true, flush: 'sync' }
   );
 
   const setPlayers = (value: PlayersMap) => {

src/dashboard/example/stores/scoreboard.ts

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia';
 import { computed, ref, watch } from 'vue';
-import type { Ref } from 'vue';
 import { scoreboardReplicant } from '../../../browser_shared/replicants';
 import type { Schemas } from '../../../types';
 
@@ -60,7 +59,7 @@ const writeStorage = (value: Scoreboard) => {
 
 export const useScoreboardStore = defineStore('scoreboard', () => {
   const scoreboard = ref<Scoreboard>({ ...defaultScoreboard });
-  const replicantRef = scoreboardReplicant?.data as unknown as Ref<Scoreboard | undefined> | undefined;
+  const replicant = scoreboardReplicant;
   const storageSnapshot = readStorage();
   if (storageSnapshot) {
     scoreboard.value = storageSnapshot;
@@ -69,7 +68,7 @@ export const useScoreboardStore = defineStore('scoreboard', () => {
   const isApplyingReplicant = ref(false);
 
   watch(
-    () => replicantRef?.value,
+    () => replicant?.data,
     (value) => {
       if (!value) {
         return;
@@ -86,10 +85,11 @@ export const useScoreboardStore = defineStore('scoreboard', () => {
     scoreboard,
     (value) => {
       writeStorage(value);
-      if (isApplyingReplicant.value || !replicantRef) {
+      if (isApplyingReplicant.value || !replicant) {
         return;
       }
-      replicantRef.value = normalizeScoreboard(value);
+      replicant.data = normalizeScoreboard(value);
+      replicant.save();
     },
     { deep: true, flush: 'sync' }
   );

src/graphics/scoreboard/main.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
 import { computed } from 'vue';
-import type { Ref } from 'vue';
 import { playersReplicant, scoreboardReplicant } from '../../browser_shared/replicants';
 import type { Schemas } from '../../types';
 
@@ -17,11 +16,8 @@ const defaultScoreboard: Schemas.Scoreboard = {
   round: '',
 };
 
-const playersData = playersReplicant?.data as unknown as Ref<Schemas.Players | undefined> | undefined;
-const scoreboardData = scoreboardReplicant?.data as unknown as Ref<Schemas.Scoreboard | undefined> | undefined;
-
-const players = computed<Schemas.Players>(() => playersData?.value ?? {});
-const scoreboard = computed<Schemas.Scoreboard>(() => scoreboardData?.value ?? defaultScoreboard);
+const players = computed<Schemas.Players>(() => playersReplicant?.data ?? {});
+const scoreboard = computed<Schemas.Scoreboard>(() => scoreboardReplicant?.data ?? defaultScoreboard);
 
 const leftName = computed(() => {
   if (scoreboard.value.leftNameOverride) {