[Frontend] Achievement Unlock Pop-up

[SagiEv]

Real-time Achievement Unlock Notification

Description

When a player completes a challenge, they should immediately receive visual feedback indicating that the achievement has been unlocked.

The awarded badge/trophy should be displayed in real time without requiring the player to refresh the page or navigate to another screen.

Expected Behavior

• Upon challenge completion, the system awards the corresponding badge/trophy.
• A notification, toast, modal, or animation is displayed instantly.
• The notification includes the badge/trophy name and visual representation.
• The player receives immediate confirmation that the achievement has been unlocked.

Acceptance Criteria

• Challenge completion triggers an achievement unlock event.
• The awarded badge/trophy is displayed automatically on the player's screen.
• No page refresh is required.
• No additional navigation is required.
• The notification appears within a few seconds of challenge completion.
• The notification clearly identifies the earned badge/trophy.

User Story

As a player, I want to immediately see when I have earned a badge or trophy after completing a challenge so that I receive instant recognition and feedback for my achievement.