Design SystemPatternsSportsSportsGameCard

SportsGameCard

Reference照 app.opinion.trade 線上產品重建的對照版，用來量測與討論。不是 production 的程式碼。

Production：src/app/[locale]/sports/components/GameCard/index.tsx

Installation

import { GameCard } from "@/components/product/sports-game-card/game-card";

Overview

production /sports 頁的賽事卡，整組 DOM 從 OpinionLabs/frontend 原樣 transplant（code export 名維持 production 原名 GameCard）。 2-way / 3-way 由 outcomes 是否含 Draw 驅動，非獨立 variant；Moneyline 用 Team Identity 色系（team-home / team-away / team-draw）， Spread / Total 線盤按鈕用 Outcome Semantic（outcome-yes / outcome-no），兩套不得混用。 純視覺用途：不接 store / orderbook / API，selected 為卡片本地 state；production 點卡展開 orderbook 的 children slot 為刻意缺口，僅保留 hover overlay。 已知偏離 production 一處（2026-07-17 user 裁決）：outcome 按鈕區 desktop 固定 340px、無線盤時按鈕均分撐滿——production 原為不定寬（w-30 × N），與有線盤卡混排會左緣不齊。 前身手刻 MatchCard 已於本 PR 封存（../opinion-labs-archive/claude-ds-components/）。

Interactive Demo

點 moneyline / 線盤按鈕切換 selected（同卡互斥）；點 Game View、星星、禮物 tooltip 各自獨立。 hover 整張卡會疊 white-04/05 overlay。

LIVE
MLB·Jul 17 at 8:05 pm
3
Los Angeles Dodgers
Los Angeles Dodgers
1
New York Yankees
New York Yankees
FIFA World Cup·Jul 18 at 7:30 pm
Brazil
Brazil
Germany
Germany

Last action: —

Card Variant Matrix

四個維度的有效組合：賽況（live / upcoming）× 盤口（2-way / 3-way）× 線盤（有 / 無）× 隊徽（logo / 國旗）。 3-way + 線盤觸發 h-20 高度組合；live 領先方比分帶 bg-secondary 底色。

Live · 2-way · Spread & Total · 隊 logo · footer actions

LIVE
MLB·Jul 17 at 8:05 pm
3
Los Angeles Dodgers
Los Angeles Dodgers
1
New York Yankees
New York Yankees

Live · 2-way · 無線盤 · 平手比分

LIVE
MLB·Jul 17 at 8:10 pm
4
Tampa Bay Rays
Tampa Bay Rays
4
Boston Red Sox
Boston Red Sox

Upcoming · 2-way · Spread & Total

MLB·Jul 19 at 6:00 pm
Seattle Mariners
Seattle Mariners
Houston Astros
Houston Astros

Upcoming · 3-way（Draw）· 無線盤 · 國旗

FIFA World Cup·Jul 18 at 7:30 pm
Brazil
Brazil
Germany
Germany

Upcoming · 3-way（Draw）· Spread & Total（h-20 組合）

FIFA World Cup·Jul 19 at 3:00 pm
Spain
Spain
Argentina
Argentina

Button State Matrix

hover 欄為轉寫模擬（來源見 state-matrix.tsx 檔頭）；selected 欄走組件真實 data-active 路徑。 組件無 disabled / loading 態（production 亦無），不硬造。

Moneyline outcome button — skin × state

default

hover（模擬）

selected（真實 data-active）

team-home-bg / team-home-solid

default

hover（模擬）

selected（真實 data-active）

team-away-bg / team-away-solid

default

hover（模擬）

selected（真實 data-active）

team-draw-bg / team-draw-solid

default

hover（模擬）

selected（真實 data-active）

bg-secondary → hover bg-tertiary → selected brand-2

Spread / Total line button — side × state

default

hover（模擬）

selected（模擬 data-active）

bg-tertiary → outcome-yes-solid

default

hover（模擬）

selected（模擬 data-active）

bg-tertiary → outcome-no-solid

Game View button — state

default

hover（模擬）

brand-2 / text-brand-secondary → hover brand-solid / text-black

Game card surface — default / hover

default

hover（模擬）

bg-primary + border-secondary → hover 疊 white-04 gradient + white-05（轉寫自 BaseView article hover:[background:…]）

Edge Cases

超長選手名（truncate）＋ percentage=0（隱藏％）＋ 無 footer actions

WTA·Jul 19 at 3:00 pm
Victoria Jimenez Kasintseva
Victoria Jimenez Kasintseva
Sara Sorribes Tormo
Sara Sorribes Tormo

受限寬度（560px）— 桌面排版擠壓下的 truncation 行為；真 mobile 排版走 max-md: 斷點，需縮視窗驗證

LIVE
MLB·Jul 17 at 8:05 pm
3
Los Angeles Dodgers
Los Angeles Dodgers
1
New York Yankees
New York Yankees