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/pages/RunEncounters.tsx

@@ -3,6 +3,7 @@ import { useParams, Link } from 'react-router-dom'
 import { useRun, useUpdateRun } from '../hooks/useRuns'
 import { useGameRoutes } from '../hooks/useGames'
 import { useCreateEncounter, useUpdateEncounter } from '../hooks/useEncounters'
+import { usePokemonFamilies } from '../hooks/usePokemon'
 import {
   EncounterModal,
   EncounterMethodBadge,
@@ -11,6 +12,8 @@ import {
   StatusChangeModal,
   EndRunModal,
   RuleBadges,
+  ShinyBox,
+  ShinyEncounterModal,
 } from '../components'
 import type {
   Route,
@@ -18,6 +21,7 @@ import type {
   RunStatus,
   EncounterDetail,
   EncounterStatus,
+  CreateEncounterInput,
 } from '../types'
 
 const statusStyles: Record<RunStatus, string> = {
@@ -317,6 +321,7 @@ export function RunEncounters() {
   const createEncounter = useCreateEncounter(runIdNum)
   const updateEncounter = useUpdateEncounter(runIdNum)
   const updateRun = useUpdateRun(runIdNum)
+  const { data: familiesData } = usePokemonFamilies()
 
   const [selectedRoute, setSelectedRoute] = useState<Route | null>(null)
   const [editingEncounter, setEditingEncounter] =
@@ -324,6 +329,7 @@ export function RunEncounters() {
   const [selectedTeamEncounter, setSelectedTeamEncounter] =
     useState<EncounterDetail | null>(null)
   const [showEndRun, setShowEndRun] = useState(false)
+  const [showShinyModal, setShowShinyModal] = useState(false)
   const [showTeam, setShowTeam] = useState(true)
   const [filter, setFilter] = useState<'all' | RouteStatus>('all')
 
@@ -353,17 +359,67 @@ export function RunEncounters() {
     return organizeRoutes(routes)
   }, [routes])
 
-  // Map routeId → encounter for quick lookup
-  const encounterByRoute = useMemo(() => {
-    const map = new Map<number, EncounterDetail>()
-    if (run) {
-      for (const enc of run.encounters) {
-        map.set(enc.routeId, enc)
+  // Split encounters into normal (non-shiny) and shiny
+  const { normalEncounters, shinyEncounters } = useMemo(() => {
+    if (!run) return { normalEncounters: [], shinyEncounters: [] }
+    const normal: EncounterDetail[] = []
+    const shiny: EncounterDetail[] = []
+    for (const enc of run.encounters) {
+      if (enc.isShiny) {
+        shiny.push(enc)
+      } else {
+        normal.push(enc)
       }
     }
-    return map
+    return { normalEncounters: normal, shinyEncounters: shiny }
   }, [run])
 
+  // Map routeId → encounter for quick lookup (normal encounters only)
+  const encounterByRoute = useMemo(() => {
+    const map = new Map<number, EncounterDetail>()
+    for (const enc of normalEncounters) {
+      map.set(enc.routeId, enc)
+    }
+    return map
+  }, [normalEncounters])
+
+  // Build set of duped Pokemon IDs (for duplicates clause)
+  const dupedPokemonIds = useMemo(() => {
+    const dupesClauseOn = run?.rules?.duplicatesClause ?? true
+    if (!dupesClauseOn || !familiesData) return undefined
+
+    // Build pokemonId → family members map
+    const pokemonToFamily = new Map<number, number[]>()
+    for (const family of familiesData.families) {
+      for (const id of family) {
+        pokemonToFamily.set(id, family)
+      }
+    }
+
+    const duped = new Set<number>()
+    for (const enc of normalEncounters) {
+      if (enc.status !== 'caught') continue
+      const pokemonId = enc.currentPokemonId ?? enc.pokemonId
+      // Add the pokemon itself and all family members
+      duped.add(pokemonId)
+      duped.add(enc.pokemonId)
+      const family = pokemonToFamily.get(pokemonId)
+      if (family) {
+        for (const memberId of family) {
+          duped.add(memberId)
+        }
+      }
+      // Also check original pokemon's family
+      const origFamily = pokemonToFamily.get(enc.pokemonId)
+      if (origFamily) {
+        for (const memberId of origFamily) {
+          duped.add(memberId)
+        }
+      }
+    }
+    return duped.size > 0 ? duped : undefined
+  }, [run, normalEncounters, familiesData])
+
   // Auto-expand the first unvisited group on initial load
   useEffect(() => {
     if (organizedRoutes.length === 0 || expandedGroups.size > 0) return
@@ -429,10 +485,10 @@ export function RunEncounters() {
   }
 
   const isActive = run.status === 'active'
-  const alive = run.encounters.filter(
+  const alive = normalEncounters.filter(
     (e) => e.status === 'caught' && e.faintLevel === null,
   )
-  const dead = run.encounters.filter(
+  const dead = normalEncounters.filter(
     (e) => e.status === 'caught' && e.faintLevel !== null,
   )
 
@@ -458,17 +514,12 @@ export function RunEncounters() {
     setSelectedRoute(route)
   }
 
-  const handleCreate = (data: {
-    routeId: number
-    pokemonId: number
-    nickname?: string
-    status: EncounterStatus
-    catchLevel?: number
-  }) => {
+  const handleCreate = (data: CreateEncounterInput) => {
     createEncounter.mutate(data, {
       onSuccess: () => {
         setSelectedRoute(null)
         setEditingEncounter(null)
+        setShowShinyModal(false)
       },
     })
   }
@@ -538,6 +589,14 @@ export function RunEncounters() {
             </p>
           </div>
           <div className="flex items-center gap-2">
+            {isActive && run.rules?.shinyClause && (
+              <button
+                onClick={() => setShowShinyModal(true)}
+                className="px-3 py-1 text-sm border border-yellow-400 dark:border-yellow-600 text-yellow-600 dark:text-yellow-400 rounded-full font-medium hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition-colors"
+              >
+                &#10022; Log Shiny
+              </button>
+            )}
             {isActive && (
               <button
                 onClick={() => setShowEndRun(true)}
@@ -605,7 +664,7 @@ export function RunEncounters() {
       <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
         <StatCard
           label="Encounters"
-          value={run.encounters.length}
+          value={normalEncounters.length}
           color="blue"
         />
         <StatCard label="Alive" value={alive.length} color="green" />
@@ -689,6 +748,16 @@ export function RunEncounters() {
         </div>
       )}
 
+      {/* Shiny Box */}
+      {run.rules?.shinyClause && shinyEncounters.length > 0 && (
+        <div className="mb-6">
+          <ShinyBox
+            encounters={shinyEncounters}
+            onEncounterClick={isActive ? (enc) => setSelectedTeamEncounter(enc) : undefined}
+          />
+        </div>
+      )}
+
       {/* Progress bar */}
       <div className="mb-4">
         <div className="flex items-center justify-between mb-1">
@@ -818,6 +887,7 @@ export function RunEncounters() {
         <EncounterModal
           route={selectedRoute}
           existing={editingEncounter ?? undefined}
+          dupedPokemonIds={dupedPokemonIds}
           onSubmit={handleCreate}
           onUpdate={handleUpdate}
           onClose={() => {
@@ -828,6 +898,16 @@ export function RunEncounters() {
         />
       )}
 
+      {/* Shiny Encounter Modal */}
+      {showShinyModal && routes && (
+        <ShinyEncounterModal
+          routes={routes}
+          onSubmit={handleCreate}
+          onClose={() => setShowShinyModal(false)}
+          isPending={createEncounter.isPending}
+        />
+      )}
+
       {/* Status Change Modal (team pokemon) */}
       {selectedTeamEncounter && (
         <StatusChangeModal