Skip to content

Commit bfeca23

Browse files
kevinjosethomaskevinjosethomas
committed
style: improve broadcast list page
1 parent bfd4dc4 commit bfeca23

2 files changed

Lines changed: 51 additions & 47 deletions

File tree

‎src/hooks/useBroadcastController.ts‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const useBroadcastController = (): BroadcastStreamController => {
6363
// Organize broadcasts into sections
6464
const sections: BroadcastSection[] = []
6565

66-
// Official active broadcasts
66+
// 1. Official active broadcasts (Lichess official live tournaments)
6767
const officialActive = officialBroadcasts.filter((b) =>
6868
b.rounds.some((r) => r.ongoing),
6969
)
@@ -75,7 +75,23 @@ export const useBroadcastController = (): BroadcastStreamController => {
7575
})
7676
}
7777

78-
// Top active broadcasts (unofficial)
78+
// 2. Official upcoming broadcasts (Lichess official upcoming tournaments) - max 4
79+
const officialUpcoming = officialBroadcasts
80+
.filter(
81+
(b) =>
82+
b.rounds.every((r) => !r.ongoing) &&
83+
b.rounds.some((r) => r.startsAt > Date.now()),
84+
)
85+
.slice(0, 4) // Limit to 4
86+
if (officialUpcoming.length > 0) {
87+
sections.push({
88+
title: 'Upcoming Official Tournaments',
89+
broadcasts: officialUpcoming,
90+
type: 'official-upcoming',
91+
})
92+
}
93+
94+
// 3. Community live broadcasts (all live community broadcasts)
7995
const unofficialActive = topBroadcasts.active
8096
.map(convertTopBroadcastToBroadcast)
8197
.filter(
@@ -86,37 +102,23 @@ export const useBroadcastController = (): BroadcastStreamController => {
86102
sections.push({
87103
title: 'Community Live Broadcasts',
88104
broadcasts: unofficialActive,
89-
type: 'unofficial-active',
90-
})
91-
}
92-
93-
// Official upcoming broadcasts
94-
const officialUpcoming = officialBroadcasts.filter(
95-
(b) =>
96-
b.rounds.every((r) => !r.ongoing) &&
97-
b.rounds.some((r) => r.startsAt > Date.now()),
98-
)
99-
if (officialUpcoming.length > 0) {
100-
sections.push({
101-
title: 'Upcoming Official Tournaments',
102-
broadcasts: officialUpcoming,
103-
type: 'official-upcoming',
105+
type: 'community-active',
104106
})
105107
}
106108

107-
// Top upcoming broadcasts (unofficial)
108-
const unofficialUpcoming = topBroadcasts.upcoming.map(
109-
convertTopBroadcastToBroadcast,
110-
)
109+
// 4. Community upcoming broadcasts - max 5
110+
const unofficialUpcoming = topBroadcasts.upcoming
111+
.map(convertTopBroadcastToBroadcast)
112+
.slice(0, 5) // Limit to 5
111113
if (unofficialUpcoming.length > 0) {
112114
sections.push({
113115
title: 'Upcoming Community Broadcasts',
114116
broadcasts: unofficialUpcoming,
115-
type: 'unofficial-upcoming',
117+
type: 'community-upcoming',
116118
})
117119
}
118120

119-
// Past broadcasts (mix of official and top)
121+
// 5. Past tournaments (separate section) - max 8
120122
const officialPast = officialBroadcasts.filter(
121123
(b) =>
122124
b.rounds.every((r) => !r.ongoing) &&
@@ -127,10 +129,10 @@ export const useBroadcastController = (): BroadcastStreamController => {
127129
...topBroadcasts.past.currentPageResults.map(
128130
convertTopBroadcastToBroadcast,
129131
),
130-
]
132+
].slice(0, 8) // Limit to 8
131133
if (pastBroadcasts.length > 0) {
132134
sections.push({
133-
title: 'Recent Tournaments',
135+
title: 'Past Tournaments',
134136
broadcasts: pastBroadcasts,
135137
type: 'past',
136138
})

‎src/pages/broadcast/index.tsx‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,8 @@ const BroadcastsPage: NextPage = () => {
103103
<Head>
104104
<title>Live Broadcasts – Maia Chess</title>
105105
</Head>
106-
<div className="flex min-h-screen items-center justify-center bg-background-1">
107-
<div className="text-center">
106+
<div className="flex min-h-screen items-center justify-center bg-backdrop">
107+
<div className="rounded-lg border border-white/10 bg-background-1 p-6 text-center">
108108
<h2 className="mb-4 text-xl font-semibold text-red-400">
109109
Error Loading Broadcasts
110110
</h2>
@@ -113,7 +113,7 @@ const BroadcastsPage: NextPage = () => {
113113
</p>
114114
<button
115115
onClick={() => window.location.reload()}
116-
className="rounded bg-human-4 px-4 py-2 text-white transition hover:bg-human-4/80"
116+
className="rounded border border-human-4/30 bg-human-4 px-4 py-2 text-white transition-all duration-200 hover:border-human-4/50 hover:bg-human-4/80"
117117
>
118118
Try Again
119119
</button>
@@ -133,9 +133,9 @@ const BroadcastsPage: NextPage = () => {
133133
/>
134134
</Head>
135135

136-
<div className="min-h-screen bg-background-1">
136+
<div className="min-h-screen bg-backdrop">
137137
<motion.div
138-
className="container mx-auto px-4 py-8"
138+
className="container mx-auto px-6 py-8"
139139
variants={containerVariants}
140140
initial="hidden"
141141
animate="visible"
@@ -165,24 +165,24 @@ const BroadcastsPage: NextPage = () => {
165165
</p>
166166
<button
167167
onClick={() => broadcastController.loadBroadcasts()}
168-
className="mt-4 rounded bg-human-4 px-4 py-2 text-white transition hover:bg-human-4/80"
168+
className="mt-4 rounded border border-human-4/30 bg-human-4 px-4 py-2 text-white transition-all duration-200 hover:border-human-4/50 hover:bg-human-4/80"
169169
>
170170
Refresh
171171
</button>
172172
</motion.div>
173173
) : (
174-
<div className="space-y-8">
174+
<div className="space-y-6">
175175
{broadcastController.broadcastSections.map(
176176
(section, sectionIndex) => (
177177
<motion.div
178178
key={section.type}
179179
variants={itemVariants}
180-
className="space-y-4"
180+
className="space-y-3"
181181
>
182182
<h2 className="flex items-center gap-2 text-xl font-semibold text-primary">
183183
{section.title}
184184
{(section.type === 'official-active' ||
185-
section.type === 'unofficial-active') && (
185+
section.type === 'community-active') && (
186186
<div className="flex items-center gap-1">
187187
<div className="h-2 w-2 animate-pulse rounded-full bg-red-500"></div>
188188
<span className="text-xs font-medium text-red-400">
@@ -192,25 +192,27 @@ const BroadcastsPage: NextPage = () => {
192192
)}
193193
</h2>
194194

195-
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
195+
<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
196196
{section.broadcasts.map((broadcast, index) => {
197197
const ongoingRounds = broadcast.rounds.filter(
198198
(r) => r.ongoing,
199199
)
200200
const hasOngoingRounds = ongoingRounds.length > 0
201-
const isActive = section.type.includes('active')
201+
const isActive =
202+
section.type.includes('active') ||
203+
section.type.includes('community')
202204
const isPast = section.type === 'past'
203205

204206
return (
205207
<motion.div
206208
key={broadcast.tour.id}
207209
variants={itemVariants}
208-
className="overflow-hidden rounded-lg bg-background-2 shadow-lg transition-transform hover:scale-105"
210+
className="overflow-hidden rounded-lg border border-white/10 bg-background-1 transition-all duration-200 hover:border-white/20 hover:bg-background-1/80"
209211
>
210-
<div className="p-6">
211-
<div className="mb-4 flex items-start justify-between">
212+
<div className="p-3">
213+
<div className="mb-3 flex items-start justify-between">
212214
<div className="flex-1">
213-
<h3 className="mb-1 line-clamp-2 text-lg font-semibold text-primary">
215+
<h3 className="mb-1 line-clamp-2 text-base font-semibold text-primary">
214216
{broadcast.tour.name}
215217
</h3>
216218
{hasOngoingRounds && isActive && (
@@ -234,8 +236,8 @@ const BroadcastsPage: NextPage = () => {
234236
</div>
235237
</div>
236238

237-
<div className="mb-4">
238-
<div className="mb-2 text-sm font-medium text-primary">
239+
<div className="mb-3 border-t border-white/10 pt-2">
240+
<div className="mb-1.5 text-xs font-medium text-primary">
239241
Rounds ({broadcast.rounds.length})
240242
</div>
241243
<div className="space-y-1">
@@ -252,7 +254,7 @@ const BroadcastsPage: NextPage = () => {
252254
round.ongoing
253255
? 'bg-red-500/20 text-red-400'
254256
: isPast
255-
? 'bg-background-3 text-secondary'
257+
? 'bg-background-2 text-secondary'
256258
: 'bg-blue-500/20 text-blue-400'
257259
}`}
258260
>
@@ -275,12 +277,12 @@ const BroadcastsPage: NextPage = () => {
275277
<button
276278
onClick={() => handleSelectBroadcast(broadcast)}
277279
disabled={!hasOngoingRounds && !isPast}
278-
className={`w-full rounded py-2 text-sm font-medium transition ${
280+
className={`w-full rounded border py-1.5 text-sm font-medium transition-all duration-200 ${
279281
hasOngoingRounds
280-
? 'bg-human-4 text-white hover:bg-human-4/80'
282+
? 'border-human-4/30 bg-human-4 text-white hover:border-human-4/50 hover:bg-human-4/80'
281283
: isPast
282-
? 'bg-background-3 text-secondary hover:bg-background-3/80'
283-
: 'cursor-not-allowed bg-background-3/50 text-secondary/50'
284+
? 'border-white/10 bg-background-2 text-secondary hover:border-white/20 hover:bg-background-2/80'
285+
: 'cursor-not-allowed border-white/5 bg-background-2/50 text-secondary/50'
284286
}`}
285287
>
286288
{hasOngoingRounds

0 commit comments

Comments
 (0)