diff --git a/frontend-sba/components/Game/RunnersOnBase.vue b/frontend-sba/components/Game/RunnersOnBase.vue index 9cecd2d..0cb1804 100644 --- a/frontend-sba/components/Game/RunnersOnBase.vue +++ b/frontend-sba/components/Game/RunnersOnBase.vue @@ -45,74 +45,47 @@ -
- -
-
-
- - {{ fieldingTeamAbbrev }} - - C - {{ catcherName }} -
-
- -
- {{ getCatcherInitials }} -
+
+ +
+
+ + {{ battingTeamAbbrev }} + + {{ selectedBase }} + {{ selectedRunnerName }} +
+
+ +
+ {{ selectedRunnerInitials }}
- -
- -
-
- - {{ battingTeamAbbrev }} - - {{ selectedBase }} - {{ selectedRunnerName }} -
-
- -
- {{ selectedRunnerInitials }} -
-
+ +
+
+ + {{ fieldingTeamAbbrev }} + + C + {{ catcherName }}
- - -
-
- - {{ fieldingTeamAbbrev }} - - C - {{ catcherName }} -
-
- -
- {{ getCatcherInitials }} -
+
+ +
+ {{ getCatcherInitials }}
@@ -202,10 +175,26 @@ const getCatcherInitials = computed(() => { return catcherPlayer.value.name.substring(0, 2).toUpperCase() }) +// Lead runner determination (for catcher-only selection) +const leadRunnerBase = computed(() => { + if (props.runners.third) return 'third' + if (props.runners.second) return 'second' + if (props.runners.first) return 'first' + return null +}) + +// Displayed runner: selected runner OR lead runner (when catcher selected) +const displayedRunnerBase = computed(() => { + if (selectedRunner.value === 'catcher') { + return leadRunnerBase.value + } + return selectedRunner.value +}) + // Selected runner data resolution (mirrors catcher pattern) const selectedRunnerState = computed(() => { - if (!selectedRunner.value) return null - return props.runners[selectedRunner.value] + if (!displayedRunnerBase.value || displayedRunnerBase.value === 'catcher') return null + return props.runners[displayedRunnerBase.value] }) const selectedRunnerLineup = computed(() => { @@ -215,11 +204,14 @@ const selectedRunnerLineup = computed(() => { const selectedRunnerPlayer = computed(() => selectedRunnerLineup.value?.player ?? null) +// For display: use displayedRunnerBase instead of selectedRunner +const displayedRunnerPlayer = computed(() => selectedRunnerPlayer.value) + const selectedRunnerName = computed(() => selectedRunnerPlayer.value?.name ?? 'Unknown Runner') const selectedBase = computed(() => { - if (!selectedRunner.value) return '' - return baseNameToLabel[selectedRunner.value] ?? '' + if (!displayedRunnerBase.value || displayedRunnerBase.value === 'catcher') return '' + return baseNameToLabel[displayedRunnerBase.value] ?? '' }) const selectedRunnerInitials = computed(() => {