add teammate pulse highlight during spawn phase in team games #2768
Conversation
Adds a pulsing highlight effect for teammates during the spawn phase in team games. This helps colorblind players identify their teammates on the map more easily. - Teammates show a subtle green/team-colored pulse (5-14px radius) - Player's own pulse remains unchanged (8-24px white pulse) - Only activates during spawn phase in team games - Animation stays synchronized with player's own pulse 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
|
WalkthroughAdds teammate highlighting in TerritoryLayer by introducing a private method that renders smaller breathing-ring highlights around teammates on the same team, using team-based colors. The method is wired into the existing Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks✅ Passed checks (3 passed)
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. Comment |
![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)
src/client/graphics/layers/TerritoryLayer.ts (1)
304-310: Simplify duplicate color assignments.Both
baseColorandbreathingColorare always assigned the same value in each branch. This can be simplified to a single variable.🔎 Proposed refactor
- let baseColor: Colord; - let breathingColor: Colord; + let ringColor: Colord; if (team !== null && teamColors.includes(team)) { - baseColor = this.theme.teamColor(team).alpha(0.5); - breathingColor = this.theme.teamColor(team).alpha(0.5); + ringColor = this.theme.teamColor(team).alpha(0.5); } else { - baseColor = this.theme.spawnHighlightTeamColor(); - breathingColor = this.theme.spawnHighlightTeamColor(); + ringColor = this.theme.spawnHighlightTeamColor(); } this.drawBreathingRing( center.x, center.y, teammateMinRad, teammateMaxRad, teammateRadius, - baseColor, - breathingColor, + ringColor, + ringColor, );
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/client/graphics/layers/TerritoryLayer.ts
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: Ble4Ch
Repo: openfrontio/OpenFrontIO PR: 1063
File: src/core/configuration/Colors.ts:114-330
Timestamp: 2025-06-06T15:36:31.739Z
Learning: In the OpenFrontIO project, color improvements are implemented incrementally. The current focus for player colors is ensuring sufficient unique color availability rather than optimizing for visual distinction or accessibility features.
Learnt from: devalnor
Repo: openfrontio/OpenFrontIO PR: 1248
File: src/client/graphics/layers/TerritoryInfoLayer.ts:20-20
Timestamp: 2025-06-22T21:51:14.990Z
Learning: In TerritoryInfoLayer.ts, the highlightedTerritory field uses both null and undefined intentionally: undefined represents initial state or inactive layer (Ctrl released), while null represents active layer with no territory being highlighted at cursor position. This distinction is important for proper state change detection.
📚 Learning: 2025-06-22T21:51:14.990Z
Learnt from: devalnor
Repo: openfrontio/OpenFrontIO PR: 1248
File: src/client/graphics/layers/TerritoryInfoLayer.ts:20-20
Timestamp: 2025-06-22T21:51:14.990Z
Learning: In TerritoryInfoLayer.ts, the highlightedTerritory field uses both null and undefined intentionally: undefined represents initial state or inactive layer (Ctrl released), while null represents active layer with no territory being highlighted at cursor position. This distinction is important for proper state change detection.
Applied to files:
src/client/graphics/layers/TerritoryLayer.ts
📚 Learning: 2025-10-18T11:00:57.142Z
Learnt from: NewYearNewPhil
Repo: openfrontio/OpenFrontIO PR: 2230
File: src/client/graphics/GameRenderer.ts:269-277
Timestamp: 2025-10-18T11:00:57.142Z
Learning: In src/client/graphics/GameRenderer.ts, the GameRecapCapture implementation does not use setCaptureRenderEnabled on layers. Instead, it uses RecapCaptureSurface.capture() to render capture layers (TerrainLayer, TerritoryLayer, RailroadLayer, StructureIconsLayer, UnitLayer) directly to an off-screen canvas without requiring layer-level capture mode methods.
Applied to files:
src/client/graphics/layers/TerritoryLayer.ts
📚 Learning: 2025-10-26T15:37:07.732Z
Learnt from: GlacialDrift
Repo: openfrontio/OpenFrontIO PR: 2298
File: src/client/graphics/layers/TerritoryLayer.ts:200-210
Timestamp: 2025-10-26T15:37:07.732Z
Learning: In GameImpl.ts lines 124-139, team assignment logic varies by number of teams: when numPlayerTeams < 8, teams are assigned ColoredTeams values (Red, Blue, Yellow, Green, Purple, Orange, Teal); when numPlayerTeams >= 8, teams are assigned generic string identifiers like "Team 1", "Team 2", etc., which are not members of ColoredTeams.
Applied to files:
src/client/graphics/layers/TerritoryLayer.ts
📚 Learning: 2025-06-10T09:56:44.473Z
Learnt from: Ble4Ch
Repo: openfrontio/OpenFrontIO PR: 1063
File: src/core/configuration/PastelThemeDark.ts:53-53
Timestamp: 2025-06-10T09:56:44.473Z
Learning: In ColorAllocator class in src/core/configuration/Colors.ts, the correct method names are assignColor(id: string): Colord for general color assignment and assignTeamColor(team: Team): Colord for team-specific colors. There are no assignPlayerColor() or assignBotColor() methods.
Applied to files:
src/client/graphics/layers/TerritoryLayer.ts
🧬 Code graph analysis (1)
src/client/graphics/layers/TerritoryLayer.ts (3)
src/core/game/GameView.ts (2)
myPlayer(728-730)team(464-466)src/core/game/Game.ts (1)
ColoredTeams(58-69)src/core/game/PlayerImpl.ts (1)
team(789-791)
🔇 Additional comments (5)
src/client/graphics/layers/TerritoryLayer.ts (5)
266-269: LGTM! Clean integration.The teammate highlight is correctly integrated after the focused player highlight, and passing the same radius values ensures the pulses stay synchronized.
271-279: LGTM! Correct early return for FFA games.The early return when
myPlayer.team() === nullcorrectly limits teammate highlighting to team games only.
285-291: LGTM! Correct radius interpolation.The radius calculation correctly synchronizes teammate pulses with the player's own pulse by interpolating the position within the animation range. The smaller radius (5–14px vs 8–24px) keeps teammate highlights subtle.
308-308: No issues found. ThespawnHighlightTeamColor()method is properly defined in the Theme interface (Config.ts:202) and implemented in PastelTheme.ts (lines 221-223). The code at line 308 is correct.
281-283: No issues found. TheisOnSameTeam()method exists on thePlayerViewclass (defined insrc/core/game/GameView.ts:516-518) and correctly identifies team membership by comparing team data. The code inTerritoryLayer.tsuses it correctly to filter teammates.
|
This is an awesome feature! I saw it recommended in the discord a while back so this is a great addition in my opinion. Also to get the description check passing, I don't think you can change the checkboxes or their content. Just hit agree even if it is N/A to confirm if you did need to add text to the lang files you would've and if you did need to add tests, you would've. |
Okay - I've done that then. I just wanted to be clear and transparent about my limits / use of AI |
5 participants
Adds a pulsing highlight effect for teammates during the spawn phase in team games. This helps colorblind players identify their teammates on the map more easily.
I didn't want to come empty handed with my request so I generated the code
I do know python and a little rust, but don't have TypeScript experience - I know you guys are probably getting flooded with AI slop so I hope its okay.
Please implement the feature at the very least because its SO much better not having to hunt around.
🤖 Generated with Claude Code
So the code calls drawTeammateHighlights() inside of drawFocusedPlayerHighlight() so it can only occur where current highlighting occurs
Then uses the existing isOnSameTeam() to find teammates
Then uses the existing drawBreathingRing() function
I took a video since it best captures the feature
I'm not that good at coding formally, I tested it manually by loading into team games, but I'm going to need help with the code being tested. (Please help)
I did load into multiple lobbies and made sure the feature works, its a really simple feature so I am confident there isn't any Lovecraftian bug lurking in it. It also uses mostly existing functions and features within the code base.
teamcolours.mp4