Victory Screen and Reward Feedback - UQcsse3200/2026-studio-3 GitHub Wiki
Victory Screen and Reward Feedback
Team 7 | Post-battle settlement UI
Overview
After a battle victory, the player reviews the settlement screen and chooses an available reward. The screen presents the rewards in a themed panel, confirms the selected reward with a short travel animation, and then continues to the next part of the run.
The animation is presentation-only: it does not change reward data or selection rules. Reward cards become interactive after their entrance animation finishes.
Why the screen works this way
The old result screen gave little context for the next step. The new composition makes the order visible: battle won β compare three offers β commit exactly one β see where it went β continue. Matching the Victory art to the battle menu makes this feel part of the same game, while the gold/item/card destinations answer the player's immediate question, βDid I actually receive it?β The flight is feedback, not the reward transaction.
| Player question | UI answer | Code responsibility |
|---|---|---|
| What happened? | The VICTORY heading and wings establish the result. | VICTORY entrance in VictoryAnimationController |
| What can I take? | Gold, Item and eligible Card choices appear together. | RewardService.generateRewardOptions(); RewardDisplay.createRewardCard() |
| Did my click count? | One selected icon travels to the matching HUD destination. | RewardDisplay.completeReward() then RewardClaimFeedback.play() |
| Where do I go next? | The screen routes after the cue, using current run state. | EndBattleScreen.returnToMenu() |
Entrance and interaction
The panel fades in first. The VICTORY title appears from left to right, with each letter staggered slightly after the previous one. The decorative wings open alongside the title, followed by the subtitle and reward cards rising into place. Small particles and a brief sun emblem pulse complete the entrance.
The available reward cards enter in sequence. While the entrance is playing, card input is disabled; after the last card settles (about 1.4 seconds after the animation starts), the player can choose. Hovering a card raises it slightly and dims the other cards, keeping the choice clear.
Claim feedback
Once a reward is selected, the reward is applied to the run and the autosave callback runs before the feedback animation. A visual delay does not postpone saving. The chosen reward then flies toward its matching battle HUD icon:
| Reward | Trail colour | Destination |
|---|---|---|
| Gold | Pale gold | Gold HUD icon |
| Item | Amber | Inventory HUD icon |
| Card | Pale blue | Card-deck HUD icon |
The flight lasts about 0.85 seconds and uses bright particles that become more dispersed behind the reward. A brief destination pulse follows. Navigation waits for the feedback to finish, then continues according to the run state: the map, an eligible elite portal, or the victory narration after the final encounter.
Claim sequence and safeguards
| Order | Code path | Important behaviour |
|---|---|---|
| 1 | RewardDisplay.selectOption() |
Rejects a missing option, disposed UI, claim already in progress or an already-claimed reward. It does not allow a click during entrance because the actors are not touchable until ready. |
| 2a | Gold / Item β RewardService.claimRunReward() |
Updates PlayerRunState. Gold applies its base amount and any one-Shard bonus; Item adds one owned copy. |
| 2b | Card β openCardSelection() β claimCard() |
Opening the card choices grants nothing. Only selecting a specific valid card commits it to the deck. |
| 3 | completeReward() |
Marks claimed, calls the autosave callback and announces REWARD_CLAIMED_EVENT. If the callback throws, the error is logged, but a second reward cannot be claimed. |
| 4 | RewardClaimFeedback.play() |
Plays a short cue; a missing art texture skips the cue rather than trapping the player. |
| 5 | finishFeedbackAndNavigate() |
Sends the return event once, after the cue finishes. EndBattleScreen decides map, eligible elite portal or final-victory narration. |
The reward grant and the autosave attempt precede animation. This protects the state from a visual interruption; it does not claim that an external save failure is impossible.
Layout and design constraints
The main composition uses a 941-high reference artwork and a fixed scale based on an 800-unit logical height. The panel's reference size is 1222 Γ 876, and card/icon/text areas use proportions of that panel. RewardDisplay.createRewardCard() fits long names and descriptions to each card instead of letting text escape the frame. The background fills the viewport, while the reference composition keeps its intended proportions. This is a fixed logical layout, not a promise that physical pixels are identical on every monitor.
VictoryAnimationController owns only entrance, hover and input-ready state; RewardDisplay owns selection/claim; RewardClaimFeedback owns the three destination trails. Keeping these jobs separate makes it easier to change motion without changing reward rules.
Demonstration and explanation
- Win a normal battle. Before clicking, point out that the Gold, Item and eligible Card options are offers, not possessions; watch the letters and wings enter together.
- After the cards settle, hover one choice to show focus. Choose Gold or Item and watch the pale-gold or amber flight to its destination. Say: βThe run state changes and saving is requested before this flight starts.β
- In a separate battle, choose Card. Explain that opening the choice view does not grant a card; the selected candidate is committed only after the second click.
- Explain the two guards: cards are unclickable during entrance, and a claim-in-progress/already-claimed reward cannot be taken twice.
Implementation
EndBattleScreencreates the settlement UI for a victory and owns the next-screen routing.RewardDisplaybuilds reward choices, applies the selected reward, invokes the autosave callback, and coordinates feedback.VictoryAnimationControllercontrols the panel, title, wings, particles, card entrance, hover emphasis, and input-ready state.RewardClaimFeedbackanimates the reward and its trail to the matching HUD icon.
Tests
VictoryAnimationControllerTest: entrance state, reward-card input gating, hover emphasis, disposal.RewardDisplayTest: reward choice and claim flow, autosave callback, feedback and navigation sequencing.EndBattleScreenTest: post-battle route selection and reward-gated exit.