lvs/brackets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Switched to typescript instead of javascript

Browse Source
This commit is contained in:
WilliamSoderberg
2026-03-11 00:17:15 +01:00 Verified
parent 4751f18ee6
commit 368dc41172
20 changed files with 550 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Bracket/BracketView.jsx → frontend/src/components/Bracket/BracketView.tsx
+26 -17
View File
@@ -1,18 +1,24 @@
// frontend/src/components/Bracket/BracketView.jsx
// frontend/src/components/Bracket/BracketView.tsx
import { useEffect, useRef, useState } from 'react';
import MatchCard from "./MatchCard";
import React, { useEffect, useRef, useState } from 'react';
import { MatchData } from '../../types';
import Podium from "../Tournament/Podium";
import MatchCard from "./MatchCard";
export default function BracketView({ matches, onMatchClick }) {
const containerRef = useRef(null);
const [lines, setLines] = useState([]);
interface BracketViewProps {
matches: MatchData[];
onMatchClick: (match: MatchData) => void;
}
export default function BracketView({ matches, onMatchClick }: BracketViewProps) {
const containerRef = useRef<HTMLDivElement>(null);
const [lines, setLines] = useState<React.ReactElement[]>([]);
useEffect(() => {
const draw = () => {
if (!containerRef.current) return;
const container = containerRef.current.getBoundingClientRect();
const newLines = [];
const newLines: React.ReactElement[] = [];
matches.forEach(m => {
if (m.winner_next_match_id) {
@@ -24,7 +30,7 @@ export default function BracketView({ matches, onMatchClick }) {
const ex = r2.left - container.left, ey = r2.top + r2.height / 2 - container.top;
const c1 = sx + (ex - sx) / 2;
newLines.push(
<path key={`w-${m.id}`} d={`M ${sx} ${sy} C ${c1} ${sy}, ${c1} ${ey}, ${ex} ${ey}`} className="stroke-zinc-400/70 dark:stroke-zinc-700/70 print:!stroke-zinc-400 fill-none stroke-[2px]" />
<path key={`w-${m.id}`} d={`M ${sx} ${sy} C ${c1} ${sy}, ${c1} ${ey}, ${ex} ${ey}`} className="stroke-zinc-400/70 dark:stroke-zinc-700/70 print:stroke-zinc-400! fill-none stroke-[2px]" />
);
}
}
@@ -40,7 +46,7 @@ export default function BracketView({ matches, onMatchClick }) {
const ex = r2.left - container.left, ey = r2.top + r2.height / 2 - container.top;
const c1 = sx + (ex - sx) / 2;
newLines.push(
<path key={`l-${m.id}`} strokeDasharray="6 6" d={`M ${sx} ${sy} C ${c1} ${sy}, ${c1} ${ey}, ${ex} ${ey}`} className="stroke-zinc-300 dark:stroke-zinc-700 print:!stroke-zinc-400 fill-none stroke-[1.5px]" />
<path key={`l-${m.id}`} strokeDasharray="6 6" d={`M ${sx} ${sy} C ${c1} ${sy}, ${c1} ${ey}, ${ex} ${ey}`} className="stroke-zinc-300 dark:stroke-zinc-700 print:stroke-zinc-400! fill-none stroke-[1.5px]" />
);
}
}
@@ -67,10 +73,12 @@ export default function BracketView({ matches, onMatchClick }) {
};
}, [matches]);
const renderRound = (list) => {
const rounds = {};
const renderRound = (list: MatchData[]) => {
const rounds: Record<number, MatchData[]> = {};
list.forEach(m => (rounds[m.round] = rounds[m.round] || []).push(m));
const roundKeys = Object.keys(rounds).sort((a, b) => Number(a) - Number(b));
const roundKeys = Object.keys(rounds).map(Number).sort((a, b) => a - b);
return roundKeys.map((r) => {
let matchesInRound = rounds[r];
matchesInRound.sort((a, b) => a.number - b.number);
@@ -101,7 +109,7 @@ export default function BracketView({ matches, onMatchClick }) {
}
return (
<div className="transition-colors w-full h-full overflow-auto print:overflow-visible print:h-auto print:w-auto bg-zinc-50 dark:bg-zinc-950 bg-[radial-gradient(theme(colors.zinc.300)_1px,transparent_1px)] dark:bg-[radial-gradient(theme(colors.zinc.800)_1px,transparent_1px)] [background-size:20px_20px] print:!bg-white print:!bg-none">
<div className="transition-colors w-full h-full overflow-auto print:overflow-visible print:h-auto print:w-auto bg-zinc-50 dark:bg-zinc-950 bg-[radial-gradient(var(--color-zinc-300)_1px,transparent_1px)] dark:bg-[radial-gradient(var(--color-zinc-800)_1px,transparent_1px)] bg-size-[20px_20px] print:bg-white! print:bg-none!">
<style>
{`@media print {
@page { size: landscape; margin: 0.5cm; }
@@ -116,12 +124,12 @@ export default function BracketView({ matches, onMatchClick }) {
<div className="flex flex-col gap-24">
<div className="relative">
<div className="absolute -top-8 left-0 text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 print:!text-black">Winners Bracket</div>
<div className="absolute -top-8 left-0 text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 print:text-black!">Winners Bracket</div>
<div className="flex gap-20">{renderRound(displayWb)}</div>
</div>
{isDoubleElim && (
<div className="relative pt-8 border-t border-dashed border-zinc-300 dark:border-zinc-800 print:!border-zinc-400">
<div className="absolute top-4 left-0 text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 print:!text-black">Losers Bracket</div>
<div className="relative pt-8 border-t border-dashed border-zinc-300 dark:border-zinc-800 print:border-zinc-400!">
<div className="absolute top-4 left-0 text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 print:text-black!">Losers Bracket</div>
<div className="flex gap-20 mt-4">{renderRound(lb)}</div>
</div>
)}
@@ -130,7 +138,7 @@ export default function BracketView({ matches, onMatchClick }) {
<div className="flex flex-col justify-center gap-6 z-10">
{displayFinals.length > 0 && (
<div className="relative flex flex-col gap-6">
<div className="absolute -top-10 left-1/2 -translate-x-1/2 text-[10px] font-black uppercase bg-orange-100 dark:bg-orange-900/30 text-orange-600 print:!bg-transparent print:!border-black print:!text-black px-4 py-1.5 rounded-full border border-orange-200 dark:border-orange-800 shadow-sm whitespace-nowrap">
<div className="absolute -top-10 left-1/2 -translate-x-1/2 text-[10px] font-black uppercase bg-orange-100 dark:bg-orange-900/30 text-orange-600 print:bg-transparent! print:border-black! print:text-black! px-4 py-1.5 rounded-full border border-orange-200 dark:border-orange-800 shadow-sm whitespace-nowrap">
Championship
</div>
{displayFinals.map(m => <MatchCard key={m.id} match={m} onClick={onMatchClick} />)}
@@ -138,6 +146,7 @@ export default function BracketView({ matches, onMatchClick }) {
)}
</div>
<div className="flex flex-col justify-center gap-6 z-10">
{/* @ts-ignore - Assuming Podium was typed earlier or needs its own MatchData import */}
<Podium matches={matches} />
</div>
</div>
frontend/src/components/Bracket/MatchCard.jsx → frontend/src/components/Bracket/MatchCard.tsx
+15 -9
View File
@@ -1,11 +1,17 @@
// frontend/src/components/Bracket/MatchCard.jsx
// frontend/src/components/Bracket/MatchCard.tsx
import { Check } from 'lucide-react';
import { MatchData } from '../../types';
import { printName, stringToColor } from '../../utils/helpers';
export default function MatchCard({ match, onClick }) {
interface MatchCardProps {
match: MatchData;
onClick: (match: MatchData) => void;
}
export default function MatchCard({ match, onClick }: MatchCardProps) {
const isFinished = match.status === "Finished";
const badgeColor = match.time ? stringToColor(match.court) : null;
const badgeColor = match.time ? stringToColor(match.court) : undefined;
let borderClass = 'border-zinc-300 dark:border-zinc-700';
if (isFinished) borderClass = 'border-orange-500 ring-2 ring-orange-500/10';
@@ -19,13 +25,13 @@ export default function MatchCard({ match, onClick }) {
<div
id={`match-${match.id}`}
onClick={() => canInteract && onClick(match)}
className={`transition-colors w-64 bg-white dark:bg-zinc-900 print:!bg-white rounded-lg border ${borderClass} print:!border-zinc-400 print:!shadow-none shadow-sm transition-all duration-200 print:transition-none relative z-10 flex flex-col ${cursorClass}`}
className={`transition-colors w-64 bg-white dark:bg-zinc-900 print:bg-white! rounded-lg border ${borderClass} print:border-zinc-400! print:shadow-none! shadow-sm transition-all duration-200 print:transition-none relative z-10 flex flex-col ${cursorClass}`}
>
<div className="transition-colors bg-zinc-50 dark:bg-zinc-900/50 print:!bg-transparent px-3 py-1.5 flex justify-between items-center border-b border-zinc-200 dark:border-zinc-800 print:!border-zinc-400 rounded-t-lg">
<div className="transition-colors bg-zinc-50 dark:bg-zinc-900/50 print:bg-transparent! px-3 py-1.5 flex justify-between items-center border-b border-zinc-200 dark:border-zinc-800 print:border-zinc-400! rounded-t-lg">
<div className="flex items-center gap-2">
<span className="font-mono text-[10px] font-bold text-zinc-400 print:!text-zinc-600"># {match.number}</span>
<span className="font-mono text-[10px] font-bold text-zinc-400 print:text-zinc-600!"># {match.number}</span>
{match.time && (
<span className="text-[9px] font-black text-white print:!text-zinc-800 px-1.5 py-0.5 rounded-sm uppercase print:!border print:!border-zinc-400 print:!bg-transparent" style={{ background: badgeColor }}>
<span className="text-[9px] font-black text-white print:text-zinc-800! px-1.5 py-0.5 rounded-sm uppercase print:border! print:border-zinc-400! print:bg-transparent!" style={{ background: badgeColor }}>
{match.court}
</span>
)}
@@ -33,7 +39,7 @@ export default function MatchCard({ match, onClick }) {
{isFinished ? (
<Check className="text-orange-500 print:hidden" size={14} strokeWidth={3} />
) : (
<span className="text-[10px] font-bold text-zinc-500 print:!text-zinc-600 font-mono print:hidden">{match.time || 'TBD'}</span>
<span className="text-[10px] font-bold text-zinc-500 print:text-zinc-600! font-mono print:hidden">{match.time || 'TBD'}</span>
)}
</div>
@@ -42,7 +48,7 @@ export default function MatchCard({ match, onClick }) {
{ n: match.p1, s: match.p1_sets, win: match.winner_team_id !== null && match.winner_team_id === match.p1_team_id, real: match.p1_is_real },
{ n: match.p2, s: match.p2_sets, win: match.winner_team_id !== null && match.winner_team_id === match.p2_team_id, real: match.p2_is_real }
].map((p, i) => (
<div key={i} className={`flex justify-between items-center ${p.win ? 'text-zinc-800 dark:text-zinc-50 print:!text-black font-black' : p.real ? 'text-zinc-500 dark:text-zinc-400 print:!text-black' : 'text-zinc-400 print:!text-zinc-600 italic'}`}>
<div key={i} className={`flex justify-between items-center ${p.win ? 'text-zinc-800 dark:text-zinc-50 print:text-black! font-black' : p.real ? 'text-zinc-500 dark:text-zinc-400 print:text-black!' : 'text-zinc-400 print:text-zinc-600! italic'}`}>
<span className={`truncate text-xs tracking-tight pr-2 print:hidden ${p.win ? ' font-black text-orange-500' : 'font-bold'}`}>{p.n}</span>
frontend/src/components/Dashboard/DashCard.jsx → frontend/src/components/Dashboard/DashCard.tsx
+18 -2
View File
@@ -1,8 +1,24 @@
// frontend/src/components/Dashboard/DashCard.jsx
// frontend/src/components/Dashboard/DashCard.tsx
import { MapPin, SlidersHorizontal, Users } from 'lucide-react';
export default function DashCard({ t, isAdmin, onSelect, onEdit }) {
interface TournamentSummary {
id: string | number;
name: string;
timestamp: string;
type: string;
team_count: number;
court_count: number;
}
interface DashCardProps {
t: TournamentSummary;
isAdmin: boolean;
onSelect: (id: string | number) => void;
onEdit: (t: TournamentSummary) => void;
}
export default function DashCard({ t, isAdmin, onSelect, onEdit }: DashCardProps) {
return (
<div
onClick={() => onSelect(t.id)}
frontend/src/components/Forms/TournamentForm.jsx → frontend/src/components/Forms/TournamentForm.tsx
+38 -21
View File
@@ -1,14 +1,31 @@
// frontend/src/components/Forms/TournamentForm.jsx
// frontend/src/components/Forms/TournamentForm.tsx
import { useEffect, useState } from 'react';
import { Loader2 } from 'lucide-react';
import React, { useEffect, useState } from 'react';
import api from '../../services/api';
export default function TournamentForm({ tournamentId, onSuccess, onDelete }) {
const [initialData, setInitialData] = useState(null);
const [isLoading, setIsLoading] = useState(!!tournamentId);
const [error, setError] = useState(null);
const [isSubmitting, setIsSubmitting] = useState(false);
interface TournamentSettings {
id: string | number;
name: string;
code: string;
type: string;
timestamp: string;
duration: number;
courts: any[];
teams: any[];
}
interface TournamentFormProps {
tournamentId?: string | number | null;
onSuccess: () => void;
onDelete?: (id: string | number) => void;
}
export default function TournamentForm({ tournamentId, onSuccess, onDelete }: TournamentFormProps) {
const [initialData, setInitialData] = useState<TournamentSettings | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(!!tournamentId);
const [error, setError] = useState<string | null>(null);
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
useEffect(() => {
if (!tournamentId) {
@@ -19,7 +36,7 @@ export default function TournamentForm({ tournamentId, onSuccess, onDelete }) {
const fetchSettings = async () => {
try {
const data = await api.get(`/tournaments/${tournamentId}/settings`);
const data = await api.get<TournamentSettings>(`/tournaments/${tournamentId}/settings`);
setInitialData(data);
} catch (err) {
console.error(err);
@@ -32,21 +49,21 @@ export default function TournamentForm({ tournamentId, onSuccess, onDelete }) {
fetchSettings();
}, [tournamentId]);
const handleSubmit = async (e) => {
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitting(true);
setError(null);
const formData = new FormData(e.target);
const formData = new FormData(e.currentTarget);
const rawTeams = formData.get('teams');
const rawCourts = formData.get('courts');
const date = formData.get('date');
const startTime = formData.get('start_time');
const typeRaw = formData.get('type');
const duration = formData.get('duration');
const name = formData.get('name');
const code = formData.get('code');
const rawTeams = formData.get('teams') as string;
const rawCourts = formData.get('courts') as string;
const date = formData.get('date') as string;
const startTime = formData.get('start_time') as string;
const typeRaw = formData.get('type') as string;
const duration = formData.get('duration') as string;
const name = formData.get('name') as string;
const code = formData.get('code') as string;
const teams = rawTeams.split('\n').map(t => t.trim()).filter(t => t.length > 0);
const courts = rawCourts.split(',').map(c => c.trim()).filter(c => c.length > 0);
@@ -59,7 +76,7 @@ export default function TournamentForm({ tournamentId, onSuccess, onDelete }) {
const timestamp = `${date}T${startTime}:00`;
const formattedType = typeRaw.charAt(0).toUpperCase() + typeRaw.slice(1);
const parsedDuration = parseInt(duration);
const parsedDuration = parseInt(duration, 10);
try {
if (tournamentId) {
@@ -89,10 +106,10 @@ export default function TournamentForm({ tournamentId, onSuccess, onDelete }) {
await api.post('/tournaments', fullPayload);
}
onSuccess();
} catch (err) {
} catch (err: any) {
console.error(err);
if (Array.isArray(err.detail)) {
setError(err.detail.map(e => `${e.loc.join('.')}: ${e.msg}`).join(', '));
setError(err.detail.map((e: any) => `${e.loc.join('.')}: ${e.msg}`).join(', '));
} else {
setError(typeof err.detail === 'string' ? err.detail : "Error saving tournament");
}
frontend/src/components/Layout/Layout.jsx → frontend/src/components/Layout/Layout.tsx
+29 -8
View File
@@ -1,16 +1,29 @@
// frontend/src/components/Layout/Layout.jsx
// frontend/src/components/Layout/Layout.tsx
import { useEffect, useState } from 'react';
import React, { useEffect, useState } from 'react';
import { Outlet } from 'react-router-dom';
import { getToken } from '../../services/api';
import ThemeButton from "../UI/ThemeButton";
import Navbar from './Navbar';
export default function Layout({ darkMode, setDarkMode }) {
const [isAdmin, setIsAdmin] = useState(!!getToken());
const [navTitle, setNavTitle] = useState('');
const [navSubtitle, setNavSubtitle] = useState('');
const [showSettings, setShowSettings] = useState(false);
interface LayoutProps {
darkMode: boolean;
setDarkMode: (value: boolean) => void;
}
export interface OutletContextType {
setNavTitle: React.Dispatch<React.SetStateAction<string>>;
setNavSubtitle: React.Dispatch<React.SetStateAction<string>>;
isAdmin: boolean;
showSettings: boolean;
setShowSettings: React.Dispatch<React.SetStateAction<boolean>>;
}
export default function Layout({ darkMode, setDarkMode }: LayoutProps) {
const [isAdmin, setIsAdmin] = useState<boolean>(!!getToken());
const [navTitle, setNavTitle] = useState<string>('');
const [navSubtitle, setNavSubtitle] = useState<string>('');
const [showSettings, setShowSettings] = useState<boolean>(false);
useEffect(() => {
if (navTitle) {
@@ -25,6 +38,14 @@ export default function Layout({ darkMode, setDarkMode }) {
window.location.reload();
};
const contextValue: OutletContextType = {
setNavTitle,
setNavSubtitle,
isAdmin,
showSettings,
setShowSettings
};
return (
<div className="fixed inset-0 min-h-screen bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 transition-colors flex flex-col overflow-hidden print:static print:overflow-visible print:h-auto print:bg-white print:text-black">
<div className="print:hidden shrink-0">
@@ -37,7 +58,7 @@ export default function Layout({ darkMode, setDarkMode }) {
</div>
<main className="flex-1 overflow-hidden relative flex flex-col print:overflow-visible print:h-auto print:block">
<Outlet context={{ setNavTitle, setNavSubtitle, isAdmin, showSettings, setShowSettings }} />
<Outlet context={contextValue} />
</main>
<ThemeButton darkMode={darkMode} setDarkMode={setDarkMode} />
frontend/src/components/Layout/Navbar.jsx → frontend/src/components/Layout/Navbar.tsx
+14 -7
View File
@@ -1,11 +1,18 @@
// frontend/src/components/Layout/Navbar.jsx
// frontend/src/components/Layout/Navbar.tsx
import { Lock, LogOut, Volleyball } from 'lucide-react';
import { Link } from 'react-router-dom';
export default function Navbar({ title, subtitle, isAdmin, onLogout }) {
interface NavbarProps {
title: string;
subtitle: string;
isAdmin: boolean;
onLogout: () => void;
}
export default function Navbar({ title, subtitle, isAdmin, onLogout }: NavbarProps) {
return (
<nav className="transition-colors bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-300 dark:border-zinc-800 sticky top-0 z-[100] px-3 sm:px-6 py-3 sm:py-4 flex justify-between items-center shadow-md shrink-0">
<nav className="transition-colors bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-300 dark:border-zinc-800 sticky top-0 z-100 px-3 sm:px-6 py-3 sm:py-4 flex justify-between items-center shadow-md shrink-0">
<Link to="/" className="flex items-center gap-2 sm:gap-4 cursor-pointer group select-none shrink-0">
<div className="p-1.5 sm:p-2.5 bg-orange-600 rounded-xl group-hover:rotate-12 transition-transform shadow-lg shadow-orange-600/30 active:scale-90">
<Volleyball className="text-white" size={20} />
@@ -16,8 +23,8 @@ export default function Navbar({ title, subtitle, isAdmin, onLogout }) {
</div>
</Link>
<div className="transition-colors absolute left-1/2 -translate-x-1/2 text-center pointer-events-none w-full max-w-[140px] xs:max-w-[180px] sm:max-w-[400px]">
<div className="font-black uppercase text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.3em] text-zinc-900 dark:text-white truncate leading-none mb-1">
<div className="transition-colors absolute left-1/2 -translate-x-1/2 text-center pointer-events-none w-full max-w-35 xs:max-w-[180px] sm:max-w-100">
<div className="font-black uppercase text-[10px] sm:text-sm tracking-widest sm:tracking-[0.3em] text-zinc-900 dark:text-white truncate leading-none mb-1">
{title || 'Dashboard'}
</div>
{subtitle && (
@@ -31,12 +38,12 @@ export default function Navbar({ title, subtitle, isAdmin, onLogout }) {
{isAdmin ? (
<>
<button onClick={onLogout} title="Sign Out" className="text-zinc-400 hover:text-red-500 transition active:scale-90 shrink-0">
<LogOut size={18} className="sm:size-[22px]" />
<LogOut size={18} className="sm:size-5.5" />
</button>
</>
) : (
<Link to="/login" className="text-orange-600 font-black flex items-center gap-1.5 text-[9px] sm:text-[10px] uppercase tracking-widest hover:text-orange-500 transition group p-1.5 sm:p-2 rounded-xl hover:bg-orange-50 dark:hover:bg-orange-950/20">
<Lock size={12} className="sm:size-[14px] group-hover:-translate-y-0.5 transition-transform" /> <span className="hidden xs:inline">Login</span>
<Lock size={12} className="sm:size-3.5 group-hover:-translate-y-0.5 transition-transform" /> <span className="hidden xs:inline">Login</span>
</Link>
)}
</div>
frontend/src/components/Schedule/ScheduleRow.jsx → frontend/src/components/Schedule/ScheduleRow.tsx
+19 -13
View File
@@ -1,22 +1,29 @@
// frontend/src/components/Schedule/ScheduleRow.jsx
// frontend/src/components/Schedule/ScheduleRow.tsx
import { CheckCircle, Pencil, Plus, Trophy } from 'lucide-react';
import React from 'react';
import { MatchData } from '../../types';
import { printName, stringToColor } from '../../utils/helpers';
export default function ScheduleRow({ match: m, onMatchClick, badgeWidth }) {
interface ScheduleRowProps {
match: MatchData;
onMatchClick: (match: MatchData) => void;
badgeWidth: number;
}
export default function ScheduleRow({ match: m, onMatchClick, badgeWidth }: ScheduleRowProps) {
const courtColor = stringToColor(m.court);
const isFinished = m.isFinished;
return (
<div className="transition-colors bg-white dark:bg-zinc-900 print:!bg-white p-4 print:p-3 rounded-2xl print:rounded-none border border-zinc-300 dark:border-zinc-800 print:!border-b print:!border-x-0 print:!border-t-0 print:!border-zinc-300 shadow-sm print:!shadow-none flex items-center justify-between transition-all hover:border-orange-500/30">
<div className="transition-colors bg-white dark:bg-zinc-900 print:bg-white! p-4 print:p-3 rounded-2xl print:rounded-none border border-zinc-300 dark:border-zinc-800 print:border-b! print:border-x-0! print:border-t-0! print:border-zinc-300! shadow-sm print:shadow-none! flex items-center justify-between hover:border-orange-500/30">
<div className="flex gap-4 md:gap-6 print:gap-6 flex-1 min-w-0">
<div className="flex flex-col gap-1 items-center shrink-0" style={{ minWidth: badgeWidth }}>
<div className="text-lg md:text-xl print:text-xl font-black font-mono text-zinc-900 dark:text-white print:!text-black">{m.time}</div>
<div className="text-tiny font-black text-white print:!text-zinc-800 px-2 py-1 rounded uppercase w-full truncate text-center print:!border print:!border-zinc-400 print:!bg-transparent" style={{ background: courtColor }}>
<div className="text-lg md:text-xl print:text-xl font-black font-mono text-zinc-900 dark:text-white print:text-black!">{m.time}</div>
<div className="text-tiny font-black text-white print:text-zinc-800! px-2 py-1 rounded uppercase w-full truncate text-center print:border! print:border-zinc-400! print:bg-transparent!" style={{ background: courtColor }}>
{m.court}
</div>
<div className="transition-colors block md:hidden print:hidden text-tiny font-black bg-zinc-100 dark:bg-zinc-800 w-full truncate text-center print:!bg-transparent text-zinc-400 print:!text-zinc-500 px-2 py-1 rounded w-fit">Match #{m.number}</div>
<div className="transition-colors block md:hidden print:hidden text-tiny font-black bg-zinc-100 dark:bg-zinc-800 w-full truncate text-center print:bg-transparent! text-zinc-400 print:text-zinc-500! px-2 py-1 rounded">Match #{m.number}</div>
</div>
<div className="flex-1 flex flex-col gap-0.5 min-w-0 justify-center md:justify-between">
@@ -27,25 +34,24 @@ export default function ScheduleRow({ match: m, onMatchClick, badgeWidth }) {
<div className="flex items-center gap-2 min-w-0">
{p.win && <Trophy size={14} className="text-orange-500 shrink-0 print:hidden" />}
<span className={`block print:hidden truncate text-sm md:text-base font-bold ${p.win ? 'text-orange-600' : p.real ? 'text-zinc-900 dark:text-zinc-100' : 'text-zinc-400 italic font-normal'}`}>{p.n}</span>
<span className={`hidden print:inline-block print:whitespace-normal print:overflow-visible print:text-base font-bold ${p.real ? 'print:!text-black' : 'print:!text-zinc-600 italic font-normal'}`}>
<span className={`hidden print:inline-block print:whitespace-normal print:overflow-visible print:text-base font-bold ${p.real ? 'print:text-black!' : 'print:text-zinc-600! italic font-normal'}`}>
{printName(p.n)}
</span>
</div>
{i === 0 && <span className="block print:block text-zinc-300 dark:text-zinc-700 print:!text-zinc-400 text-xs font-black md:pb-0.5">VS</span>}
{i === 0 && <span className="block print:block text-zinc-300 dark:text-zinc-700 print:text-zinc-400! text-xs font-black md:pb-0.5">VS</span>}
</React.Fragment>
))}
</div>
<div className="transition-colors hidden md:block print:block text-tiny font-black bg-zinc-100 dark:bg-zinc-800 print:!bg-transparent text-zinc-400 print:!text-zinc-500 px-2 py-1 rounded w-fit">Match #{m.number}</div>
<div className="transition-colors hidden md:block print:block text-tiny font-black bg-zinc-100 dark:bg-zinc-800 print:bg-transparent! text-zinc-400 print:text-zinc-500! px-2 py-1 rounded w-fit">Match #{m.number}</div>
</div>
</div>
{/* ACTION BUTTON AREA */}
{/* items-stretch ensures the button fills the height on mobile to push the scores apart */}
<div className="ml-3 flex items-stretch shrink-0 print:hidden py-0.5">
{isFinished ? (
<button
onClick={() => onMatchClick(m)}
className="flex flex-col justify-between items-center md:justify-center md:items-end hover:bg-zinc-50 dark:hover:bg-zinc-800 p-1.5 md:p-2 rounded-xl transition group/btn min-w-[32px] md:min-w-[80px] border border-transparent hover:border-zinc-200 dark:hover:border-zinc-700"
className="flex flex-col justify-between items-center md:justify-center md:items-end hover:bg-zinc-50 dark:hover:bg-zinc-800 p-1.5 md:p-2 rounded-xl transition group/btn min-w-8 md:min-w-20 border border-transparent hover:border-zinc-200 dark:hover:border-zinc-700"
title="Edit Score"
>
{/* --- MOBILE VERTICAL STACK --- */}
@@ -54,7 +60,7 @@ export default function ScheduleRow({ match: m, onMatchClick, badgeWidth }) {
</div>
{/* Clean minimal vertical line for mobile */}
<div className="w-[2px] h-3 bg-zinc-200 dark:bg-zinc-700 rounded-full md:hidden my-1" />
<div className="w-0.5 h-3 bg-zinc-200 dark:bg-zinc-700 rounded-full md:hidden my-1" />
<div className={`${m.winnerName === m.p2 ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700' : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-50'} px-2 py-0.5 rounded text-[10px] font-black font-mono border border-zinc-200 dark:border-zinc-700 md:hidden`}>
{m.p2_sets}
@@ -96,6 +102,6 @@ export default function ScheduleRow({ match: m, onMatchClick, badgeWidth }) {
{isFinished ? m.p2_sets : ''}
</div>
</div>
</div >
</div>
);
}
frontend/src/components/Schedule/ScheduleView.jsx → frontend/src/components/Schedule/ScheduleView.tsx
+10 -4
View File
@@ -1,11 +1,17 @@
// frontend/src/components/Schedule/ScheduleView.jsx
// frontend/src/components/Schedule/ScheduleView.tsx
import { Search } from 'lucide-react';
import { useState } from 'react';
import { MatchData } from '../../types';
import ScheduleRow from './ScheduleRow';
export default function ScheduleView({ schedule, onMatchClick }) {
const [filter, setFilter] = useState("");
interface ScheduleViewProps {
schedule: MatchData[];
onMatchClick: (match: MatchData) => void;
}
export default function ScheduleView({ schedule, onMatchClick }: ScheduleViewProps) {
const [filter, setFilter] = useState<string>("");
const longestCourt = schedule.reduce((max, m) => {
const c = m.court || "Court";
@@ -46,7 +52,7 @@ export default function ScheduleView({ schedule, onMatchClick }) {
</div>
</div>
<div className="transition-colors absolute top-0 left-0 right-3 h-32 bg-gradient-to-b from-zinc-50 via-zinc-50/95 to-transparent dark:from-zinc-950 dark:via-zinc-950/95 dark:to-transparent pointer-events-none z-20 print:hidden" />
<div className="transition-colors absolute top-0 left-0 right-3 h-32 bg-linear-to-b from-zinc-50 via-zinc-50/95 to-transparent dark:from-zinc-950 dark:via-zinc-950/95 dark:to-transparent pointer-events-none z-20 print:hidden" />
<div className="flex-1 overflow-y-auto print:overflow-visible p-6 pt-28 pb-32 print:p-0 print:pt-12 relative z-10">
<div className="max-w-4xl mx-auto w-full space-y-3 print:space-y-0">
frontend/src/components/Tournament/Podium.jsx → frontend/src/components/Tournament/Podium.tsx
+38 -31
View File
@@ -1,44 +1,57 @@
// frontend/src/components/Tournament/Podium.jsx
// frontend/src/components/Tournament/Podium.tsx
import { Trophy } from 'lucide-react';
import { printName } from '../../utils/helpers';
export default function Podium({ matches }) {
interface MatchInfo {
bracket: string;
round: number;
isFinished: boolean;
winnerName: string | null;
p1: string;
p2: string;
number: number;
hasTeams: boolean;
}
interface PodiumProps {
matches: MatchInfo[];
}
export default function Podium({ matches }: PodiumProps) {
const isDoubleElim = matches.some(m => m.bracket === 'Loser');
const wb = matches.filter(m => m.bracket === 'Winner').sort((a, b) => a.round - b.round);
const lb = matches.filter(m => m.bracket === 'Loser').sort((a, b) => a.round - b.round);
const finals = matches.filter(m => m.bracket === 'Finals').sort((a, b) => a.round - b.round);
let gfMatch = null;
let resetMatch = null;
let tpMatch = null;
let gfMatch: MatchInfo | null = null;
let resetMatch: MatchInfo | null = null;
let tpMatch: MatchInfo | null = null;
if (isDoubleElim) {
tpMatch = lb[lb.length - 1];
gfMatch = finals[0];
resetMatch = finals[1];
tpMatch = lb[lb.length - 1] || null;
gfMatch = finals[0] || null;
resetMatch = finals[1] || null;
} else {
gfMatch = wb[wb.length - 1];
tpMatch = finals[0];
gfMatch = wb[wb.length - 1] || null;
tpMatch = finals[0] || null;
}
const podium = [
{ rank: 1, label: "1st", team: "TBD", isReal: false, color: "bg-yellow-400 text-yellow-900 dark:text-yellow-950 shadow-yellow-400/50" },
{ rank: 2, label: "2nd", team: "TBD", isReal: false, color: "bg-zinc-300 dark:bg-zinc-400 text-zinc-800 dark:text-zinc-900 shadow-zinc-400/50" },
{ rank: 1, label: "1st", team: "TBD", isReal: false, color: "bg-yellow-400 text-yellow-900 dark:text-yellow-950 shadow-yellow-400/50", hidden: false },
{ rank: 2, label: "2nd", team: "TBD", isReal: false, color: "bg-zinc-300 dark:bg-zinc-400 text-zinc-800 dark:text-zinc-900 shadow-zinc-400/50", hidden: false },
{ rank: 3, label: "3rd", team: "TBD", isReal: false, color: "bg-amber-600 text-amber-50 dark:text-amber-50 shadow-amber-600/50", hidden: false }
];
// --- CALCULATE 3RD PLACE ---
if (tpMatch) {
if (tpMatch.isFinished && tpMatch.winnerName) {
// If match is done, grab the actual team name
podium[2].team = isDoubleElim
? (tpMatch.winnerName === tpMatch.p1 ? tpMatch.p2 : tpMatch.p1) // DE: Loser of LB Final
: tpMatch.winnerName; // SE: Winner of 3rd Place Match
? (tpMatch.winnerName === tpMatch.p1 ? tpMatch.p2 : tpMatch.p1)
: tpMatch.winnerName;
podium[2].isReal = true;
} else {
// Set the exact string expected by the print formatter
podium[2].team = isDoubleElim ? `Loser of #${tpMatch.number}` : `Winner of #${tpMatch.number}`;
}
} else {
@@ -53,46 +66,40 @@ export default function Podium({ matches }) {
podium[1].isReal = true;
} else if (gfMatch) {
if (gfMatch.isFinished && gfMatch.winnerName) {
// Has the loser bracket champ won, forcing a reset?
const isResetForced = resetMatch && resetMatch.hasTeams;
if (!isResetForced) {
// GF Winner is 1st, GF Loser is 2nd
podium[0].team = gfMatch.winnerName;
podium[0].isReal = true;
podium[1].team = gfMatch.winnerName === gfMatch.p1 ? gfMatch.p2 : gfMatch.p1;
podium[1].isReal = true;
} else {
// Reset forced, wait for the final match
podium[0].team = `Winner of #${resetMatch.number}`;
podium[1].team = `Loser of #${resetMatch.number}`;
podium[0].team = `Winner of #${resetMatch?.number || 'TBD'}`;
podium[1].team = `Loser of #${resetMatch?.number || 'TBD'}`;
}
} else {
// GF not finished yet
podium[0].team = `Winner of #${gfMatch.number}`;
podium[1].team = `Loser of #${gfMatch.number}`;
}
}
return (
<div className="bg-white dark:bg-zinc-900 print:!bg-white border border-zinc-200 dark:border-zinc-800 print:!border-zinc-400 rounded-xl shadow-sm w-64 overflow-hidden z-10 print:!shadow-none">
<div className="bg-zinc-50 dark:bg-zinc-900/50 print:!bg-transparent p-3 border-b border-zinc-200 dark:border-zinc-800 print:!border-zinc-400">
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-500 print:!text-zinc-600 text-center flex items-center justify-center gap-2">
<Trophy size={14} className="text-orange-500 print:!text-black" /> Final Standings
<div className="bg-white dark:bg-zinc-900 print:bg-white! border border-zinc-200 dark:border-zinc-800 print:border-zinc-400! rounded-xl shadow-sm w-64 overflow-hidden z-10 print:shadow-none!">
<div className="bg-zinc-50 dark:bg-zinc-900/50 print:bg-transparent! p-3 border-b border-zinc-200 dark:border-zinc-800 print:border-zinc-400!">
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-500 print:text-zinc-600! text-center flex items-center justify-center gap-2">
<Trophy size={14} className="text-orange-500 print:text-black!" /> Final Standings
</h3>
</div>
<div className="p-4 space-y-4">
{podium.filter(p => !p.hidden).map(p => (
<div key={p.rank} className="flex items-center gap-3">
<div className={`w-7 h-7 rounded-full flex items-center justify-center font-black text-xs shrink-0 shadow-sm print:!shadow-none print:!bg-white print:!border print:!border-zinc-400 print:!text-black ${p.color}`}>
<div className={`w-7 h-7 rounded-full flex items-center justify-center font-black text-xs shrink-0 shadow-sm print:shadow-none! print:bg-white! print:border! print:border-zinc-400! print:text-black! ${p.color}`}>
{p.rank}
</div>
{/* Web Label */}
<div className={`text-sm truncate print:hidden ${p.isReal ? 'font-bold text-zinc-900 dark:text-white print:!text-black' : 'font-medium italic text-zinc-400 print:!text-zinc-600'}`} title={p.team}>
<div className={`text-sm truncate print:hidden ${p.isReal ? 'font-bold text-zinc-900 dark:text-white print:text-black!' : 'font-medium italic text-zinc-400 print:text-zinc-600!'}`} title={p.team}>
{p.team}
</div>
{/* Print Label */}
<div className={`hidden print:block text-sm print:whitespace-normal print:overflow-visible ${p.isReal ? 'font-bold print:!text-black' : 'font-medium italic print:!text-zinc-600'}`}>
<div className={`hidden print:block text-sm print:whitespace-normal print:overflow-visible ${p.isReal ? 'font-bold print:text-black!' : 'font-medium italic print:text-zinc-600!'}`}>
{printName(p.team)}
</div>
</div>
frontend/src/components/Tournament/ScoreModal.jsx → frontend/src/components/Tournament/ScoreModal.tsx
+49 -13
View File
@@ -1,25 +1,52 @@
// frontend/src/components/Tournament/ScoreModal.jsx
// frontend/src/components/Tournament/ScoreModal.tsx
import { Clock, Eraser, MapPin, Trophy } from 'lucide-react';
import { useState } from 'react';
import Modal from '../UI/Modal';
const ScoreForm = ({ match, isAdmin, onSubmit, onClear }) => {
// Safe init of sets
const [sets, setSets] = useState(match.sets && match.sets.length ? match.sets : [{ p1: '', p2: '' }]);
const [code, setCode] = useState('');
const [error, setError] = useState(null);
interface SetData {
p1: number | string;
p2: number | string;
}
interface MatchData {
id: string | number;
number: number;
time: string;
court: string;
p1?: string;
p1_label?: string;
p2?: string;
p2_label?: string;
isFinished: boolean;
sets?: SetData[];
}
interface ScoreFormProps {
match: MatchData;
isAdmin: boolean;
onSubmit: (id: string | number, sets: SetData[], code: string) => Promise<void>;
onClear: (id: string | number, code: string) => Promise<void>;
}
const ScoreForm = ({ match, isAdmin, onSubmit, onClear }: ScoreFormProps) => {
const [sets, setSets] = useState<SetData[]>(match.sets && match.sets.length ? match.sets : [{ p1: '', p2: '' }]);
const [code, setCode] = useState<string>('');
const [error, setError] = useState<string | null>(null);
const handleSubmit = async () => {
try { await onSubmit(match.id, sets, code); }
catch (err) { setError(typeof err.detail === 'string' ? err.detail : "Check code or scores"); }
try {
await onSubmit(match.id, sets, code);
} catch (err: any) {
setError(typeof err?.detail === 'string' ? err.detail : "Check code or scores");
}
};
const removeSet = (idx) => {
const removeSet = (idx: number) => {
if (sets.length > 1) setSets(sets.filter((_, i) => i !== idx));
};
const updateSet = (idx, field, val) => {
const updateSet = (idx: number, field: keyof SetData, val: string) => {
const n = [...sets];
n[idx][field] = parseInt(val) || 0;
setSets(n);
@@ -61,9 +88,9 @@ const ScoreForm = ({ match, isAdmin, onSubmit, onClear }) => {
)}
<div className="grid grid-cols-3 gap-2 text-center font-bold text-zinc-700 dark:text-zinc-200 items-center px-2">
<div className="break-words text-sm leading-tight uppercase">{match.p1 || match.p1_label}</div>
<div className="wrap-break-word text-sm leading-tight uppercase">{match.p1 || match.p1_label}</div>
<div className="text-zinc-400 dark:text-zinc-600 text-[10px] font-bold uppercase bg-zinc-100 dark:bg-zinc-950 px-3 py-1 rounded-full w-fit mx-auto shadow-sm">VS</div>
<div className="break-words text-sm leading-tight uppercase">{match.p2 || match.p2_label}</div>
<div className="wrap-break-word text-sm leading-tight uppercase">{match.p2 || match.p2_label}</div>
</div>
<div className="space-y-2 max-h-48 overflow-y-auto pr-1">
@@ -134,7 +161,16 @@ const ScoreForm = ({ match, isAdmin, onSubmit, onClear }) => {
);
};
export default function ScoreModal({ isOpen, onClose, match, isAdmin, onSubmit, onClear }) {
interface ScoreModalProps {
isOpen: boolean;
onClose: () => void;
match: MatchData | null;
isAdmin: boolean;
onSubmit: (id: string | number, sets: SetData[], code: string) => Promise<void>;
onClear: (id: string | number, code: string) => Promise<void>;
}
export default function ScoreModal({ isOpen, onClose, match, isAdmin, onSubmit, onClear }: ScoreModalProps) {
if (!isOpen || !match) return null;
return (
frontend/src/components/UI/Modal.jsx → frontend/src/components/UI/Modal.tsx
+14 -4
View File
@@ -1,15 +1,25 @@
// frontend/src/components/UI/Modal.jsx
// frontend/src/components/UI/Modal.tsx
import { X } from 'lucide-react';
import { LucideIcon, X } from 'lucide-react';
import React from 'react';
export default function Modal({ isOpen, onClose, title, icon: Icon, children }) {
interface ModalProps {
isOpen: boolean;
onClose: () => void;
title: string;
icon?: LucideIcon;
children: React.ReactNode;
}
export default function Modal({ isOpen, onClose, title, icon: Icon, children }: ModalProps) {
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/75 backdrop-blur-sm animate-in fade-in duration-200">
<div className="fixed inset-0 z-200 flex items-center justify-center bg-black/75 backdrop-blur-sm animate-in fade-in duration-200">
<div className="bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl w-full max-w-lg border border-zinc-300 dark:border-zinc-800 max-h-[90vh] overflow-y-auto">
<div className="p-6">
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-black text-zinc-900 dark:text-white flex items-start gap-2">
{/* @ts-ignore - 'weight' is a specific prop if using Phosphor icons, but Lucide doesn't natively use it. Kept for compatibility. */}
{Icon && <Icon weight="duotone" className="text-orange-500 mt-1 shrink-0" size={24} />}
<span>{title}</span>
</h2>
frontend/src/components/UI/ThemeButton.jsx → frontend/src/components/UI/ThemeButton.tsx
+8 -3
View File
@@ -1,14 +1,19 @@
// frontend/src/components/UI/ThemeButton.jsx
// frontend/src/components/UI/ThemeButton.tsx
import { Moon, Sun } from 'lucide-react';
export default function ThemeButton({ darkMode, setDarkMode }) {
interface ThemeButtonProps {
darkMode: boolean;
setDarkMode: (value: boolean) => void;
}
export default function ThemeButton({ darkMode, setDarkMode }: ThemeButtonProps) {
return (
<div className="fixed bottom-6 sm:bottom-8 right-6 sm:right-8 z-40 print:hidden">
<button
onClick={() => setDarkMode(!darkMode)}
title="Toggle Theme"
className="p-4 sm:p-5 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-[1.5rem] sm:rounded-[2rem] shadow-2xl transition hover:scale-110 active:scale-95 border-2 border-zinc-700 dark:border-zinc-300 group"
className="p-4 sm:p-5 bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 rounded-3xl sm:rounded-4xl shadow-2xl transition hover:scale-110 active:scale-95 border-2 border-zinc-700 dark:border-zinc-300 group"
>
{darkMode ? <Sun size={24} strokeWidth={2.5} className="sm:size-7" /> : <Moon size={24} strokeWidth={2.5} className="sm:size-7" />}
</button>