2d4dbe82eb
- Rewrite DefensiveSetup as inline segmented controls (~120px vs ~340px) - Fix bug: read game state from useGameStore() instead of never-passed prop - Remove turn indicator banner from DecisionPanel (replaced by green glow ring) - Emoji fix: shield -> baseball glove - Confirm button matches Roll Dice style (full-width, prominent) - Infield options only show IF In/Corners when runner on 3rd - Outfield row only renders in walk-off scenarios - Hold pills only render for occupied bases - 20 tests rewritten with Pinia store integration Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
258 lines
13 KiB
HTML
258 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Turn Indicator — Design Options</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body { background: #111827; }
|
|
.mockup-card { max-width: 400px; margin: 0 auto; }
|
|
.btn-selected { background: linear-gradient(to right, #1e40af, #2563eb); }
|
|
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
.pulse-dot { animation: pulse-dot 1.5s ease-in-out infinite; }
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
.shimmer-border {
|
|
background: linear-gradient(90deg, #22c55e, #86efac, #22c55e);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 2s linear infinite;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-gray-100 p-4">
|
|
<div class="max-w-lg mx-auto space-y-12">
|
|
|
|
<h1 class="text-2xl font-bold text-center text-white mb-2">Turn Indicator — Design Options</h1>
|
|
<p class="text-sm text-gray-400 text-center mb-8">Alternatives to the big green "Your Defensive Turn" banner. All shown with the compact Defense card below.</p>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- CURRENT: Big green banner (for comparison) -->
|
|
<!-- ============================================================ -->
|
|
<div class="border-t border-gray-700 pt-6">
|
|
<h2 class="text-lg font-bold text-red-400 mb-1">Current Design</h2>
|
|
<p class="text-xs text-gray-400 mb-4">~80px green banner above the card. Redundant — the card already implies it's your turn.</p>
|
|
|
|
<div class="mockup-card space-y-4">
|
|
<!-- Turn indicator banner -->
|
|
<div class="rounded-xl shadow-lg p-4 text-center bg-gradient-to-r from-green-600 to-green-700 text-white">
|
|
<div class="flex items-center justify-center gap-3">
|
|
<span class="text-3xl">✋</span>
|
|
<div>
|
|
<h2 class="text-xl font-bold">Your Defensive Turn</h2>
|
|
<p class="text-sm opacity-90 mt-0.5">Set your defensive positioning and strategy</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Defense card -->
|
|
<div class="bg-gray-800 rounded-xl shadow-lg p-4 space-y-3">
|
|
<div class="flex items-center">
|
|
<h3 class="text-base font-bold text-white flex items-center gap-2">🧤 Defense</h3>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-400 w-14 flex-shrink-0">Infield</span>
|
|
<div class="flex flex-1 rounded-lg overflow-hidden border border-gray-600">
|
|
<button class="flex-1 py-2 text-xs font-medium btn-selected text-white">Normal</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-400 w-14 flex-shrink-0">Hold</span>
|
|
<div class="flex gap-1.5">
|
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-blue-500 btn-selected text-white">1B</button>
|
|
</div>
|
|
<div class="flex-1"></div>
|
|
<button class="px-4 py-1.5 text-sm font-semibold bg-green-600 text-white rounded-lg">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- OPTION A: No separate indicator — green left accent border -->
|
|
<!-- ============================================================ -->
|
|
<div class="border-t border-gray-700 pt-6">
|
|
<h2 class="text-lg font-bold text-emerald-400 mb-1">Option A: Green Left Accent</h2>
|
|
<p class="text-xs text-gray-400 mb-4">No separate banner. A green left border on the card itself signals "action needed". Saves ~84px of vertical space.</p>
|
|
|
|
<div class="mockup-card">
|
|
<div class="bg-gray-800 rounded-xl shadow-lg p-4 space-y-3 border-l-4 border-green-500">
|
|
<div class="flex items-center">
|
|
<h3 class="text-base font-bold text-white flex items-center gap-2">🧤 Defense</h3>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-400 w-14 flex-shrink-0">Infield</span>
|
|
<div class="flex flex-1 rounded-lg overflow-hidden border border-gray-600">
|
|
<button class="flex-1 py-2 text-xs font-medium btn-selected text-white">Normal</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-400 w-14 flex-shrink-0">Hold</span>
|
|
<div class="flex gap-1.5">
|
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-blue-500 btn-selected text-white">1B</button>
|
|
</div>
|
|
<div class="flex-1"></div>
|
|
<button class="px-4 py-1.5 text-sm font-semibold bg-green-600 text-white rounded-lg">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- OPTION B: Pulsing dot + "Your Turn" badge in card header -->
|
|
<!-- ============================================================ -->
|
|
<div class="border-t border-gray-700 pt-6">
|
|
<h2 class="text-lg font-bold text-emerald-400 mb-1">Option B: Pulsing Dot + Badge</h2>
|
|
<p class="text-xs text-gray-400 mb-4">A small pulsing green dot and "Your Turn" pill badge integrated into the card header. Draws attention without a full banner.</p>
|
|
|
|
<div class="mockup-card">
|
|
<div class="bg-gray-800 rounded-xl shadow-lg p-4 space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-base font-bold text-white flex items-center gap-2">
|
|
<span class="relative flex h-2.5 w-2.5">
|
|
<span class="pulse-dot absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500"></span>
|
|
</span>
|
|
🧤 Defense
|
|
</h3>
|
|
<span class="px-2 py-0.5 text-[10px] font-semibold rounded-full bg-green-500/20 text-green-400 uppercase tracking-wider">Your Turn</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-400 w-14 flex-shrink-0">Infield</span>
|
|
<div class="flex flex-1 rounded-lg overflow-hidden border border-gray-600">
|
|
<button class="flex-1 py-2 text-xs font-medium btn-selected text-white">Normal</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-400 w-14 flex-shrink-0">Hold</span>
|
|
<div class="flex gap-1.5">
|
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-blue-500 btn-selected text-white">1B</button>
|
|
</div>
|
|
<div class="flex-1"></div>
|
|
<button class="px-4 py-1.5 text-sm font-semibold bg-green-600 text-white rounded-lg">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- OPTION C: Shimmer top border accent -->
|
|
<!-- ============================================================ -->
|
|
<div class="border-t border-gray-700 pt-6">
|
|
<h2 class="text-lg font-bold text-emerald-400 mb-1">Option C: Animated Top Border</h2>
|
|
<p class="text-xs text-gray-400 mb-4">A thin animated green shimmer along the top edge of the card. Subtle but eye-catching. No extra text.</p>
|
|
|
|
<div class="mockup-card">
|
|
<div class="rounded-xl overflow-hidden shadow-lg">
|
|
<!-- Shimmer border strip -->
|
|
<div class="h-1 shimmer-border"></div>
|
|
<div class="bg-gray-800 p-4 space-y-3">
|
|
<div class="flex items-center">
|
|
<h3 class="text-base font-bold text-white flex items-center gap-2">🧤 Defense</h3>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-400 w-14 flex-shrink-0">Infield</span>
|
|
<div class="flex flex-1 rounded-lg overflow-hidden border border-gray-600">
|
|
<button class="flex-1 py-2 text-xs font-medium btn-selected text-white">Normal</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-400 w-14 flex-shrink-0">Hold</span>
|
|
<div class="flex gap-1.5">
|
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-blue-500 btn-selected text-white">1B</button>
|
|
</div>
|
|
<div class="flex-1"></div>
|
|
<button class="px-4 py-1.5 text-sm font-semibold bg-green-600 text-white rounded-lg">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- OPTION D: Accent border + badge (A + B combined) -->
|
|
<!-- ============================================================ -->
|
|
<div class="border-t border-gray-700 pt-6">
|
|
<h2 class="text-lg font-bold text-emerald-400 mb-1">Option D: Left Accent + Badge</h2>
|
|
<p class="text-xs text-gray-400 mb-4">Combines the green left border with the "Your Turn" badge. Maximum clarity without a separate component.</p>
|
|
|
|
<div class="mockup-card">
|
|
<div class="bg-gray-800 rounded-xl shadow-lg p-4 space-y-3 border-l-4 border-green-500">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="text-base font-bold text-white flex items-center gap-2">🧤 Defense</h3>
|
|
<span class="px-2 py-0.5 text-[10px] font-semibold rounded-full bg-green-500/20 text-green-400 uppercase tracking-wider">Your Turn</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-400 w-14 flex-shrink-0">Infield</span>
|
|
<div class="flex flex-1 rounded-lg overflow-hidden border border-gray-600">
|
|
<button class="flex-1 py-2 text-xs font-medium btn-selected text-white">Normal</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-400 w-14 flex-shrink-0">Hold</span>
|
|
<div class="flex gap-1.5">
|
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-blue-500 btn-selected text-white">1B</button>
|
|
</div>
|
|
<div class="flex-1"></div>
|
|
<button class="px-4 py-1.5 text-sm font-semibold bg-green-600 text-white rounded-lg">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- OPTION E: Glowing ring -->
|
|
<!-- ============================================================ -->
|
|
<div class="border-t border-gray-700 pt-6">
|
|
<h2 class="text-lg font-bold text-emerald-400 mb-1">Option E: Glowing Ring</h2>
|
|
<p class="text-xs text-gray-400 mb-4">The entire card gets a subtle green glow/ring. Clearly "active" vs the other cards on screen without any extra text or elements.</p>
|
|
|
|
<div class="mockup-card">
|
|
<div class="bg-gray-800 rounded-xl shadow-lg p-4 space-y-3 ring-2 ring-green-500/60 shadow-green-500/20 shadow-lg">
|
|
<div class="flex items-center">
|
|
<h3 class="text-base font-bold text-white flex items-center gap-2">🧤 Defense</h3>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-400 w-14 flex-shrink-0">Infield</span>
|
|
<div class="flex flex-1 rounded-lg overflow-hidden border border-gray-600">
|
|
<button class="flex-1 py-2 text-xs font-medium btn-selected text-white">Normal</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-400 w-14 flex-shrink-0">Hold</span>
|
|
<div class="flex gap-1.5">
|
|
<button class="px-3 py-1.5 text-xs font-medium rounded-full border border-blue-500 btn-selected text-white">1B</button>
|
|
</div>
|
|
<div class="flex-1"></div>
|
|
<button class="px-4 py-1.5 text-sm font-semibold bg-green-600 text-white rounded-lg">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================================================ -->
|
|
<!-- COMPARISON: Opponent's turn / Waiting state -->
|
|
<!-- ============================================================ -->
|
|
<div class="border-t border-gray-700 pt-6 pb-12">
|
|
<h2 class="text-lg font-bold text-yellow-400 mb-1">Contrast: Opponent's Turn</h2>
|
|
<p class="text-xs text-gray-400 mb-4">For comparison — what the waiting state looks like when it's NOT your turn. The contrast makes the green treatments above stand out.</p>
|
|
|
|
<div class="mockup-card">
|
|
<div class="bg-gray-800 rounded-xl shadow-lg p-8 text-center opacity-70">
|
|
<div class="text-4xl mb-3">⏳</div>
|
|
<h3 class="text-sm font-semibold text-gray-400">Waiting for Opponent</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|