Skip to content

Add replay system with scrub support and reusable render path #962

@eshaffer321

Description

@eshaffer321

Summary

Add a replay system that can load a recorded game log, play it back through the existing UI, and support scrubbing/jumping to any point in the game timeline.

Problem Statement

We need a way to review completed games without live user input driving the game. The current client/server architecture is close to replay-ready, but input handling and replay control need explicit support.

Current Behavior

  • Game state is produced by the in-memory server and pushed to the client.
  • UI renders from ClientGameState via context and Pixi/React components.
  • User interactions (hex clicks, card clicks, etc.) dispatch actions directly through sendAction.
  • No persisted replay log format exists today.

Expected Behavior

  • A completed game can be exported/imported as a replay log.
  • Replay mode can play/pause, step, and scrub to any timeline position.
  • Existing board/hand rendering path is reused (state-driven rendering remains the source of truth).
  • Input/gameplay actions are disabled while replay mode is active.

Investigation Findings

  • Rendering is already largely state-driven and reusable for historical snapshots.
  • Primary coupling is interaction binding in render-time overlay handlers and turn-gated input hooks.
  • Engine/server are deterministic with seeded RNG, making action-sequence replay feasible.
  • Server currently returns events + resulting state per action; this is a strong base for logging.

Proposed Technical Approach

  1. Add replay log schema in shared types (versioned): metadata + initial seed + ordered actions.
  2. Add optional periodic checkpoints (serialized state every N actions) to speed seek/scrub.
  3. Add replay logger around server action handling.
  4. Build replay controller/provider in client:
    • manages timeline index, play/pause, speed, seek/step
    • exposes effective state (live vs replay) to existing UI
  5. Gate/disable gameplay dispatch and interactive handlers while in replay mode.
  6. Add replay controls UI (timeline slider + step buttons + play/pause).

Affected Files

  • packages/client/src/context/GameProvider.tsx
  • packages/client/src/components/GameBoard/pixi/rendering/overlays.ts
  • packages/client/src/components/GameBoard/hooks/useHexInteraction.ts
  • packages/client/src/components/Hand/PlayerHand.tsx
  • packages/client/src/components/GameBoard/hooks/useGameBoardRenderer.ts
  • packages/server/src/GameServer.ts
  • packages/shared/src/connection.ts
  • packages/core/src/utils/rng.ts

Acceptance Criteria

  • Define and document a versioned replay log schema in shared types.
  • Record replay logs from completed games (initial seed + action sequence).
  • Implement replay mode that drives UI from replay timeline state.
  • Add controls for play/pause, step forward/back, and timeline scrub.
  • Disable live input dispatch while replay mode is active.
  • Reuse existing render pipeline for replayed states (no duplicate renderer).
  • Implement seek performance strategy (checkpointing or equivalent) for long games.
  • Add tests for deterministic reconstruction and seek correctness.

Rough Effort Estimate

  • MVP (load log + play/pause + step + basic scrub): ~1-2 weeks
  • Production-ready (fast seek, polish, import/export UX, test coverage): ~3-5 weeks total

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2-mediumShould do, but not urgentarea:uiClient/UIcomplexity:highSignificant work, multiple filesfeatureNew functionality

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions