51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { App } from '../main.js';
|
|
|
|
export class JoinScreen {
|
|
private app: App;
|
|
|
|
constructor(app: App) {
|
|
this.app = app;
|
|
this.init();
|
|
}
|
|
|
|
private init(): void {
|
|
const joinBtn = document.getElementById('join-btn')!;
|
|
const roomInput = document.getElementById('room-input') as HTMLInputElement;
|
|
const nameInput = document.getElementById('name-input') as HTMLInputElement;
|
|
const errorEl = document.getElementById('join-error')!;
|
|
|
|
// Pre-fill room code from URL if present
|
|
const params = new URLSearchParams(window.location.search);
|
|
const roomParam = params.get('room');
|
|
if (roomParam) {
|
|
roomInput.value = roomParam.toUpperCase();
|
|
}
|
|
|
|
joinBtn.addEventListener('click', () => {
|
|
const roomCode = roomInput.value.trim().toUpperCase();
|
|
const playerName = nameInput.value.trim();
|
|
|
|
if (!roomCode || roomCode.length !== 4) {
|
|
errorEl.textContent = 'Enter a 4-character room code';
|
|
return;
|
|
}
|
|
if (!playerName) {
|
|
errorEl.textContent = 'Enter your name';
|
|
return;
|
|
}
|
|
|
|
errorEl.textContent = '';
|
|
joinBtn.textContent = 'Joining...';
|
|
joinBtn.disabled = true;
|
|
|
|
this.app.socket.emit('mobile:joinRoom', { roomCode, playerName }, (res) => {
|
|
joinBtn.textContent = 'Join Race';
|
|
joinBtn.disabled = false;
|
|
if (!res.ok) {
|
|
errorEl.textContent = res.error || 'Failed to join';
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|