Julian Tabel
5edda2dba9
Merges the run dashboard into the encounters page as a unified view at /runs/:runId, adds encounter method grouping in the modal and badges on route rows, improves the home page with recent runs, adds mobile hamburger nav, and polishes empty states. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
264 lines
8.8 KiB
TypeScript
264 lines
8.8 KiB
TypeScript
import { useState } from 'react'
|
|
import { useParams, Link } from 'react-router-dom'
|
|
import { useRun, useUpdateRun } from '../hooks/useRuns'
|
|
import { useGameRoutes } from '../hooks/useGames'
|
|
import { useUpdateEncounter } from '../hooks/useEncounters'
|
|
import { StatCard, PokemonCard, RuleBadges, StatusChangeModal, EndRunModal } from '../components'
|
|
import type { RunStatus, EncounterDetail } from '../types'
|
|
|
|
const statusStyles: Record<RunStatus, string> = {
|
|
active: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
|
|
completed:
|
|
'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300',
|
|
failed: 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300',
|
|
}
|
|
|
|
function formatDuration(start: string, end: string) {
|
|
const ms = new Date(end).getTime() - new Date(start).getTime()
|
|
const days = Math.floor(ms / (1000 * 60 * 60 * 24))
|
|
if (days === 0) return 'Less than a day'
|
|
if (days === 1) return '1 day'
|
|
return `${days} days`
|
|
}
|
|
|
|
export function RunDashboard() {
|
|
const { runId } = useParams<{ runId: string }>()
|
|
const runIdNum = Number(runId)
|
|
const { data: run, isLoading, error } = useRun(runIdNum)
|
|
const { data: routes } = useGameRoutes(run?.gameId ?? null)
|
|
const updateEncounter = useUpdateEncounter(runIdNum)
|
|
const updateRun = useUpdateRun(runIdNum)
|
|
const [selectedEncounter, setSelectedEncounter] =
|
|
useState<EncounterDetail | null>(null)
|
|
const [showEndRun, setShowEndRun] = useState(false)
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-16">
|
|
<div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error || !run) {
|
|
return (
|
|
<div className="max-w-4xl mx-auto p-8">
|
|
<div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4 text-red-700 dark:text-red-400">
|
|
Failed to load run. It may not exist.
|
|
</div>
|
|
<Link
|
|
to="/runs"
|
|
className="inline-block mt-4 text-blue-600 hover:underline"
|
|
>
|
|
Back to runs
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const isActive = run.status === 'active'
|
|
const alive = run.encounters.filter(
|
|
(e) => e.status === 'caught' && e.faintLevel === null,
|
|
)
|
|
const dead = run.encounters.filter(
|
|
(e) => e.status === 'caught' && e.faintLevel !== null,
|
|
)
|
|
const visitedRoutes = new Set(run.encounters.map((e) => e.routeId)).size
|
|
const totalRoutes = routes?.length
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto p-8">
|
|
{/* Header */}
|
|
<div className="mb-6">
|
|
<Link
|
|
to="/runs"
|
|
className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mb-2 inline-block"
|
|
>
|
|
← All Runs
|
|
</Link>
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
|
|
{run.name}
|
|
</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
|
{run.game.name} · {run.game.region} · Started{' '}
|
|
{new Date(run.startedAt).toLocaleDateString(undefined, {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
})}
|
|
</p>
|
|
</div>
|
|
<span
|
|
className={`px-3 py-1 rounded-full text-sm font-medium capitalize ${statusStyles[run.status]}`}
|
|
>
|
|
{run.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Completion Banner */}
|
|
{!isActive && (
|
|
<div
|
|
className={`rounded-lg p-4 mb-6 ${
|
|
run.status === 'completed'
|
|
? 'bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800'
|
|
: 'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-2xl">{run.status === 'completed' ? '\u{1f3c6}' : '\u{1faa6}'}</span>
|
|
<div>
|
|
<p
|
|
className={`font-semibold ${
|
|
run.status === 'completed'
|
|
? 'text-blue-800 dark:text-blue-200'
|
|
: 'text-red-800 dark:text-red-200'
|
|
}`}
|
|
>
|
|
{run.status === 'completed' ? 'Victory!' : 'Defeat'}
|
|
</p>
|
|
<p
|
|
className={`text-sm ${
|
|
run.status === 'completed'
|
|
? 'text-blue-600 dark:text-blue-400'
|
|
: 'text-red-600 dark:text-red-400'
|
|
}`}
|
|
>
|
|
{run.completedAt && (
|
|
<>
|
|
Ended{' '}
|
|
{new Date(run.completedAt).toLocaleDateString(undefined, {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
})}
|
|
{' \u00b7 '}
|
|
Duration: {formatDuration(run.startedAt, run.completedAt)}
|
|
</>
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
|
|
<StatCard
|
|
label="Encounters"
|
|
value={run.encounters.length}
|
|
color="blue"
|
|
/>
|
|
<StatCard label="Alive" value={alive.length} color="green" />
|
|
<StatCard label="Deaths" value={dead.length} color="red" />
|
|
<StatCard
|
|
label="Routes Visited"
|
|
value={visitedRoutes}
|
|
total={totalRoutes}
|
|
color="purple"
|
|
/>
|
|
</div>
|
|
|
|
{/* Rules */}
|
|
<div className="mb-6">
|
|
<h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
|
|
Active Rules
|
|
</h2>
|
|
<RuleBadges rules={run.rules} />
|
|
</div>
|
|
|
|
{/* Active Team */}
|
|
<div className="mb-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
|
{isActive ? 'Active Team' : 'Final Team'}
|
|
</h2>
|
|
{alive.length === 0 ? (
|
|
<p className="text-gray-500 dark:text-gray-400 text-sm">
|
|
No pokemon caught yet — head to encounters to start building your
|
|
team!
|
|
</p>
|
|
) : (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
|
{alive.map((enc) => (
|
|
<PokemonCard
|
|
key={enc.id}
|
|
encounter={enc}
|
|
onClick={isActive ? () => setSelectedEncounter(enc) : undefined}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Graveyard */}
|
|
{dead.length > 0 && (
|
|
<div className="mb-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
|
Graveyard
|
|
</h2>
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
|
{dead.map((enc) => (
|
|
<PokemonCard
|
|
key={enc.id}
|
|
encounter={enc}
|
|
showFaintLevel
|
|
onClick={isActive ? () => setSelectedEncounter(enc) : undefined}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick Actions */}
|
|
<div className="mt-8 flex gap-3">
|
|
{isActive && (
|
|
<>
|
|
<Link
|
|
to={`/runs/${runId}/encounters`}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
|
|
>
|
|
Log Encounter
|
|
</Link>
|
|
<button
|
|
onClick={() => setShowEndRun(true)}
|
|
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors"
|
|
>
|
|
End Run
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Status Change Modal */}
|
|
{selectedEncounter && (
|
|
<StatusChangeModal
|
|
encounter={selectedEncounter}
|
|
onUpdate={(data) => {
|
|
updateEncounter.mutate(data, {
|
|
onSuccess: () => setSelectedEncounter(null),
|
|
})
|
|
}}
|
|
onClose={() => setSelectedEncounter(null)}
|
|
isPending={updateEncounter.isPending}
|
|
/>
|
|
)}
|
|
|
|
{/* End Run Modal */}
|
|
{showEndRun && (
|
|
<EndRunModal
|
|
onConfirm={(status) => {
|
|
updateRun.mutate(
|
|
{ status },
|
|
{ onSuccess: () => setShowEndRun(false) },
|
|
)
|
|
}}
|
|
onClose={() => setShowEndRun(false)}
|
|
isPending={updateRun.isPending}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|