| |
|
|
| export class GameMenu { |
| constructor({ |
| root, |
| onOpenMode, |
| onBack, |
| onClaim, |
| onLeaveSeat, |
| onEnterMatch, |
| onSpectate, |
| }) { |
| this.root = root; |
| this.onOpenMode = onOpenMode; |
| this.onBack = onBack; |
| this.onClaim = onClaim; |
| this.onLeaveSeat = onLeaveSeat; |
| this.onEnterMatch = onEnterMatch; |
| this.onSpectate = onSpectate; |
| this.screen = 'start'; |
| this.mode = null; |
| this.username = null; |
| this.spaceUrl = null; |
| this.authError = null; |
| this.playAllowed = true; |
| this.selectedLobby = null; |
|
|
| this.els = { |
| start: root.querySelector('#menu-start'), |
| lobby: root.querySelector('#menu-lobby'), |
| lobbyTitle: root.querySelector('#lobby-title'), |
| lobbyList: root.querySelector('#lobby-list'), |
| lobbyMeta: root.querySelector('#lobby-meta'), |
| userLabel: root.querySelector('#menu-user'), |
| err: root.querySelector('#menu-error'), |
| btnBack: root.querySelector('#btn-lobby-back'), |
| btnEnter: root.querySelector('#btn-lobby-enter'), |
| btnLeave: root.querySelector('#btn-lobby-leave'), |
| }; |
|
|
| root.querySelector('#btn-mode-sandbox')?.addEventListener('click', () => this._pickMode('sandbox')); |
| root.querySelector('#btn-mode-mvp')?.addEventListener('click', () => this._pickMode('mvp')); |
| this.els.btnBack?.addEventListener('click', () => { |
| this.showStart(); |
| this.onBack?.(); |
| }); |
| this.els.btnEnter?.addEventListener('click', () => this.onEnterMatch?.()); |
| this.els.btnLeave?.addEventListener('click', () => this.onLeaveSeat?.()); |
| } |
|
|
| setIdentity({ username, spaceUrl, authError, playAllowed = true }) { |
| this.username = username; |
| this.spaceUrl = spaceUrl; |
| this.authError = authError; |
| this.playAllowed = playAllowed !== false; |
| if (this.els.userLabel) { |
| if (!username) { |
| this.els.userLabel.textContent = authError || 'Not signed in — set HF_TOKEN in .env.local'; |
| } else if (!this.playAllowed) { |
| this.els.userLabel.textContent = `Spectator · ${username}`; |
| } else if (String(username).startsWith('guest-')) { |
| this.els.userLabel.textContent = `Guest · ${username}`; |
| } else { |
| this.els.userLabel.textContent = `Signed in as ${username}`; |
| } |
| } |
| if (this.els.btnEnter) this.els.btnEnter.hidden = !this.playAllowed; |
| if (this.els.btnLeave) this.els.btnLeave.hidden = !this.playAllowed; |
| const sub = this.root.querySelector('.menu-sub'); |
| if (sub) { |
| sub.textContent = this.playAllowed |
| ? 'Sandbox · MVP' |
| : 'Spectate only — no HF login · play is local-only'; |
| } |
| for (const id of ['btn-mode-sandbox', 'btn-mode-mvp']) { |
| const btn = this.root.querySelector(`#${id}`); |
| if (btn) btn.hidden = !this.playAllowed; |
| } |
| if (!this.playAllowed && this.els.start) { |
| this.showLobby('mvp'); |
| this.onOpenMode?.('mvp'); |
| } |
| } |
|
|
| show() { |
| this.root.hidden = false; |
| this.root.classList.add('menu-open'); |
| this.showStart(); |
| } |
|
|
| hide() { |
| this.root.hidden = true; |
| this.root.classList.remove('menu-open'); |
| } |
|
|
| showStart() { |
| this.screen = 'start'; |
| this.mode = null; |
| this.selectedLobby = null; |
| if (this.els.start) this.els.start.hidden = false; |
| if (this.els.lobby) this.els.lobby.hidden = true; |
| if (this.els.lobbyList) this.els.lobbyList.innerHTML = ''; |
| if (this.els.lobbyMeta) this.els.lobbyMeta.textContent = ''; |
| if (this.els.lobbyTitle) this.els.lobbyTitle.textContent = 'Lobbies'; |
| this._setError(''); |
| } |
|
|
| showLobby(mode) { |
| this.screen = 'lobby'; |
| this.mode = mode; |
| if (this.els.start) this.els.start.hidden = true; |
| if (this.els.lobby) this.els.lobby.hidden = false; |
| if (this.els.lobbyTitle) { |
| const titles = { sandbox: 'Sandbox lobbies', mvp: 'MVP lobbies' }; |
| this.els.lobbyTitle.textContent = titles[mode] || mode; |
| } |
| } |
|
|
| _pickMode(mode) { |
| if (!this.username) { |
| this._setError(this.authError || 'Set HF_TOKEN in .env.local'); |
| return; |
| } |
| this._setError(''); |
| this.showLobby(mode); |
| this.onOpenMode?.(mode); |
| } |
|
|
| _setError(msg) { |
| if (this.els.err) { |
| this.els.err.textContent = msg || ''; |
| this.els.err.hidden = !msg; |
| } |
| } |
|
|
| _seatLabel(seatKey) { |
| const m = String(seatKey).match(/^([SP])-(\d+)$/i); |
| if (!m) return { team: null, label: seatKey, cls: '' }; |
| return { team: null, label: m[2], cls: '' }; |
| } |
|
|
| _makeSeatBtn(mode, lobby, seat, user) { |
| const meta = this._seatLabel(seat); |
| const btn = document.createElement('button'); |
| btn.type = 'button'; |
| btn.className = `seat-btn ${meta.cls}${user ? ' filled' : ''}`.trim(); |
| const locked = |
| !this.playAllowed || |
| !!user || |
| lobby.status === 'live' || |
| lobby.status === 'starting'; |
| btn.disabled = locked; |
| btn.title = locked |
| ? (lobby.status === 'live' || lobby.status === 'starting' |
| ? `${lobby.id} is ${lobby.status} — pick another lobby or wait` |
| : (user ? `${user} is seated` : 'Spectate only')) |
| : seat; |
| btn.innerHTML = user |
| ? `${meta.label}<span class="seat-who">${user}</span>` |
| : meta.label; |
| if (this.playAllowed) { |
| btn.addEventListener('click', async () => { |
| if (btn.disabled) return; |
| try { |
| this._setError(''); |
| btn.disabled = true; |
| btn.textContent = '…'; |
| await this.onClaim?.(mode, lobby.id, seat); |
| this.selectedLobby = lobby.id; |
| } catch (err) { |
| this._setError(err.message || String(err)); |
| } |
| }); |
| } |
| return btn; |
| } |
|
|
| renderBoard(board, mode, error = null) { |
| const list = this.els.lobbyList; |
| if (!list) return; |
| if (error || !board) { |
| list.innerHTML = `<div class="lobby-card"><strong>Waiting for game server…</strong> |
| <div class="lobby-seats" style="display:block;margin-top:0.4rem"> |
| ${error || 'Lobby server not reachable.'} |
| </div></div>`; |
| this._setError(error || 'Lobby server not ready'); |
| return; |
| } |
| this._setError(''); |
| const key = mode === 'mvp' ? 'mvp' : 'sandbox'; |
| const lobbies = board[key] || []; |
| list.innerHTML = ''; |
|
|
| for (const lobby of lobbies) { |
| const card = document.createElement('div'); |
| card.className = 'lobby-card'; |
| card.dataset.id = lobby.id; |
|
|
| const head = document.createElement('div'); |
| head.className = 'lobby-card-head'; |
| const cd = lobby.countdown != null ? ` · ${Math.ceil(lobby.countdown)}s` : ''; |
| head.innerHTML = `<strong>${lobby.id}</strong><span>${lobby.filled}/${lobby.capacity} · ${lobby.status}${cd}</span>`; |
| card.appendChild(head); |
|
|
| const seats = document.createElement('div'); |
| seats.className = 'lobby-seats'; |
| for (const [seat, user] of Object.entries(lobby.seats || {})) { |
| seats.appendChild(this._makeSeatBtn(mode, lobby, seat, user)); |
| } |
| if (lobby.status === 'live' || lobby.status === 'starting') { |
| const spec = document.createElement('button'); |
| spec.type = 'button'; |
| spec.className = 'seat-btn spectate-btn'; |
| spec.textContent = 'Spectate'; |
| spec.addEventListener('click', async () => { |
| try { |
| this._setError(''); |
| this.selectedLobby = lobby.id; |
| await this.onSpectate?.(mode, lobby.id); |
| } catch (err) { |
| this._setError(err.message || String(err)); |
| } |
| }); |
| seats.appendChild(spec); |
| } |
| card.appendChild(seats); |
| list.appendChild(card); |
| } |
|
|
| if (this.els.lobbyMeta) { |
| if (!this.playAllowed) { |
| this.els.lobbyMeta.textContent = |
| 'Spectate only — click Spectate on a live lobby. No HF login required.'; |
| } else if (mode === 'mvp') { |
| this.els.lobbyMeta.textContent = |
| 'MVP: needs ≥3 players. 30s countdown starts when the seat roster is stable — join/leave resets the timer. Cars assigned randomly.'; |
| } else { |
| this.els.lobbyMeta.textContent = |
| 'Sandbox: solo test drive. Starts when you take a seat. Default car: Porsche GT2 RS.'; |
| } |
| } |
| } |
| } |
|
|
