aslan-flutter/design-qa.md

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