@vatvaghool/create-ipl-dashboard 0.1.0

package/template/app/components/FireworksBurst.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { useMemo, useState, useCallback } from "react";
+import { FaWandSparkles, FaStar, FaFire, FaRocket } from "react-icons/fa6";
+import { motion, AnimatePresence } from "framer-motion";
+import type { DashboardData } from "../types";
+import { getPlayedMatchRows } from "../lib/dashboardData";
+import { getChartColor } from "../lib/utils/getChartColor";
+
+type Particle = {
+  id: number;
+  x: number;
+  y: number;
+  color: string;
+  angle: number;
+  velocity: number;
+  size: number;
+};
+
+type BurstState = {
+  particles: Particle[];
+  teamName: string;
+  teamColor: string;
+};
+
+let particleId = 0;
+
+function generateBurst(
+  cx: number,
+  cy: number,
+  color: string,
+  count: number = 24,
+): Particle[] {
+  const particles: Particle[] = [];
+  for (let i = 0; i < count; i++) {
+    const angle = (i / count) * 360 + (Math.random() - 0.5) * 20;
+    const velocity = 40 + Math.random() * 60;
+    particles.push({
+      id: ++particleId,
+      x: cx,
+      y: cy,
+      color,
+      angle: (angle * Math.PI) / 180,
+      velocity,
+      size: 3 + Math.random() * 5,
+    });
+  }
+  return particles;
+}
+
+export default function FireworksBurst({
+  data,
+}: {
+  data: DashboardData | null;
+}) {
+  const [bursts, setBursts] = useState<BurstState[]>([]);
+
+  const teams = useMemo(() => {
+    if (!data?.overall?.length) return [];
+    const daily = getPlayedMatchRows(data.daily);
+    return data.overall
+      .sort((a, b) => a.rank - b.rank)
+      .slice(0, 8)
+      .map((team, i) => {
+        const scores = daily
+          .map((r) => Number(r[team.name] ?? 0))
+          .filter((v) => v > 0);
+        const avg = scores.length
+          ? scores.reduce((a, b) => a + b, 0) / scores.length
+          : 0;
+        return {
+          name: team.name,
+          rank: team.rank,
+          points: team.points,
+          color: getChartColor(i, 8),
+          avg: Math.round(avg),
+          lastMatch: team.lastMatchPoints ?? scores.at(-1) ?? 0,
+        };
+      });
+  }, [data]);
+
+  const handleCelebrate = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>, name: string, color: string) => {
+      const rect = e.currentTarget.getBoundingClientRect();
+      const cx = e.clientX - rect.left;
+      const cy = e.clientY - rect.top;
+      const particles = generateBurst(cx, cy, color);
+      setBursts((prev) => [
+        ...prev.slice(-3),
+        { particles, teamName: name, teamColor: color },
+      ]);
+      setTimeout(() => {
+        setBursts((prev) => prev.filter((b) => b.teamName !== name));
+      }, 1200);
+    },
+    [],
+  );
+
+  if (!teams.length) {
+    return <div className="ledger-note py-6 text-center">No data yet...</div>;
+  }
+
+  return (
+    <div
+      className="rounded-2xl border-2 p-4 wobbly overflow-hidden relative"
+      style={{
+        borderColor:
+          "color-mix(in srgb, var(--accent-magenta) 34%, var(--line))",
+        background:
+          "linear-gradient(180deg, color-mix(in srgb, var(--paper) 86%, var(--accent-magenta) 14%), color-mix(in srgb, var(--paper) 92%, var(--paper-2) 8%))",
+      }}
+    >
+      <div className="mb-3 flex items-center gap-2 border-b border-dashed border-(--border-wobbly)/40 pb-2">
+        <FaWandSparkles
+          className="text-lg"
+          style={{ color: "var(--accent-magenta)" }}
+        />
+        <span className="font-bold text-lg text-(--ink)">Fireworks Burst</span>
+        <span className="text-xs text-(--ink-faint) ml-auto">
+          click any team
+        </span>
+      </div>
+
+      <div className="relative">
+        <div className="grid gap-2 sm:grid-cols-1 md:grid-cols-3 relative z-10">
+          {teams.map((t, i) => (
+            <motion.div
+              key={t.name}
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: i * 0.05 }}
+              className="relative rounded-xl border-2 p-3 cursor-pointer select-none overflow-hidden"
+              style={{
+                borderColor: `color-mix(in srgb, ${t.color} 34%, var(--line))`,
+                background: `color-mix(in srgb, ${t.color} 7%, var(--paper) 93%)`,
+              }}
+              onClick={(e) => handleCelebrate(e, t.name, t.color)}
+              whileTap={{ scale: 0.95 }}
+            >
+              <div className="flex items-center gap-3">
+                <div
+                  className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-lg"
+                  style={{
+                    background: `color-mix(in srgb, ${t.color} 24%, var(--paper) 76%)`,
+                    color: t.color,
+                  }}
+                >
+                  {i === 0 ? <FaRocket /> : i < 3 ? <FaStar /> : <FaFire />}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-1.5">
+                    <span
+                      className="rounded px-1.5 py-0.5 text-[10px] font-black"
+                      style={{
+                        background: `color-mix(in srgb, ${t.color} 26%, var(--panel) 74%)`,
+                        color: "var(--ink)",
+                      }}
+                    >
+                      #{t.rank}
+                    </span>
+                    <span className="truncate text-sm font-bold text-(--ink)">
+                      {t.name}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span
+                      className="text-[15px] font-black"
+                      style={{ color: t.color }}
+                    >
+                      {t.points.toLocaleString()}
+                    </span>
+                    <span className="text-[10px] text-(--ink-faint)">
+                      last {t.lastMatch.toLocaleString()}
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              <motion.div
+                className="absolute -top-8 -right-8 text-[36px] opacity-10 pointer-events-none"
+                animate={{ rotate: [0, 15, -15, 0], scale: [1, 1.1, 1] }}
+                transition={{
+                  repeat: Infinity,
+                  duration: 4 + (i % 3),
+                  ease: "easeInOut",
+                  delay: i * 0.3,
+                }}
+              >
+                <FaStar style={{ color: t.color }} />
+              </motion.div>
+            </motion.div>
+          ))}
+        </div>
+
+        <AnimatePresence>
+          {bursts.map((burst) =>
+            burst.particles.map((p) => (
+              <motion.div
+                key={p.id}
+                className="absolute pointer-events-none z-20"
+                style={{
+                  width: p.size,
+                  height: p.size,
+                  borderRadius: "50%",
+                  background: p.color,
+                  boxShadow: `0 0 6px ${p.color}`,
+                  x: p.x - p.size / 2,
+                  y: p.y - p.size / 2,
+                }}
+                initial={{ x: p.x, y: p.y, opacity: 1, scale: 1 }}
+                animate={{
+                  x: p.x + Math.cos(p.angle) * p.velocity,
+                  y: p.y + Math.sin(p.angle) * p.velocity + 60,
+                  opacity: 0,
+                  scale: 0,
+                }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+              />
+            )),
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

package/template/app/components/LiveMatchTicker.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { motion } from "framer-motion";
+import { matches as fallbackMatches } from "../lib/matches";
+import { getMatchStatus } from "../lib/matchStatus";
+import type { UpcomingMatch } from "../lib/matches";
+
+type UpcomingMatchesResponse = {
+  matches?: UpcomingMatch[];
+  source?: "remote" | "fallback";
+};
+
+export default function LiveMatchTicker() {
+  const [now, setNow] = useState(new Date());
+  const [upcomingMatches, setUpcomingMatches] =
+    useState<UpcomingMatch[]>(fallbackMatches);
+
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      setNow(new Date());
+    }, 1000);
+
+    return () => window.clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    let active = true;
+
+    const loadSchedule = async () => {
+      try {
+        const response = await fetch(`/api/ipl/upcoming-matches?t=${Date.now()}`, {
+          cache: "no-store",
+        });
+
+        if (!response.ok) {
+          return;
+        }
+
+        const payload = (await response.json()) as UpcomingMatchesResponse;
+        if (!active) {
+          return;
+        }
+
+        if (Array.isArray(payload.matches) && payload.matches.length > 0) {
+          setUpcomingMatches(payload.matches);
+        }
+      } catch {
+        // Keep the fallback schedule when the live endpoint is unavailable.
+      }
+    };
+
+    void loadSchedule();
+    const refresh = window.setInterval(loadSchedule, 15 * 60 * 1000);
+
+    return () => {
+      active = false;
+      window.clearInterval(refresh);
+    };
+  }, []);
+
+  const relevantMatches = useMemo(
+    () =>
+      upcomingMatches
+        .map((match) => ({
+          ...match,
+          status: getMatchStatus(match.date),
+        }))
+        .filter((match) => match.status !== "ENDED")
+        .sort((a, b) => +new Date(a.date) - +new Date(b.date))
+        .slice(0, 5),
+    [upcomingMatches],
+  );
+
+  const tickerData =
+    relevantMatches.length > 0
+      ? [...relevantMatches, ...relevantMatches, ...relevantMatches]
+      : [];
+
+  return (
+    <div className="ticker-shell">
+      <span className="ticker-label">
+        <span className="ticker-label-date">
+          {now.toLocaleDateString("en-IN", { weekday: "short", day: "2-digit", month: "short" })}
+        </span>
+        <span className="ticker-label-time">
+          {now.toLocaleTimeString("en-IN", { hour: "2-digit", minute: "2-digit" })}
+        </span>
+      </span>
+
+      <div className="ticker-window">
+        <motion.div
+          className="ticker-track"
+          animate={{ x: ["0%", "-50%"] }}
+          transition={{ repeat: Infinity, duration: 34, ease: "linear" }}
+        >
+          {tickerData.map((match, index) => (
+            <span key={`${match.id}-${index}`} className="ticker-chip">
+              <span className="ticker-matchup">
+                {match.team1} <span className="ticker-vs">vs</span> {match.team2}
+              </span>
+              <span className="ticker-note">
+                {new Date(match.date).toLocaleDateString("en-IN", {
+                  timeZone: "Asia/Kolkata", day: "2-digit", month: "short",
+                })}
+                ·
+                {new Date(match.date).toLocaleTimeString("en-IN", {
+                  timeZone: "Asia/Kolkata", hour: "2-digit", minute: "2-digit",
+                })}
+              </span>
+            </span>
+          ))}
+        </motion.div>
+      </div>
+    </div>
+  );
+}

