Enforce Dupes Clause and Shiny Clause rules

Dupes Clause greys out Pokemon in the encounter modal whose evolution
family has already been caught, preventing duplicate selections. Shiny
Clause adds a dedicated Shiny Box and lets shiny catches bypass the
one-per-route lock via a new is_shiny column on encounters and a
/pokemon/families endpoint that computes evolution family groups.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/EncounterModal.tsx

@@ -15,6 +15,7 @@ import type {
 interface EncounterModalProps {
   route: Route
   existing?: EncounterDetail
+  dupedPokemonIds?: Set<number>
   onSubmit: (data: {
     routeId: number
     pokemonId: number
@@ -78,6 +79,7 @@ function groupByMethod(pokemon: RouteEncounterDetail[]): { method: string; pokem
 export function EncounterModal({
   route,
   existing,
+  dupedPokemonIds,
   onSubmit,
   onUpdate,
   onClose,
@@ -213,40 +215,53 @@ export function EncounterModal({
                           </div>
                         )}
                         <div className="grid grid-cols-3 gap-2">
-                          {pokemon.map((rp) => (
-                            <button
-                              key={rp.id}
-                              type="button"
-                              onClick={() => setSelectedPokemon(rp)}
-                              className={`flex flex-col items-center p-2 rounded-lg border text-center transition-colors ${
-                                selectedPokemon?.id === rp.id
-                                  ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
-                                  : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                              }`}
-                            >
-                              {rp.pokemon.spriteUrl ? (
-                                <img
-                                  src={rp.pokemon.spriteUrl}
-                                  alt={rp.pokemon.name}
-                                  className="w-10 h-10"
-                                />
-                              ) : (
-                                <div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs font-bold">
-                                  {rp.pokemon.name[0].toUpperCase()}
-                                </div>
-                              )}
-                              <span className="text-xs text-gray-700 dark:text-gray-300 mt-1 capitalize">
-                                {rp.pokemon.name}
-                              </span>
-                              {SPECIAL_METHODS.includes(rp.encounterMethod) && (
-                                <EncounterMethodBadge method={rp.encounterMethod} />
-                              )}
-                              <span className="text-[10px] text-gray-400">
-                                Lv. {rp.minLevel}
-                                {rp.maxLevel !== rp.minLevel && `–${rp.maxLevel}`}
-                              </span>
-                            </button>
-                          ))}
+                          {pokemon.map((rp) => {
+                            const isDuped = dupedPokemonIds?.has(rp.pokemonId) ?? false
+                            return (
+                              <button
+                                key={rp.id}
+                                type="button"
+                                onClick={() => !isDuped && setSelectedPokemon(rp)}
+                                disabled={isDuped}
+                                className={`flex flex-col items-center p-2 rounded-lg border text-center transition-colors ${
+                                  isDuped
+                                    ? 'opacity-40 cursor-not-allowed border-gray-200 dark:border-gray-700'
+                                    : selectedPokemon?.id === rp.id
+                                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
+                                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                                }`}
+                              >
+                                {rp.pokemon.spriteUrl ? (
+                                  <img
+                                    src={rp.pokemon.spriteUrl}
+                                    alt={rp.pokemon.name}
+                                    className="w-10 h-10"
+                                  />
+                                ) : (
+                                  <div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs font-bold">
+                                    {rp.pokemon.name[0].toUpperCase()}
+                                  </div>
+                                )}
+                                <span className="text-xs text-gray-700 dark:text-gray-300 mt-1 capitalize">
+                                  {rp.pokemon.name}
+                                </span>
+                                {isDuped && (
+                                  <span className="text-[10px] text-gray-400 italic">
+                                    already caught
+                                  </span>
+                                )}
+                                {!isDuped && SPECIAL_METHODS.includes(rp.encounterMethod) && (
+                                  <EncounterMethodBadge method={rp.encounterMethod} />
+                                )}
+                                {!isDuped && (
+                                  <span className="text-[10px] text-gray-400">
+                                    Lv. {rp.minLevel}
+                                    {rp.maxLevel !== rp.minLevel && `–${rp.maxLevel}`}
+                                  </span>
+                                )}
+                              </button>
+                            )
+                          })}
                         </div>
                       </div>
                     ))}

frontend/src/components/ShinyBox.tsx

@@ -0,0 +1,36 @@
+import { PokemonCard } from './PokemonCard'
+import type { EncounterDetail } from '../types'
+
+interface ShinyBoxProps {
+  encounters: EncounterDetail[]
+  onEncounterClick?: (encounter: EncounterDetail) => void
+}
+
+export function ShinyBox({ encounters, onEncounterClick }: ShinyBoxProps) {
+  return (
+    <div className="border-2 border-yellow-400 dark:border-yellow-600 rounded-lg p-4">
+      <h3 className="text-sm font-semibold text-yellow-600 dark:text-yellow-400 mb-3 flex items-center gap-1.5">
+        <span>&#10022;</span>
+        Shiny Box
+        <span className="text-xs font-normal text-gray-400 dark:text-gray-500 ml-1">
+          {encounters.length} {encounters.length === 1 ? 'shiny' : 'shinies'}
+        </span>
+      </h3>
+      {encounters.length > 0 ? (
+        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
+          {encounters.map((enc) => (
+            <PokemonCard
+              key={enc.id}
+              encounter={enc}
+              onClick={onEncounterClick ? () => onEncounterClick(enc) : undefined}
+            />
+          ))}
+        </div>
+      ) : (
+        <p className="text-sm text-gray-400 dark:text-gray-500 text-center py-2">
+          No shinies found yet
+        </p>
+      )}
+    </div>
+  )
+}

frontend/src/components/ShinyEncounterModal.tsx

@@ -0,0 +1,294 @@
+import { useState, useMemo } from 'react'
+import { useRoutePokemon } from '../hooks/useGames'
+import {
+  EncounterMethodBadge,
+  getMethodLabel,
+  METHOD_ORDER,
+} from './EncounterMethodBadge'
+import type { Route, RouteEncounterDetail } from '../types'
+
+interface ShinyEncounterModalProps {
+  routes: Route[]
+  onSubmit: (data: {
+    routeId: number
+    pokemonId: number
+    nickname?: string
+    status: 'caught'
+    catchLevel?: number
+    isShiny: true
+  }) => void
+  onClose: () => void
+  isPending: boolean
+}
+
+const SPECIAL_METHODS = ['starter', 'gift', 'fossil', 'trade']
+
+function groupByMethod(pokemon: RouteEncounterDetail[]): { method: string; pokemon: RouteEncounterDetail[] }[] {
+  const groups = new Map<string, RouteEncounterDetail[]>()
+  for (const rp of pokemon) {
+    const list = groups.get(rp.encounterMethod) ?? []
+    list.push(rp)
+    groups.set(rp.encounterMethod, list)
+  }
+  return [...groups.entries()]
+    .sort(([a], [b]) => {
+      const ai = METHOD_ORDER.indexOf(a)
+      const bi = METHOD_ORDER.indexOf(b)
+      return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)
+    })
+    .map(([method, pokemon]) => ({ method, pokemon }))
+}
+
+export function ShinyEncounterModal({
+  routes,
+  onSubmit,
+  onClose,
+  isPending,
+}: ShinyEncounterModalProps) {
+  const [selectedRouteId, setSelectedRouteId] = useState<number | null>(null)
+  const { data: routePokemon, isLoading: loadingPokemon } = useRoutePokemon(
+    selectedRouteId,
+  )
+
+  const [selectedPokemon, setSelectedPokemon] =
+    useState<RouteEncounterDetail | null>(null)
+  const [nickname, setNickname] = useState('')
+  const [catchLevel, setCatchLevel] = useState<string>('')
+  const [search, setSearch] = useState('')
+
+  const filteredPokemon = routePokemon?.filter((rp) =>
+    rp.pokemon.name.toLowerCase().includes(search.toLowerCase()),
+  )
+
+  const groupedPokemon = useMemo(
+    () => (filteredPokemon ? groupByMethod(filteredPokemon) : []),
+    [filteredPokemon],
+  )
+  const hasMultipleGroups = groupedPokemon.length > 1
+
+  // Reset selection when route changes
+  const handleRouteChange = (routeId: number) => {
+    setSelectedRouteId(routeId)
+    setSelectedPokemon(null)
+    setSearch('')
+  }
+
+  const handleSubmit = () => {
+    if (selectedPokemon && selectedRouteId) {
+      onSubmit({
+        routeId: selectedRouteId,
+        pokemonId: selectedPokemon.pokemonId,
+        nickname: nickname || undefined,
+        status: 'caught',
+        catchLevel: catchLevel ? Number(catchLevel) : undefined,
+        isShiny: true,
+      })
+    }
+  }
+
+  // Only show leaf routes (no children, i.e. routes that aren't parents)
+  const parentIds = new Set(routes.filter(r => r.parentRouteId !== null).map(r => r.parentRouteId))
+  const leafRoutes = routes.filter(r => !parentIds.has(r.id))
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="fixed inset-0 bg-black/50" onClick={onClose} />
+      <div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
+        <div className="sticky top-0 bg-white dark:bg-gray-800 border-b border-yellow-300 dark:border-yellow-600 px-6 py-4 rounded-t-xl">
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
+              <span className="text-yellow-500">&#10022;</span>
+              Log Shiny Encounter
+            </h2>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+            >
+              <svg
+                className="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+          <p className="text-sm text-yellow-600 dark:text-yellow-400 mt-1">
+            Shiny catches bypass the one-per-route rule
+          </p>
+        </div>
+
+        <div className="px-6 py-4 space-y-4">
+          {/* Route selector */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Route
+            </label>
+            <select
+              value={selectedRouteId ?? ''}
+              onChange={(e) => handleRouteChange(Number(e.target.value))}
+              className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-yellow-500"
+            >
+              <option value="">Select a route...</option>
+              {leafRoutes.map((r) => (
+                <option key={r.id} value={r.id}>
+                  {r.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Pokemon Selection */}
+          {selectedRouteId && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Pokemon
+              </label>
+              {loadingPokemon ? (
+                <div className="flex items-center justify-center py-4">
+                  <div className="w-6 h-6 border-2 border-yellow-500 border-t-transparent rounded-full animate-spin" />
+                </div>
+              ) : filteredPokemon && filteredPokemon.length > 0 ? (
+                <>
+                  {(routePokemon?.length ?? 0) > 6 && (
+                    <input
+                      type="text"
+                      placeholder="Search pokemon..."
+                      value={search}
+                      onChange={(e) => setSearch(e.target.value)}
+                      className="w-full px-3 py-1.5 mb-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500"
+                    />
+                  )}
+                  <div className="max-h-64 overflow-y-auto space-y-3">
+                    {groupedPokemon.map(({ method, pokemon }, groupIdx) => (
+                      <div key={method}>
+                        {groupIdx > 0 && (
+                          <div className="border-t border-gray-200 dark:border-gray-700 mb-3" />
+                        )}
+                        {hasMultipleGroups && (
+                          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1.5">
+                            {getMethodLabel(method)}
+                          </div>
+                        )}
+                        <div className="grid grid-cols-3 gap-2">
+                          {pokemon.map((rp) => (
+                            <button
+                              key={rp.id}
+                              type="button"
+                              onClick={() => setSelectedPokemon(rp)}
+                              className={`flex flex-col items-center p-2 rounded-lg border text-center transition-colors ${
+                                selectedPokemon?.id === rp.id
+                                  ? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/30'
+                                  : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                              }`}
+                            >
+                              {rp.pokemon.spriteUrl ? (
+                                <img
+                                  src={rp.pokemon.spriteUrl}
+                                  alt={rp.pokemon.name}
+                                  className="w-10 h-10"
+                                />
+                              ) : (
+                                <div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-xs font-bold">
+                                  {rp.pokemon.name[0].toUpperCase()}
+                                </div>
+                              )}
+                              <span className="text-xs text-gray-700 dark:text-gray-300 mt-1 capitalize">
+                                {rp.pokemon.name}
+                              </span>
+                              {SPECIAL_METHODS.includes(rp.encounterMethod) && (
+                                <EncounterMethodBadge method={rp.encounterMethod} />
+                              )}
+                              <span className="text-[10px] text-gray-400">
+                                Lv. {rp.minLevel}
+                                {rp.maxLevel !== rp.minLevel && `–${rp.maxLevel}`}
+                              </span>
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </>
+              ) : (
+                <p className="text-sm text-gray-500 dark:text-gray-400 py-2">
+                  No pokemon data for this route
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Nickname */}
+          {selectedPokemon && (
+            <div>
+              <label
+                htmlFor="shiny-nickname"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+              >
+                Nickname
+              </label>
+              <input
+                id="shiny-nickname"
+                type="text"
+                value={nickname}
+                onChange={(e) => setNickname(e.target.value)}
+                placeholder="Give it a name..."
+                className="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-yellow-500"
+              />
+            </div>
+          )}
+
+          {/* Catch Level */}
+          {selectedPokemon && (
+            <div>
+              <label
+                htmlFor="shiny-catch-level"
+                className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+              >
+                Catch Level
+              </label>
+              <input
+                id="shiny-catch-level"
+                type="number"
+                min={1}
+                max={100}
+                value={catchLevel}
+                onChange={(e) => setCatchLevel(e.target.value)}
+                placeholder={
+                  selectedPokemon
+                    ? `${selectedPokemon.minLevel}–${selectedPokemon.maxLevel}`
+                    : 'Level'
+                }
+                className="w-24 px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-yellow-500"
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="sticky bottom-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-4 rounded-b-xl flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            disabled={!selectedPokemon || isPending}
+            onClick={handleSubmit}
+            className="px-4 py-2 bg-yellow-500 text-white rounded-lg font-medium hover:bg-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            {isPending ? 'Saving...' : 'Log Shiny'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/index.ts

@@ -6,6 +6,8 @@ export { GameGrid } from './GameGrid'
 export { Layout } from './Layout'
 export { PokemonCard } from './PokemonCard'
 export { RuleBadges } from './RuleBadges'
+export { ShinyBox } from './ShinyBox'
+export { ShinyEncounterModal } from './ShinyEncounterModal'
 export { StatusChangeModal } from './StatusChangeModal'
 export { RuleToggle } from './RuleToggle'
 export { RulesConfiguration } from './RulesConfiguration'