adds endgame

src/App.tsx

@@ -22,7 +22,7 @@ export default function App() {
     setMessageDisplay(message);
     setTimeout(() => {
       setMessageDisplay("");
-    }, 800);
+    }, 3000);
   }
 
   useEffect(() => {
@@ -39,12 +39,7 @@ export default function App() {
     }
 
     function onMessageEvent(message: string) {
-      if (
-        message.includes(" won ") ||
-        message.includes(" equally ") ||
-        message.includes(" doubled ")
-      )
-        setTempMessage(message);
+      setTempMessage(message);
       // setMessageEvents((previous) => [...previous, message]);
     }
 
@@ -73,6 +68,7 @@ export default function App() {
     <div className="bg-gray-900 w-screen h-screen">
       {!gameData && (
         <SessionManager
+          isConnected={isConnected}
           clientsInRoom={clientsInRoom}
           setClientsInRoom={setClientsInRoom}
           session={session}
@@ -82,12 +78,12 @@ export default function App() {
       )}
       <GameCanvas session={session} gameData={gameData} />
       <MessageDisplay message={messageDispaly} />
-      {session !== "" && (
+      {gameData && session !== "" && (
         <Footer
           isConnected={isConnected}
           session={session}
           clientsInRoom={clientsInRoom}
-          playerData={gameData?.players ?? []}
+          gameData={gameData}
           showNextGameButton={showNextGameButton}
           setClientsInRoom={setClientsInRoom}
           setSession={setSession}

src/components/Footer.tsx

@@ -3,13 +3,14 @@ import { socket } from "../socket";
 
 import Text from "../global/Text";
 import Button from "../global/Button";
-import { Player } from "../types/gameTypes";
+import { Game } from "../types/gameTypes";
+import { ConnectedIndicator, DisconnectedIndicator } from "./Indicators";
 
 type Footer = {
   isConnected: boolean;
   session: string;
   clientsInRoom: number;
-  playerData: Player[];
+  gameData: Game;
   showNextGameButton: boolean;
   setClientsInRoom: Dispatch<SetStateAction<number>>;
   setSession: Dispatch<SetStateAction<string>>;
@@ -20,7 +21,7 @@ type Footer = {
 export const Footer: FC<Footer> = ({
   isConnected,
   session,
-  playerData,
+  gameData,
   showNextGameButton,
   setClientsInRoom,
   setSession,
@@ -35,13 +36,7 @@ export const Footer: FC<Footer> = ({
     setSession("");
   }
 
-  const ConnectedIndicator: FC = () => (
-    <span className="ml-2 flex w-2.5 h-2.5 bg-green-500 rounded-full"></span>
-  );
-
-  const DisconnectedIndicator: FC = () => (
-    <span className="ml-2 flex w-2 h-2 bg-red-500 rounded-full"></span>
-  );
+  const isEndOfGame = gameData.phase === "game ended";
 
   return (
     <div
@@ -56,18 +51,22 @@ export const Footer: FC<Footer> = ({
           {isConnected ? <ConnectedIndicator /> : <DisconnectedIndicator />}
         </div>
         <div className="flex justify-between items-center">
-          {showNextGameButton && <Button onClick={nextGame}>Next Game</Button>}
+          {!isEndOfGame && showNextGameButton && (
+            <Button onClick={nextGame}>Next Game</Button>
+          )}
+          {isEndOfGame && <p className="mr-4">Game is over</p>}
           <Button variant="secondary" onClick={() => leaveSession(session)}>
             Leave
           </Button>
         </div>
       </div>
-      {playerData.map((player) => (
+      {gameData.players.map((player) => (
         <div className="mb-3 pt-2 mt-2 border-t border-gray-600">
           <div className="flex justify-between items-center">
             <Text>
               {player?.name} {player.socketId == socket.id && "👤"}{" "}
               {player.playersTurn && <span className="text-green-500">⏩</span>}
+              {isEndOfGame && player.place == 1 && "🏆"}
             </Text>
             <p></p>
           </div>

src/components/GameCanvas.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { Object3D, Mesh } from "three";
 import { Canvas } from "@react-three/fiber";
-import { OrbitControls, useGLTF, PerspectiveCamera } from "@react-three/drei";
+import { useGLTF } from "@react-three/drei";
 
 import PlayArea from "../components/PlayArea";
 import { Game } from "../types/gameTypes";
@@ -14,6 +14,8 @@ type GameCanvasProps = {
 const GameCanvas: FC<GameCanvasProps> = ({ gameData }) => {
   const tableModel = useGLTF("/models/table.glb");
   const heightProportion = 1.4;
+  const aspectRatio =
+    window.innerWidth / (window.innerHeight / heightProportion);
 
   if (!gameData) return null;
 
@@ -24,17 +26,15 @@ const GameCanvas: FC<GameCanvasProps> = ({ gameData }) => {
         height: window.innerHeight / heightProportion,
       }}
     >
-      <Canvas>
-        <PerspectiveCamera
-          makeDefault
-          manual
-          fov={75}
-          aspect={window.innerWidth / (window.innerHeight / heightProportion)}
-          near={0.1}
-          far={1000}
-          position={[0, 43, 10]}
-          // lookAt={() => new Vector3(0, 20, 0)}
-        />
+      <Canvas
+        camera={{
+          position: [0, 43, 10],
+          fov: 75,
+          near: 0.1,
+          far: 1000,
+          aspect: aspectRatio,
+        }}
+      >
         <ambientLight color={0xa3a3a3} intensity={0.1} />
         <directionalLight
           color={0xffffff}
@@ -59,7 +59,6 @@ const GameCanvas: FC<GameCanvasProps> = ({ gameData }) => {
         />
         <gridHelper args={[100, 100]} />
         <axesHelper args={[5]} />
-        <OrbitControls />
         <PlayArea gameData={gameData} />
       </Canvas>
     </div>

src/components/Indicators.tsx

@@ -0,0 +1,9 @@
+import { FC } from "react";
+
+export const ConnectedIndicator: FC = () => (
+  <span className="ml-2 flex w-2.5 h-2.5 bg-green-500 rounded-full"></span>
+);
+
+export const DisconnectedIndicator: FC = () => (
+  <span className="ml-2 flex w-2 h-2 bg-red-500 rounded-full"></span>
+);

src/components/SessionManager.tsx

@@ -1,9 +1,11 @@
 import { Dispatch, FC, SetStateAction, useState } from "react";
 import { socket } from "../socket";
 
+import { ConnectedIndicator, DisconnectedIndicator } from "./Indicators";
 import Button from "../global/Button";
 
 type SessionManagerProps = {
+  isConnected: boolean;
   clientsInRoom: number;
   setClientsInRoom: Dispatch<SetStateAction<number>>;
   session: string;
@@ -12,6 +14,7 @@ type SessionManagerProps = {
 };
 
 export const SessionManager: FC<SessionManagerProps> = ({
+  isConnected,
   clientsInRoom,
   setClientsInRoom,
   session,
@@ -89,6 +92,10 @@ export const SessionManager: FC<SessionManagerProps> = ({
               Leave Session
             </Button>
           )}
+          <div className="mt-8 flex justify-center items-center">
+            <span className="text-gray-200">Game Server: </span>
+            {isConnected ? <ConnectedIndicator /> : <DisconnectedIndicator />}
+          </div>
         </div>
       </div>
     </section>

src/types/gameTypes.ts

@@ -12,6 +12,7 @@ export type Player = {
   roundPoints: number;
   totalPoints: number;
   closedRound: boolean;
+  place: number;
 };
 
 export type PlayerWithVisualCards = {