package/template/app/components/MatchRecapScroll.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useMemo } from "react";
+import { FaScroll } from "react-icons/fa6";
+import { motion } from "framer-motion";
+import type { DashboardData } from "../types";
+import { getMatchViewState } from "../lib/dashboardView";
+import { getDisplayLiveMatchId } from "../lib/dashboardData";
+
+export default function MatchRecapScroll({
+  data,
+}: {
+  data: DashboardData | null;
+}) {
+  const recap = useMemo(() => {
+    if (!data?.daily?.length) return null;
+    const view = getMatchViewState(data.daily);
+    if (!view.latestRow) return null;
+    const entries = Object.entries(view.latestRow)
+      .filter(([k]) => k !== "day")
+      .map(([team, pts]) => ({ team, points: Number(pts) }))
+      .sort((a, b) => b.points - a.points);
+    return {
+      matchId: getDisplayLiveMatchId(data.daily),
+      isLive: view.isLive,
+      day: view.latestRow.day,
+      entries,
+      leader: entries[0],
+    };
+  }, [data]);
+
+  if (!recap) {
+    return <p className="ledger-note py-6">No match data to recap...</p>;
+  }
+
+  return (
+    <div
+      className="rounded-2xl border-2 p-4 wobbly"
+      style={{
+        borderColor: "color-mix(in srgb, #f59e0b 40%, var(--line))",
+        background:
+          "linear-gradient(180deg, color-mix(in srgb, var(--paper) 88%, var(--paper-2) 12%), color-mix(in srgb, var(--paper-2) 72%, var(--paper) 28%))",
+      }}
+    >
+      <div
+        className="mb-3 flex items-center gap-2 border-b border-dashed pb-2"
+        style={{ borderColor: "color-mix(in srgb, #f59e0b 20%, transparent)" }}
+      >
+        <FaScroll className="text-sm" style={{ color: "#f59e0b" }} />
+        <span className=" text-sm text-(--ink)">Match Recap Scroll</span>
+        <span
+          className="scribble-pill text-[13px] py-0.5 px-2 ml-auto"
+          style={{
+            background:
+              "color-mix(in srgb, #f59e0b 24%, var(--panel-strong) 76%)",
+            borderColor: "color-mix(in srgb, #f59e0b 40%, var(--line))",
+          }}
+        >
+          {recap.isLive ? "🔴 LIVE" : `Match ${recap.matchId}`}
+        </span>
+      </div>
+      <div className="relative">
+        {recap.entries.slice(0, 8).map((entry, i) => {
+          const barPct =
+            recap.leader.points > 0
+              ? (entry.points / recap.leader.points) * 100
+              : 0;
+          const brightColors = [
+            "#22d3ee",
+            "#f59e0b",
+            "#84cc16",
+            "#ec4899",
+            "#3b82f6",
+            "#f97316",
+            "#a855f7",
+            "#14b8a6",
+          ];
+          const barColor = brightColors[i % brightColors.length];
+          return (
+            <motion.div
+              key={entry.team}
+              initial={{ opacity: 0, x: -8 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: i * 0.05 }}
+              className="flex items-center gap-2 py-1.5 border-b last:border-0"
+              style={{
+                borderColor: "color-mix(in srgb, var(--line) 20%, transparent)",
+              }}
+            >
+              <span className="w-6 text-[12px] font-bold text-(--ink-faint) text-right shrink-0">
+                #{i + 1}
+              </span>
+              <span className="w-24 truncate text-[13px] font-bold text-(--ink) shrink-0">
+                {entry.team}
+              </span>
+              <div
+                className="flex-1 h-3 rounded-sm relative overflow-hidden"
+                style={{
+                  background:
+                    "color-mix(in srgb, var(--panel) 88%, transparent)",
+                }}
+              >
+                <motion.div
+                  initial={{ width: 0 }}
+                  animate={{ width: `${Math.max(barPct, 4)}%` }}
+                  transition={{ duration: 0.6, delay: i * 0.05 }}
+                  className="h-full rounded-sm"
+                  style={{ background: barColor }}
+                />
+              </div>
+              <span
+                className="w-16 text-right text-[13px] font-black shrink-0"
+                style={{ color: barColor }}
+              >
+                {entry.points.toLocaleString()}
+              </span>
+              {i === 0 && <span className="text-sm shrink-0">👑</span>}
+            </motion.div>
+          );
+        })}
+      </div>
+      <div className="mt-2 flex items-center gap-2">
+        <div
+          className="flex-1 h-px"
+          style={{ background: "color-mix(in srgb, #f59e0b 20%, transparent)" }}
+        />
+        <span className="text-[13px] text-(--ink-faint)">{recap.day}</span>
+        <div
+          className="flex-1 h-px"
+          style={{ background: "color-mix(in srgb, #f59e0b 20%, transparent)" }}
+        />
+      </div>
+    </div>
+  );
+}