From 7737a12e06b3073fee4e377f34194fc96dc89ea6 Mon Sep 17 00:00:00 2001
From: Yuto Nishida <yuto@berkeley.edu>
Date: Sun, 7 Dec 2025 15:57:58 -0800
Subject: [PATCH] [C][2nub][wip] Game state should not be returned by http

---
 .../2nub/__tests__/server/routes.test.ts      |  2 +-
 experimental/2nub/src/client/App.tsx          | 14 ++++--
 .../2nub/src/client/components/GameBoard.tsx  | 46 ++++++++++++++++++-
 experimental/2nub/src/server/routes.ts        |  5 +-
 4 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/experimental/2nub/__tests__/server/routes.test.ts b/experimental/2nub/__tests__/server/routes.test.ts
index e6c10f4..6a0be3a 100644
--- a/experimental/2nub/__tests__/server/routes.test.ts
+++ b/experimental/2nub/__tests__/server/routes.test.ts
@@ -90,7 +90,7 @@ describe('Game API Routes', () => {
       expect(response.status).toBe(201);
       expect(response.body.success).toBe(true);
       expect(response.body.data.player.name).toBe('Alice');
-      expect(response.body.data.game.id).toBe(game.id);
+      // Game state is now provided via socket.io, not HTTP response
     });
 
     it('should reject empty player name', async () => {
diff --git a/experimental/2nub/src/client/App.tsx b/experimental/2nub/src/client/App.tsx
index 352229c..91e8c9e 100644
--- a/experimental/2nub/src/client/App.tsx
+++ b/experimental/2nub/src/client/App.tsx
@@ -10,6 +10,7 @@ import { sessionStorage } from './utils/sessionStorage';
 const App: React.FC = () => {
   const [games, setGames] = useState<GameState[]>([]);
   const [currentGame, setCurrentGame] = useState<GameState | null>(null);
+  const [currentGameId, setCurrentGameId] = useState<string | null>(null);
   const [currentPlayerId, setCurrentPlayerId] = useState<string | null>(null);
   const [view, setView] = useState<'list' | 'game'>('list');
 
@@ -44,6 +45,7 @@ const App: React.FC = () => {
     // If the current game was deleted, return to list view
     if (currentGame?.id === data.gameId) {
       setCurrentGame(null);
+      setCurrentGameId(null);
       setCurrentPlayerId(null);
       setView('list');
       sessionStorage.clearPlayerSession();
@@ -97,7 +99,7 @@ const App: React.FC = () => {
     },
     onDisconnect,
     onConnectionError: (error) => console.error('Socket.io connection error:', error),
-    gameId: currentGame?.id || undefined,
+    gameId: currentGameId || undefined,
     playerId: currentPlayerId || undefined
   });
 
@@ -128,9 +130,11 @@ const App: React.FC = () => {
       const result = await response.json();
       console.debug('Response json:', result);
       if (result.success) {
-        setCurrentGame(result.data.game);
+        // Game state will be received via socket.io after authentication
+        setCurrentGameId(gameId);
         setCurrentPlayerId(result.data.player.id);
         setView('game');
+        // Authentication and game state update will happen automatically via socket.io
         
         return true;
       }
@@ -149,11 +153,13 @@ const App: React.FC = () => {
       });
       const result = await response.json();
       if (result.success) {
-        setCurrentGame(result.data.game);
+        // Game state will be received via socket.io after authentication
+        setCurrentGameId(gameId);
         setCurrentPlayerId(result.data.player.id);
         setView('game');
         
         sessionStorage.setPlayerSession(result.data.player.id, gameId);
+        // Authentication and game state update will happen automatically via socket.io
       } else {
         console.error('Failed to join game:', result.error);
       }
@@ -170,6 +176,7 @@ const App: React.FC = () => {
         method: 'DELETE'
       });
       setCurrentGame(null);
+      setCurrentGameId(null);
       setCurrentPlayerId(null);
       setView('list');
       sessionStorage.clearPlayerSession();
@@ -278,6 +285,7 @@ const App: React.FC = () => {
       ) : (
         <GameBoard 
           game={currentGame} 
+          gameId={currentGameId}
           currentPlayerId={currentPlayerId}
           onLeave={leaveGame}
           onForceDisconnect={handleForceDisconnect}
diff --git a/experimental/2nub/src/client/components/GameBoard.tsx b/experimental/2nub/src/client/components/GameBoard.tsx
index 9dd75ca..e59d361 100644
--- a/experimental/2nub/src/client/components/GameBoard.tsx
+++ b/experimental/2nub/src/client/components/GameBoard.tsx
@@ -4,12 +4,13 @@ import { Onub } from './Onub';
 
 interface GameBoardProps {
   game: GameState | null;
+  gameId: string | null;
   currentPlayerId: string | null;
   onLeave: () => void;
   onForceDisconnect: (playerId: string) => void;
 }
 
-export const GameBoard: React.FC<GameBoardProps> = ({ game, currentPlayerId, onLeave, onForceDisconnect }) => {
+export const GameBoard: React.FC<GameBoardProps> = ({ game, gameId, currentPlayerId, onLeave, onForceDisconnect }) => {
   console.debug("Rendering GameBoard with game:", game);
   const [disconnectingPlayerId, setDisconnectingPlayerId] = useState<string | null>(null);
 
@@ -23,6 +24,49 @@ export const GameBoard: React.FC<GameBoardProps> = ({ game, currentPlayerId, onL
   };
 
   if (!game) {
+    // If we have a gameId but no game data, show loading state
+    if (gameId) {
+      return (
+        <div style={{
+          backgroundColor: 'white',
+          padding: '40px',
+          borderRadius: '8px',
+          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          textAlign: 'center'
+        }}>
+          <h2>Loading game...</h2>
+          <p>Connecting to game and loading data...</p>
+          <div style={{
+            margin: '20px auto',
+            width: '40px',
+            height: '40px',
+            border: '4px solid #f3f3f3',
+            borderTop: '4px solid #007bff',
+            borderRadius: '50%',
+            animation: 'spin 1s linear infinite'
+          }} />
+          <style>{`
+            @keyframes spin {
+              0% { transform: rotate(0deg); }
+              100% { transform: rotate(360deg); }
+            }
+          `}</style>
+          <button onClick={onLeave} style={{
+            padding: '10px 20px',
+            backgroundColor: '#6c757d',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            marginTop: '20px'
+          }}>
+            Cancel
+          </button>
+        </div>
+      );
+    }
+    
+    // No gameId means the game doesn't exist
     return (
       <div style={{
         backgroundColor: 'white',
diff --git a/experimental/2nub/src/server/routes.ts b/experimental/2nub/src/server/routes.ts
index 966cf53..14ec6dc 100644
--- a/experimental/2nub/src/server/routes.ts
+++ b/experimental/2nub/src/server/routes.ts
@@ -3,7 +3,6 @@ import { gameStateManager } from './gameState';
 import { broadcastToGame, broadcastToAll } from './websocket';
 import { CreateGameRequest, JoinGameRequest, RejoinGameRequest, ApiResponse } from '../types';
 
-// TODO: consider not returning `game` state in the HTTP response, since websockets should handle real time server-to-client data updates
 
 function respondGameNotFound(res: Response, message: string | null) {
   return respondFailure(res, 404, message ? `Game not found: ${message}` : 'Game not found');
@@ -86,7 +85,7 @@ export function setupRoutes(): Router {
 
     broadcastToGame(gameId, 'playerJoined', { player, game });
 
-    return respondSuccessWithData(res, 201, { player, game });
+    return respondSuccessWithData(res, 201, { player });
   });
 
   router.post('/games/:gameId/rejoin', (req, res) => {
@@ -116,7 +115,7 @@ export function setupRoutes(): Router {
 
     broadcastToGame(gameId, 'playerJoined', { player: result.player, game: updatedGame });
 
-    return respondSuccessWithData(res, 200, { player: result.player, game: updatedGame });
+    return respondSuccessWithData(res, 200, { player: result.player });
   });
 
   router.post('/games/:gameId/players/:playerId/disconnect', (req, res) => {
-- 
2.51.2