cal/strat-gameplay-webapp
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

CLAUDE: Update color scheme - red for runners, blue for catcher

Browse Source 
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
This commit is contained in:
Cal Corum 2026-02-07 23:50:24 -06:00
parent 6b86afe5e4
commit 46caf9cd81
3 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend-sba/components/Game/RunnerCard.vue
View File

@ -95,11 +95,11 @@ function handleClick() {
} }
.runner-pill.occupied { .runner-pill.occupied {
@apply cursor-pointer hover:bg-blue-50; @apply cursor-pointer hover:bg-red-50;
} }
.runner-pill.selected { .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 { .runner-pill.empty {

30
frontend-sba/components/Game/RunnersOnBase.vue
View File

@ -12,7 +12,7 @@
:base="baseLabels[idx]" :base="baseLabels[idx]"
:runner="runners[key]" :runner="runners[key]"
:is-selected="selectedRunner === key" :is-selected="selectedRunner === key"
:team-color="battingTeamColor" :team-color="'#ef4444'"
@click="toggleRunner(key)" @click="toggleRunner(key)"
/> />
</div> </div>
@ -22,7 +22,7 @@
<div <div
:class="[ :class="[
'catcher-pill h-full flex flex-col items-center justify-center p-2 rounded-lg border shadow-sm text-center cursor-pointer transition-all duration-200', 'catcher-pill h-full flex flex-col items-center justify-center p-2 rounded-lg border shadow-sm text-center cursor-pointer transition-all duration-200',
selectedRunner === 'catcher' ? 'bg-green-50 border-green-500 ring-2 ring-green-500' : 'bg-white border-gray-200 hover:bg-green-50' selectedRunner === 'catcher' ? 'bg-blue-50 border-blue-500 ring-2 ring-blue-500' : 'bg-white border-gray-200 hover:bg-blue-50'
]" ]"
@click="toggleCatcher" @click="toggleCatcher"
> >
@ -46,9 +46,9 @@
<!-- EXPANDED ROW: Runner card + Catcher card side by side (when a runner or catcher is selected) --> <!-- EXPANDED ROW: Runner card + Catcher card side by side (when a runner or catcher is selected) -->
<Transition name="expand"> <Transition name="expand">
<div v-if="hasSelection && displayedRunnerPlayer" class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3"> <div v-if="hasSelection && displayedRunnerPlayer" class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
<!-- Lead/Selected Runner full card --> <!-- Lead/Selected Runner full card (RED) -->
<div class="matchup-card-blue bg-gradient-to-b from-blue-900 to-blue-950 border-2 border-blue-600 rounded-xl overflow-hidden shadow-lg"> <div class="matchup-card-red bg-gradient-to-b from-red-900 to-red-950 border-2 border-red-600 rounded-xl overflow-hidden shadow-lg">
<div class="bg-blue-800/80 px-3 py-2 flex items-center gap-2 text-white text-sm font-semibold"> <div class="bg-red-800/80 px-3 py-2 flex items-center gap-2 text-white text-sm font-semibold">
<span class="font-bold text-white/90" :style="{ color: battingTeamColor }"> <span class="font-bold text-white/90" :style="{ color: battingTeamColor }">
{{ battingTeamAbbrev }} {{ battingTeamAbbrev }}
</span> </span>
@ -62,15 +62,15 @@
:alt="`${selectedRunnerName} card`" :alt="`${selectedRunnerName} card`"
class="w-full h-auto" class="w-full h-auto"
> >
<div v-else class="w-full aspect-[4/5.5] bg-gradient-to-br from-blue-700 to-blue-900 flex items-center justify-center"> <div v-else class="w-full aspect-[4/5.5] bg-gradient-to-br from-red-700 to-red-900 flex items-center justify-center">
<span class="text-5xl font-bold text-white/60">{{ selectedRunnerInitials }}</span> <span class="text-5xl font-bold text-white/60">{{ selectedRunnerInitials }}</span>
</div> </div>
</div> </div>
</div> </div>
<!-- Catcher full card --> <!-- Catcher full card (BLUE) -->
<div class="matchup-card bg-gradient-to-b from-green-900 to-green-950 border-2 border-green-600 rounded-xl overflow-hidden shadow-lg"> <div class="matchup-card-blue bg-gradient-to-b from-blue-900 to-blue-950 border-2 border-blue-600 rounded-xl overflow-hidden shadow-lg">
<div class="bg-green-800/80 px-3 py-2 flex items-center gap-2 text-white text-sm font-semibold"> <div class="bg-blue-800/80 px-3 py-2 flex items-center gap-2 text-white text-sm font-semibold">
<span class="font-bold text-white/90" :style="{ color: fieldingTeamColor }"> <span class="font-bold text-white/90" :style="{ color: fieldingTeamColor }">
{{ fieldingTeamAbbrev }} {{ fieldingTeamAbbrev }}
</span> </span>
@ -84,7 +84,7 @@
:alt="`${catcherName} card`" :alt="`${catcherName} card`"
class="w-full h-auto" class="w-full h-auto"
> >
<div v-else class="w-full aspect-[4/5.5] bg-gradient-to-br from-green-700 to-green-900 flex items-center justify-center"> <div v-else class="w-full aspect-[4/5.5] bg-gradient-to-br from-blue-700 to-blue-900 flex items-center justify-center">
<span class="text-5xl font-bold text-white/60">{{ getCatcherInitials }}</span> <span class="text-5xl font-bold text-white/60">{{ getCatcherInitials }}</span>
</div> </div>
</div> </div>
@ -266,20 +266,20 @@ watch(() => props.runners, (newRunners) => {
animation: expandHeight 0.3s cubic-bezier(0.4, 0, 0.2, 1) reverse; animation: expandHeight 0.3s cubic-bezier(0.4, 0, 0.2, 1) reverse;
} }
.matchup-card { .matchup-card-red {
animation: pulseGlowGreen 2s ease-in-out infinite; animation: pulseGlowRed 2s ease-in-out infinite;
} }
.matchup-card-blue { .matchup-card-blue {
animation: pulseGlowBlue 2s ease-in-out infinite; animation: pulseGlowBlue 2s ease-in-out infinite;
} }
@keyframes pulseGlowGreen { @keyframes pulseGlowRed {
0%, 100% { 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% { 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);
} }
} }

16
frontend-sba/tests/unit/components/Game/RunnersOnBase.spec.ts
View File

@ -207,8 +207,9 @@ describe("RunnersOnBase", () => {
}); });
const runnerCards = wrapper.findAllComponents(RunnerCard); const runnerCards = wrapper.findAllComponents(RunnerCard);
// Runner cards now use hardcoded red (#ef4444) instead of battingTeamColor
runnerCards.forEach((card) => { 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"); await runnerCards[0].trigger("click");
// When runner selected, expanded detail row shows both runner + catcher cards // When runner selected, expanded detail row shows both runner + catcher cards
// matchup-card is catcher (green), matchup-card-blue is runner (blue) // matchup-card-red is runner (red), matchup-card-blue is catcher (blue)
expect(wrapper.find(".matchup-card-blue").exists()).toBe(true); // Runner full card expect(wrapper.find(".matchup-card-red").exists()).toBe(true); // Runner full card
expect(wrapper.find(".matchup-card").exists()).toBe(true); // Catcher full card expect(wrapper.find(".matchup-card-blue").exists()).toBe(true); // Catcher full card
}); });
it("hides expanded detail row when runner is deselected", async () => { it("hides expanded detail row when runner is deselected", async () => {
@ -403,8 +404,8 @@ describe("RunnersOnBase", () => {
// Click to show expanded view // Click to show expanded view
await runnerCards[0].trigger("click"); await runnerCards[0].trigger("click");
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
expect(wrapper.find(".matchup-card-blue").exists()).toBe(true); expect(wrapper.find(".matchup-card-red").exists()).toBe(true); // Runner (red)
expect(wrapper.find(".matchup-card").exists()).toBe(true); expect(wrapper.find(".matchup-card-blue").exists()).toBe(true); // Catcher (blue)
// Click again to toggle selection off - Transition may keep elements during animation // Click again to toggle selection off - Transition may keep elements during animation
await runnerCards[0].trigger("click"); await runnerCards[0].trigger("click");
@ -578,7 +579,8 @@ describe("RunnersOnBase", () => {
}); });
const runnerCards = wrapper.findAllComponents(RunnerCard); 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");
}); });
}); });
}); });