feat: #101 Add player count to roster#103
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TournamentRoster
participant useTournament
participant PlayerCount
participant IdentityBadge
participant CompetitorActions
User->>TournamentRoster: Render TournamentRoster
TournamentRoster->>useTournament: Fetch useTeams, competitorSize
TournamentRoster->>IdentityBadge: Render with competitor info
alt useTeams is true
TournamentRoster->>PlayerCount: Render with competitor, competitorSize
end
TournamentRoster->>CompetitorActions: Render with competitor info
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 1
🧹 Nitpick comments (1)
src/components/TournamentRoster/TournamentRoster.module.scss (1)
11-15: Consider using an auto-sized row rather than a fixed2.5rem.A hard-coded height can break when:
• Font scaling / user zoom increases text size.
• Badges, icons, or translated text exceed the fixed value.Replacing
grid-template-rows: 2.5rem;withgrid-auto-rows: minmax(2.5rem, auto);(or simply letting the row size implicitly) keeps the original intent while preventing clipping.- grid-template-rows: 2.5rem; + /* Maintain a minimum height but allow growth when needed */ + grid-auto-rows: minmax(2.5rem, auto);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/components/TournamentRoster/TournamentRoster.module.scss(1 hunks)src/components/TournamentRoster/TournamentRoster.tsx(2 hunks)src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.module.scss(1 hunks)src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.tsx(3 hunks)src/components/TournamentRoster/components/PlayerCount/PlayerCount.module.scss(1 hunks)src/components/TournamentRoster/components/PlayerCount/PlayerCount.tsx(1 hunks)src/components/TournamentRoster/components/PlayerCount/index.ts(1 hunks)
🔇 Additional comments (11)
src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.module.scss (1)
12-12: Grid layout positioning verified and approvedWe’ve confirmed that the parent container in
TournamentRoster.module.scssuses CSS grid withgrid-template-areas: "Identity PlayerCount Actions"; grid-template-columns: 1fr auto auto;so the Actions cell is explicitly placed in the third column. Updating
CompetitorActions.module.scss(line 12) frommargin-left: auto;toflex-shrink: 0;correctly prevents unwanted shrinkage in that grid cell. No further changes needed.
- Verified grid setup in
TournamentRoster.module.scss- Confirmed
flex-shrink: 0is appropriate inCompetitorActions.module.scsssrc/components/TournamentRoster/components/PlayerCount/index.ts (1)
1-2: Clean barrel export implementation.The export pattern follows React/TypeScript conventions and provides a clean interface for consuming the PlayerCount component.
src/components/TournamentRoster/components/CompetitorActions/CompetitorActions.tsx (3)
2-2: Good addition of clsx for class name handling.The clsx import supports the enhanced className functionality being added to the component.
24-24: Well-implemented className prop enhancement.The optional className prop follows React conventions and allows external styling flexibility.
Also applies to: 29-29
100-100: Proper use of clsx for combining class names.The clsx utility correctly combines the internal component styles with any external className prop, maintaining styling flexibility without breaking internal styles.
src/components/TournamentRoster/components/PlayerCount/PlayerCount.module.scss (2)
1-2: Proper use of project style modules.The imports correctly reference the project's style system for consistent styling.
4-12: Well-structured component styling.The flex row layout with gap is appropriate for icon-text display, muted styling fits the UI context, and fixed SVG dimensions prevent layout issues.
src/components/TournamentRoster/TournamentRoster.tsx (3)
7-7: Proper component import.The PlayerCount import follows the project's import conventions.
18-18: Correctly extended useTournament hook.Adding competitorSize extraction aligns with the PlayerCount component's requirements.
26-30: Well-implemented PlayerCount integration.The conditional rendering based on useTeams is logical, and the component positioning between IdentityBadge and CompetitorActions makes sense for the UI flow.
However, the AI summary mentions grid layout changes in
TournamentRoster.module.scsswith grid areas likeTournamentRoster_Identity,TournamentRoster_PlayerCount, andTournamentRoster_Actions, but this file wasn't provided for review. The className props being passed suggest these grid areas should exist.Verify the grid layout implementation:
#!/bin/bash # Description: Check for grid layout styles in TournamentRoster.module.scss # Expected: CSS grid areas defined for Identity, PlayerCount, and Actions fd "TournamentRoster.module.scss" --exec cat {}Likely an incorrect or invalid review comment.
src/components/TournamentRoster/TournamentRoster.module.scss (1)
20-30: BEM block naming is clear – 👍The grid-area assignments for
_Identity,_PlayerCount, and_Actionsmap cleanly to the named areas declared above, making the markup easy to scan and maintain.
| const playerCount = competitor.players.filter((p) => p.active).length; | ||
| return ( | ||
| <div className={clsx(styles.PlayerCount, className)} data-full={playerCount === competitorSize}> | ||
| <Users /> | ||
| {`${playerCount}/${competitorSize}`} | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add basic accessibility & robustness guards.
- The
Usersicon is decorative; hide it from screen-readers. - Expose an
aria-labelon the wrapper so assistive tech announces the count. - Guard against a missing
playersarray to avoid a runtime crash.
-const playerCount = competitor.players.filter((p) => p.active).length;
+const playerCount = (competitor.players ?? []).filter((p) => p.active).length;
-<div className={clsx(styles.PlayerCount, className)} data-full={playerCount === competitorSize}>
- <Users />
+<div
+ className={clsx(styles.PlayerCount, className)}
+ data-full={playerCount === competitorSize}
+ aria-label={`${playerCount} of ${competitorSize} players active`}
+>
+ <Users aria-hidden="true" focusable="false" />
{`${playerCount}/${competitorSize}`}
</div>These tweaks cost almost nothing and improve a11y and runtime safety.
📝 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 playerCount = competitor.players.filter((p) => p.active).length; | |
| return ( | |
| <div className={clsx(styles.PlayerCount, className)} data-full={playerCount === competitorSize}> | |
| <Users /> | |
| {`${playerCount}/${competitorSize}`} | |
| </div> | |
| const playerCount = (competitor.players ?? []).filter((p) => p.active).length; | |
| return ( | |
| <div | |
| className={clsx(styles.PlayerCount, className)} | |
| data-full={playerCount === competitorSize} | |
| aria-label={`${playerCount} of ${competitorSize} players active`} | |
| > | |
| <Users aria-hidden="true" focusable="false" /> | |
| {`${playerCount}/${competitorSize}`} | |
| </div> |
🤖 Prompt for AI Agents
In src/components/TournamentRoster/components/PlayerCount/PlayerCount.tsx around
lines 19 to 24, the Users icon should be hidden from screen readers by adding an
appropriate aria attribute since it is decorative. Add an aria-label to the
wrapper div that clearly announces the player count for assistive technologies.
Also, add a guard to safely handle cases where competitor.players might be
undefined or null to prevent runtime errors by defaulting to an empty array
before filtering.
* Update update-project-status.yml * Update updateProjectStatus.js * fix: Toast text does not wrap (#87) * fix: #86 Sanitize sign in/sign up inputs (#91) * feat: #32 Auto generate avatars & refactor users (#90) * feat: Improve <TournamentDetailPage/> default tab * feat: Improve <TournamentCard/> styling * Update mockData.ts * feat: Improve <AccordionItem/> disabled state (#97) #94 * feat: Hide completed pairings from match check-in (#96) #95 * bug: Preserve <TournamentPairingsGrid/> internal state (#98) #93 * feat: #101 Add player count to roster (#103) * feat: Show full player names when tournaments require it * feat: Add activePlayerCount to deep tournaments * feat: Sort tournament competitors by name * task: #100 Clean-up .card mixin (#102) * feat: #99 Improve tournament competitor edit dialog (#104) * feat: #106 Improve signIn error handling (#107) * Update convex/_model/tournamentCompetitors/queries/getTournamentCompetitorsByTournament.ts * Update convex/_model/users/_helpers/checkUserTournamentForcedName.ts * feat: Hide players with 0 matches from rankings
* Update update-project-status.yml * Update updateProjectStatus.js * fix: Toast text does not wrap (#87) * fix: #86 Sanitize sign in/sign up inputs (#91) * feat: #32 Auto generate avatars & refactor users (#90) * feat: Improve <TournamentDetailPage/> default tab * feat: Improve <TournamentCard/> styling * Update mockData.ts * feat: #94 Improve <AccordionItem/> disabled state (#97) * feat: #95 Hide completed pairings from match check-in (#96) * bug: #93 Preserve <TournamentPairingsGrid/> internal state (#98) * feat: #101 Add player count to roster (#103) * feat: Show full player names when tournaments require it * feat: Add activePlayerCount to deep tournaments * feat: Sort tournament competitors by name * task: #100 Clean-up .card mixin (#102) * feat: #99 Improve tournament competitor edit dialog (#104) * feat: #106 Improve signIn error handling (#107) * Update convex/_model/tournamentCompetitors/queries/getTournamentCompetitorsByTournament.ts * Update convex/_model/users/_helpers/checkUserTournamentForcedName.ts * feat: Hide players with 0 matches from rankings * feat: #112 Add more mercenary team options (#113) * feat: #110 Add manual table assignments (#111) * fix: Ensure round 0 rankings can be included * Refactor tournament actions (#114) * refactor: Improve tournament actions * chore: Clean-up Convex errors * fix: Do not try to clean up current round timer on tournament end * fix: Don't allow players to be removed from tournament * chore: Update test tournament banner image * Update TournamentCard.tsx * fix: Ensure round 0 rankings can be included * fix: Fix end tournament round context menu behavior * chore: Improve mock match result creation * feat: Allow matchResult.playedAt to be date string or number * feat: #115 Hide match result battle plans (#116) * feat: Set page title based on <PageWrapper/> title prop * fix: Use <IdentityBadge/> to fix player name spacing on match results * fix: Correctly include match results relevant to a tournament
* Update update-project-status.yml * Update updateProjectStatus.js * fix: Toast text does not wrap (#87) * fix: Sanitize sign in/sign up inputs (#91) #86 * feat: #32 Auto generate avatars & refactor users (#90) * feat: Improve <TournamentDetailPage/> default tab * feat: Improve <TournamentCard/> styling * Update mockData.ts * feat: Improve <AccordionItem/> disabled state (#97) #94 * feat: Hide completed pairings from match check-in (#96) #95 * bug: Preserve <TournamentPairingsGrid/> internal state (#98) #93 * feat: #101 Add player count to roster (#103) * feat: Show full player names when tournaments require it * feat: Add activePlayerCount to deep tournaments * feat: Sort tournament competitors by name * task: Clean-up .card mixin (#102) #100 * feat: #99 Improve tournament competitor edit dialog (#104) * feat: #106 Improve signIn error handling (#107) * Update convex/_model/tournamentCompetitors/queries/getTournamentCompetitorsByTournament.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update convex/_model/users/_helpers/checkUserTournamentForcedName.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat: Hide players with 0 matches from rankings * feat: #112 Add more mercenary team options (#113) * feat: #110 Add manual table assignments (#111) * fix: Ensure round 0 rankings can be included * Refactor tournament actions (#114) * refactor: Improve tournament actions * chore: Clean-up Convex errors * fix: Do not try to clean up current round timer on tournament end * fix: Don't allow players to be removed from tournament * chore: Update test tournament banner image * Update TournamentCard.tsx * fix: Ensure round 0 rankings can be included * fix: Fix end tournament round context menu behavior * chore: Improve mock match result creation * feat: Allow matchResult.playedAt to be date string or number * feat: #115 Hide match result battle plans (#116) * feat: Set page title based on <PageWrapper/> title prop * fix: Use <IdentityBadge/> to fix player name spacing on match results * fix: Correctly include match results relevant to a tournament * feat: #57 Implement basic dashboard (#119) * fix: Remove double border on dashboard sections * fix: Add key to dashboard tournaments * feat: Improve <TournamentPairingRow/> styling * fix: Remove extraneous error message * fix: Improve <Form/> isDirty calculation * fix: Render all competitors in <TournamentCompetitorForm/> * fix: Also show empty state if rankings are empty --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 participant
#101
Summary by CodeRabbit
New Features
Improvements