achmad
58 lines
2.5 KiB
TypeScript
58 lines
2.5 KiB
TypeScript
'use client';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export default function MatchesPage() {
|
|
const [matches, setMatches] = useState<any[]>([]);
|
|
const [heroFilter, setHeroFilter] = useState('');
|
|
const [diffFilter, setDiffFilter] = useState('');
|
|
|
|
const load = () => {
|
|
const params = new URLSearchParams();
|
|
if (heroFilter) params.set('hero', heroFilter);
|
|
if (diffFilter) params.set('difficulty', diffFilter);
|
|
fetch(`/api/admin/matches?${params}`).then(r => r.json()).then(setMatches).catch(() => {});
|
|
};
|
|
|
|
useEffect(() => { load(); }, [heroFilter, diffFilter]);
|
|
|
|
return (
|
|
<div>
|
|
<h1 className="text-2xl font-bold mb-4">Match History</h1>
|
|
<div className="flex gap-4 mb-4">
|
|
<input type="text" placeholder="Filter by hero..." value={heroFilter} onChange={e => setHeroFilter(e.target.value)}
|
|
className="px-3 py-2 bg-gray-800 rounded text-white text-sm" />
|
|
<select value={diffFilter} onChange={e => setDiffFilter(e.target.value)}
|
|
className="px-3 py-2 bg-gray-800 rounded text-white text-sm">
|
|
{['', 'easy', 'normal', 'hard', 'impossible', 'death_sentence'].map(d =>
|
|
<option key={d} value={d}>{d || 'All Difficulties'}</option>
|
|
)}
|
|
</select>
|
|
</div>
|
|
<div className="bg-gray-800 rounded-lg overflow-x-auto">
|
|
<table className="w-full text-left text-sm">
|
|
<thead>
|
|
<tr className="border-b border-gray-700 text-gray-400">
|
|
<th className="p-2">Steam ID</th><th className="p-2">Hero</th><th className="p-2">Result</th>
|
|
<th className="p-2">Difficulty</th><th className="p-2">K/D</th><th className="p-2">Duration</th>
|
|
<th className="p-2">Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{matches.map((m: any) => (
|
|
<tr key={m.id} className="border-b border-gray-700">
|
|
<td className="p-2 font-mono text-xs">{m.steam_id}</td>
|
|
<td className="p-2">{m.hero}</td>
|
|
<td className={`p-2 font-semibold ${m.result === 'win' ? 'text-green-400' : 'text-red-400'}`}>{m.result}</td>
|
|
<td className="p-2">{m.difficulty}</td>
|
|
<td className="p-2">{m.kills}/{m.deaths}</td>
|
|
<td className="p-2">{Math.floor((m.duration || 0) / 60)}m</td>
|
|
<td className="p-2 text-gray-400 text-xs">{m.created_at}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|