Add homepage quick join flow

This commit is contained in:
2026-03-03 19:07:40 +01:00
parent d1b432f8aa
commit 8a6ea5a592
3 changed files with 84 additions and 10 deletions
+37 -10
View File
@@ -87,6 +87,7 @@ export class PlayApp {
this.displayBoardSize = 640;
this.squareSize = 80;
this.dpr = Math.max(1, window.devicePixelRatio || 1);
this.urlJoinConsumed = false;
this.loadPieceImages();
this.installControls();
@@ -127,6 +128,7 @@ export class PlayApp {
installSocket() {
this.socket = createWSClient({
onServerReady: () => this.consumeJoinCodeFromUrl(),
onGameStarted: handleGameStarted,
onP2Connected: handleP2Connected,
onGameCreated: handleCodeGameCreated,
@@ -170,16 +172,7 @@ export class PlayApp {
});
this.joinBtn.addEventListener("click", () => {
const code = this.joinInput.value.trim().toUpperCase();
if (!code) {
this.showModal("Join game", "Enter a game code first.", [
{ label: "OK" },
]);
return;
}
this.gameCode = code;
this.socket.emit("join_code_game", { code });
this.setLobbyStatus("Joining game...");
this.joinCode(this.joinInput.value);
});
this.copyCodeBtn.addEventListener("click", async () => {
@@ -358,6 +351,40 @@ export class PlayApp {
});
}
joinCode(rawCode) {
const code = String(rawCode || "").trim().toUpperCase();
if (!code) {
this.showModal("Join game", "Enter a game code first.", [
{ label: "OK" },
]);
return false;
}
this.gameCode = code;
this.joinInput.value = code;
this.socket.emit("join_code_game", { code });
this.setLobbyStatus("Joining game...");
return true;
}
consumeJoinCodeFromUrl() {
if (this.urlJoinConsumed) {
return;
}
const url = new URL(window.location.href);
const code = url.searchParams.get("code");
if (!code) {
return;
}
this.urlJoinConsumed = true;
url.searchParams.delete("code");
const nextUrl = `${url.pathname}${url.search}${url.hash}`;
window.history.replaceState({}, "", nextUrl);
this.joinCode(code);
}
onCodeCreated(data) {
this.gameCode = data.code;
this.codeEl.textContent = data.code;