diff --git a/src/client/JoinPrivateLobbyModal.ts b/src/client/JoinPrivateLobbyModal.ts index 09cfc6833..f6b26bf1b 100644 --- a/src/client/JoinPrivateLobbyModal.ts +++ b/src/client/JoinPrivateLobbyModal.ts @@ -9,6 +9,9 @@ export class JoinPrivateLobbyModal extends LitElement { @state() private message: string = ""; @query("#lobbyIdInput") private lobbyIdInput!: HTMLInputElement; @state() private hasJoined = false; + @state() private players: string[] = []; + + private playersInterval = null; static styles = css` .modal-overlay { @@ -180,6 +183,39 @@ export class JoinPrivateLobbyModal extends LitElement { justify-content: center; color: #fff; } + + .options-section { + background: rgba(0, 0, 0, 0.2); + padding: 12px 24px 24px 24px; + border-radius: 12px; + } + + .option-title { + margin: 0 0 16px 0; + font-size: 20px; + color: #fff; + text-align: center; + } + + .players-list { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; + padding: 0 16px; + } + + .player-tag { + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.1); + padding: 4px 16px; + border-radius: 16px; + font-size: 14px; + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.2); + } `; render() { @@ -216,6 +252,24 @@ export class JoinPrivateLobbyModal extends LitElement {
+ ${!this.hasJoined ? html`