Merge pull request #1 from MauMauStudios/meow_to_mau

Basic (and First!) Mau Front-End

src/layout/components/Card.tsx

@@ -0,0 +1,32 @@
+import React, {FunctionComponent} from "react";
+
+interface Props {
+    cardString: string;
+    handleClick?: (cardString: string) => void;
+    isHidden?: boolean;
+    isClickable?: boolean;
+}
+
+const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isClickable}) => {
+    const cardType = cardString.split(' ')[0].toLowerCase();
+    const cardValue = cardString.split(' ')[1].toLowerCase();
+
+    const cardSource = isHidden ?
+        require(`../../assets/cards/back.png`) :
+        require(`../../assets/cards/${cardType}_${cardValue}.png`);
+    const cardName = isHidden ? 'back' : `${cardType} ${cardValue}`;
+
+    const handleCardClick = () => {
+        if (handleClick) {
+            handleClick(cardString);
+        }
+    }
+
+    return (
+        <div className={`card ${isClickable && 'card-clickable'}`}>
+            <img className="card__texture" src={cardSource} alt={cardName} onClick={handleCardClick}/>
+        </div>
+    )
+}
+
+export default Card;

src/layout/components/Hand.tsx

@@ -0,0 +1,28 @@
+import React, {FunctionComponent} from 'react';
+import Card from "./Card";
+
+interface Props {
+    hand: string[];
+    actionOnClick: (cardString: string) => void;
+    isHidden?: boolean;
+}
+
+const Hand: FunctionComponent<Props> = ({hand, actionOnClick, isHidden}) => {
+
+    const isMyHand = !isHidden;
+
+    return (
+        <div className="hand">
+            {
+                hand.map((card, index) => {
+                    return (
+                        <Card key={index} cardString={card} handleClick={actionOnClick} isHidden={!isMyHand}
+                              isClickable={isMyHand}/>
+                    )
+                })
+            }
+        </div>
+    )
+}
+
+export default Hand;

src/layout/pages/Room.tsx

@@ -3,6 +3,16 @@ 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";
+
+interface GameState {
+    PlayerName: string;
+    Hand: string[];
+    CurrentCard: string;
+    CurrentPlayer: string;
+    Players: string[];
+}
 
 const Room = () => {
 
@@ -12,47 +22,40 @@ const Room = () => {
 
     const WS_URL = `ws://${process.env.REACT_APP_API_URL}/room/${roomId}`;
 
-    const [message, setMessage] = React.useState<string>('');
-    const [messages, setMessages] = React.useState<string[]>([]);
+    const [gameState, setGameState] = React.useState<GameState>({PlayerName: '', Hand: [], CurrentCard: '', CurrentPlayer: '', Players: []});
 
     const websocket = useWebSocket(WS_URL, {
         onOpen: () => {
             console.log('WebSocket connection established.');
         },
         onMessage: (event) => {
-            setMessages([...messages, event.data]);
+            const data = JSON.parse(event.data);
+            setGameState(data);
         }
     });
 
-    const handleSend = () => {
-        websocket.sendMessage(message);
-        setMessage('');
-    }
-
-    const handleMessageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setMessage(event.target.value);
-    }
-
     const handleLeaveRoom = () => {
         window.location.href = '/';
     }
 
+    const handleCardSend = (card: string) => {
+        const formattedCard = JSON.stringify({CardType: card.split(' ')[0], CardValue: card.split(' ')[1]});
+        websocket.sendMessage(formattedCard);
+    }
+
     return (
         <div>
             <h1>Room {roomId}</h1>
             <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
-            <form onSubmit={(event) => {
-                event.preventDefault();
-                handleSend();
-            }}>
-                <input type="text" name="message" placeholder="Send a message" value={message}
-                       onChange={handleMessageChange}/>
-                <span onClick={handleSend}>Send</span>
-            </form>
+            {
+                gameState.CurrentCard &&
+                <Card cardString={gameState.CurrentCard}/>
+            }
+            <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
             <ul>
                 {
-                    messages.map((message, index) => {
-                        return <li key={index}>{message}</li>
+                    gameState.Players.map((player, index) => {
+                        return <li key={index} style={{fontWeight: player === gameState.CurrentPlayer ? 'bold' : 'normal'}}>{player} {player === gameState.PlayerName && '(You)'}</li>
                     })
                 }
             </ul>

src/styles/layout/components/_components.scss

@@ -1 +1,3 @@
-@import "button";
+@import "button";
+@import "card";
+@import "hand";

src/styles/layout/components/card.scss

@@ -0,0 +1,14 @@
+.card {
+  width: 100px;
+  min-width: 100px;
+
+  &-clickable {
+    cursor: pointer;
+  }
+
+  &__texture {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}

src/styles/layout/components/hand.scss

@@ -0,0 +1,9 @@
+.hand {
+  display: flex;
+  flex-direction: row;
+  //justify-content: center;
+  flex-flow: nowrap !important;
+  overflow-x: scroll;
+  padding: 0.5rem;
+  gap: 0.5rem;
+}