Merge pull request #39 from Pandipipas/add-team-and-country-options-to-scoreboardpanel-plhajv

Refactor ScoreboardPanel custom player flow and add team/country overrides

src/dashboard/example/components/ScoreboardPanel.vue

@@ -70,33 +70,35 @@ const playerOptions = computed(() => {
   return base.concat(options);
 });
 
-const leftPlayerOptions = computed(() => {
-  const options = filterOptions(playerOptions.value, leftFilter.value);
-  if (
-    scoreboardStore.scoreboard.leftPlayerId !== CUSTOM_LEFT_PLAYER_ID
-    || !scoreboardStore.scoreboard.leftNameOverride.trim()
-  ) {
+const buildPlayerOptions = (
+  filterValue: string,
+  selectedPlayerId: string,
+  customPlayerId: string,
+  customNameOverride: string,
+) => {
+  const options = filterOptions(playerOptions.value, filterValue);
+  if (selectedPlayerId !== customPlayerId || !customNameOverride.trim()) {
     return options;
   }
   return [{
-    value: CUSTOM_LEFT_PLAYER_ID,
-    label: scoreboardStore.scoreboard.leftNameOverride,
+    value: customPlayerId,
+    label: customNameOverride,
   }].concat(options);
-});
+};
 
-const rightPlayerOptions = computed(() => {
-  const options = filterOptions(playerOptions.value, rightFilter.value);
-  if (
-    scoreboardStore.scoreboard.rightPlayerId !== CUSTOM_RIGHT_PLAYER_ID
-    || !scoreboardStore.scoreboard.rightNameOverride.trim()
-  ) {
-    return options;
-  }
-  return [{
-    value: CUSTOM_RIGHT_PLAYER_ID,
-    label: scoreboardStore.scoreboard.rightNameOverride,
-  }].concat(options);
-});
+const leftPlayerOptions = computed(() => buildPlayerOptions(
+  leftFilter.value,
+  scoreboardStore.scoreboard.leftPlayerId,
+  CUSTOM_LEFT_PLAYER_ID,
+  scoreboardStore.scoreboard.leftNameOverride,
+));
+
+const rightPlayerOptions = computed(() => buildPlayerOptions(
+  rightFilter.value,
+  scoreboardStore.scoreboard.rightPlayerId,
+  CUSTOM_RIGHT_PLAYER_ID,
+  scoreboardStore.scoreboard.rightNameOverride,
+));
 
 const leftSelectedPlayer = computed(() => playersStore.players[scoreboardStore.scoreboard.leftPlayerId]);
 const rightSelectedPlayer = computed(() => playersStore.players[scoreboardStore.scoreboard.rightPlayerId]);
@@ -187,46 +189,70 @@ const startRightCustomPlayer = () => {
   }
 };
 
-const onLeftFilter = (val: string, update: (fn: () => void) => void) => {
+const filterPlayerInput = (
+  val: string,
+  update: (fn: () => void) => void,
+  filterValue: Ref<string>,
+  focused: Ref<boolean>,
+  inputValue: Ref<string>,
+  selectedPlayerId: string,
+  customPlayerId: string,
+  customNameOverride: string,
+  setCustomNameOverride: (value: string) => void,
+  startCustomPlayer: () => void,
+) => {
   update(() => {
-    leftFilter.value = val;
+    filterValue.value = val;
 
-    if (!leftFocused.value) {
+    if (!focused.value) {
       return;
     }
 
-    if (!val.trim() && scoreboardStore.scoreboard.leftPlayerId === CUSTOM_LEFT_PLAYER_ID) {
-      leftInput.value = scoreboardStore.scoreboard.leftNameOverride;
+    if (!val.trim() && selectedPlayerId === customPlayerId) {
+      inputValue.value = customNameOverride;
       return;
     }
 
-    leftInput.value = val;
-    scoreboardStore.scoreboard.leftNameOverride = val;
+    inputValue.value = val;
+    setCustomNameOverride(val);
     if (val.trim()) {
-      startLeftCustomPlayer();
+      startCustomPlayer();
     }
   });
 };
 
+const onLeftFilter = (val: string, update: (fn: () => void) => void) => {
+  filterPlayerInput(
+    val,
+    update,
+    leftFilter,
+    leftFocused,
+    leftInput,
+    scoreboardStore.scoreboard.leftPlayerId,
+    CUSTOM_LEFT_PLAYER_ID,
+    scoreboardStore.scoreboard.leftNameOverride,
+    (value) => {
+      scoreboardStore.scoreboard.leftNameOverride = value;
+    },
+    startLeftCustomPlayer,
+  );
+};
+
 const onRightFilter = (val: string, update: (fn: () => void) => void) => {
-  update(() => {
-    rightFilter.value = val;
-
-    if (!rightFocused.value) {
-      return;
-    }
-
-    if (!val.trim() && scoreboardStore.scoreboard.rightPlayerId === CUSTOM_RIGHT_PLAYER_ID) {
-      rightInput.value = scoreboardStore.scoreboard.rightNameOverride;
-      return;
-    }
-
-    rightInput.value = val;
-    scoreboardStore.scoreboard.rightNameOverride = val;
-    if (val.trim()) {
-      startRightCustomPlayer();
-    }
-  });
+  filterPlayerInput(
+    val,
+    update,
+    rightFilter,
+    rightFocused,
+    rightInput,
+    scoreboardStore.scoreboard.rightPlayerId,
+    CUSTOM_RIGHT_PLAYER_ID,
+    scoreboardStore.scoreboard.rightNameOverride,
+    (value) => {
+      scoreboardStore.scoreboard.rightNameOverride = value;
+    },
+    startRightCustomPlayer,
+  );
 };
 
 const onLeftFocus = () => {