feat: implement replicant state synchronization for commentary, players, scoreboard, and graphics settings

- Added a new service for synchronizing state with replicants in `replicant-state-service.ts`.
- Refactored commentary store to utilize the new synchronization service.
- Created a new graphics settings store that syncs with replicants.
- Introduced a packs store for managing installed packs and their states.
- Updated players and scoreboard stores to use the new synchronization service.
- Created shared services for managing replicated state in graphics components.
- Refactored existing components to use the new shared services for replicant state.
- Added normalization and default values for commentary, graphics settings, players, and scoreboard.
- Improved type safety and organization in shared domain files for better maintainability.

src/dashboard/stores/scoreboard.ts

@@ -1,107 +1,102 @@
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
-import { scoreboardReplicant } from '../../nodecg/browser/replicants';
-import type { Schemas } from '../../types';
-import { readStorageSnapshot, syncStateWithReplicant } from './store-sync';
-
-type Scoreboard = Schemas.Scoreboard;
+import {
+  adjustScoreboardScore,
+  defaultScoreboard,
+  normalizeScoreboard,
+  resetScoreboardScores,
+  setScoreboardScore,
+  swapScoreboardPlayers,
+  type Scoreboard,
+  type ScoreboardSide,
+} from '../../shared/domain/scoreboard';
+import { readStorageSnapshot, syncScoreboardState } from '../services/replicant-state-service';
 
 const STORAGE_KEY = 'scoreko-dev.scoreboard';
 
