feature(demo-game): make report's page available for players #78
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughThe pull request introduces changes across three files in a game application. The modifications include optional chaining in the Changes
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/ui/src/components/NavBar.tsx (1)
52-54: Nitpick: “hover:” class name appears incomplete
Check if"hover:"needs additional tailwind classes, such ashover:bg-slate-100. If nothing is needed, consider removing it for clarity.<Button className={{ root: 'p-0 hover:' }}> - <Logo imgPathAvatar={playerImgPathAvatar} color={playerColor} /> +<Button className={{ root: 'p-0' }}> + <Logo imgPathAvatar={playerImgPathAvatar} color={playerColor} /> </Button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/demo-game/src/components/DecisionsDisplay.tsx(1 hunks)apps/demo-game/src/pages/play/cockpit.tsx(1 hunks)apps/demo-game/src/pages/play/welcome.tsx(4 hunks)packages/ui/src/components/NavBar.tsx(3 hunks)
🔇 Additional comments (10)
apps/demo-game/src/components/DecisionsDisplay.tsx (1)
110-112: Great use of optional chaining to avoid runtime errors
This change safeguards against potential undefined values for period or segment, preventing crashes at runtime. Ensure that the rest of the component logic gracefully handles cases when these objects are absent (e.g., display fallback labels or placeholders to maintain user clarity).
apps/demo-game/src/pages/play/cockpit.tsx (1)
127-133: Validate permissions for accessing “Reports”
Replacing all tabs with just “Reports” might cause unauthorized users to see or access /admin/reports/<id>. If only certain roles can access this page, remember to check permissions or show an appropriate error. Otherwise, this concise navigation is fine.
packages/ui/src/components/NavBar.tsx (2)
10-10: Importing Button is appropriate
Introducing the Button from @uzh-bf/design-system is consistent with using the design system for styling and interaction. Looks good.
27-27: Defaulting playerHref to “/play/welcome”
This aligns the navigation flow with the new default start page, ensuring consistency after removing or shifting the “Cockpit” tab.
apps/demo-game/src/pages/play/welcome.tsx (6)
6-7: Switching to FormikSelectField and FormikTextField is a smart move.
This aligns with the standard naming conventions and presumably harmonizes your code with the latest library components.
18-18: Import placement looks consistent.
Importing LogoSelector earlier clarifies when it’s used and promotes better readability.
120-120: Styling consistency.
Changing to double quotes for the className attribute is fine and aligns with many code style guidelines.
160-165: Form field usage is consistent with library standards.
Using FormikTextField for “Name of bank” and FormikSelectField for “Location” is straightforward and clear. Be sure to validate these fields thoroughly in your tests.
179-179: LogoSelector integration.
This component nicely encapsulates avatar selection. Consider verifying that the selected avatar updates and persists as expected.
185-185: Color selection logic is well-integrated.
Providing color options via the FormikSelectField ensures consistent design with the rest of your form.
There was a problem hiding this comment.
We should also make sure that the admin reports page does not return future data anywhere (not sure if we already ensured that in the backend or not). Just so that it is not possible to see the future dice or similar when looking at the browser console (some students might be smart enough for that :D).
jajakob
force-pushed
the
jakob/report-for-players
branch
from
86da2ad to
ab80807
Compare
|
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
apps/demo-game/src/pages/play/cockpit.tsx (1)
Line range hint
262-264: Improve error handling and loading statesThe current error handling is basic and might not be user-friendly. Consider adding proper error boundaries and meaningful error messages.
- if (loading) return null; - if (error) return `Error! ${error}`; + if (loading) return <LoadingSpinner />; + if (error) return ( + <ErrorDisplay + message="Unable to load game data" + details={error.message} + retry={() => refetch()} + /> + );
🧹 Nitpick comments (2)
apps/demo-game/src/pages/play/cockpit.tsx (2)
Line range hint
1-1000: Consider splitting game states into separate componentsThe switch statement handling different game states makes the component very large and complex. Consider splitting each game state into its own component for better maintainability and testing.
Example structure:
// components/game-states/PreparationState.tsx const PreparationState = ({ currentGame }) => { return ( <GameLayout> <div className="w-full"> <GameHeader currentGame={currentGame} /> </div> </GameLayout> ); }; // cockpit.tsx const stateComponents = { PREPARATION: PreparationState, RUNNING: RunningState, // ... other states }; const StateComponent = stateComponents[currentGame?.status] || DefaultState; return <StateComponent currentGame={currentGame} />;
Line range hint
43-47: Optimize data transformations with useMemoThe data transformations for charts are recalculated on every render. Consider using useMemo to optimize performance.
+ const memoizedAssets = useMemo(() => + previousPeriodResults.map((e, ix) => ({ + ...e.facts.assets, + period: 'Period ' + (ix + 1), + })), + [previousPeriodResults] + );
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/demo-game/src/components/DecisionsDisplay.tsx(1 hunks)apps/demo-game/src/pages/play/cockpit.tsx(1 hunks)packages/ui/src/components/NavBar.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/demo-game/src/components/DecisionsDisplay.tsx
- packages/ui/src/components/NavBar.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
| const tabs = [ | ||
| { | ||
| name: 'Reports', | ||
| href: `/admin/reports/${data?.result?.currentGame?.id}`, | ||
| }, | ||
| ] |
There was a problem hiding this comment.
Add null check for game ID
The href construction doesn't handle the case where data?.result?.currentGame?.id is undefined, which could lead to an invalid URL.
Add a null check or provide a fallback:
const tabs = [
{
name: 'Reports',
- href: `/admin/reports/${data?.result?.currentGame?.id}`,
+ href: data?.result?.currentGame?.id
+ ? `/play/reports/${data?.result?.currentGame?.id}`
+ : '#',
},
]📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const tabs = [ | |
| { | |
| name: 'Reports', | |
| href: `/admin/reports/${data?.result?.currentGame?.id}`, | |
| }, | |
| ] | |
| const tabs = [ | |
| { | |
| name: 'Reports', | |
| href: data?.result?.currentGame?.id | |
| ? `/play/reports/${data?.result?.currentGame?.id}` | |
| : '#', | |
| }, | |
| ] |
Incorrect route for player reports
The href points to an admin route (/admin/reports), but according to the PR objectives, this page should be accessible to players. This could lead to access permission issues.
Consider updating the route to a player-specific path:
const tabs = [
{
name: 'Reports',
- href: `/admin/reports/${data?.result?.currentGame?.id}`,
+ href: `/play/reports/${data?.result?.currentGame?.id}`,
},
]📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const tabs = [ | |
| { | |
| name: 'Reports', | |
| href: `/admin/reports/${data?.result?.currentGame?.id}`, | |
| }, | |
| ] | |
| const tabs = [ | |
| { | |
| name: 'Reports', | |
| href: `/play/reports/${data?.result?.currentGame?.id}`, | |
| }, | |
| ] |
Note: this should be merged after #77
Summary by CodeRabbit
Bug Fixes
DecisionsDisplayCompactcomponent by adding optional chaining to prevent potential rendering errors.New Features