-
-
Notifications
You must be signed in to change notification settings - Fork 99
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
feat: migrate player game activity page to React #3006
Conversation
...s/js/features/user-game-activity/components/UserGameActivityTimeline/HashLabel/HashLabel.tsx
Show resolved
Hide resolved
.../features/user-game-activity/components/UserGameActivityTimeline/ClientLabel/ClientLabel.tsx
Outdated
Show resolved
Hide resolved
...ame-activity/components/UserGameActivityTimeline/SessionTimelineEvent/UnlockEventContent.tsx
Outdated
Show resolved
Hide resolved
...ame-activity/components/UserGameActivityTimeline/SessionTimelineEvent/UnlockEventContent.tsx
Outdated
Show resolved
Hide resolved
...e-activity/components/UserGameActivityTimeline/SessionTimelineEvent/SessionTimelineEvent.tsx
Show resolved
Hide resolved
onCheckedChange={setIsOnlyShowingAchievementSessions} | ||
/> | ||
</div> | ||
</div> |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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:
Maybe this space could be used to summarize the session itself? ie: "4 achievements unlocked for 20 points"?
...s/js/features/user-game-activity/components/UserGameActivityTimeline/HashLabel/HashLabel.tsx
Outdated
Show resolved
Hide resolved
.../features/user-game-activity/components/UserGameActivityTimeline/ClientLabel/ClientLabel.tsx
Show resolved
Hide resolved
This page comes up blank: http://localhost:64000/user/SporyTike/game/25657/activity2 |
.../features/user-game-activity/components/UserGameActivityTimeline/ClientLabel/ClientLabel.tsx
Show resolved
Hide resolved
...features/user-game-activity/components/UserGameActivityTimeline/UserGameActivityTimeline.tsx
Show resolved
Hide resolved
I'll swap out the Blade page in a subsequent PR. |
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:
UX Walkthrough
Before
After
Client Usage Breakdown
Clients are sorted by usage times. If more than 3 were used, the extraneous clients are put in a tooltip:
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.
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.
Emulator, Hash, and Playtime Displays
Wherever possible, each session card shows the known emulator, hash, and playtime data for the user's session:
Obviously, there will be plenty of times where we don't know this information. The UI attempts to handle this gracefully:
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:
Multi-disc Hash Indicators
A special indicator is added for multi-disc hash labels.
Technical Details
PlayerGameController::activity()
.BuildPlayerGameActivityDataAction
, is leveraged by the controller. This action utilizesPlayerGameActivityService
andUserAgentService
, 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.