-const defaultScoreboard: Scoreboard = {
-  leftPlayerId: '',
-  rightPlayerId: '',
-  leftNameOverride: '',
-  rightNameOverride: '',
-  leftTeamOverride: '',
-  rightTeamOverride: '',
-  leftCountryOverride: '',
-  rightCountryOverride: '',
-  leftCharacter: '',
-  rightCharacter: '',
-  leftScore: 0,
-  rightScore: 0,
-  round: '',
-  game: '',
-};
-
-const normalizeScoreboard = (input: unknown): Scoreboard => {
-  const candidate = typeof input === 'object' && input !== null ? (input as Record<string, unknown>) : {};
-  return {
-    leftPlayerId: typeof candidate.leftPlayerId === 'string' ? candidate.leftPlayerId : '',
-    rightPlayerId: typeof candidate.rightPlayerId === 'string' ? candidate.rightPlayerId : '',
-    leftNameOverride: typeof candidate.leftNameOverride === 'string' ? candidate.leftNameOverride : '',
-    rightNameOverride: typeof candidate.rightNameOverride === 'string' ? candidate.rightNameOverride : '',
-    leftTeamOverride: typeof candidate.leftTeamOverride === 'string' ? candidate.leftTeamOverride : '',
-    rightTeamOverride: typeof candidate.rightTeamOverride === 'string' ? candidate.rightTeamOverride : '',
-    leftCountryOverride: typeof candidate.leftCountryOverride === 'string' ? candidate.leftCountryOverride : '',
-    rightCountryOverride: typeof candidate.rightCountryOverride === 'string' ? candidate.rightCountryOverride : '',
-    leftCharacter: typeof candidate.leftCharacter === 'string' ? candidate.leftCharacter : '',
-    rightCharacter: typeof candidate.rightCharacter === 'string' ? candidate.rightCharacter : '',
-    leftScore: typeof candidate.leftScore === 'number' ? Math.max(0, Math.floor(candidate.leftScore)) : 0,
-    rightScore: typeof candidate.rightScore === 'number' ? Math.max(0, Math.floor(candidate.rightScore)) : 0,
-    round: typeof candidate.round === 'string' ? candidate.round : '',
-    game: typeof candidate.game === 'string' ? candidate.game : '',
-  };
-};
-
 export const useScoreboardStore = defineStore('scoreboard', () => {
   const scoreboard = ref<Scoreboard>({ ...defaultScoreboard });
-  const replicant = scoreboardReplicant;
   const storageSnapshot = readStorageSnapshot(STORAGE_KEY, normalizeScoreboard);
   if (storageSnapshot) {
     scoreboard.value = storageSnapshot;
   }
 
-  syncStateWithReplicant(scoreboard, replicant, normalizeScoreboard, STORAGE_KEY);
+  syncScoreboardState(scoreboard, STORAGE_KEY);
 
-  const setScoreboard = (value: Scoreboard) => {
+  const setScoreboard = (value: Scoreboard): void => {
     scoreboard.value = normalizeScoreboard(value);
   };
 
-  const swapPlayers = () => {
+  const setGame = (value: string): void => {
+    scoreboard.value = { ...scoreboard.value, game: value };
+  };
+
+  const setRound = (value: string): void => {
+    scoreboard.value = { ...scoreboard.value, round: value };
+  };
+
+  const setScore = (side: ScoreboardSide, value: number): void => {
+    scoreboard.value = setScoreboardScore(scoreboard.value, side, value);
+  };
+
+  const adjustScore = (side: ScoreboardSide, delta: number): void => {
+    scoreboard.value = adjustScoreboardScore(scoreboard.value, side, delta);
+  };
+
+  const setSidePlayerId = (side: ScoreboardSide, value: string): void => {
     scoreboard.value = {
       ...scoreboard.value,
-      leftPlayerId: scoreboard.value.rightPlayerId,
-      rightPlayerId: scoreboard.value.leftPlayerId,
-      leftNameOverride: scoreboard.value.rightNameOverride,
-      rightNameOverride: scoreboard.value.leftNameOverride,
-      leftTeamOverride: scoreboard.value.rightTeamOverride,
-      rightTeamOverride: scoreboard.value.leftTeamOverride,
-      leftCountryOverride: scoreboard.value.rightCountryOverride,
-      rightCountryOverride: scoreboard.value.leftCountryOverride,
-      leftCharacter: scoreboard.value.rightCharacter,
-      rightCharacter: scoreboard.value.leftCharacter,
-      leftScore: scoreboard.value.rightScore,
-      rightScore: scoreboard.value.leftScore,
+      [side === 'left' ? 'leftPlayerId' : 'rightPlayerId']: value,
     };
   };
 
-  const resetScores = () => {
+  const setSideNameOverride = (side: ScoreboardSide, value: string): void => {
     scoreboard.value = {
       ...scoreboard.value,
-      leftScore: 0,
-      rightScore: 0,
+      [side === 'left' ? 'leftNameOverride' : 'rightNameOverride']: value,
     };
   };
 
+  const setSideTeamOverride = (side: ScoreboardSide, value: string): void => {
+    scoreboard.value = {
+      ...scoreboard.value,
+      [side === 'left' ? 'leftTeamOverride' : 'rightTeamOverride']: value,
+    };
+  };
+
+  const setSideCountryOverride = (side: ScoreboardSide, value: string): void => {
+    scoreboard.value = {
+      ...scoreboard.value,
+      [side === 'left' ? 'leftCountryOverride' : 'rightCountryOverride']: value,
+    };
+  };
+
+  const setSideCharacter = (side: ScoreboardSide, value: string): void => {
+    scoreboard.value = {
+      ...scoreboard.value,
+      [side === 'left' ? 'leftCharacter' : 'rightCharacter']: value,
+    };
+  };
+
+  const swapPlayers = (): void => {
+    scoreboard.value = swapScoreboardPlayers(scoreboard.value);
+  };
+
+  const resetScores = (): void => {
+    scoreboard.value = resetScoreboardScores(scoreboard.value);
+  };
+
   const leftScore = computed({
     get: () => scoreboard.value.leftScore,
     set: (value: number) => {
-      scoreboard.value = {
-        ...scoreboard.value,
-        leftScore: Math.max(0, Math.floor(value)),
-      };
+      setScore('left', value);
     },
   });
 
   const rightScore = computed({
     get: () => scoreboard.value.rightScore,
     set: (value: number) => {
-      scoreboard.value = {
-        ...scoreboard.value,
-        rightScore: Math.max(0, Math.floor(value)),
-      };
+      setScore('right', value);
     },
   });
 
@@ -110,6 +105,15 @@ export const useScoreboardStore = defineStore('scoreboard', () => {
     leftScore,
     rightScore,
     setScoreboard,
+    setGame,
+    setRound,
+    setScore,
+    adjustScore,
+    setSidePlayerId,
+    setSideNameOverride,
+    setSideTeamOverride,
+    setSideCountryOverride,
+    setSideCharacter,
     swapPlayers,
     resetScores,
   };