Technical walkthrough

Delivery is not truth.

ClutchView separates transport behavior from domain acceptance. The source may delay, duplicate, disconnect, or reorder events; the match state only changes when the next valid sequence is available.

Input: Typed match events
Rule: Apply once, in sequence
Output: Stable screen state

One event, five boundaries

1
Timed fixture
A repeatable four-event match makes every test reproducible.
2
Replay source
Owns clocks, speed, pause, disconnects, delays, duplicates, and reversed pairs.
3
Acceptance boundary
Rejects wrong matches, ignores known IDs, and buffers sequence gaps.
4
Presenter
Maps exact domain totals into score, projection, freshness, and timeline values.
5
Critical feedback
Haptics, VoiceOver, and motion react only to newly accepted goals.

Core decision

Make ordering a domain guarantee.

Reordering in React components would spread transport assumptions across the interface. Instead, applyMatchEvent is the single acceptance boundary.

raw event
  → validate match
  → reject known id
  → buffer if sequence is ahead
  → apply contiguous events
  → publish MatchState

The UI never has to decide whether a goal is safe to celebrate.

Failure guarantees

Duplicate IDIgnoredNo second haptic or progress update

Future sequenceBufferedVisible state remains stale

DisconnectSource continuesEvents wait for reconnect

ReconnectOrdered flushNewest accepted goal gets feedback

Wrong matchThrowsNo silent fallback

The deliberate limit

The replay source is local. That gives the project deterministic timing and repeatable failure tests, but it does not model server cursors, schema versioning, authentication, or process restarts.

In production, the domain boundary stays. The local source is replaced by a versioned WebSocket adapter with a persisted reconnect cursor.