Add lobby info display to the join private lobby modal

[iiamlewis]

Describe the solution you'd like
Adds UI to show the private lobby setup when joining a private lobby. Reuses the public lobby card to show the map, game mode and difficulty, reuses the config section from the host modal for showing the settings and enabled units - with click affordances removed. Reused these components to make future changes easier as you dont need to remember to update 2 places

Additional context
This was initially started to be added in #2211 - #2211

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Related Issues

• Additional Lobby ID text field at end of lobby creation modal #2082
• Separate lobbies per game mode (FFA, Teams, ...) #974
• Integrated in-lobby chat #2490
• Save & reuse lobby settings (presets) #2489
• Separate FFA and Team lobbies on the homepage #1138

🔗 Related PRs

#1382 - Add private lobby ID visibility toggle [merged]
#1997 - fix private game join link [merged]
#2444 - Lobby Team Preview UI [merged]
#2520 - Fix: 'Mini Map' to 'Compact Map' for Private Lobby Modal [merged]
#2591 - Lobby team size [merged]

👤 Suggested Assignees

• abdallahbahrawi1
• Gazook89
• andrewNiziolek
• scottanderson
• floriankilian

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[coderabbitai]

Coding Plan

Approach

Add a UI display to the join private lobby modal that shows the game configuration (map, mode, difficulty, settings, and enabled units) when joining a private lobby. This should reuse the visual structure from the public lobby card and host modal configuration sections, making them non-interactive to avoid code duplication and simplify future maintenance.

Observations

The codebase is a LitElement-based web application with lobby management features. The JoinPrivateLobbyModal.ts currently handles joining private lobbies and polls for player lists but doesn't display game configuration. The PublicLobby.ts renders lobby cards with inline HTML showing game info, while HostLobbyModal.ts contains inline HTML for configuration settings and uses a renderUnitTypeOptions() utility for unit display. The application follows a pattern of using utility functions for reusable rendering logic and stores game configuration in a GameConfig structure that includes map, difficulty, mode, settings (donateGold, donateTroops, disableNations), and disabledUnits array.

Assumptions

Assumption 1: Approach for making UI elements read-only

Options Considered:

• Extract as full LitElement components with readOnly props
• Create utility functions that return Lit templates with interactive flag (matches existing renderUnitTypeOptions pattern)
• Copy and adapt inline HTML in JoinPrivateLobbyModal

Chosen Option: Create utility functions that return Lit templates with interactive flag (matches existing renderUnitTypeOptions pattern)

Rationale: This aligns with the existing renderUnitTypeOptions pattern, provides the code reusability required by the ticket, and integrates naturally with LitElement's render methods. When interactive is false, utilities will render visually identical elements with disabled states, aria-disabled attributes, and no event handlers.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Extract Reusable Rendering Utilities

Create utility functions that generate Lit templates for lobby information display. These utilities will be used across multiple components to ensure consistency and eliminate duplication.

Task 1: Create Lobby Card Rendering Utility

• Create src/client/utilities/RenderLobbyCard.ts with a renderLobbyCard() function that accepts GameInfo and options including interactive: boolean and optional onClick handler
• Structure the template to match the current PublicLobby card layout (map background image, game mode label, map name, player count display)
• When interactive is true, render as a clickable button with hover states; when false, render as a styled div with no pointer events
• Use existing translation functions for labels and maintain current Tailwind CSS classes for consistency

Task 2: Create Game Settings Rendering Utility

• Create src/client/utilities/RenderGameSettings.ts with a renderGameSettings() function that accepts a GameConfig object and interactive: boolean flag
• Generate template for the three settings: donateGold, donateTroops, and disableNations using the existing "option-card" pattern from HostLobbyModal
• When interactive is true, render enabled checkboxes with change handlers; when false, render with disabled attribute, aria-disabled="true", and pointer-events: none styling
• Maintain visual consistency with HostLobbyModal's checkbox-icon styling and selected state classes

