diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 2980693..a2c3646 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -8,24 +8,35 @@ const router = createRouter({
history: createWebHistory(),
routes: [
{
- path: '/',
- name: 'Lobby',
+ path: '/:uuid',
+ name: 'LobbyWithUuid',
component: Lobby
},
{
- path: '/game',
- name: 'Game',
+ path: '/:uuid/game',
+ name: 'GameWithUuid',
component: Game
},
{
- path: '/demo',
- name: 'DemoGame',
+ path: '/:uuid/demo',
+ name: 'DemoGameWithUuid',
component: DemoGame
},
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard
+ },
+ {
+ path: '/',
+ redirect: '/missing-uuid'
+ },
+ {
+ // simple fallback for users hitting root without UUID
+ path: '/missing-uuid',
+ component: {
+ template: `
Falta UUID
Abre el juego escaneando tu código QR: snatchgame.nucleoriofrio.com/{uuid}
`
+ }
}
]
});
diff --git a/client/src/services/colyseus.ts b/client/src/services/colyseus.ts
index f43909c..934739f 100644
--- a/client/src/services/colyseus.ts
+++ b/client/src/services/colyseus.ts
@@ -1,6 +1,5 @@
import { Client, Room } from "colyseus.js";
import { ref, Ref } from "vue";
-import { localDB } from "./db";
export interface PlayerData {
sessionId: string;
@@ -25,8 +24,8 @@ class ColyseusService {
private client: Client;
private currentRoom: Room | null = null;
private apiBase: string;
- private readonly LS_KEY_RECONNECT = "snatch.game.rtoken";
-
+ // No local storage tokens: UUID in URL identifies the user
+
public lobbyRoom: Ref = ref(null);
public gameRoom: Ref = ref(null);
public playerName: Ref = ref("");
@@ -50,10 +49,8 @@ class ColyseusService {
async joinLobby(): Promise {
try {
- // Initialize DB first to get UUID
- await localDB.init();
- const uuid = localDB.getUUID();
-
+ const uuid = this.getUuidFromPath();
+
const room = await this.client.joinOrCreate("lobby", { uuid });
this.lobbyRoom.value = room;
this.currentRoom = room;
@@ -69,36 +66,18 @@ class ColyseusService {
this.playerName.value = data.name;
this.nameConfirmed.value = true;
} else {
- // Initialize local DB and optionally auto-apply saved profile
- try {
- await localDB.init();
- const profile = localDB.getLocalPlayer();
- // Apply saved color silently
- if (profile?.color && profile.color !== this.playerColor.value) {
- this.setPlayerColor(profile.color);
- }
- if (profile?.name) {
- this.playerName.value = profile.name;
- try { localDB.setName(profile.name); } catch {}
- this.setPlayerName(profile.name);
- this.nameConfirmed.value = true;
- }
- } catch (e) {
- console.warn("Local DB init failed", e);
- }
+ // No client-side persistence; user must confirm name once per session
}
});
room.onMessage("nameUpdated", (data) => {
this.playerName.value = data.name;
- try { localDB.setName(data.name); } catch {}
this.nameConfirmed.value = true;
});
room.onMessage("colorUpdated", (data) => {
if (data?.color) {
this.playerColor.value = data.color;
- try { localDB.setColor(data.color); } catch {}
}
});
@@ -110,28 +89,13 @@ class ColyseusService {
}
async tryReconnectToOngoingGame(): Promise {
- try {
- const token = typeof window !== 'undefined' ? (window.localStorage.getItem(this.LS_KEY_RECONNECT) || "") : "";
- if (!token) return null;
- const room = await this.client.reconnect(token);
- this.gameRoom.value = room;
- this.currentRoom = room;
- // Ensure local session id reflects the active room session
- try { this.sessionId.value = (room as any).sessionId || this.sessionId.value; } catch {}
- try { if (typeof window !== 'undefined') window.localStorage.setItem(this.LS_KEY_RECONNECT, (room as any).reconnectionToken || token); } catch {}
- return room;
- } catch (e) {
- console.warn('Reconnection failed, clearing tokens');
- try {
- if (typeof window !== 'undefined') { window.localStorage.removeItem(this.LS_KEY_RECONNECT); }
- } catch {}
- return null;
- }
+ // No stored reconnection tokens; rely on UUID flow and fresh joins
+ return Promise.resolve(null);
}
async setPlayerName(name: string): Promise {
if (this.lobbyRoom.value) {
- const uuid = localDB.getUUID();
+ const uuid = this.getUuidFromPath();
this.lobbyRoom.value.send("setName", { name, uuid });
}
}
@@ -156,9 +120,11 @@ class ColyseusService {
try {
// Join the game room directly using the roomId
console.log('Joining game room with name:', this.playerName.value);
+ const uuid = this.getUuidFromPath();
const gameRoom = await this.client.joinById(data.roomId, {
playerName: this.playerName.value,
- playerColor: this.playerColor.value
+ playerColor: this.playerColor.value,
+ uuid
});
// Ensure the room id is set
@@ -172,7 +138,6 @@ class ColyseusService {
this.currentRoom = gameRoom;
// Update current session id for correct role mapping
try { this.sessionId.value = (gameRoom as any).sessionId || this.sessionId.value; } catch {}
- try { if (typeof window !== 'undefined') window.localStorage.setItem(this.LS_KEY_RECONNECT, (gameRoom as any).reconnectionToken || ""); } catch {}
console.log('gameRoom.value is now:', this.gameRoom.value);
// Don't register message handlers here - let the Game component handle them
@@ -198,12 +163,13 @@ class ColyseusService {
async joinGameRoom(roomId: string): Promise {
try {
+ const uuid = this.getUuidFromPath();
const gameRoom = await this.client.joinById(roomId, {
- playerName: this.playerName.value,
- playerColor: this.playerColor.value
+ playerName: this.playerName.value,
+ playerColor: this.playerColor.value,
+ uuid
});
try { this.sessionId.value = (gameRoom as any).sessionId || this.sessionId.value; } catch {}
- try { if (typeof window !== 'undefined') window.localStorage.setItem(this.LS_KEY_RECONNECT, (gameRoom as any).reconnectionToken || ""); } catch {}
this.gameRoom.value = gameRoom;
this.currentRoom = gameRoom;
@@ -291,7 +257,6 @@ class ColyseusService {
this.currentRoom = null;
}
}
- try { if (typeof window !== 'undefined') { window.localStorage.removeItem(this.LS_KEY_RECONNECT); } } catch {}
}
leaveCurrentRoom(): void {
@@ -350,6 +315,13 @@ class ColyseusService {
return null;
}
}
+
+ private getUuidFromPath(): string {
+ if (typeof window === 'undefined') return '';
+ const path = window.location.pathname.replace(/^\/+/, '');
+ const seg = path.split('/')[0] || '';
+ return seg;
+ }
}
export const colyseusService = new ColyseusService();
diff --git a/client/src/views/DemoGame.vue b/client/src/views/DemoGame.vue
index 5890541..bb96842 100644
--- a/client/src/views/DemoGame.vue
+++ b/client/src/views/DemoGame.vue
@@ -68,7 +68,7 @@
diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index 71254ba..d1536b2 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -75,12 +75,13 @@
diff --git a/client/src/views/Lobby.vue b/client/src/views/Lobby.vue
index 8792a67..3fb0d7c 100644
--- a/client/src/views/Lobby.vue
+++ b/client/src/views/Lobby.vue
@@ -83,12 +83,13 @@