mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-08 04:06:18 -04:00
feat(championship): surface teammate H2H bars on drivers view (#23)
Add reusable TeammateH2H component and teammatePairs helper that ranks intra-team battles by closeness, using existing hub teammate_wins data. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
55
frontend/src/components/TeammateH2H.tsx
Normal file
55
frontend/src/components/TeammateH2H.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { teamColor } from '../utils'
|
||||
import '../styles/h2h.css'
|
||||
|
||||
export interface TeammateH2HProps {
|
||||
teamName: string
|
||||
teamColour: string
|
||||
driverATla: string
|
||||
driverBTla: string
|
||||
winsA: number
|
||||
winsB: number
|
||||
/** e.g. "+1" when more than two drivers share the team. */
|
||||
extraNote?: string
|
||||
}
|
||||
|
||||
export function TeammateH2H({
|
||||
teamName,
|
||||
teamColour,
|
||||
driverATla,
|
||||
driverBTla,
|
||||
winsA,
|
||||
winsB,
|
||||
extraNote,
|
||||
}: TeammateH2HProps) {
|
||||
const total = winsA + winsB || 1
|
||||
const pctA = (winsA / total) * 100
|
||||
const color = teamColor(teamColour)
|
||||
|
||||
return (
|
||||
<div className="h2h-row" data-testid="teammate-h2h">
|
||||
<div className="h2h-team">
|
||||
<span className="h2h-team-name">{teamName}</span>
|
||||
{extraNote ? <span className="h2h-extra mono">{extraNote}</span> : null}
|
||||
</div>
|
||||
<div className="h2h-bar-wrap">
|
||||
<span className="h2h-tla h2h-tla--left mono">{driverATla}</span>
|
||||
<div className="h2h-bar" data-testid="h2h-bar">
|
||||
<span
|
||||
className="h2h-bar-seg"
|
||||
data-testid="h2h-bar-a"
|
||||
style={{ width: `${pctA}%`, background: color }}
|
||||
/>
|
||||
<span
|
||||
className="h2h-bar-seg h2h-bar-seg--muted"
|
||||
data-testid="h2h-bar-b"
|
||||
style={{ width: `${100 - pctA}%`, background: color }}
|
||||
/>
|
||||
<span className="h2h-score mono" data-testid="h2h-score">
|
||||
{winsA}–{winsB}
|
||||
</span>
|
||||
</div>
|
||||
<span className="h2h-tla h2h-tla--right mono">{driverBTla}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user