Task 3: Enhance Units Rendering Utility for Read-Only Mode

• Update src/client/utilities/RenderUnitTypeOptions.ts to accept an optional interactive: boolean flag in the UnitTypeRenderContext interface
• When interactive is false (or toggleUnit callback is not provided), render checkboxes with disabled attribute and aria-disabled="true"
• When interactive is true, maintain existing behavior with working toggle callbacks
• Ensure disabled checkboxes maintain the same visual styling as enabled ones but with appropriate opacity and cursor changes

🤖 Prompt for AI agents

Create three reusable rendering utilities for lobby UI components.

Create `src/client/utilities/RenderLobbyCard.ts`:
- Implement `renderLobbyCard()` function accepting GameInfo, interactive
boolean, and optional onClick handler
- Return Lit template matching PublicLobby card layout with map background, mode
label, map name, and player count
- Render as clickable button when interactive=true, styled div when
interactive=false

Create `src/client/utilities/RenderGameSettings.ts`:
- Implement `renderGameSettings()` function accepting GameConfig and interactive
boolean
- Return Lit template for donateGold, donateTroops, and disableNations using
option-card pattern
- Render enabled checkboxes with handlers when interactive=true, disabled with
aria-disabled when false

Update `src/client/utilities/RenderUnitTypeOptions.ts`:
- Add optional `interactive: boolean` flag to UnitTypeRenderContext interface
- Render disabled checkboxes with aria-disabled when interactive=false or no
toggleUnit callback
- Maintain existing behavior when interactive=true

Phase 2: Integrate Lobby Configuration Display into JoinPrivateLobbyModal

Update the join private lobby modal to fetch, store, and display game configuration information using the new utilities.

Task 1: Add GameConfig State Management

• Add @state() gameConfig?: GameConfig property to JoinPrivateLobbyModal class in src/client/JoinPrivateLobbyModal.ts
• Update the pollPlayers() method to extract and store gameConfig from the GameInfo response returned by the API
• Ensure gameConfig is cleared when modal is closed or when starting a new join attempt

Task 2: Render Lobby Configuration Information

• Import the three rendering utilities (renderLobbyCard, renderGameSettings, renderUnitTypeOptions) in src/client/JoinPrivateLobbyModal.ts
• Add a configuration display section in the modal's render method that appears after successfully joining (when hasJoined is true and gameConfig is available)
• Render lobby card with interactive: false to show map, mode, and difficulty information
• Render game settings section with interactive: false to show donateGold, donateTroops, and disableNations states
• Render units section with interactive: false to show which units are enabled/disabled
• Add appropriate spacing and layout structure using existing modal styling patterns

🤖 Prompt for AI agents

Update JoinPrivateLobbyModal to display game configuration using the new
utilities.

In `src/client/JoinPrivateLobbyModal.ts`:
- Add `@state() gameConfig?: GameConfig` property to the class
- Update `pollPlayers()` to extract and store gameConfig from GameInfo API
response
- Clear gameConfig when modal closes or new join attempt starts

- Import renderLobbyCard, renderGameSettings, and renderUnitTypeOptions
utilities
- Add configuration display section in render() that shows when hasJoined=true
and gameConfig exists
- Call renderLobbyCard with interactive=false to display map, mode, and
difficulty
- Call renderGameSettings with interactive=false to display settings states
- Call renderUnitTypeOptions with interactive=false to display enabled/disabled
units
- Apply appropriate spacing and layout using existing modal styling

Phase 3: Refactor Existing Components to Use Shared Utilities

Update PublicLobby and HostLobbyModal components to use the new utilities, eliminating code duplication and ensuring future changes only need to be made in one place.

Task 1: Refactor PublicLobby to Use Lobby Card Utility

• Update src/client/PublicLobby.ts render method to import and call renderLobbyCard() with interactive: true and the lobbyClicked handler
• Remove the inline button HTML that currently renders lobby cards
• Verify that map images, player counts, countdown timers, and all interactive behaviors work identically
• Ensure hover states and click handling remain unchanged

