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

Frontend v.0.1

Browse Source
This commit is contained in:
WilliamSoderberg
2026-02-12 17:29:24 +01:00 Verified
parent f8fe3eb991
commit c12d962da0
20 changed files with 2087 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Tournament/ScoreModal.jsx
+111
View File
@@ -0,0 +1,111 @@
// frontend/src/components/Tournament/ScoreModal.jsx
import { Trash2 } from 'lucide-react';
import { useState } from 'react';
import api from '../../services/api';
import { stringToColor } from '../../utils/helpers';
import Modal from '../UI/Modal';
export default function ScoreModal({ isOpen, onClose, node, tournamentId, isAdmin }) {
const match = node.match;
const initialSets = match.sets?.length ? match.sets : [{ p1: '', p2: '' }];
const [sets, setSets] = useState(initialSets);
const [code, setCode] = useState('');
const [error, setError] = useState(null);
const handleSubmit = async () => {
try {
await api.post(`/tournaments/${tournamentId}/matches/${match.id}/score`, {
code: code || undefined,
sets: sets.map(s => ({ p1: Number(s.p1), p2: Number(s.p2) }))
});
onClose();
} catch (err) {
setError("Check code or scores");
}
};
const handleClear = async () => {
if (!confirm("Clear match?")) return;
try {
await api.delete(`/tournaments/${tournamentId}/matches/${match.id}/score`, { params: { code: code || undefined } });
onClose();
} catch (err) { setError("Error clearing"); }
};
const removeSet = (idx) => {
if (sets.length > 1) setSets(sets.filter((_, i) => i !== idx));
};
const updateSet = (idx, field, val) => {
const n = [...sets];
n[idx][field] = parseInt(val) || 0;
setSets(n);
};
const timeDisplay = match.start_time || node.planned_start_time;
const courtName = match.court?.name || 'TBD';
const p1Name = node.p1_team?.name || 'TBD';
const p2Name = node.p2_team?.name || 'TBD';
return (
<Modal isOpen={isOpen} onClose={onClose} title={`Match Protocol #${node.display_number}`}>
<div className="space-y-6">
{error && <div className="bg-red-50 text-red-600 p-3 rounded-xl text-center text-sm font-bold border border-red-100">{error}</div>}
<div className="flex justify-around items-center bg-zinc-50 dark:bg-zinc-950 p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-inner">
<div className="text-center">
<div className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 mb-1">Time</div>
<div className="text-xl font-black font-mono text-zinc-900 dark:text-white">{new Date(timeDisplay).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
</div>
<div className="w-px h-10 bg-zinc-200 dark:bg-zinc-800" />
<div className="text-center">
<div className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 mb-1">Court</div>
<div className="text-xl font-black uppercase text-zinc-900 dark:text-white tracking-tighter flex items-center gap-2">
<div className="w-2.5 h-2.5 rounded-full" style={{ background: stringToColor(courtName) }} />
{courtName}
</div>
</div>
</div>
{!isAdmin && (
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-zinc-400">Authorization</label>
<input type="password" value={code} onChange={e => setCode(e.target.value)} placeholder="•••••" className="w-full bg-zinc-50 dark:bg-zinc-950 border border-zinc-300 dark:border-zinc-800 p-3 rounded-xl text-center tracking-[0.5em] dark:text-white font-bold outline-none focus:border-orange-500" />
</div>
)}
<div className="grid grid-cols-3 gap-2 text-center font-black text-zinc-800 dark:text-zinc-200 items-center">
<div className="text-sm truncate uppercase tracking-tight">{p1Name}</div>
<div className="text-[10px] bg-orange-600 text-white px-3 py-1.5 rounded-full w-fit mx-auto shadow-lg shadow-orange-600/20">VS</div>
<div className="text-sm truncate uppercase tracking-tight">{p2Name}</div>
</div>
<div className="space-y-4">
{sets.map((s, i) => (
<div key={i} className="animate-in slide-in-from-top-1 px-1">
<div className="flex items-center gap-4">
<div className="flex-1 flex items-center gap-3">
<input type="number" value={s.p1} onChange={e => updateSet(i, 'p1', e.target.value)} className="w-full bg-zinc-50 dark:bg-zinc-950 border border-zinc-300 dark:border-zinc-800 p-4 rounded-xl text-center dark:text-white font-black text-xl outline-none focus:border-orange-500 shadow-sm" />
<div className="w-4 h-0.5 bg-zinc-300 dark:bg-zinc-700 rounded-full shrink-0" />
<input type="number" value={s.p2} onChange={e => updateSet(i, 'p2', e.target.value)} className="w-full bg-zinc-50 dark:bg-zinc-950 border border-zinc-300 dark:border-zinc-800 p-4 rounded-xl text-center dark:text-white font-black text-xl outline-none focus:border-orange-500 shadow-sm" />
</div>
<button onClick={() => removeSet(i)} title="Remove Set" className="p-3 text-zinc-300 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-xl transition shrink-0 group">
<Trash2 size={20} className="group-hover:scale-110 transition-transform" />
</button>
</div>
</div>
))}
</div>
<button onClick={() => setSets([...sets, { p1: '', p2: '' }])} className="w-full py-4 border-2 border-dashed border-zinc-300 dark:border-zinc-800 text-zinc-500 rounded-xl text-[10px] font-black uppercase tracking-[0.2em] hover:border-orange-500 hover:text-orange-500 transition active:bg-orange-50 dark:active:bg-orange-900/10">+ Add Set</button>
<div className="flex gap-3 pt-4 border-t border-zinc-100 dark:border-zinc-800">
{match.winner_team_id && <button onClick={handleClear} className="w-1/3 bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 rounded-xl font-black uppercase tracking-widest text-[10px] transition active:scale-95 border border-red-200 dark:border-red-900/50">Clear Match</button>}
<button onClick={handleSubmit} className="flex-1 bg-orange-600 hover:bg-orange-500 text-white py-4 rounded-xl font-black uppercase tracking-widest text-sm shadow-xl shadow-orange-600/20 transition active:scale-95">Submit Result</button>
</div>
</div>
</Modal>
);
}