Highlight own player name and team in lobby modal

[deshack]

Description:

I always lose track of myself in lobbies, could our names be bolded or even our entire team bolded for ease of readability?

This PR highlights own username and own team in lobby modal, to make it easy for players to track themselves.
It's also useful when your username gets changed by the profanity filter.

Based on this Discord suggestion

Screenshots

FFA (Public):

Teams (Public):

FFA (Private):

Teams (Private):

Please complete the following:

• I have added screenshots for all UI updates
• I process any text displayed to the user through translateText() and I've added it to the en.json file
• I have added relevant tests to the test directory
• I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced

Please put your Discord username so you can be contacted if a bug or regression is found:

deshack_82603

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8e8e0e28-29cb-4e74-bbc8-e9ca2bb5bbee

📥 Commits

Reviewing files that changed from the base of the PR and between 6b9603d and f445e35.

📒 Files selected for processing (2)

• src/client/components/LobbyPlayerView.ts
• src/client/styles.css

---

Walkthrough

Lobby UI now highlights the current client: player rows and team cards get conditional border/background classes; two private helpers check current-player membership; CSS adds a .player-tag.current-player style and sets a transparent hover border on option cards.

Changes

Cohort / File(s)	Summary
Lobby view logic src/client/components/LobbyPlayerView.ts	Added conditional CSS class fragments to highlight the current client in team and free‑for‑all lists. Introduced private helpers isCurrentPlayer(client) and teamContainsCurrentPlayer(preview) to centralize membership checks. Rendering of host badge and kick button unchanged.
Styling src/client/styles.css	Added .player-tag.current-player rule with light-blue background (rgba(14,165,233,0.15)) and semi‑opaque blue border (rgba(14,165,233,0.4)). Set label.option-card:hover { border: 1px solid transparent; } to ensure consistent hover border behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A blue halo on a single name,
Teams and tags now share the same,
Borders whisper who’s on stage,
A tiny highlight fills the page—
The current player finds their flame. 🎮

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: highlighting the current player's name and team in the lobby modal.
Description check	✅ Passed	The description clearly explains the feature, provides context from user feedback, includes screenshots, and confirms testing and compliance with project standards.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/client/components/LobbyPlayerView.ts`:
- Around line 243-246: Player item classes in LobbyPlayerView conditionally add
the "border border-sky-500/40" only for the current player, causing inconsistent
borders on team card player items; update the template class string (the
fragment that uses this.isCurrentPlayer(p)) so the border classes are present in
both branches (or move "border border-sky-500/40" outside the conditional and
only toggle the bg classes), ensuring the same border appears for current and
non-current player items while preserving the conditional background change.
- Around line 127-130: The current player row adds a visible border while
non-current rows don't, causing a 2px layout shift; in the class string built in
LobbyPlayerView (where the template uses this.isCurrentPlayer(client) to choose
classes) ensure the non-current branch includes a transparent border (e.g., add
"border border-transparent" alongside "bg-gray-700/70") so both branches have
the same border footprint and prevent layout shifts.

In `@src/client/styles.css`:
- Around line 305-308: The .player-tag.current-player rule adds a 1px border
causing a layout shift because .player-tag has no border; update the base
.player-tag style to include a matching 1px border that is transparent (e.g.,
border: 1px solid transparent) so toggling .current-player only changes
color/opacity and not the element size; target the .player-tag selector to make
this change so .player-tag.current-player can simply override the border color.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0a393c3d-2635-4c37-ae41-98f975633533

📥 Commits

Reviewing files that changed from the base of the PR and between 6b9603d and fe37e98.

📒 Files selected for processing (2)

• src/client/components/LobbyPlayerView.ts
• src/client/styles.css

[deshack]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[deshack]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.