pokemon/nuzlocke-tracker
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Improve run creation workflow with filters, local box art, and sticky nav

Browse Source 
Use local /boxart/{slug}.png images instead of database boxArtUrl with
color-swatch fallback. Add region filter pills and run-status checkboxes
(hide active/completed) to GameGrid. Move the Next button into a sticky
top bar showing selected game summary so it's always visible. Capitalize
region names in all display locations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-07 21:29:14 +01:00
parent 4c0b45984f
commit 7dbf3772df
7 changed files with 199 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/pages/NewRun.tsx
View File

@@ -2,13 +2,16 @@ import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { GameGrid, RulesConfiguration, StepIndicator } from '../components'
import { useGames } from '../hooks/useGames'
import { useCreateRun } from '../hooks/useRuns'
import { useCreateRun, useRuns } from '../hooks/useRuns'
import type { Game, NuzlockeRules } from '../types'
import { DEFAULT_RULES } from '../types'
const DEFAULT_COLOR = '#6366f1'
export function NewRun() {
const navigate = useNavigate()
const { data: games, isLoading, error } = useGames()
const { data: runs } = useRuns()
const createRun = useCreateRun()
const [step, setStep] = useState(1)
@@ -55,6 +58,44 @@ export function NewRun() {
Choose a Game
</h2>
<div className="sticky top-0 z-10 bg-gray-50 dark:bg-gray-900 py-3 mb-4 border-b border-gray-200 dark:border-gray-700">
{selectedGame ? (
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<SelectedGameThumb game={selectedGame} />
<div>
<p className="font-medium text-gray-900 dark:text-gray-100">
{selectedGame.name}
</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
{selectedGame.region.charAt(0).toUpperCase() + selectedGame.region.slice(1)}
</p>
</div>
</div>
<button
type="button"
onClick={() => setStep(2)}
className="px-6 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"
>
Next
</button>
</div>
) : (
<div className="flex items-center justify-between">
<p className="text-sm text-gray-500 dark:text-gray-400">
Select a game to continue
</p>
<button
type="button"
disabled
className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
Next
</button>
</div>
)}
</div>
{isLoading && (
<div className="flex items-center justify-center py-12">
<div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
@@ -72,19 +113,9 @@ export function NewRun() {
games={games}
selectedId={selectedGame?.id ?? null}
onSelect={handleGameSelect}
runs={runs}
/>
)}
<div className="mt-6 flex justify-end">
<button
type="button"
disabled={!selectedGame}
onClick={() => setStep(2)}
className="px-6 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 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
Next
</button>
</div>
</div>
)}
@@ -149,7 +180,7 @@ export function NewRun() {
<div className="flex justify-between">
<dt className="text-gray-600 dark:text-gray-400">Region</dt>
<dd className="text-gray-900 dark:text-gray-100 font-medium">
{selectedGame?.region}
{selectedGame && (selectedGame.region.charAt(0).toUpperCase() + selectedGame.region.slice(1))}
</dd>
</div>
<div className="flex justify-between">
@@ -190,3 +221,30 @@ export function NewRun() {
</div>
)
}
function SelectedGameThumb({ game }: { game: Game }) {
const [imgError, setImgError] = useState(false)
const backgroundColor = game.color ?? DEFAULT_COLOR
if (imgError) {
return (
<div
className="w-10 h-10 rounded flex items-center justify-center flex-shrink-0"
style={{ backgroundColor }}
>
<span className="text-white text-xs font-bold drop-shadow-md">
{game.name.replace('Pokemon ', '').slice(0, 3)}
</span>
</div>
)
}
return (
<img
src={`/boxart/${game.slug}.png`}
alt={game.name}
className="w-10 h-10 rounded object-cover flex-shrink-0"
onError={() => setImgError(true)}
/>
)
}

2
frontend/src/pages/RunDashboard.tsx
View File

@@ -82,7 +82,7 @@ export function RunDashboard() {
{run.name}
</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
{run.game.name} &middot; {run.game.region} &middot; Started{' '}
{run.game.name} &middot; {run.game.region.charAt(0).toUpperCase() + run.game.region.slice(1)} &middot; Started{' '}
{new Date(run.startedAt).toLocaleDateString(undefined, {
year: 'numeric',
month: 'short',

2
frontend/src/pages/RunEncounters.tsx
View File

@@ -580,7 +580,7 @@ export function RunEncounters() {
{run.name}
</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
{run.game.name} &middot; {run.game.region} &middot; Started{' '}
{run.game.name} &middot; {run.game.region.charAt(0).toUpperCase() + run.game.region.slice(1)} &middot; Started{' '}
{new Date(run.startedAt).toLocaleDateString(undefined, {
year: 'numeric',
month: 'short',

2
frontend/src/pages/admin/AdminGameDetail.tsx
View File

@@ -152,7 +152,7 @@ export function AdminGameDetail() {
<div className="mb-6">
<h2 className="text-xl font-semibold">{game.name}</h2>
<p className="text-sm text-gray-500 dark:text-gray-400">
{game.region} &middot; Gen {game.generation}
{game.region.charAt(0).toUpperCase() + game.region.slice(1)} &middot; Gen {game.generation}
{game.releaseYear ? ` \u00b7 ${game.releaseYear}` : ''}
</p>
</div>