From 1cdd422083dac9a6370b6f152edf2c2c178e21f8 Mon Sep 17 00:00:00 2001 From: Kavindu Santhusa <89186091+ksenginew@users.noreply.github.com> Date: Fri, 26 Sep 2025 23:30:05 +0530 Subject: [PATCH] feat: Enhance UI for live scores and standings, refactor data types for matches --- app/layout.tsx | 2 +- app/page.tsx | 50 ++------- components/live-score-card.tsx | 185 ++++++++++++++++++++++----------- components/live-standings.tsx | 12 --- lib/realtime.ts | 3 +- lib/types.ts | 36 +++++++ 6 files changed, 169 insertions(+), 119 deletions(-) create mode 100644 lib/types.ts diff --git a/app/layout.tsx b/app/layout.tsx index 2ecabf4..39302e8 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -25,7 +25,7 @@ export default function RootLayout({
- Loading...
}>{children} + Loading...}>{children} diff --git a/app/page.tsx b/app/page.tsx index bdbdc17..8f62f73 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -30,17 +30,6 @@ export default async function HomePage() { .order("match_date", { ascending: false }) .limit(3) - // Fetch top teams from standings - const { data: topTeams } = await supabase - .from("tournament_standings") - .select(` - *, - team:teams(name) - `) - .order("points", { ascending: false }) - .order("nrr", { ascending: false }) - .limit(4) - return (
{/* Hero Section */} @@ -73,7 +62,7 @@ export default async function HomePage() { {/* Stats Overview */} -
+ {/*
@@ -106,7 +95,7 @@ export default async function HomePage() {
-
+
*/} {/* Live Scores Section */}
@@ -121,7 +110,11 @@ export default async function HomePage() { {/* Live Standings */}
-
+
+

+
+ Live Standings +

- {/* Top Teams */} -
-
-

Tournament Standings

-
- {topTeams?.map((standing, index) => ( - - -
-
- Points - {standing.points} -
-
- Matches - {standing.matches_played} -
-
- NRR - {standing.nrr.toFixed(3)} -
-
- - - ))} -
-
-
- {/* Navigation */}
diff --git a/components/live-score-card.tsx b/components/live-score-card.tsx index cceb679..40f3393 100644 --- a/components/live-score-card.tsx +++ b/components/live-score-card.tsx @@ -43,69 +43,130 @@ export function LiveScoreCard() { return ( - -
- -
- LIVE - -
- - {match.venue} -
-
- - - {/* Team 1 */} -
-
-

{match.team1?.name}

-

Innings {team1Score?.innings || 1}

-
-
-
- {team1Score?.runs || 0}/{team1Score?.wickets || 0} -
-
({team1Score?.overs || 0.0} overs)
-
RR: {team1Score?.current_rr?.toFixed(2) || "0.00"}
-
-
+ +
+ +
+ LIVE + +
+ + {match.venue} +
+
+ + +
+ {/* Team 1 - Stacked Layout */} +
+
+
+ {match.team1?.shortCode || 'T1'} +
+
+

{match.team1?.name}

+

Innings {team1Score?.innings || 1}

+
+
+ + {/* Score Stacked Below Team Info */} +
+
+
+ {team1Score?.runs || 0}/{team1Score?.wickets || 0} +
+
Runs/Wickets
+
+
+
{team1Score?.overs?.toFixed(1) || 0.0}
+
Overs
+
RR: {team1Score?.current_rr?.toFixed(2) || "0.00"}
+
+
+
- {/* Team 2 */} -
-
-

{match.team2?.name}

-

Innings {team2Score?.innings || 1}

-
-
-
- {team2Score?.runs || 0}/{team2Score?.wickets || 0} -
-
({team2Score?.overs || 0.0} overs)
- {team2Score?.required_rr && ( -
Req RR: {team2Score.required_rr.toFixed(2)}
- )} -
-
+ {/* Match Center Info */} +
+ {team2Score?.required_rr && ( +
+
Target: {team1Score?.runs || 0}
+
+ Need {team1Score?.runs - (team2Score?.runs || 0)} runs • + Req RR: {team2Score.required_rr.toFixed(2)} +
+
+ )} + +
+

{match.currentOver?.number || 6}th over

+
+ {match.currentOver?.balls?.map((ball, index) => ( + + {ball} + + )) || ['.', '.', '.', '.', '.', '.'].map((ball, index) => ( + + {ball} + + ))} +
+
+
-
- - -
- - - ) - })} + {/* Team 2 - Stacked Layout */} +
+
+
+ {match.team2?.shortCode || 'T2'} +
+
+

{match.team2?.name}

+

Innings {team2Score?.innings || 1}

+
+
+ + {/* Score Stacked Below Team Info */} +
+
+
+ {team2Score?.runs || 0}/{team2Score?.wickets || 0} +
+
Runs/Wickets
+
+
+
{team2Score?.overs?.toFixed(1) || 0.0}
+
Overs
+ {team2Score?.required_rr ? ( +
Req RR: {team2Score.required_rr.toFixed(2)}
+ ) : ( +
RR: {team2Score?.current_rr?.toFixed(2) || "0.00"}
+ )} +
+
+
- ) + +
+ + +
+ +) + })} +
) } diff --git a/components/live-standings.tsx b/components/live-standings.tsx index 05c35e5..14940cc 100644 --- a/components/live-standings.tsx +++ b/components/live-standings.tsx @@ -11,12 +11,6 @@ export function LiveStandings() { if (loading) { return ( - - - - Tournament Standings - -
{[...Array(5)].map((_, i) => ( @@ -33,12 +27,6 @@ export function LiveStandings() { return ( - - - - Live Standings - -
diff --git a/lib/realtime.ts b/lib/realtime.ts index bcb89ae..e04880b 100644 --- a/lib/realtime.ts +++ b/lib/realtime.ts @@ -2,9 +2,10 @@ import { createClient } from "@/lib/supabase/client" import { useEffect, useMemo, useState } from "react" +import { Matches } from "./types" export function useRealtimeMatches() { - const [matches, setMatches] = useState([]) + const [matches, setMatches] = useState([]) const [loading, setLoading] = useState(true) const supabase = useMemo(() => createClient(), []) diff --git a/lib/types.ts b/lib/types.ts new file mode 100644 index 0000000..31b9511 --- /dev/null +++ b/lib/types.ts @@ -0,0 +1,36 @@ +export interface TeamInfo { + name: string; +} + +export interface ScoreboardEntry { + id: string; + runs: number; + overs: number; + innings: 1 | 2; + team_id: string; + wickets: number; + match_id: string; + current_rr: number; + updated_at: string; + required_rr: number | null; +} + +export interface Match { + id: string; + team1_id: string; + team2_id: string; + venue: string; + match_date: string; + status: "completed" | "ongoing" | "upcoming"; // expanded based on possible values + winner_id: string | null; + toss_winner_id: string; + elected_to: "bat" | "bowl"; + created_at: string; + overs_per_innings: number; + team1: TeamInfo; + team2: TeamInfo; + winner: TeamInfo | null; + scoreboard: ScoreboardEntry[]; +} + +export type Matches = Match[]; \ No newline at end of file