# Rocket Floating Window Design QA

- Source visual truth: Figma nodes `3462:8689` and `3462:4964` in `vaDp5wwn6AOQVlt9zk0f9r`.
- Additional visual truth: Figma node `3462:5730` for the not-won reward state.
- Not-won source screenshot: `design-qa-assets/rocket-reward-empty-figma.png`.
- Implementation screenshots:
  - `design-qa-assets/rocket-floating-implementation.png`
  - `design-qa-assets/rocket-reward-implementation.png`
  - `design-qa-assets/rocket-reward-empty-implementation.png`
- Viewport: 375 × 812 at device pixel ratio 1.
- State: floating banner centered after its entrance animation; reward panel open over a dimmed host surface.
- Integration: implemented as the independent `RoomRocketFloatingPopup`; the original rocket page/widget remains unchanged.

## Full-view comparison evidence

- `design-qa-assets/rocket-floating-full-comparison.png`
- `design-qa-assets/rocket-reward-full-comparison.png`
- `design-qa-assets/rocket-reward-empty-full-comparison.png`

The left side is the Figma reference and the right side is the Flutter capture. The host room surface is intentionally represented by a solid test background on the implementation side because the deliverable is the overlay UI. Full-view evidence verifies the overlay position and dimensions within the 375 × 812 viewport.

## Focused comparison evidence

- `design-qa-assets/rocket-floating-comparison.png`
- `design-qa-assets/rocket-reward-comparison.png`
- `design-qa-assets/rocket-reward-empty-comparison.png`

Focused crops were required because the banner typography, reward-card spacing, small coin labels, and decorative frame details are too small to judge reliably in the full-view comparison.

## Findings

- No actionable P0, P1, or P2 visual differences remain.
- Fonts and typography: sizes, weights, line heights, truncation, and hierarchy match the source. The capture uses Arial as a QA substitute for Source Han Sans SC; the app continues to use its platform system font, consistent with the existing project setup.
- Spacing and layout rhythm: the banner is 355 × 103 and begins at y=115 in the full room viewport. The reward panel is 360 × 576 and begins at x=8, y=118. Reward cards, section headings, rows, and footer loading text align with the Figma coordinates.
- Colors and visual tokens: gold/orange surfaces, border highlights, dim mask, and white text use the original Figma raster assets and match the reference palette.
- Image quality and asset fidelity: the banner frame, GO button, rocket, reward frame, reward cards, gift, coin, close button, and avatar frame use source assets. New large assets were resized to approximately 3× their rendered dimensions to preserve sharpness while reducing decode cost.
- Copy and content: `Reward`, `Congratulations on winning`, `12 users received rewards`, prize values, and loading copy match the reference. Avatar/name/reward records remain UI-preview content pending the later business-data requirements.
- Not-won state: the single `RoomRocketRewardPage` switches on `hasRewards`; the 125 × 126 empty reward artwork and `You didn't win a prize. Better luck next time!` copy match node `3462:5730`. The shared frame, close action, winner rows, and loading footer retain the same geometry as the won state.

## Comparison history

1. Initial capture exposed reward-title and mini-prize text overflows and incomplete image decoding.
   - Fix: added constrained scaling for narrow labels and waited for raster decoding before capture.
   - Post-fix evidence: both focused comparison images; widget test completes without render exceptions.
2. Section decorations rendered too densely.
   - Fix: mirrored and spaced the slash marks to match the Figma headings.
   - Post-fix evidence: `design-qa-assets/rocket-reward-comparison.png`.
3. The floating-window rocket crop was outside the visible slot.
   - Fix: aligned the source rocket artwork to the top of the 20 × 29 crop.
   - Post-fix evidence: `design-qa-assets/rocket-floating-comparison.png`.

## Follow-up polish

- P3: production captures will naturally differ from the QA placeholders because real user avatars, names, and reward records will be supplied by the later functional requirements.

final result: passed