Restrict transfers to HoF team and prevent blocking starter route

Transfer modal now only appears when a Hall of Fame team is selected, using the existing hofTeam data instead of the survivors endpoint. Without a HoF selection, advance proceeds directly with no transfer step. Transferred encounters are now a separate category: they appear in their own "Transferred Pokemon" section, don't occupy route slots in the encounter map, and don't block the route-lock check (excluded via genlocke_transfers subquery). The run detail endpoint returns transferEncounterIds so the frontend can distinguish them. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 11:35:05 +01:00
parent e1dac10d27
commit c2e946f500
6 changed files with 115 additions and 65 deletions
--- a/frontend/src/components/TransferModal.tsx
+++ b/frontend/src/components/TransferModal.tsx
@@ -1,16 +1,16 @@
 import { useState } from 'react'
-import type { SurvivorEncounter } from '../types'
+import type { EncounterDetail } from '../types'

 interface TransferModalProps {
-  survivors: SurvivorEncounter[]
+  hofTeam: EncounterDetail[]
  onSubmit: (encounterIds: number[]) => void
  onSkip: () => void
  isPending: boolean
 }

-export function TransferModal({ survivors, onSubmit, onSkip, isPending }: TransferModalProps) {
+export function TransferModal({ hofTeam, onSubmit, onSkip, isPending }: TransferModalProps) {
  const [selected, setSelected] = useState<Set<number>>(
-    () => new Set(survivors.map((s) => s.id)),
+    () => new Set(hofTeam.map((e) => e.id)),
  )

  const toggle = (id: number) => {
@@ -39,54 +39,48 @@ export function TransferModal({ survivors, onSubmit, onSkip, isPending }: Transf
        </div>

        <div className="px-6 py-4">
-          {survivors.length === 0 ? (
-            <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-8">
-              No surviving Pokemon to transfer.
-            </p>
-          ) : (
-            <div className="grid grid-cols-3 gap-2">
-              {survivors.map((survivor) => {
-                const displayPokemon = survivor.currentPokemon ?? survivor.pokemon
-                const isSelected = selected.has(survivor.id)
+          <div className="grid grid-cols-3 gap-2">
+            {hofTeam.map((enc) => {
+              const displayPokemon = enc.currentPokemon ?? enc.pokemon
+              const isSelected = selected.has(enc.id)

-                return (
-                  <button
-                    key={survivor.id}
-                    type="button"
-                    onClick={() => toggle(survivor.id)}
-                    className={`flex flex-col items-center p-3 rounded-lg border-2 text-center transition-colors ${
-                      isSelected
-                        ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20'
-                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                    }`}
-                  >
-                    {displayPokemon.spriteUrl ? (
-                      <img
-                        src={displayPokemon.spriteUrl}
-                        alt={displayPokemon.name}
-                        className="w-14 h-14"
-                      />
-                    ) : (
-                      <div className="w-14 h-14 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-lg font-bold">
-                        {displayPokemon.name[0].toUpperCase()}
-                      </div>
-                    )}
-                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300 mt-1 capitalize">
-                      {survivor.nickname || displayPokemon.name}
+              return (
+                <button
+                  key={enc.id}
+                  type="button"
+                  onClick={() => toggle(enc.id)}
+                  className={`flex flex-col items-center p-3 rounded-lg border-2 text-center transition-colors ${
+                    isSelected
+                      ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20'
+                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                  }`}
+                >
+                  {displayPokemon.spriteUrl ? (
+                    <img
+                      src={displayPokemon.spriteUrl}
+                      alt={displayPokemon.name}
+                      className="w-14 h-14"
+                    />
+                  ) : (
+                    <div className="w-14 h-14 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-lg font-bold">
+                      {displayPokemon.name[0].toUpperCase()}
+                    </div>
+                  )}
+                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300 mt-1 capitalize">
+                    {enc.nickname || displayPokemon.name}
+                  </span>
+                  {enc.nickname && (
+                    <span className="text-[10px] text-gray-400">
+                      {displayPokemon.name}
                    </span>
-                    {survivor.nickname && (
-                      <span className="text-[10px] text-gray-400">
-                        {displayPokemon.name}
-                      </span>
-                    )}
-                    <span className="text-[10px] text-gray-400 mt-0.5">
-                      {survivor.routeName}
-                    </span>
-                  </button>
-                )
-              })}
-            </div>
-          )}
+                  )}
+                  <span className="text-[10px] text-gray-400 mt-0.5">
+                    {enc.route.name}
+                  </span>
+                </button>
+              )
+            })}
+          </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 items-center justify-between">
@@ -100,7 +94,7 @@ export function TransferModal({ survivors, onSubmit, onSkip, isPending }: Transf
          </button>
          <div className="flex items-center gap-3">
            <span className="text-sm text-gray-400 dark:text-gray-500">
-              {selected.size}/{survivors.length} selected
+              {selected.size}/{hofTeam.length} selected
            </span>
            <button
              type="button"
--- a/frontend/src/pages/RunEncounters.tsx
+++ b/frontend/src/pages/RunEncounters.tsx
@@ -1,7 +1,7 @@
 import { useState, useMemo, useEffect, useCallback } from 'react'
 import { useParams, Link, useNavigate } from 'react-router-dom'
 import { useRun, useUpdateRun } from '../hooks/useRuns'
-import { useAdvanceLeg, useLegSurvivors } from '../hooks/useGenlockes'
+import { useAdvanceLeg } from '../hooks/useGenlockes'
 import { useGameRoutes } from '../hooks/useGames'
 import { useCreateEncounter, useUpdateEncounter, useBulkRandomize } from '../hooks/useEncounters'
 import { usePokemonFamilies } from '../hooks/usePokemon'
@@ -397,11 +397,6 @@ export function RunEncounters() {
  const { data: run, isLoading, error } = useRun(runIdNum)
  const advanceLeg = useAdvanceLeg()
  const [showTransferModal, setShowTransferModal] = useState(false)
-  const { data: survivors } = useLegSurvivors(
-    run?.genlocke?.genlockeId ?? 0,
-    run?.genlocke?.legOrder ?? 0,
-    showTransferModal && !!run?.genlocke,
-  )
  const { data: routes, isLoading: loadingRoutes } = useGameRoutes(
    run?.gameId ?? null,
  )
@@ -455,19 +450,27 @@ export function RunEncounters() {
  }, [routes])

  // Split encounters into normal (non-shiny) and shiny
-  const { normalEncounters, shinyEncounters } = useMemo(() => {
-    if (!run) return { normalEncounters: [], shinyEncounters: [] }
+  const transferIdSet = useMemo(
+    () => new Set(run?.transferEncounterIds ?? []),
+    [run?.transferEncounterIds],
+  )
+
+  const { normalEncounters, shinyEncounters, transferEncounters } = useMemo(() => {
+    if (!run) return { normalEncounters: [], shinyEncounters: [], transferEncounters: [] }
    const normal: EncounterDetail[] = []
    const shiny: EncounterDetail[] = []
+    const transfer: EncounterDetail[] = []
    for (const enc of run.encounters) {
-      if (enc.isShiny) {
+      if (transferIdSet.has(enc.id)) {
+        transfer.push(enc)
+      } else if (enc.isShiny) {
        shiny.push(enc)
      } else {
        normal.push(enc)
      }
    }
-    return { normalEncounters: normal, shinyEncounters: shiny }
-  }, [run])
+    return { normalEncounters: normal, shinyEncounters: shiny, transferEncounters: transfer }
+  }, [run, transferIdSet])

  // Map routeId → encounter for quick lookup (normal encounters only)
  const encounterByRoute = useMemo(() => {
@@ -871,7 +874,25 @@ export function RunEncounters() {
            </div>
            {run.status === 'completed' && run.genlocke && !run.genlocke.isFinalLeg && (
              <button
-                onClick={() => setShowTransferModal(true)}
+                onClick={() => {
+                  if (hofTeam && hofTeam.length > 0) {
+                    setShowTransferModal(true)
+                  } else {
+                    advanceLeg.mutate(
+                      { genlockeId: run.genlocke!.genlockeId, legOrder: run.genlocke!.legOrder },
+                      {
+                        onSuccess: (genlocke) => {
+                          const nextLeg = genlocke.legs.find(
+                            (l) => l.legOrder === run.genlocke!.legOrder + 1,
+                          )
+                          if (nextLeg?.runId) {
+                            navigate(`/runs/${nextLeg.runId}`)
+                          }
+                        },
+                      },
+                    )
+                  }
+                }}
                disabled={advanceLeg.isPending}
                className="px-4 py-2 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 transition-colors"
              >
@@ -1081,6 +1102,24 @@ export function RunEncounters() {
        </div>
      )}

+      {/* Transfer Encounters */}
+      {transferEncounters.length > 0 && (
+        <div className="mb-6">
+          <h2 className="text-sm font-medium text-indigo-600 dark:text-indigo-400 mb-2">
+            Transferred Pokemon
+          </h2>
+          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
+            {transferEncounters.map((enc) => (
+              <PokemonCard
+                key={enc.id}
+                encounter={enc}
+                onClick={isActive ? () => setSelectedTeamEncounter(enc) : undefined}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
      {/* Progress bar */}
      <div className="mb-4">
        <div className="flex items-center justify-between mb-1">
@@ -1449,9 +1488,9 @@ export function RunEncounters() {
      )}

      {/* Transfer Modal */}
-      {showTransferModal && survivors && (
+      {showTransferModal && hofTeam && hofTeam.length > 0 && (
        <TransferModal
-          survivors={survivors}
+          hofTeam={hofTeam}
          onSubmit={(encounterIds) => {
            advanceLeg.mutate(
              {
--- a/frontend/src/types/game.ts
+++ b/frontend/src/types/game.ts
@@ -107,6 +107,7 @@ export interface RunDetail extends NuzlockeRun {
  game: Game
  encounters: EncounterDetail[]
  genlocke: RunGenlockeContext | null
+  transferEncounterIds: number[]
 }

 export interface EncounterDetail extends Encounter {