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

General clean-up

Browse Source
This commit is contained in:
WilliamSoderberg
2026-02-22 14:01:47 +01:00 Verified
parent 7ce44979b9
commit 7d04ceb2a3
17 changed files with 401 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Bracket/MatchCard.jsx
+23 -24
View File
@@ -1,7 +1,7 @@
// frontend/src/components/Bracket/MatchCard.jsx
import { Check } from 'lucide-react';
import { stringToColor } from '../../utils/helpers';
import { printName, stringToColor } from '../../utils/helpers';
export default function MatchCard({ match, onClick }) {
const isFinished = match.status === "Finished";
@@ -11,7 +11,6 @@ export default function MatchCard({ match, onClick }) {
if (isFinished) borderClass = 'border-orange-500 ring-2 ring-orange-500/10';
const canInteract = match.hasTeams;
const cursorClass = canInteract
? 'cursor-pointer hover:shadow-md hover:-translate-y-0.5'
: 'cursor-default opacity-100';
@@ -20,44 +19,44 @@ export default function MatchCard({ match, onClick }) {
<div
id={`match-${match.id}`}
onClick={() => canInteract && onClick(match)}
className={`w-64 bg-white dark:bg-zinc-900 rounded-lg border ${borderClass} shadow-sm transition-all duration-200 relative z-10 flex flex-col ${cursorClass}`}
className={`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="bg-zinc-50 dark:bg-zinc-900/50 px-3 py-2 flex justify-between items-center border-b border-zinc-200 dark:border-zinc-800 rounded-t-lg">
<div className="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"># {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 px-1.5 py-0.5 rounded-sm uppercase" 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>
)}
</div>
{isFinished ? (
<Check className="text-orange-500" size={14} strokeWidth={3} />
<Check className="text-orange-500 print:hidden" size={14} strokeWidth={3} />
) : (
<span className="text-[10px] font-bold text-zinc-500 font-mono">{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>
<div className="p-3 space-y-2">
<div className="p-2 space-y-1.5">
{[
{
n: match.p1,
s: match.p1_sets,
win: match.winner_team_id !== null && match.winner_team_id === match.p1_team_id,
real: match.p1_team_id
},
{
n: match.p2,
s: match.p2_sets,
win: match.winner_team_id !== null && match.winner_team_id === match.p2_team_id,
real: match.p2_team_id
}
{ 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-900 dark:text-white font-black' : p.real ? 'text-zinc-600 dark:text-zinc-300' : 'text-zinc-400 italic'}`}>
<span className="truncate text-xs uppercase tracking-tight">{p.n}</span>
<span className={`px-2 py-0.5 rounded text-[10px] font-bold ${p.win ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700' : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-500'}`}>
<div key={i} className={`flex justify-between items-center ${p.win ? 'text-zinc-900 dark:text-white print:!text-black font-black' : p.real ? 'text-zinc-600 dark:text-zinc-300 print:!text-black' : 'text-zinc-400 print:!text-zinc-600 italic'}`}>
<span className="truncate text-xs tracking-tight pr-2 print:hidden">{p.n}</span>
<span className="hidden print:inline-block print:whitespace-normal print:overflow-visible text-xs tracking-tight pr-2">
{printName(p.n)}
</span>
<span className={`print:hidden px-2 py-0.5 rounded text-[10px] font-bold ${p.win ? 'bg-orange-100 dark:bg-orange-900/30 text-orange-700' : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-500'}`}>
{p.s}
</span>
<span className="hidden print:flex w-5 h-5 border border-zinc-300 rounded-[3px] shrink-0 items-center justify-center text-[10px] font-bold text-black">
{isFinished ? p.s : ''}
</span>
</div>
))}
</div>