[C4] Update Group Sort

package.json

@@ -54,6 +54,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",
+    "tone": "^15.1.22",
     "yet-another-react-lightbox": "^3.25.0",
     "zod": "^4.1.12",
     "zustand": "^5.0.8"

src/App.tsx

@@ -58,6 +58,10 @@ import WhackAMoleGame from "./pages/whack-a-mole";
 import CreateWhackAMole from "./pages/whack-a-mole/create";
 import EditWhackAMole from "./pages/whack-a-mole/edit";
 
+import GroupSort from "./pages/group-sort/GroupSort";
+import CreateGroupSort from "./pages/group-sort/CreateGroupSort";
+import EditGroupSort from "./pages/group-sort/EditGroupSort";
+
 import SpeedSorting from "./pages/speed-sorting/SpeedSorting";
 
 import CreateJeopardy from "./pages/jeopardy/CreateJeopardy";
@@ -100,6 +104,7 @@ function App() {
           path="/sliding-puzzle/play/:id"
           element={<PlaySlidingPuzzle />}
         />
+        <Route path="/group-sort/play/:id" element={<GroupSort />} />
         <Route path="/jeopardy/play/:id/setup" element={<JeopardyLobby />} />
         <Route path="/jeopardy/play/:id" element={<JeopardyBoard />} />
         <Route path="/jeopardy/play/:id/end" element={<JeopardyGameEnd />} />
@@ -193,6 +198,8 @@ function App() {
             path="/sliding-puzzle/edit/:id"
             element={<EditSlidingPuzzle />}
           />
+          <Route path="/create-group-sort" element={<CreateGroupSort />} />
+          <Route path="/group-sort/edit/:id" element={<EditGroupSort />} />
           <Route path="/jeopardy/edit/:id" element={<CreateJeopardy />} />
         </Route>
       </Routes>

src/api/axios.ts

@@ -10,15 +10,14 @@ api.interceptors.request.use(
   (config) => {
     const token = useAuthStore.getState().token;
     const url = config.url || "";
-    const isPublicRequest = [
-      "/api/game", // list games (public, optional auth)
-      "/api/game/template", // templates are public
-      "/play/public", // public play endpoints
-      "/leaderboard",
-      "/check",
-    ].some((p) => url.includes(p));
-
-    if (!isPublicRequest && token && config.headers) {
+
+    // Only skip token for auth endpoints (register/login)
+    if (url.includes("/api/auth/register") || url.includes("/api/auth/login")) {
+      return config;
+    }
+
+    // Send token for ALL other requests (including /api/game for publish/unpublish)
+    if (token && config.headers) {
       config.headers.Authorization = `Bearer ${token}`;
     }
 

src/api/score/index.ts

@@ -0,0 +1,111 @@
+import api from "../axios";
+
+export interface ISubmitScorePayload {
+  game_id: string;
+  score: number;
+  time_spent?: number;
+  game_data?: Record<string, unknown>;
+}
+
+export interface IGameScore {
+  id: string;
+  user_id: string;
+  game_id: string;
+  score: number;
+  time_spent?: number;
+  game_data?: Record<string, unknown>;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ILeaderboardEntry {
+  user_id: string;
+  username: string;
+  highest_score: number;
+  total_plays: number;
+}
+
+export interface IUserScoreSummary {
+  game_id: string;
+  game_name: string;
+  highest_score: number;
+  total_plays: number;
+  last_played: string;
+}
+
+class ScoreAPI {
+  static async submitScore(payload: ISubmitScorePayload) {
+    try {
+      const response = await api.post(
+        `/api/game/game-type/group-sort/score/submit`,
+        payload,
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Failed to submit score:", error);
+      throw error;
+    }
+  }
+
+  static async getHighestScore(gameId: string): Promise<IGameScore | null> {
+    try {
+      const response = await api.get(
+        `/api/game/game-type/group-sort/score/highest/${gameId}`,
+      );
+      return response.data.data;
+    } catch (error) {
+      console.error("Failed to get highest score:", error);
+      throw error;
+    }
+  }
+
+  static async getGameHistory(
+    gameId: string,
+    limit: number = 10,
+  ): Promise<IGameScore[]> {
+    try {
+      const response = await api.get(
+        `/api/game/game-type/group-sort/score/history/${gameId}`,
+        {
+          params: { limit },
+        },
+      );
+      return response.data.data;
+    } catch (error) {
+      console.error("Failed to get game history:", error);
+      throw error;
+    }
+  }
+
+  static async getLeaderboard(
+    gameId: string,
+    limit: number = 10,
+  ): Promise<ILeaderboardEntry[]> {
+    try {
+      const response = await api.get(
+        `/api/game/game-type/group-sort/score/leaderboard/${gameId}`,
+        {
+          params: { limit },
+        },
+      );
+      return response.data.data;
+    } catch (error) {
+      console.error("Failed to get leaderboard:", error);
+      throw error;
+    }
+  }
+
+  static async getAllUserScores(): Promise<IUserScoreSummary[]> {
+    try {
+      const response = await api.get(
+        `/api/game/game-type/group-sort/score/user/all-scores`,
+      );
+      return response.data.data;
+    } catch (error) {
+      console.error("Failed to get all user scores:", error);
+      throw error;
+    }
+  }
+}
+
+export default ScoreAPI;