adds leave buttons & more

.env

@@ -1,5 +1,5 @@
 VITE_ENVIRONMENT=dev
 VITE_BACKEND_URL=https://skyjo-backend.voltvector.org
 
-#VITE_ENVIRONMENT=local
+VITE_ENVIRONMENT=local
-#VITE_BACKEND_URL=http://localhost:3001
+VITE_BACKEND_URL=http://localhost:3001

src/App.tsx

@@ -3,7 +3,7 @@ import { socket } from "./socket";
 
 import GameCanvas from "./components/GameCanvas";
 import { Footer } from "./components/Footer";
-import { JoinSession } from "./components/JoinSession";
+import { SessionManager } from "./components/SessionManager";
 import { Game } from "./types/gameTypes";
 import MessageDisplay from "./components/MessageDisplay";
 
@@ -72,8 +72,9 @@ export default function App() {
   return (
     <div className="bg-gray-900 w-screen h-screen">
       {!gameData && (
-        <JoinSession
+        <SessionManager
           clientsInRoom={clientsInRoom}
+          setClientsInRoom={setClientsInRoom}
           session={session}
           setSession={setSession}
           showStartGameButton={showStartGameButton}
@@ -88,6 +89,8 @@ export default function App() {
           clientsInRoom={clientsInRoom}
           playerData={gameData?.players ?? []}
           showNextGameButton={showNextGameButton}
+          setClientsInRoom={setClientsInRoom}
+          setSession={setSession}
         />
       )}
     </div>

src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { Dispatch, FC, SetStateAction } from "react";
 import { socket } from "../socket";
 
 import Text from "../global/Text";
@@ -11,6 +11,8 @@ type Footer = {
   clientsInRoom: number;
   playerData: Player[];
   showNextGameButton: boolean;
+  setClientsInRoom: Dispatch<SetStateAction<number>>;
+  setSession: Dispatch<SetStateAction<string>>;
 };
 
 // TODO: use clients in room to validate player count
@@ -20,11 +22,19 @@ export const Footer: FC<Footer> = ({
   session,
   playerData,
   showNextGameButton,
+  setClientsInRoom,
+  setSession,
 }) => {
   function nextGame() {
     socket.emit("next-round", { sessionId: session });
   }
 
+  function leaveSession(sessionName: string) {
+    socket.emit("leave-session", sessionName);
+    setClientsInRoom(0);
+    setSession("");
+  }
+
   const ConnectedIndicator: FC = () => (
     <span className="ml-2 flex w-2.5 h-2.5 bg-green-500 rounded-full"></span>
   );
@@ -47,10 +57,7 @@ export const Footer: FC<Footer> = ({
         </div>
         <div className="flex justify-between items-center">
           {showNextGameButton && <Button onClick={nextGame}>Next Game</Button>}
-          <Button
+          <Button variant="secondary" onClick={() => leaveSession(session)}>
-            variant="secondary"
-            onClick={() => socket.emit("leave-session")}
-          >
             Leave
           </Button>
         </div>

src/components/SessionManager.tsx

@@ -3,15 +3,17 @@ import { socket } from "../socket";
 
 import Button from "../global/Button";
 
-type JoinSessionProps = {
+type SessionManagerProps = {
   clientsInRoom: number;
+  setClientsInRoom: Dispatch<SetStateAction<number>>;
   session: string;
   setSession: Dispatch<SetStateAction<string>>;
   showStartGameButton: boolean;
 };
 
-export const JoinSession: FC<JoinSessionProps> = ({
+export const SessionManager: FC<SessionManagerProps> = ({
   clientsInRoom,
+  setClientsInRoom,
   session,
   setSession,
   showStartGameButton,
@@ -25,6 +27,12 @@ export const JoinSession: FC<JoinSessionProps> = ({
     setSessionField("");
   }
 
+  function leaveSession(sessionName: string) {
+    socket.emit("leave-session", sessionName);
+    setClientsInRoom(0);
+    setSession("");
+  }
+
   function startGame() {
     socket.emit("new-game", { sessionId: session });
   }
@@ -76,6 +84,11 @@ export const JoinSession: FC<JoinSessionProps> = ({
           {showStartGameButton && (
             <Button onClick={startGame}>Start Game</Button>
           )}
+          {isActiveSession && (
+            <Button variant="secondary" onClick={() => leaveSession(session)}>
+              Leave Session
+            </Button>
+          )}
         </div>
       </div>
     </section>