Spaces:

k-l-lambda
/

trigo

Running

k-l-lambda commited on 9 days ago

Commit

77c3cea

1 Parent(s): f2d331b

feat: switch to hash-based routing for better static hosting

- Change router from createWebHistory to createWebHashHistory
- Update useRoomHash to use query params instead of hash for room IDs
- URLs now: /#/vs-people?room=ABC12345

Files changed (5) hide show

trigo-web/app/dist/assets/{index-CxJ9O80R.js → index-BsbKWb8A.js} +0 -0
trigo-web/app/dist/index.html +1 -1
trigo-web/app/src/composables/useRoomHash.ts +18 -12
trigo-web/app/src/router/index.ts +2 -2
trigo-web/app/src/views/TrigoView.vue +14 -13

trigo-web/app/dist/assets/{index-CxJ9O80R.js → index-BsbKWb8A.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

trigo-web/app/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Trigo - 3D Go Game</title>
-		<script type="module" crossorigin src="/assets/index-CxJ9O80R.js"></script>
 		<link rel="stylesheet" crossorigin href="/assets/index-Siwlapuk.css">
 	</head>
 	<body>

 		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Trigo - 3D Go Game</title>
+		<script type="module" crossorigin src="/assets/index-BsbKWb8A.js"></script>
 		<link rel="stylesheet" crossorigin href="/assets/index-Siwlapuk.css">
 	</head>
 	<body>

trigo-web/app/src/composables/useRoomHash.ts CHANGED Viewed

@@ -1,37 +1,43 @@
 /**
- * Composable for managing room ID in URL hash
  * Enables shareable room links for VS People multiplayer mode
  */
 export function useRoomHash() {
 	/**
-	 * Extract room ID from URL hash
-	 * @returns Room ID string or null if no hash present
 	 */
 	function getRoomIdFromHash(): string | null {
-		const hash = window.location.hash.substring(1); // Remove '#' prefix
-		return hash || null;
 	}
 	/**
-	 * Update URL hash with room ID
 	 * Uses replaceState to avoid adding browser history entry
 	 * @param roomId - 8-character uppercase alphanumeric room ID
 	 */
 	function updateHash(roomId: string): void {
-		const newUrl = `${window.location.pathname}#${roomId}`;
-		window.history.replaceState(null, "", newUrl);
 	}
 	/**
-	 * Remove hash from URL
-	 * Clears room ID from address bar
 	 */
 	function clearHash(): void {
-		const newUrl = window.location.pathname;
-		window.history.replaceState(null, "", newUrl);
 	}

 /**
+ * Composable for managing room ID in URL
  * Enables shareable room links for VS People multiplayer mode
+ *
+ * With hash-based routing, we use query parameters for room IDs:
+ * e.g., /#/vs-people?room=ABC12345
  */
 export function useRoomHash() {
 	/**
+	 * Extract room ID from URL query parameter
+	 * @returns Room ID string or null if no room param present
 	 */
 	function getRoomIdFromHash(): string | null {
+		const urlParams = new URLSearchParams(window.location.search);
+		const roomId = urlParams.get("room");
+		return roomId || null;
 	}
 	/**
+	 * Update URL with room ID query parameter
 	 * Uses replaceState to avoid adding browser history entry
 	 * @param roomId - 8-character uppercase alphanumeric room ID
 	 */
 	function updateHash(roomId: string): void {
+		const url = new URL(window.location.href);
+		url.searchParams.set("room", roomId);
+		window.history.replaceState(null, "", url.toString());
 	}
 	/**
+	 * Remove room ID from URL
+	 * Clears room query parameter from address bar
 	 */
 	function clearHash(): void {
+		const url = new URL(window.location.href);
+		url.searchParams.delete("room");
+		window.history.replaceState(null, "", url.toString());
 	}

trigo-web/app/src/router/index.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from "vue-router";
 import TrigoView from "@/views/TrigoView.vue";
 import OnnxTestView from "@/views/OnnxTestView.vue";
 import TrigoAgentTestView from "@/views/TrigoAgentTestView.vue";
@@ -7,7 +7,7 @@ import SocketTestView from "@/views/SocketTestView.vue";
 import MCTSAnalysisView from "@/views/MCTSAnalysisView.vue";
 const router = createRouter({
-	history: createWebHistory(import.meta.env.BASE_URL),
 	routes: [
 		{
 			path: "/",

+import { createRouter, createWebHashHistory } from "vue-router";
 import TrigoView from "@/views/TrigoView.vue";
 import OnnxTestView from "@/views/OnnxTestView.vue";
 import TrigoAgentTestView from "@/views/TrigoAgentTestView.vue";
 import MCTSAnalysisView from "@/views/MCTSAnalysisView.vue";
 const router = createRouter({
+	history: createWebHashHistory(import.meta.env.BASE_URL),
 	routes: [
 		{
 			path: "/",

trigo-web/app/src/views/TrigoView.vue CHANGED Viewed

@@ -1319,23 +1319,24 @@
 	/**
-	 * Handle browser navigation (back/forward) and manual hash edits
 	 */
-	function handleHashChange() {
 		if (gameMode.value !== "vs-people") return;
-		const currentHash = getRoomIdFromHash();
 		const currentRoom = playerStore.roomId;
-		if (currentHash !== currentRoom) {
-			if (currentHash && isValidRoomId(currentHash)) {
-				// User navigated to different room hash
 				if (currentRoom) socketApi.leaveRoom();
-				joinRoomByHash(currentHash);
 			} else {
-				// Invalid hash or removed hash
 				if (currentRoom) {
-					updateHash(currentRoom); // Restore correct hash
 				} else {
 					createAndJoinRoom(); // Create new room
 				}
@@ -1601,8 +1602,8 @@
 				playerStore.setPlayerId(socketApi.socket.id);
 			}
-			// Listen for browser navigation (back/forward) and manual hash edits
-			window.addEventListener("hashchange", handleHashChange);
 			// Handle socket connection and reconnection
 			socketApi.socket.on("connect", () => {
@@ -1686,8 +1687,8 @@
 			socketApi.offError();
 			cleanupRoomListeners();
-			// Remove hashchange listener
-			window.removeEventListener("hashchange", handleHashChange);
 		}
 		// Disconnect ResizeObserver

 	/**
+	 * Handle browser navigation (back/forward) and URL changes
+	 * With hash routing, room IDs are in query params, so we listen for popstate
 	 */
+	function handleUrlChange() {
 		if (gameMode.value !== "vs-people") return;
+		const currentRoomParam = getRoomIdFromHash();
 		const currentRoom = playerStore.roomId;
+		if (currentRoomParam !== currentRoom) {
+			if (currentRoomParam && isValidRoomId(currentRoomParam)) {
+				// User navigated to different room
 				if (currentRoom) socketApi.leaveRoom();
+				joinRoomByHash(currentRoomParam);
 			} else {
+				// Invalid or removed room param
 				if (currentRoom) {
+					updateHash(currentRoom); // Restore correct room param
 				} else {
 					createAndJoinRoom(); // Create new room
 				}
 				playerStore.setPlayerId(socketApi.socket.id);
 			}
+			// Listen for browser navigation (back/forward) and URL changes
+			window.addEventListener("popstate", handleUrlChange);
 			// Handle socket connection and reconnection
 			socketApi.socket.on("connect", () => {
 			socketApi.offError();
 			cleanupRoomListeners();
+			// Remove URL change listener
+			window.removeEventListener("popstate", handleUrlChange);
 		}
 		// Disconnect ResizeObserver