Skip to content

Commit 3165afa

Browse files
kevinjosethomaskevinjosethomas
committed
style: redesign broadcast page
1 parent b07a180 commit 3165afa

3 files changed

Lines changed: 85 additions & 46 deletions

File tree

‎src/components/Analysis/BroadcastAnalysis.tsx‎

Lines changed: 33 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -267,35 +267,43 @@ export const BroadcastAnalysis: React.FC<Props> = ({
267267
exit="exit"
268268
style={{ willChange: 'transform, opacity' }}
269269
>
270-
<div className="flex h-full w-[90%] flex-row gap-2">
270+
<div className="flex h-full w-[90%] flex-row gap-3">
271271
<motion.div
272272
id="navigation"
273-
className="desktop-left-column-container flex flex-col gap-2 overflow-hidden"
273+
className="desktop-left-column-container flex flex-col overflow-hidden"
274274
variants={itemVariants}
275275
style={{ willChange: 'transform, opacity' }}
276276
>
277-
<GameInfo
278-
title="Broadcast"
279-
icon="live_tv"
280-
type="analysis"
281-
streamState={broadcastController.broadcastState}
282-
>
283-
<NestedGameInfo />
284-
</GameInfo>
285-
<div className="flex h-1/2 w-full flex-1 flex-col gap-2">
286-
<div className="flex h-full flex-col">
287-
<div className="flex-1 overflow-hidden">
288-
<BroadcastGameList broadcastController={broadcastController} />
289-
</div>
290-
<div className="flex-1 overflow-hidden">
291-
<MovesContainer
292-
game={game}
293-
termination={game.termination}
294-
showAnnotations={true}
295-
disableKeyboardNavigation={false}
296-
disableMoveClicking={false}
277+
<div className="flex h-full w-full flex-col overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md">
278+
<GameInfo
279+
title="Broadcast"
280+
icon="live_tv"
281+
type="analysis"
282+
streamState={broadcastController.broadcastState}
283+
embedded
284+
>
285+
<NestedGameInfo />
286+
</GameInfo>
287+
<div className="flex flex-col overflow-hidden">
288+
<div className="h-3" />
289+
<div className="max-h-[32vh] min-h-[32vh]">
290+
<BroadcastGameList
291+
broadcastController={broadcastController}
292+
embedded
297293
/>
298294
</div>
295+
</div>
296+
<div className="red-scrollbar flex h-full flex-1 flex-col overflow-y-auto">
297+
<div className="h-3 border-b border-glassBorder" />
298+
<MovesContainer
299+
game={game}
300+
termination={game.termination}
301+
showAnnotations={true}
302+
disableKeyboardNavigation={false}
303+
disableMoveClicking={false}
304+
embedded
305+
heightClass="h-40"
306+
/>
299307
<BoardController
300308
gameTree={analysisController.gameTree}
301309
orientation={analysisController.orientation}
@@ -308,12 +316,13 @@ export const BroadcastAnalysis: React.FC<Props> = ({
308316
goToRootNode={analysisController.goToRootNode}
309317
disableKeyboardNavigation={false}
310318
disableNavigation={false}
319+
embedded
311320
/>
312321
</div>
313322
</div>
314323
</motion.div>
315324
<motion.div
316-
className="desktop-middle-column-container flex flex-col gap-2"
325+
className="desktop-middle-column-container flex flex-col gap-3"
317326
variants={itemVariants}
318327
style={{ willChange: 'transform, opacity' }}
319328
>
@@ -489,6 +498,7 @@ export const BroadcastAnalysis: React.FC<Props> = ({
489498
goToRootNode={analysisController.goToRootNode}
490499
disableKeyboardNavigation={false}
491500
disableNavigation={false}
501+
embedded
492502
/>
493503
</div>
494504
<div className="relative bottom-0 h-48 max-h-48 flex-1 overflow-auto overflow-y-hidden">

‎src/components/Analysis/BroadcastGameList.tsx‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ import { BroadcastStreamController, BroadcastGame } from 'src/types'
55
interface BroadcastGameListProps {
66
broadcastController: BroadcastStreamController
77
onGameSelected?: () => void
8+
embedded?: boolean
89
}
910

1011
export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
1112
broadcastController,
1213
onGameSelected,
14+
embedded = false,
1315
}) => {
1416
const [selectedRoundId, setSelectedRoundId] = useState<string>(
1517
broadcastController.currentRound?.id || '',
@@ -61,12 +63,29 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
6163
}
6264

6365
return (
64-
<div className="flex h-full flex-col items-start justify-start overflow-hidden bg-background-1 md:rounded">
65-
<div className="flex w-full flex-col items-start justify-start gap-2 border-b-2 border-white border-opacity-10 p-3">
66+
<div
67+
className={
68+
embedded
69+
? 'flex h-full flex-col items-start justify-start overflow-hidden'
70+
: 'flex h-full flex-col items-start justify-start overflow-hidden rounded-md border border-glassBorder bg-glass backdrop-blur-md'
71+
}
72+
>
73+
<div
74+
className={
75+
embedded
76+
? 'flex w-full flex-col items-start justify-start gap-2 border-b border-glassBorder bg-transparent px-3 py-2'
77+
: 'flex w-full flex-col items-start justify-start gap-2 border-b border-glassBorder bg-transparent px-3 py-2'
78+
}
79+
>
6680
<div className="w-full overflow-hidden">
67-
<h3 className="truncate text-sm font-semibold text-primary">
68-
{broadcastController.currentBroadcast?.tour.name ||
69-
'Live Broadcast'}
81+
<h3
82+
className={
83+
embedded
84+
? 'truncate text-sm font-semibold text-white/95'
85+
: 'truncate text-sm font-semibold text-white/95'
86+
}
87+
>
88+
{broadcastController.currentBroadcast?.tour.name || 'Live Broadcast'}
7089
</h3>
7190
</div>
7291

@@ -76,7 +95,7 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
7695
id="round-selector"
7796
value={selectedRoundId}
7897
onChange={(e) => handleRoundChange(e.target.value)}
79-
className="w-full rounded bg-background-2 px-2 py-1 text-xs text-primary focus:outline-none focus:ring-1 focus:ring-human-4"
98+
className="w-full rounded-md border border-glassBorder bg-glass px-2 py-1 text-xs text-white/90 backdrop-blur-sm focus:outline-none focus:ring-1 focus:ring-human-4"
8099
>
81100
{broadcastController.currentBroadcast.rounds.map((round) => (
82101
<option key={round.id} value={round.id}>
@@ -88,7 +107,7 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
88107

89108
{/* Connection Status */}
90109
{broadcastController.broadcastState.error && (
91-
<div className="mb-2 rounded bg-red-500/20 p-2 text-xs text-red-400">
110+
<div className="mb-2 rounded-md border border-red-500/30 bg-red-500/10 p-2 text-xs text-red-400 backdrop-blur-sm">
92111
<div className="flex items-center justify-between">
93112
<span>Connection Error</span>
94113
<button
@@ -102,9 +121,9 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
102121
)}
103122

104123
{broadcastController.broadcastState.isConnecting && (
105-
<div className="mb-2 rounded bg-background-2 p-2 text-xs text-secondary">
124+
<div className="mb-2 rounded-md border border-glassBorder bg-glass p-2 text-xs text-secondary backdrop-blur-sm">
106125
<div className="flex items-center gap-2">
107-
<div className="h-3 w-3 animate-spin rounded-full border-b border-white"></div>
126+
<div className="h-3 w-3 animate-spin rounded-full border-b border-white/80"></div>
108127
<span>Connecting...</span>
109128
</div>
110129
</div>
@@ -136,22 +155,18 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
136155
return (
137156
<div
138157
key={game.id}
139-
className={`group flex w-full items-center ${
158+
className={`group flex w-full items-center transition-colors ${
140159
isSelected
141-
? 'bg-background-2 font-bold'
142-
: index % 2 === 0
143-
? 'bg-background-1/30 hover:bg-background-2'
144-
: 'bg-background-1/10 hover:bg-background-2'
160+
? 'bg-white/10 font-semibold'
161+
: 'hover:bg-white/5'
145162
}`}
146163
>
147164
<div
148165
className={`flex h-full w-9 items-center justify-center ${
149-
isSelected
150-
? 'bg-background-3'
151-
: 'bg-background-2 group-hover:bg-white/5'
166+
isSelected ? 'bg-white/10' : 'bg-transparent group-hover:bg-white/5'
152167
}`}
153168
>
154-
<p className="text-sm text-secondary">{index + 1}</p>
169+
<p className="text-sm text-white/70">{index + 1}</p>
155170
</div>
156171
<button
157172
onClick={() => handleGameSelect(game)}
@@ -161,13 +176,13 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
161176
<div className="flex flex-col items-start overflow-hidden">
162177
<div className="flex items-center gap-1">
163178
<div className="h-2 w-2 rounded-full bg-white" />
164-
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-primary">
179+
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-white/90">
165180
{formatPlayerName(game.white, game.whiteElo)}
166181
</span>
167182
</div>
168183
<div className="mt-0.5 flex items-center gap-1">
169184
<div className="h-2 w-2 rounded-full border-[0.5px] bg-black" />
170-
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-primary">
185+
<span className="overflow-hidden text-ellipsis whitespace-nowrap text-xs text-white/90">
171186
{formatPlayerName(game.black, game.blackElo)}
172187
</span>
173188
</div>
@@ -192,15 +207,21 @@ export const BroadcastGameList: React.FC<BroadcastGameListProps> = ({
192207
</div>
193208

194209
{/* Footer with broadcast info */}
195-
<div className="w-full border-t border-white border-opacity-10 p-2">
196-
<div className="text-center text-xs text-secondary">
210+
<div
211+
className={
212+
embedded
213+
? 'w-full border-t border-glassBorder p-2'
214+
: 'w-full border-t border-glassBorder p-2'
215+
}
216+
>
217+
<div className="text-center text-xs text-white/70">
197218
<p>
198219
Watch on{' '}
199220
<a
200221
href={broadcastController.currentBroadcast?.tour.url}
201222
target="_blank"
202223
rel="noopener noreferrer"
203-
className="text-primary/60 underline hover:text-primary"
224+
className="text-white/80 underline hover:text-white"
204225
>
205226
Lichess
206227
</a>

‎src/pages/broadcast/[broadcastId]/[roundId].tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,14 @@ const BroadcastAnalysisPage: NextPage = () => {
246246
<title>{pageTitle}</title>
247247
<meta name="description" content={pageDescription} />
248248
</Head>
249+
{/* Radial gradient backdrop to match new design language */}
250+
<div
251+
className="pointer-events-none absolute inset-0"
252+
style={{
253+
background:
254+
'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
255+
}}
256+
/>
249257

250258
<AnimatePresence>
251259
{analysisController &&

0 commit comments

Comments
 (0)