feat: Enhance game-end messages with win/loss and prize details

Refactor game-end modal in  to display dynamic messages for winner and loser, including bet amount and currency. This involved:
- Updating  to pass  and  to .
- Adjusting , , and  to propagate room details correctly.
- Implementing conditional rendering and styling for win/loss states in .

Author: core-euler

client/src/App.jsx

@@ -17,6 +17,7 @@ function App() {
   const [clientId, setClientId] = useState(null);
   const [telegramData, setTelegramData] = useState(null);
   const [user, setUser] = useState(null);
+  const [roomInfo, setRoomInfo] = useState(null); // NEW: State to hold room details
 
   const [tonConnectUI] = useTonConnectUI();
   const firstProofLoading = useRef(true);
@@ -137,8 +138,8 @@ function App() {
     }
   };
 
-  const navigateToGame = useCallback(async (roomId) => {
-    if (!roomId) {
+  const navigateToGame = useCallback(async (info) => { // Changed parameter to 'info' object
+    if (!info || !info.roomId) {
       console.error("navigateToGame called with no roomId");
       return;
     }
@@ -149,17 +150,18 @@ function App() {
     try {
       const currentRoom = colyseusService.getGameRoom();
       // Check if we are already in the correct room
-      if (currentRoom && currentRoom.roomId === roomId) {
+      if (currentRoom && currentRoom.roomId === info.roomId) {
         console.log('Already in the correct room. Navigating...');
       } else {
-        console.log(`Joining room ${roomId}...`);
-        await colyseusService.joinExistingRoom(roomId);
+        console.log(`Joining room ${info.roomId}...`);
+        await colyseusService.joinExistingRoom(info.roomId);
       }
 
-      setGameRoomId(roomId);
+      setGameRoomId(info.roomId);
+      setRoomInfo(info); // Store the full room info
       setCurrentScreen('game-room');
     } catch (e) {
-      console.error(`Failed to navigate to game room ${roomId}:`, e);
+      console.error(`Failed to navigate to game room ${info.roomId}:`, e);
       setError('Failed to join the game. Please try again.');
       // Go back to the main menu on failure
       setCurrentScreen('main-menu');
@@ -170,6 +172,7 @@ function App() {
 
   const handleQuitGame = useCallback(async () => {
     setGameRoomId(null);
+    setRoomInfo(null); // Clear room info on quit
     setCurrentScreen('main-menu');
 
     // Reload user profile to get updated stats after game
@@ -218,7 +221,15 @@ function App() {
         />
       )}
       {currentScreen === 'main-menu' && <MainMenu user={user} onNavigateToGame={navigateToGame} />}
-      {currentScreen === 'game-room' && <GameRoom roomId={gameRoomId} onQuit={handleQuitGame} currentUser={user} />}
+      {currentScreen === 'game-room' && (
+        <GameRoom
+          roomId={gameRoomId}
+          betAmount={roomInfo?.betAmount} // Pass betAmount
+          currency={roomInfo?.currency}   // Pass currency
+          onQuit={handleQuitGame}
+          currentUser={user}
+        />
+      )}
     </div>
   );
 }

client/src/screens/GameRoom/GameRoom.jsx

@@ -9,7 +9,7 @@ import { colyseusService } from '../../services/colyseusService';
 import greenLayer from '../../assets/game/greenLayer.png';
 import purpleLayer from '../../assets/game/purpleLayer.png';
 
-const GameRoom = ({ roomId, onQuit, currentUser }) => {
+const GameRoom = ({ roomId, betAmount, currency, onQuit, currentUser }) => {
   const [room, setRoom] = useState(null);
   // Authoritative state from the server
   const [gameState, setGameState] = useState({
@@ -64,13 +64,18 @@ const GameRoom = ({ roomId, onQuit, currentUser }) => {
       roomInstance.onMessage("error", (message) => console.error("Server error:", message));
 
       roomInstance.onMessage("opponent_left", (message) => {
-        setModalMessage(message.message || 'Opponent left.');
-        setShowOpponentLeftModal(true);
+        setModalMessage(
+          <>
+            <p style={{ color: 'white', fontSize: '1.5em', margin: 0 }}>Opponent left</p>
+            <p style={{ color: 'white', fontSize: '1em', margin: '10px 0' }}>Your bet is returned</p>
+          </>
+        );
+        setShowEndGameModal(true);
       });
 
       roomInstance.onMessage("game_over", (message) => {
-        setModalMessage(message.message || 'Game is over.');
-        setShowOpponentLeftModal(true); // Reuse the same modal
+        // This is handled by the useEffect watching gameState.winner
+        // No explicit message setting here to avoid conflicts.
       });
 
       // Handle reconnection events
@@ -179,18 +184,42 @@ const GameRoom = ({ roomId, onQuit, currentUser }) => {
   // Modal state
   const [showQuitConfirmModal, setShowQuitConfirmModal] = useState(false);
   const [showBearOffButton, setShowBearOffButton] = useState(false);
-  const [showOpponentLeftModal, setShowOpponentLeftModal] = useState(false);
-  const [modalMessage, setModalMessage] = useState('');
+  const [showEndGameModal, setShowEndGameModal] = useState(false);
+  const [modalMessage, setModalMessage] = useState(null); // Changed to null for JSX
 
   useEffect(() => {
-    if (showOpponentLeftModal) {
+    if (gameState.winner && gameState.winner !== '') {
+      const prizeAmount = betAmount * 2;
+      const prizeText = `${prizeAmount} ${currency}`;
+
+      if (gameState.winner === playerColor) {
+        setModalMessage(
+          <>
+            <p style={{ color: '#2E8B57', fontSize: '2em', margin: 0, fontWeight: 'bold' }}>WIN</p>
+            <p style={{ color: 'white', fontSize: '1.5em', margin: '10px 0' }}>{prizeText}</p>
+          </>
+        );
+      } else {
+        setModalMessage(
+          <>
+            <p style={{ color: '#DC143C', fontSize: '2em', margin: 0, fontWeight: 'bold' }}>LOSE</p>
+            <p style={{ color: 'white', fontSize: '1.5em', margin: '10px 0' }}>{`-${betAmount} ${currency}`}</p>
+          </>
+        );
+      }
+      setShowEndGameModal(true);
+    }
+  }, [gameState.winner, playerColor, betAmount, currency]);
+
+  useEffect(() => {
+    if (showEndGameModal) {
       const timer = setTimeout(() => {
         onQuit();
       }, 3000); // 3-second delay before quitting
 
       return () => clearTimeout(timer); // Cleanup the timer
     }
-  }, [showOpponentLeftModal, onQuit]);
+  }, [showEndGameModal, onQuit]);
 
   // Effect to control the visibility of the bear-off button
   useEffect(() => {
@@ -292,12 +321,10 @@ const GameRoom = ({ roomId, onQuit, currentUser }) => {
           </div>
         </div>
       )}
-      {showOpponentLeftModal && (
+      {showEndGameModal && (
         <div className="modal-overlay">
-          <div className="create-room-modal" style={{ padding: '24px' }}>
-            <h2>Game Over</h2>
-            <p>{modalMessage}</p>
-            <p>Returning to lobby...</p>
+          <div className="create-room-modal" style={{ padding: '24px', textAlign: 'center' }}>
+            {modalMessage}
           </div>
         </div>
       )}
@@ -327,6 +354,8 @@ const GameRoom = ({ roomId, onQuit, currentUser }) => {
 
 GameRoom.propTypes = {
   roomId: PropTypes.string.isRequired,
+  betAmount: PropTypes.number.isRequired,
+  currency: PropTypes.string.isRequired,
   onQuit: PropTypes.func.isRequired,
   currentUser: PropTypes.shape({
     username: PropTypes.string,

client/src/screens/MainMenu/components/CreateRoomModal.jsx

@@ -52,7 +52,7 @@ const CreateRoomModal = ({ isOpen, onClose, balances, onNavigateToGame, user })
         onClose();
         setBetAmount('');
         if (onNavigateToGame) {
-          onNavigateToGame(room.roomId);
+          onNavigateToGame(room);
         }
       } catch (error) {
         console.error('Failed to create or join room:', error);

client/src/screens/MainMenu/components/RoomCard.jsx

@@ -8,7 +8,7 @@ const RoomCard = ({ room, onEnter }) => {
   const truncatedCreator = createdBy.length > 11 ? `${createdBy.substring(0, 11)}...` : createdBy;
 
   const handleEnterRoom = () => {
-    onEnter(roomId);
+    onEnter(room);
   };
 
   return (

client/src/screens/MainMenu/components/RoomList.jsx

@@ -60,10 +60,10 @@ const RoomList = ({ onNavigateToGame }) => {
     }
   }, [])
 
-  const handleEnterRoom = (roomId) => {
-    console.log(`Entering room ${roomId}`);
+  const handleEnterRoom = (room) => {
+    console.log(`Entering room ${room.roomId}`);
     if (onNavigateToGame) {
-      onNavigateToGame(roomId);
+      onNavigateToGame(room);
     }
   }