wip

src/App.tsx

@@ -5,7 +5,6 @@ import GameCanvas from "./components/GameCanvas";
 import { Footer } from "./components/Footer";
 import { JoinSession } from "./components/JoinSession";
 import { Game } from "./types/gameTypes";
-import { extractCurrentPlayer } from "./helpers";
 import MessageDisplay from "./components/MessageDisplay";
 
 export default function App() {
@@ -19,8 +18,6 @@ export default function App() {
   const showStartGameButton = session !== "" && clientsInRoom >= 2;
   const showNextGameButton = gameData?.phase === "new round";
 
-  const currentPlayerData = extractCurrentPlayer(gameData);
-
   function setTempMessage(message: string) {
     setMessageDisplay(message);
     setTimeout(() => {
@@ -82,7 +79,7 @@ export default function App() {
           isConnected={isConnected}
           session={session}
           clientsInRoom={clientsInRoom}
-          currentPlayerData={currentPlayerData}
+          playerData={gameData?.players ?? []}
           showNextGameButton={showNextGameButton}
         />
       )}

src/components/Footer.tsx

@@ -9,32 +9,66 @@ type Footer = {
   isConnected: boolean;
   session: string;
   clientsInRoom: number;
-  currentPlayerData: Player | undefined;
+  playerData: Player[];
   showNextGameButton: boolean;
 };
 
+// TODO: use clients in room to validate player count
+
 export const Footer: FC<Footer> = ({
   isConnected,
   session,
-  clientsInRoom,
-  currentPlayerData,
+  playerData,
   showNextGameButton,
 }) => {
   function nextGame() {
     socket.emit("next-round", { sessionId: session });
   }
 
+  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>
+  );
+
   return (
-    <div>
-      <Text>Player Name: {currentPlayerData?.name}</Text>
-      <Text>Round Points: {currentPlayerData?.roundPoints}</Text>
-      <Text>Total Points: {currentPlayerData?.totalPoints}</Text>
-      <br />
-      <Text>State: {"" + isConnected}</Text>
-      <Text>SocketId: {socket.id}</Text>
-      <Text>Session: {session}</Text>
-      <Text>Players: {clientsInRoom}</Text>
-      {showNextGameButton && <Button onClick={nextGame}>Next Game</Button>}
+    <div
+      style={{
+        backgroundImage: "linear-gradient(to bottom, #4B5563,#1F2937)",
+      }}
+      className="p-4 rounded-lg shadow-lg flex flex-col justify-between text-white"
+    >
+      <div className="flex justify-between">
+        <div className="flex items-center">
+          <Text>Session: {session} </Text>
+          {isConnected ? <ConnectedIndicator /> : <DisconnectedIndicator />}
+        </div>
+        <div className="flex justify-between items-center">
+          {showNextGameButton && <Button onClick={nextGame}>Next Game</Button>}
+          <Button
+            variant="secondary"
+            onClick={() => socket.emit("leave-session")}
+          >
+            Leave
+          </Button>
+        </div>
+      </div>
+      {playerData.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 && "(You)"}
+            </Text>
+            <p></p>
+          </div>
+          <div className="flex justify-between">
+            <Text>Round Points: {player?.roundPoints}</Text>
+            <Text>Total Points: {player?.totalPoints}</Text>
+          </div>
+        </div>
+      ))}
     </div>
   );
 };

src/global/Button.tsx

@@ -1,10 +1,21 @@
 import { FC, ReactNode, ButtonHTMLAttributes } from "react";
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: "primary" | "secondary";
   children: ReactNode;
 };
 
-const Button: FC<ButtonProps> = ({ children, ...rest }) => {
+const Button: FC<ButtonProps> = ({ variant, children, ...rest }) => {
+  if (variant === "secondary") {
+    return (
+      <button
+        className="text-white focus:outline-none focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-gray-800 hover:bg-gray-700 focus:ring-gray-700 border-gray-700"
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  }
   return (
     <button
       className="text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800"

src/global/Text.tsx

@@ -1,11 +1,15 @@
-import { FC, ReactNode } from "react";
+import { FC, ReactNode, HTMLProps } from "react";
 
-type TextNormalProps = {
+type TextNormalProps = HTMLProps<HTMLParagraphElement> & {
   children: ReactNode;
 };
 
-const Text: FC<TextNormalProps> = ({ children }) => {
-  return <p className="mb-2 text-sm font-medium text-white">{children}</p>;
+const Text: FC<TextNormalProps> = ({ children, ...rest }) => {
+  return (
+    <p className="text-sm font-medium text-white" {...rest}>
+      {children}
+    </p>
+  );
 };
 
 export default Text;