Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: migrate player game activity page to React #3006

Merged

Conversation

wescopeland
Copy link
Member

@wescopeland wescopeland commented Dec 31, 2024

This PR migrates the player game activity page to React and is a precursor to migrating the ticket view page to React.

How to test this PR

Both the Blade UI and React UI co-exist on this branch. This allows you to compare/contrast both UIs. Before merging or in a subsequent PR, I will remove the activity.blade.php page.

http://localhost:64000/user/WCopeland/game/14402/activity
http://localhost:64000/user/WCopeland/game/14402/activity2

I've written this SQL query to generate random page URLs to try:

SELECT 
    CONCAT('user/', ua.User, '/game/', pg.game_id, '/activity') as activity_url,
    pg.achievements_unlocked,
    pg.achievements_unlocked_hardcore,
    pg.last_played_at
FROM (
    SELECT DISTINCT user_id 
    FROM player_games 
    WHERE created_at >= '2024-01-01 00:00:00'
      AND created_at < '2025-01-01 00:00:00'
      AND achievements_unlocked > 0
      AND last_played_at IS NOT NULL
      AND deleted_at IS NULL
    ORDER BY RAND()
    LIMIT 10
) as sample
JOIN player_games pg ON pg.user_id = sample.user_id
JOIN UserAccounts ua ON pg.user_id = ua.ID
WHERE pg.created_at >= '2024-01-01 00:00:00'
  AND pg.created_at < '2025-01-01 00:00:00'
  AND pg.achievements_unlocked > 0
  AND pg.last_played_at IS NOT NULL
  AND pg.deleted_at IS NULL
GROUP BY pg.user_id
LIMIT 10;

UX Walkthrough

Before
Screenshot 2024-12-31 at 5 35 01 PM

After
Screenshot 2024-12-31 at 5 35 25 PM

Client Usage Breakdown
Clients are sorted by usage times. If more than 3 were used, the extraneous clients are put in a tooltip:
Screenshot 2024-12-31 at 5 37 19 PM

Screenshot 2024-12-31 at 5 37 24 PM

Achievement Sessions Toggle
A player may have many "non-productive" sessions. These can now be optionally hidden with a new toggle (disabled by default):

Session.Toggle.mp4

Summarized Data
Summarized stats about the player's sessions are still shown. Now, there are tooltips to further explain what some of these things mean.

Screenshot 2024-12-31 at 5 41 05 PM

Screenshot 2024-12-31 at 5 41 10 PM

Reconstructed Sessions
I decided to keep the label on these the same as it is in the Blade UI. However, there are now tooltips trying to convey what they mean.

Screenshot 2024-12-31 at 5 42 33 PM

Screenshot 2024-12-31 at 5 42 42 PM

Emulator, Hash, and Playtime Displays
Wherever possible, each session card shows the known emulator, hash, and playtime data for the user's session:
Screenshot 2024-12-31 at 5 46 28 PM

Screenshot 2024-12-31 at 5 46 33 PM

Obviously, there will be plenty of times where we don't know this information. The UI attempts to handle this gracefully:

Screenshot 2024-12-31 at 5 47 31 PM

Distinct Session Types
Manual unlocks also get their own type of session cards. Later, when this is brought over to the view ticket UI, those should get cards too:
Screenshot 2024-12-31 at 5 48 43 PM

Multi-disc Hash Indicators
A special indicator is added for multi-disc hash labels.
Screenshot 2024-12-31 at 5 50 07 PM

Screenshot 2024-12-31 at 5 50 11 PM

Technical Details

  • The back-end controller logic lives in PlayerGameController::activity().
  • A new action, BuildPlayerGameActivityDataAction, is leveraged by the controller. This action utilizes PlayerGameActivityService and UserAgentService, which are both already well-tested and relatively unchanged by this PR. The data from these services is consumed by the action and plumbed through type-safe DTOs that the React UI can understand.

@wescopeland wescopeland requested a review from a team December 31, 2024 22:53
onCheckedChange={setIsOnlyShowingAchievementSessions}
/>
</div>
</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Possible idea for future feature: Hide all unlocks (or collapse sessions). That way just the duration of each session and its final rich presence would be shown to give a better overview of the player's journey.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a good idea. We'll need to create a new base component to support the functionality, but I'll see what may be required beyond that to pull this off.

Another idea that occurred to me is finding a better utilization of this dead space under the playtime label:
Screenshot 2025-01-01 at 2 59 56 PM

Maybe this space could be used to summarize the session itself? ie: "4 achievements unlocked for 20 points"?

@wescopeland
Copy link
Member Author

Latest also includes a small copy change for the beginning of reconstructed sessions:
Screenshot 2025-01-01 at 3 05 01 PM

@Jamiras
Copy link
Member

Jamiras commented Jan 2, 2025

This page comes up blank: http://localhost:64000/user/SporyTike/game/25657/activity2

@wescopeland
Copy link
Member Author

I'll swap out the Blade page in a subsequent PR.

@wescopeland wescopeland merged commit 3552b9e into RetroAchievements:master Jan 5, 2025
8 checks passed
@wescopeland wescopeland deleted the player-game-activity-show branch January 5, 2025 02:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants