57 lines
4.1 KiB
Markdown
57 lines
4.1 KiB
Markdown
# 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
|