From 46caf9cd81914e86d798b92b2e6744b3f9626e0e Mon Sep 17 00:00:00 2001 From: Cal Corum Date: Sat, 7 Feb 2026 23:50:24 -0600 Subject: [PATCH] CLAUDE: Update color scheme - red for runners, blue for catcher Runner highlights and cards: - Pills: red-500 ring, red-50 background when selected - Full cards: red gradient (red-900 to red-950), red-600 border - Pulse glow: red animation (rgba(239, 68, 68)) - Hardcoded red color (#ef4444) for runner pill borders Catcher highlights and cards: - Pill: blue-500 ring, blue-50 background when selected - Full card: blue gradient (blue-900 to blue-950), blue-600 border - Pulse glow: blue animation (rgba(59, 130, 246)) Updated tests to expect new colors All 15 RunnersOnBase tests passing All 16 RunnerCard tests passing --- frontend-sba/components/Game/RunnerCard.vue | 4 +-- .../components/Game/RunnersOnBase.vue | 30 +++++++++---------- .../components/Game/RunnersOnBase.spec.ts | 16 +++++----- 3 files changed, 26 insertions(+), 24 deletions(-) diff --git a/frontend-sba/components/Game/RunnerCard.vue b/frontend-sba/components/Game/RunnerCard.vue index 1a6f2eb..39c08b6 100644 --- a/frontend-sba/components/Game/RunnerCard.vue +++ b/frontend-sba/components/Game/RunnerCard.vue @@ -95,11 +95,11 @@ function handleClick() { } .runner-pill.occupied { - @apply cursor-pointer hover:bg-blue-50; + @apply cursor-pointer hover:bg-red-50; } .runner-pill.selected { - @apply ring-2 ring-blue-500 bg-blue-50 shadow-md; + @apply ring-2 ring-red-500 bg-red-50 shadow-md; } .runner-pill.empty { diff --git a/frontend-sba/components/Game/RunnersOnBase.vue b/frontend-sba/components/Game/RunnersOnBase.vue index 0cb1804..40809cd 100644 --- a/frontend-sba/components/Game/RunnersOnBase.vue +++ b/frontend-sba/components/Game/RunnersOnBase.vue @@ -12,7 +12,7 @@ :base="baseLabels[idx]" :runner="runners[key]" :is-selected="selectedRunner === key" - :team-color="battingTeamColor" + :team-color="'#ef4444'" @click="toggleRunner(key)" /> @@ -22,7 +22,7 @@
@@ -46,9 +46,9 @@
- -
-
+ +
+
{{ battingTeamAbbrev }} @@ -62,15 +62,15 @@ :alt="`${selectedRunnerName} card`" class="w-full h-auto" > -
+
{{ selectedRunnerInitials }}
- -
-
+ +
+
{{ fieldingTeamAbbrev }} @@ -84,7 +84,7 @@ :alt="`${catcherName} card`" class="w-full h-auto" > -
+
{{ getCatcherInitials }}
@@ -266,20 +266,20 @@ watch(() => props.runners, (newRunners) => { animation: expandHeight 0.3s cubic-bezier(0.4, 0, 0.2, 1) reverse; } -.matchup-card { - animation: pulseGlowGreen 2s ease-in-out infinite; +.matchup-card-red { + animation: pulseGlowRed 2s ease-in-out infinite; } .matchup-card-blue { animation: pulseGlowBlue 2s ease-in-out infinite; } -@keyframes pulseGlowGreen { +@keyframes pulseGlowRed { 0%, 100% { - box-shadow: 0 0 15px 2px rgba(16, 185, 129, 0.5), 0 10px 25px -5px rgba(0, 0, 0, 0.3); + box-shadow: 0 0 15px 2px rgba(239, 68, 68, 0.5), 0 10px 25px -5px rgba(0, 0, 0, 0.3); } 50% { - box-shadow: 0 0 30px 8px rgba(16, 185, 129, 0.7), 0 10px 25px -5px rgba(0, 0, 0, 0.3); + box-shadow: 0 0 30px 8px rgba(239, 68, 68, 0.7), 0 10px 25px -5px rgba(0, 0, 0, 0.3); } } diff --git a/frontend-sba/tests/unit/components/Game/RunnersOnBase.spec.ts b/frontend-sba/tests/unit/components/Game/RunnersOnBase.spec.ts index 6bd22fa..e61ba13 100644 --- a/frontend-sba/tests/unit/components/Game/RunnersOnBase.spec.ts +++ b/frontend-sba/tests/unit/components/Game/RunnersOnBase.spec.ts @@ -207,8 +207,9 @@ describe("RunnersOnBase", () => { }); const runnerCards = wrapper.findAllComponents(RunnerCard); + // Runner cards now use hardcoded red (#ef4444) instead of battingTeamColor runnerCards.forEach((card) => { - expect(card.props("teamColor")).toBe("#ff0000"); + expect(card.props("teamColor")).toBe("#ef4444"); }); }); }); @@ -338,9 +339,9 @@ describe("RunnersOnBase", () => { await runnerCards[0].trigger("click"); // When runner selected, expanded detail row shows both runner + catcher cards - // matchup-card is catcher (green), matchup-card-blue is runner (blue) - expect(wrapper.find(".matchup-card-blue").exists()).toBe(true); // Runner full card - expect(wrapper.find(".matchup-card").exists()).toBe(true); // Catcher full card + // matchup-card-red is runner (red), matchup-card-blue is catcher (blue) + expect(wrapper.find(".matchup-card-red").exists()).toBe(true); // Runner full card + expect(wrapper.find(".matchup-card-blue").exists()).toBe(true); // Catcher full card }); it("hides expanded detail row when runner is deselected", async () => { @@ -403,8 +404,8 @@ describe("RunnersOnBase", () => { // Click to show expanded view await runnerCards[0].trigger("click"); await wrapper.vm.$nextTick(); - expect(wrapper.find(".matchup-card-blue").exists()).toBe(true); - expect(wrapper.find(".matchup-card").exists()).toBe(true); + expect(wrapper.find(".matchup-card-red").exists()).toBe(true); // Runner (red) + expect(wrapper.find(".matchup-card-blue").exists()).toBe(true); // Catcher (blue) // Click again to toggle selection off - Transition may keep elements during animation await runnerCards[0].trigger("click"); @@ -578,7 +579,8 @@ describe("RunnersOnBase", () => { }); const runnerCards = wrapper.findAllComponents(RunnerCard); - expect(runnerCards[0].props("teamColor")).toBe("#3b82f6"); + // Runner cards now use red (#ef4444) instead of blue + expect(runnerCards[0].props("teamColor")).toBe("#ef4444"); }); }); });