Add genlocke leg progression with advance endpoint and run context

When a run belonging to a genlocke is completed or failed, the genlocke
status updates accordingly. The run detail API now includes genlocke
context (leg order, total legs, genlocke name). A new advance endpoint
creates the next leg's run, and the frontend shows genlocke-aware UI
including a "Leg X of Y" banner, advance button, and contextual
messaging in the end-run modal.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-09 09:47:28 +01:00
parent 96178622f9
commit 07343e94e2
11 changed files with 271 additions and 54 deletions

View File

@@ -1,12 +1,23 @@
import type { RunStatus } from '../types'
import type { RunStatus, RunGenlockeContext } from '../types'
interface EndRunModalProps {
onConfirm: (status: RunStatus) => void
onClose: () => void
isPending?: boolean
genlockeContext?: RunGenlockeContext | null
}
export function EndRunModal({ onConfirm, onClose, isPending }: EndRunModalProps) {
export function EndRunModal({ onConfirm, onClose, isPending, genlockeContext }: EndRunModalProps) {
const victoryDescription = genlockeContext
? genlockeContext.isFinalLeg
? 'Complete the final leg of your genlocke!'
: 'Complete this leg and continue your genlocke'
: 'Beat the game successfully'
const defeatDescription = genlockeContext
? 'This will end the entire genlocke'
: 'All Pokemon fainted or gave up'
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
@@ -25,7 +36,7 @@ export function EndRunModal({ onConfirm, onClose, isPending }: EndRunModalProps)
className="w-full px-4 py-3 rounded-lg font-medium text-left border-2 border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 hover:border-blue-400 dark:hover:border-blue-600 disabled:opacity-50 transition-colors"
>
<div className="font-semibold">Victory</div>
<div className="text-sm opacity-80">Beat the game successfully</div>
<div className="text-sm opacity-80">{victoryDescription}</div>
</button>
<button
onClick={() => onConfirm('failed')}
@@ -33,7 +44,7 @@ export function EndRunModal({ onConfirm, onClose, isPending }: EndRunModalProps)
className="w-full px-4 py-3 rounded-lg font-medium text-left border-2 border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 hover:border-red-400 dark:hover:border-red-600 disabled:opacity-50 transition-colors"
>
<div className="font-semibold">Defeat</div>
<div className="text-sm opacity-80">All Pokemon fainted or gave up</div>
<div className="text-sm opacity-80">{defeatDescription}</div>
</button>
</div>
</div>