main page overhaul

src/layout/pages/Room.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import {useParams} from "react-router";
 import {GHButton} from "../components/Button";
 import useTitle from "../../utils/TitleHook";
-import Card from "../components/Card";
 import Hand from "../components/Hand";
 import Deck from "../components/Deck";
 
@@ -23,7 +22,13 @@ const Room = () => {
 
     const WS_URL = `ws://${process.env.REACT_APP_API_URL}/room/${roomId}`;
 
-    const [gameState, setGameState] = React.useState<GameState>({PlayerName: '', Hand: [], CurrentCard: '', CurrentPlayer: '', Players: []});
+    const [gameState, setGameState] = React.useState<GameState>({
+        PlayerName: '',
+        Hand: [],
+        CurrentCard: '',
+        CurrentPlayer: '',
+        Players: []
+    });
 
     const websocket = useWebSocket(WS_URL, {
         onOpen: () => {
@@ -36,6 +41,8 @@ const Room = () => {
     });
 
     const handleLeaveRoom = () => {
+        const socket = websocket.getWebSocket();
+        if (socket) socket.close();
         window.location.href = '/';
     }
 
@@ -61,7 +68,7 @@ const Room = () => {
             <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
             {
                 gameState.CurrentCard &&
-                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw} />
+                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw}/>
             }
             {
                 gameState.Hand &&
@@ -70,7 +77,11 @@ const Room = () => {
             <ul>
                 {
                     gameState.Players.map((player, index) => {
-                        return <li key={index} style={{fontWeight: player === gameState.CurrentPlayer ? 'bold' : 'normal'}}>{player} {player === gameState.PlayerName && '(You)'}</li>
+                        const isCurrentPlayer = player === gameState.CurrentPlayer;
+                        const isMe = player === gameState.PlayerName;
+                        return <li key={index} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
+                            {player} {isMe && '(You)'}
+                        </li>
                     })
                 }
             </ul>