Persist character selections per game in scoreboard panel

src/dashboard/example/components/ScoreboardPanel.vue

@@ -27,6 +27,7 @@ const rightCountryOptions = ref(countryOptions);
 const leftCharacterInput = ref('');
 const rightCharacterInput = ref('');
 const gameInput = ref('');
+const charactersByGame = ref<Record<string, { leftCharacter: string; rightCharacter: string }>>({});
 
 const allFightingGameOptions = [
   'Street Fighter 6',
@@ -643,18 +644,33 @@ watch(
 
 watch(
   () => scoreboardStore.scoreboard.game,
-  () => {
+  (newGame, previousGame) => {
+    if (previousGame) {
+      charactersByGame.value[previousGame] = {
+        leftCharacter: scoreboardStore.scoreboard.leftCharacter,
+        rightCharacter: scoreboardStore.scoreboard.rightCharacter,
+      };
+    }
+
     const options = getCharactersByGame(scoreboardStore.scoreboard.game);
     leftCharacterOptions.value = options;
     rightCharacterOptions.value = options;
     const allowed = new Set(options.map((option) => option.value));
+    const savedCharacters = newGame ? charactersByGame.value[newGame] : undefined;
 
-    if (!allowed.has(scoreboardStore.scoreboard.leftCharacter)) {
+    const nextLeftCharacter = savedCharacters?.leftCharacter ?? '';
+    const nextRightCharacter = savedCharacters?.rightCharacter ?? '';
+
+    if (allowed.has(nextLeftCharacter)) {
+      scoreboardStore.scoreboard.leftCharacter = nextLeftCharacter;
+    } else if (!allowed.has(scoreboardStore.scoreboard.leftCharacter)) {
       scoreboardStore.scoreboard.leftCharacter = '';
       leftCharacterInput.value = '';
     }
 
-    if (!allowed.has(scoreboardStore.scoreboard.rightCharacter)) {
+    if (allowed.has(nextRightCharacter)) {
+      scoreboardStore.scoreboard.rightCharacter = nextRightCharacter;
+    } else if (!allowed.has(scoreboardStore.scoreboard.rightCharacter)) {
       scoreboardStore.scoreboard.rightCharacter = '';
       rightCharacterInput.value = '';
     }
@@ -667,6 +683,16 @@ watch(
   (value) => {
     const match = characterOptions.value.find((option) => option.value === value);
     leftCharacterInput.value = match?.label ?? '';
+
+    const currentGame = scoreboardStore.scoreboard.game;
+    if (!currentGame) {
+      return;
+    }
+
+    charactersByGame.value[currentGame] = {
+      leftCharacter: value,
+      rightCharacter: scoreboardStore.scoreboard.rightCharacter,
+    };
   },
   { immediate: true },
 );
@@ -676,6 +702,16 @@ watch(
   (value) => {
     const match = characterOptions.value.find((option) => option.value === value);
     rightCharacterInput.value = match?.label ?? '';
+
+    const currentGame = scoreboardStore.scoreboard.game;
+    if (!currentGame) {
+      return;
+    }
+
+    charactersByGame.value[currentGame] = {
+      leftCharacter: scoreboardStore.scoreboard.leftCharacter,
+      rightCharacter: value,
+    };
   },
   { immediate: true },
 );