Updated front-end to match back-end rewrite

src/layout/components/Card.tsx

@@ -1,13 +1,13 @@
 import React, {FunctionComponent} from "react";
+import {NoButton} from "./Button";
 
 interface Props {
     cardString: string;
     handleClick?: (cardString: string) => void;
     isHidden?: boolean;
-    isClickable?: boolean;
 }
 
-const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isClickable}) => {
+const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden}) => {
     const cardType = cardString.split(' ')[0].toLowerCase();
     const cardValue = cardString.split(' ')[1].toLowerCase();
 
@@ -30,9 +30,17 @@ const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isCl
         }
     }
 
+    if (handleClick) {
+        return (
+            <NoButton className={"card"} onClick={handleCardClick}>
+                <img className="card__texture" src={cardSource()} alt={cardName}/>
+            </NoButton>
+        )
+    }
+
     return (
-        <div className={`card ${isClickable && 'card-clickable'}`}>
+        <div className={"card"}>
-            <img className="card__texture" src={cardSource()} alt={cardName} onClick={handleCardClick}/>
+            <img className="card__texture" src={cardSource()} alt={cardName}/>
         </div>
     )
 }

src/layout/components/Deck.tsx

@@ -15,12 +15,10 @@ const Deck: FunctionComponent<Props> = ({currentCard, actionOnClick}) => {
     return (
         <div className="deck-container">
             <div className="used-cards">
-                <p></p>
                 <Card cardString={currentCard}/>
             </div>
             <div className="deck">
-                <p></p>
+                <Card cardString={"AA  BB"} handleClick={handleClick} isHidden/>
-                <Card cardString={"AA  BB"} handleClick={handleClick} isHidden isClickable/>
             </div>
         </div>
     );

src/layout/components/Game.tsx

@@ -2,11 +2,11 @@ import React, {FunctionComponent} from "react";
 import Deck from "./Deck";
 import Hand from "./Hand";
 import {GHButton} from "./Button";
-import {GameAction, Player} from "../pages/Room";
+import {Player, SocketMessage} from "../pages/Room";
 
 export interface GameState {
     Me: Player;
-    CurrentState: string;
+    MyState: string;
     Hand: string[];
     CurrentCard: string;
     CurrentPlayer: Player;
@@ -15,7 +15,7 @@ export interface GameState {
 
 interface Props {
     gameState: GameState
-    handleGameAction: (action: GameAction) => void;
+    handleGameAction: (message: SocketMessage) => void;
 }
 
 const CHOICES = ['SPADES', 'HEARTS', 'DIAMONDS', 'CLUBS'];
@@ -23,15 +23,15 @@ const CHOICES = ['SPADES', 'HEARTS', 'DIAMONDS', 'CLUBS'];
 const Game: FunctionComponent<Props> = ({gameState, handleGameAction}) => {
 
     const handleChoice = (choice: string) => {
-        handleGameAction({Action: 'CHOOSE', Data: choice});
+        handleGameAction({Type: 'CHOOSE', Data: choice});
     }
 
     const handleDraw = () => {
-        handleGameAction({Action: 'DRAW', Data: ""});
+        handleGameAction({Type: 'DRAW', Data: ""});
     }
 
     const handleCardSend = (cardString: string) => {
-        handleGameAction({Action: "PLAYCARD", Data: JSON.stringify({
+        handleGameAction({Type: "PLAY", Data: JSON.stringify({
             CardType: cardString.split(' ')[0],
             CardValue: cardString.split(' ')[1]
         })})
@@ -70,7 +70,7 @@ const Game: FunctionComponent<Props> = ({gameState, handleGameAction}) => {
                 <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
             }
             {
-                gameState.CurrentState === 'CHOOSE' &&
+                gameState.MyState === 'CHOOSE' &&
                 CHOICES.map(choice => <GHButton key={choice} onClick={() => handleChoice(choice)}>{choice}</GHButton>)
             }
         </div>

src/layout/components/Hand.tsx

@@ -3,25 +3,24 @@ import Card from "./Card";
 
 interface Props {
     hand: string[];
-    actionOnClick: (cardString: string) => void;
+    actionOnClick?: (cardString: string) => void;
     isHidden?: boolean;
 }
 
 const Hand: FunctionComponent<Props> = ({hand, actionOnClick, isHidden}) => {
 
-    const isMyHand = !isHidden;
-
     return (
-        <div className="hand">
+        <ul className="hand">
             {
                 hand.map((card, index) => {
                     return (
-                        <Card key={index} cardString={card} handleClick={actionOnClick} isHidden={!isMyHand}
+                        <li key={card} className={"hand__item"}>
-                              isClickable={isMyHand}/>
+                            <Card cardString={card} handleClick={actionOnClick} isHidden={isHidden}/>
+                        </li>
                     )
                 })
             }
-        </div>
+        </ul>
     )
 }
 

src/layout/pages/MainLobby.tsx

@@ -37,11 +37,11 @@ const MainLobby = () => {
             <div className={"main-lobby__container"}>
                 <NoButton className={"main-lobby__container-button"} onClick={handleCreateRoom}>
                     <h2 className={"mau"}>Host Game</h2>
-                    <Card cardString={'SPADES ACE'} isClickable/>
+                    <Card cardString={'SPADES ACE'}/>
                 </NoButton>
                 <NoButton className={"main-lobby__container-button"} onClick={() => navigateTo('/rooms')}>
                     <h2 className={"mau"}>Join Game</h2>
-                    <Card cardString={'SPADES ACE'} isHidden isClickable/>
+                    <Card cardString={'SPADES ACE'} isHidden/>
                 </NoButton>
             </div>
         </div>

src/layout/pages/Room.tsx

@@ -13,14 +13,13 @@ export interface Player {
     CardsLeft: number;
 }
 
-interface SocketMessage {
+export interface SocketMessage {
     Type: string;
-    Payload: any;
+    Data: string;
 }
 
-export interface GameAction {
+interface JoinLeaveMessage {
-    Action: string;
+    ChatMessage: string;
-    Data: string;
 }
 
 const Room = () => {
@@ -35,7 +34,6 @@ const Room = () => {
     const WS_URL = `${process.env.REACT_APP_WEBSOCKET_URL}/room/${roomId}/${playerName}`;
 
     const [gameState, setGameState] = React.useState<GameState | undefined>(undefined);
-    const [lobbyState, setLobbyState] = React.useState<string>("");
     const [winner, setWinner] = React.useState<string | undefined>(undefined);
 
     const chatRef = React.useRef<HTMLOListElement>(null);
@@ -59,15 +57,11 @@ const Room = () => {
         onOpen: () => {
             console.log('WebSocket connection established.');
         },
-        onMessage: (event) => {
+        onMessage: (messageEvent) => {
-            const data = JSON.parse(event.data);
+            const data: SocketMessage = JSON.parse(messageEvent.data);
-            const payload = JSON.parse(data.Payload);
+            const payload = JSON.parse(data.Data);
             switch (data.Type) {
-                case 'LOBBY':
-                    setLobbyState(data.Type);
-                    break;
                 case 'GAME':
-                    setLobbyState(data.Type);
                     setGameState(payload);
                     break;
                 case 'CHAT':
@@ -77,6 +71,12 @@ const Room = () => {
                     setWinner(payload.Name)
                     setGameState(undefined);
                     break;
+                case "JOIN":
+                    addChatMessage({Sender: "System", Message: (JSON.parse(data.Data) as JoinLeaveMessage).ChatMessage});
+                    break;
+                case "LEAVE":
+                    addChatMessage({Sender: "System", Message: (JSON.parse(data.Data) as JoinLeaveMessage).ChatMessage});
+                    break;
                 default:
                     console.log('Unknown message type:', data.Type);
             }
@@ -91,18 +91,14 @@ const Room = () => {
         websocket.sendMessage(JSON.stringify(message));
     }
 
-    const handleGameAction = (action: GameAction) => {
-        handleSend({Type: "GAME", Payload: JSON.stringify(action)});
-    }
-
     const handleLobbyAction = (action: string) => {
-        handleSend({Type: "LOBBY", Payload: JSON.stringify(action)});
+        handleSend({Type: "LOBBY", Data: JSON.stringify(action)});
     }
 
     const handleChatMessage = (chatMessage: string) => {
         handleSend({
             Type: "CHAT",
-            Payload: chatMessage
+            Data: chatMessage
         });
     }
 
@@ -130,8 +126,8 @@ const Room = () => {
             <main className={"room-main"}>
                 {
                     gameState ?
-                        <Game gameState={gameState} handleGameAction={handleGameAction}/>
+                        <Game gameState={gameState} handleGameAction={handleSend}/>
-                        : lobbyState === 'LOBBY' &&
+                        :
                         <Lobby winner={winner} handleLobbyAction={handleLobbyAction}/>
                 }
             </main>

src/styles/layout/components/card.scss

@@ -2,10 +2,6 @@
   width: 100px;
   min-width: 100px;
 
-  &-clickable {
-    cursor: pointer;
-  }
-
   &__texture {
     width: 100%;
     height: 100%;

src/styles/layout/components/hand.scss

@@ -5,4 +5,8 @@
   overflow-x: scroll;
   padding: 0.5rem;
   gap: 0.5rem;
+
+  &__item {
+    list-style: none;
+  }
 }