Complete main functionallity of backend and frontend.

2026-02-21 18:29:22 +01:00
parent 3a795418d3
commit 7ce44979b9
16 changed files with 383 additions and 168 deletions
@@ -0,0 +1,66 @@
+// frontend/src/components/Bracket/MatchCard.jsx
+
+import { Check } from 'lucide-react';
+import { stringToColor } from '../../utils/helpers';
+
+export default function MatchCard({ match, onClick }) {
+    const isFinished = match.status === "Finished";
+    const badgeColor = match.time ? stringToColor(match.court) : null;
+
+    let borderClass = 'border-zinc-300 dark:border-zinc-700';
+    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';
+
+    return (
+        <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}`}
+        >
+            <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="flex items-center gap-2">
+                    <span className="font-mono text-[10px] font-bold text-zinc-400"># {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 }}>
+                            {match.court}
+                        </span>
+                    )}
+                </div>
+                {isFinished ? (
+                    <Check className="text-orange-500" size={14} strokeWidth={3} />
+                ) : (
+                    <span className="text-[10px] font-bold text-zinc-500 font-mono">{match.time || 'TBD'}</span>
+                )}
+            </div>
+
+            <div className="p-3 space-y-2">
+                {[
+                    {
+                        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
+                    }
+                ].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'}`}>
+                            {p.s}
+                        </span>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}