77 lines
3.6 KiB
TypeScript
77 lines
3.6 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { Medal, CheckCircle2, History } from 'lucide-react';
|
|
import { useCTF } from './CTFContext';
|
|
import { calculateChallengeValue, getFirstBloodBonusFactor } from './services/scoring';
|
|
|
|
export const Log: React.FC = () => {
|
|
const { state } = useCTF();
|
|
|
|
const sortedSolves = useMemo(() => {
|
|
return [...state.solves].sort((a, b) => b.timestamp - a.timestamp);
|
|
}, [state.solves]);
|
|
|
|
return (
|
|
<div className="w-full px-6 py-12 max-w-5xl mx-auto">
|
|
<div className="flex items-center gap-4 mb-8">
|
|
<History size={32} className="text-[#bf00ff]" />
|
|
<h2 className="text-4xl font-black italic text-white uppercase tracking-tighter">Event Log</h2>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
{sortedSolves.length === 0 ? (
|
|
<div className="p-8 hxp-border border-[#333] text-center text-slate-500 font-bold uppercase tracking-widest bg-white/5">
|
|
No activities recorded yet.
|
|
</div>
|
|
) : (
|
|
sortedSolves.map((solve, idx) => {
|
|
const team = state.teams.find(t => t.id === solve.teamId);
|
|
const challenge = state.challenges.find(c => c.id === solve.challengeId);
|
|
|
|
if (!team || !challenge) return null;
|
|
|
|
const challengeSolves = state.solves
|
|
.filter(s => s.challengeId === solve.challengeId)
|
|
.sort((a, b) => a.timestamp - b.timestamp);
|
|
|
|
const rank = challengeSolves.findIndex(s => s.teamId === solve.teamId);
|
|
const bonusFactor = getFirstBloodBonusFactor(rank);
|
|
const basePoints = calculateChallengeValue(
|
|
challenge.initialPoints,
|
|
challenge.minimumPoints || 0,
|
|
challenge.decaySolves || 1,
|
|
challengeSolves.length
|
|
);
|
|
const bonus = Math.floor(challenge.initialPoints * bonusFactor);
|
|
const pointsGained = basePoints + bonus;
|
|
|
|
const getRankIcon = (rank: number) => {
|
|
if (rank === 0) return <Medal size={18} className="text-[#ffaa00]" />; // Gold
|
|
if (rank === 1) return <Medal size={18} className="text-[#c0c0c0]" />; // Silver
|
|
if (rank === 2) return <Medal size={18} className="text-[#cd7f32]" />; // Bronze
|
|
return <CheckCircle2 size={18} className="text-[#00ff00]" />; // Checkmark
|
|
};
|
|
|
|
const difficultyColor =
|
|
challenge.difficulty === 'Low' ? 'text-[#00ff00]' :
|
|
challenge.difficulty === 'Medium' ? 'text-[#ffaa00]' :
|
|
'text-[#ff0000]';
|
|
|
|
const dateStr = new Date(solve.timestamp).toLocaleString();
|
|
|
|
return (
|
|
<div key={`${solve.teamId}-${solve.challengeId}-${idx}`} className="p-4 hxp-border border-[#333] bg-white/5 flex items-center gap-4 hover:border-[#bf00ff] transition-colors">
|
|
<div className="flex-shrink-0">
|
|
{getRankIcon(rank)}
|
|
</div>
|
|
<div className="text-sm font-mono text-slate-300">
|
|
<span className="text-slate-500 mr-2">[{dateStr}]</span>
|
|
<span className="font-bold text-white uppercase italic">{team.name}</span> solved <span className="text-[#bf00ff] uppercase">{challenge.category}</span> - <span className={`font-bold ${difficultyColor}`}>{challenge.title}</span> and gained <span className="text-white font-bold hxp-border-purple px-1 py-0.5 bg-[#bf00ff]/10">{pointsGained} points</span>.
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|