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

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>
2026-02-07 21:29:14 +01:00
parent 4c0b45984f
commit 7dbf3772df
7 changed files with 199 additions and 46 deletions
--- a/frontend/src/components/GameCard.tsx
+++ b/frontend/src/components/GameCard.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import type { Game } from '../types'

 const DEFAULT_COLOR = '#6366f1' // indigo-500
@@ -10,6 +11,8 @@ interface GameCardProps {

 export function GameCard({ game, selected, onSelect }: GameCardProps) {
  const backgroundColor = game.color ?? DEFAULT_COLOR
+  const [imgError, setImgError] = useState(false)
+  const boxArtSrc = `/boxart/${game.slug}.png`

  return (
    <button
@@ -19,11 +22,12 @@ export function GameCard({ game, selected, onSelect }: GameCardProps) {
        selected ? 'ring-2 ring-blue-500 scale-105 shadow-lg' : 'shadow'
      }`}
    >
-      {game.boxArtUrl ? (
+      {!imgError ? (
        <img
-          src={game.boxArtUrl}
+          src={boxArtSrc}
          alt={game.name}
          className="w-full h-48 object-cover"
+          onError={() => setImgError(true)}
        />
      ) : (
        <div
@@ -41,7 +45,7 @@ export function GameCard({ game, selected, onSelect }: GameCardProps) {
        </h3>
        <div className="flex items-center gap-2 mt-1">
          <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
-            {game.region}
+            {game.region.charAt(0).toUpperCase() + game.region.slice(1)}
          </span>
          {game.releaseYear && (
            <span className="text-xs text-gray-500 dark:text-gray-400">
--- a/frontend/src/components/GameGrid.tsx
+++ b/frontend/src/components/GameGrid.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react'
-import type { Game } from '../types'
+import type { Game, NuzlockeRun } from '../types'
 import { GameCard } from './GameCard'

 const GENERATION_LABELS: Record<number, string> = {
@@ -18,19 +18,43 @@ interface GameGridProps {
  games: Game[]
  selectedId: number | null
  onSelect: (game: Game) => void
+  runs?: NuzlockeRun[]
 }

-export function GameGrid({ games, selectedId, onSelect }: GameGridProps) {
+export function GameGrid({ games, selectedId, onSelect, runs }: GameGridProps) {
  const [filter, setFilter] = useState<number | null>(null)
+  const [regionFilter, setRegionFilter] = useState<string | null>(null)
+  const [hideWithActiveRun, setHideWithActiveRun] = useState(false)
+  const [hideCompleted, setHideCompleted] = useState(false)

  const generations = useMemo(
    () => [...new Set(games.map((g) => g.generation))].sort(),
    [games],
  )

-  const filtered = filter
-    ? games.filter((g) => g.generation === filter)
-    : games
+  const regions = useMemo(
+    () => [...new Set(games.map((g) => g.region))].sort(),
+    [games],
+  )
+
+  const activeRunGameIds = useMemo(() => {
+    if (!runs) return new Set<number>()
+    return new Set(runs.filter((r) => r.status === 'active').map((r) => r.gameId))
+  }, [runs])
+
+  const completedRunGameIds = useMemo(() => {
+    if (!runs) return new Set<number>()
+    return new Set(runs.filter((r) => r.status === 'completed').map((r) => r.gameId))
+  }, [runs])
+
+  const filtered = useMemo(() => {
+    let result = games
+    if (filter) result = result.filter((g) => g.generation === filter)
+    if (regionFilter) result = result.filter((g) => g.region === regionFilter)
+    if (hideWithActiveRun) result = result.filter((g) => !activeRunGameIds.has(g.id))
+    if (hideCompleted) result = result.filter((g) => !completedRunGameIds.has(g.id))
+    return result
+  }, [games, filter, regionFilter, hideWithActiveRun, hideCompleted, activeRunGameIds, completedRunGameIds])

  const grouped = useMemo(() => {
    const groups: Record<number, Game[]> = {}
@@ -42,34 +66,80 @@ export function GameGrid({ games, selectedId, onSelect }: GameGridProps) {
      .sort((a, b) => a.generation - b.generation)
  }, [filtered])

+  const pillClass = (active: boolean) =>
+    `px-3 py-1.5 text-sm font-medium rounded-full transition-colors ${
+      active
+        ? 'bg-blue-600 text-white'
+        : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+    }`
+
  return (
    <div className="space-y-6">
-      <div className="flex items-center gap-2">
-        <button
-          type="button"
-          onClick={() => setFilter(null)}
-          className={`px-3 py-1.5 text-sm font-medium rounded-full transition-colors ${
-            filter === null
-              ? 'bg-blue-600 text-white'
-              : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
-          }`}
-        >
-          All
-        </button>
-        {generations.map((gen) => (
+      <div className="space-y-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-xs font-medium text-gray-500 dark:text-gray-400 mr-1">Gen:</span>
          <button
-            key={gen}
            type="button"
-            onClick={() => setFilter(gen)}
-            className={`px-3 py-1.5 text-sm font-medium rounded-full transition-colors ${
-              filter === gen
-                ? 'bg-blue-600 text-white'
-                : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
-            }`}
+            onClick={() => setFilter(null)}
+            className={pillClass(filter === null)}
          >
-            Gen {gen}
+            All
          </button>
-        ))}
+          {generations.map((gen) => (
+            <button
+              key={gen}
+              type="button"
+              onClick={() => setFilter(gen)}
+              className={pillClass(filter === gen)}
+            >
+              Gen {gen}
+            </button>
+          ))}
+        </div>
+
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-xs font-medium text-gray-500 dark:text-gray-400 mr-1">Region:</span>
+          <button
+            type="button"
+            onClick={() => setRegionFilter(null)}
+            className={pillClass(regionFilter === null)}
+          >
+            All
+          </button>
+          {regions.map((region) => (
+            <button
+              key={region}
+              type="button"
+              onClick={() => setRegionFilter(region)}
+              className={pillClass(regionFilter === region)}
+            >
+              {region.charAt(0).toUpperCase() + region.slice(1)}
+            </button>
+          ))}
+        </div>
+
+        {runs && (
+          <div className="flex flex-wrap items-center gap-4">
+            <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={hideWithActiveRun}
+                onChange={(e) => setHideWithActiveRun(e.target.checked)}
+                className="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+              />
+              Hide games with active run
+            </label>
+            <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={hideCompleted}
+                onChange={(e) => setHideCompleted(e.target.checked)}
+                className="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500"
+              />
+              Hide completed games
+            </label>
+          </div>
+        )}
      </div>

      {grouped.map(({ generation, games }) => (
--- a/frontend/src/pages/NewRun.tsx
+++ b/frontend/src/pages/NewRun.tsx
@@ -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)}
+    />
+  )
+}
--- a/frontend/src/pages/RunDashboard.tsx
+++ b/frontend/src/pages/RunDashboard.tsx
@@ -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',
--- a/frontend/src/pages/RunEncounters.tsx
+++ b/frontend/src/pages/RunEncounters.tsx
@@ -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',
--- a/frontend/src/pages/admin/AdminGameDetail.tsx
+++ b/frontend/src/pages/admin/AdminGameDetail.tsx
@@ -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>