Task 2: Refactor HostLobbyModal to Use Shared Utilities

• Update src/client/HostLobbyModal.ts to import and use renderGameSettings() for the donateGold, donateTroops, and disableNations sections
• Update the call to renderUnitTypeOptions() to explicitly pass interactive: true flag
• Remove the inline label.option-card HTML for settings checkboxes
• Pass change handlers as callbacks to the utilities where needed for interactive mode
• Verify all settings changes, unit toggles, and state updates continue to work correctly

🤖 Prompt for AI agents

Refactor existing components to use the new shared utilities, eliminating code
duplication.

In `src/client/PublicLobby.ts`:
- Import and call `renderLobbyCard()` with interactive=true and lobbyClicked
handler
- Remove inline button HTML for lobby cards
- Ensure map images, player counts, countdown timers, hover states, and click
handling remain unchanged

In `src/client/HostLobbyModal.ts`:
- Import and call `renderGameSettings()` for donateGold, donateTroops, and
disableNations sections
- Update `renderUnitTypeOptions()` call to explicitly pass interactive=true
- Remove inline label.option-card HTML for settings checkboxes
- Pass change handlers as callbacks to utilities for interactive mode
- Verify all settings changes, unit toggles, and state updates work correctly

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Create three reusable rendering utilities for lobby UI components.

Create `src/client/utilities/RenderLobbyCard.ts`:
- Implement `renderLobbyCard()` function accepting GameInfo, interactive
boolean, and optional onClick handler
- Return Lit template matching PublicLobby card layout with map background, mode
label, map name, and player count
- Render as clickable button when interactive=true, styled div when
interactive=false

Create `src/client/utilities/RenderGameSettings.ts`:
- Implement `renderGameSettings()` function accepting GameConfig and interactive
boolean
- Return Lit template for donateGold, donateTroops, and disableNations using
option-card pattern
- Render enabled checkboxes with handlers when interactive=true, disabled with
aria-disabled when false

Update `src/client/utilities/RenderUnitTypeOptions.ts`:
- Add optional `interactive: boolean` flag to UnitTypeRenderContext interface
- Render disabled checkboxes with aria-disabled when interactive=false or no
toggleUnit callback
- Maintain existing behavior when interactive=true
===============================================================================

Task: 2

Update JoinPrivateLobbyModal to display game configuration using the new
utilities.

In `src/client/JoinPrivateLobbyModal.ts`:
- Add `@state() gameConfig?: GameConfig` property to the class
- Update `pollPlayers()` to extract and store gameConfig from GameInfo API
response
- Clear gameConfig when modal closes or new join attempt starts

- Import renderLobbyCard, renderGameSettings, and renderUnitTypeOptions
utilities
- Add configuration display section in render() that shows when hasJoined=true
and gameConfig exists
- Call renderLobbyCard with interactive=false to display map, mode, and
difficulty
- Call renderGameSettings with interactive=false to display settings states
- Call renderUnitTypeOptions with interactive=false to display enabled/disabled
units
- Apply appropriate spacing and layout using existing modal styling
===============================================================================

Task: 3

Refactor existing components to use the new shared utilities, eliminating code
duplication.

In `src/client/PublicLobby.ts`:
- Import and call `renderLobbyCard()` with interactive=true and lobbyClicked
handler
- Remove inline button HTML for lobby cards
- Ensure map images, player counts, countdown timers, hover states, and click
handling remain unchanged

In `src/client/HostLobbyModal.ts`:
- Import and call `renderGameSettings()` for donateGold, donateTroops, and
disableNations sections
- Update `renderUnitTypeOptions()` call to explicitly pass interactive=true
- Remove inline label.option-card HTML for settings checkboxes
- Pass change handlers as callbacks to utilities for interactive mode
- Verify all settings changes, unit toggles, and state updates work correctly

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord or schedule a call!