Updated front-end to match back-end and better styling

- Chat cleaning
- Player hand size visibility

.dockerignore

@@ -1,3 +1,5 @@
 .env.example
+.env
 .idea
 README.md
+.gitea

.gitea/workflows/main.yml

@@ -45,7 +45,8 @@ jobs:
       - name: Create .env File
         run: |
           touch .env
-          echo "REACT_APP_API_URL=https://mau-mau.nl/api \n REACT_APP_WEBSOCKET_URL=ws://mau-mau.nl/api" > .env
+          echo "REACT_APP_API_URL=https://mau-mau.nl/api" > .env
+          echo "REACT_APP_WEBSOCKET_URL=wss://mau-mau.nl/api" >> .env
 
       - name: Set up Docker BuildX
         uses: docker/setup-buildx-action@v2

.gitignore

@@ -24,3 +24,4 @@ yarn-debug.log*
 yarn-error.log*
 
 .idea
+.env

package-lock.json

@@ -15,6 +15,8 @@
         "@types/node": "^16.18.14",
         "@types/react": "^18.0.28",
         "@types/react-dom": "^18.0.11",
+        "bootstrap-icons": "^1.11.3",
+        "framer-motion": "^11.2.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-query": "^3.39.3",
@@ -1808,16 +1810,21 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
-      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
+      "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/@babel/template": {
       "version": "7.20.7",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
@@ -5274,6 +5281,21 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
+      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ]
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -8149,6 +8171,30 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.4.tgz",
+      "integrity": "sha512-D+EXd0lspaZijv3BJhAcSsyGz+gnvoEdnf+QWkPZdhoFzbeX/2skrH9XSVFb0osgUnCajW8x1frjhLuKwa/Reg==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -18369,11 +18415,18 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "@babel/runtime": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
-      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
+      "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==",
       "requires": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+          "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        }
       }
     },
     "@babel/template": {
@@ -20871,6 +20924,11 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "bootstrap-icons": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
+      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -22961,6 +23019,14 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
     },
+    "framer-motion": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.4.tgz",
+      "integrity": "sha512-D+EXd0lspaZijv3BJhAcSsyGz+gnvoEdnf+QWkPZdhoFzbeX/2skrH9XSVFb0osgUnCajW8x1frjhLuKwa/Reg==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",

package.json

@@ -10,6 +10,8 @@
     "@types/node": "^16.18.14",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "bootstrap-icons": "^1.11.3",
+    "framer-motion": "^11.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",

src/App.tsx

@@ -1,14 +1,11 @@
 import React from 'react';
 import '../src/styles/App.scss';
 import Router from "./config/Router";
-import {useTheme} from "./utils/contexts/ThemeContext";
 
 function App() {
 
-    const {isDarkMode} = useTheme();
-
     return (
-        <div className={`app ${isDarkMode ? 'dark' : 'light'}`}>
+        <div className={"app"}>
             <Router/>
         </div>
     );

src/layout/components/AnimatedDiv.tsx

@@ -0,0 +1,38 @@
+import {FunctionComponent} from "react";
+import {motion} from "framer-motion";
+
+interface Props {
+    animation?: any;
+    className?: string;
+    children: any;
+}
+
+const defaultAnimation = {
+    initial: {
+        opacity: 0
+    },
+    animate: {
+        opacity: 1
+    },
+    exit: {
+        opacity: 0,
+        transition: {
+            duration: .1,
+            ease: 'easeInOut'
+        }
+    }
+}
+const AnimatedDiv: FunctionComponent<Props> = ({animation, className, children}) => {
+    return (
+        <motion.div
+            variants={animation ?? defaultAnimation}
+            initial={"initial"}
+            animate={"animate"}
+            exit={"exit"}
+            className={className}>
+            {children}
+        </motion.div>
+    )
+}
+
+export default AnimatedDiv;

src/layout/components/Button.tsx

@@ -1,13 +1,26 @@
-import React, {FunctionComponent} from "react";
+import React, {ButtonHTMLAttributes, DetailedHTMLProps, FunctionComponent} from "react";
+
+interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
 
-interface Props {
-    className?: string
-    onClick?: () => void
-    children?: React.ReactNode
 }
 
-export const GHButton: FunctionComponent<Props> = ({className, onClick, children}) => {
+export const NoButton: FunctionComponent<ButtonProps> = (props) => {
+
+    const {className, ...rest} = props;
+
     return (
-        <span className={`gh-button ${className}`} onClick={onClick}>{children}</span>
+        <button className={getClassName("no-button", className)} {...rest}/>
     );
 }
+
+export const Button: FunctionComponent<ButtonProps> = (props) => {
+    const {className, ...rest} = props;
+
+    return (
+        <button className={getClassName("button", className)} {...rest}/>
+    );
+}
+
+const getClassName = (templateClass: string, otherClass?: string) => {
+    return templateClass + (otherClass ? ` ${otherClass}` : "");
+}

src/layout/components/Card.tsx

@@ -1,19 +1,27 @@
 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();
 
-    const cardSource = isHidden ?
-        require(`../../assets/cards/back.png`) :
-        require(`../../assets/cards/${cardType}_${cardValue}.png`);
+    const cardSource = (): string => {
+        if (isHidden) return require("../../assets/cards/back.png");
+        if (cardType === "JOKER") {
+            if (cardValue === "RED") {
+                return require("../../assets/cards/joker_red.png")
+            }
+            return require("../../assets/cards/joker_black.png")
+        }
+        return require(`../../assets/cards/${cardType}_${cardValue}.png`);
+    }
+
     const cardName = isHidden ? 'back' : `${cardType} ${cardValue}`;
 
     const handleCardClick = () => {
@@ -22,9 +30,17 @@ const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isCl
         }
     }
 
+    if (handleClick) {
         return (
-        <div className={`card ${isClickable && 'card-clickable'}`}>
-            <img className="card__texture" src={cardSource} alt={cardName} onClick={handleCardClick}/>
+            <NoButton className={"card"} onClick={handleCardClick}>
+                <img className="card__texture" src={cardSource()} alt={cardName}/>
+            </NoButton>
+        )
+    }
+
+    return (
+        <div className={"card"}>
+            <img className="card__texture" src={cardSource()} alt={cardName}/>
         </div>
     )
 }

src/layout/components/Chat.tsx

@@ -0,0 +1,34 @@
+import React, {FormEvent, FunctionComponent, RefObject} from "react";
+import {NoButton} from "./Button";
+
+interface Props {
+    chatRef: RefObject<HTMLOListElement>;
+    handleSend: (message: string) => void;
+}
+
+const Chat: FunctionComponent<Props> = ({chatRef, handleSend}) => {
+
+    const handleChat = (form: FormEvent<HTMLFormElement>) => {
+        form.preventDefault();
+        const data = new FormData(form.currentTarget);
+        const chatInput = data.get("chat-input") as string;
+        if (!chatInput) return;
+        handleSend(chatInput);
+        form.currentTarget.reset();
+    }
+
+    return (
+        <>
+            <ol className={"chat__list"} ref={chatRef}/>
+            <form className={"chat-form"} onSubmit={handleChat}>
+                <label className={"chat-form__input"}>
+                    <input type={"text"} placeholder={"Chat here..."} id={"chat-input"} name={"chat-input"}
+                           autoComplete={"off"}/>
+                    <NoButton type={"submit"} className={"bi bi-send"}/>
+                </label>
+            </form>
+        </>
+    )
+}
+
+export default Chat;

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={true}/>
+                <Card cardString={"AA  BB"} handleClick={handleClick} isHidden/>
             </div>
         </div>
     );

src/layout/components/Game.tsx

@@ -1,46 +0,0 @@
-import React, {FunctionComponent} from "react";
-import Deck from "./Deck";
-import Hand from "./Hand";
-
-interface GameState {
-    PlayerName: string;
-    Hand: string[];
-    CurrentCard: string;
-    CurrentPlayer: string;
-    Players: string[];
-}
-
-interface Props {
-    gameState: GameState
-    handleCardSend: (cardString: string) => void;
-    handleDraw: () => void;
-}
-
-const Game:FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw}) => {
-    return (
-        <div className="game">
-            {
-                gameState.CurrentCard &&
-                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw}/>
-            }
-            {
-                gameState.Hand &&
-                <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
-            }
-            <ul>
-                {
-                    gameState.Players &&
-                    gameState.Players.map((player, index) => {
-                        const isCurrentPlayer = player === gameState.CurrentPlayer;
-                        const isMe = player === gameState.PlayerName;
-                        return <li key={index} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
-                            {player} {isMe && '(You)'}
-                        </li>
-                    })
-                }
-            </ul>
-        </div>
-    )
-}
-
-export default Game;

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}
-                              isClickable={isMyHand}/>
+                        <li key={card} className={"hand__item"}>
+                            <Card cardString={card} handleClick={actionOnClick} isHidden={isHidden}/>
+                        </li>
                     )
                 })
             }
-        </div>
+        </ul>
     )
 }
 

src/layout/components/Modal.tsx

@@ -0,0 +1,25 @@
+import {FunctionComponent} from "react";
+import {createPortal} from "react-dom";
+import AnimatedDiv from "./AnimatedDiv";
+
+interface Props {
+    isOpen: boolean
+    children: JSX.Element | JSX.Element[];
+    modalRoot: HTMLElement | null;
+}
+
+const Modal: FunctionComponent<Props> = (props) => {
+
+    return (
+        <>
+            {
+                props.isOpen &&
+                createPortal(<AnimatedDiv className={"modal-root"}>
+                    <div className={"modal-container"}>{props.children}</div>
+                </AnimatedDiv>, props.modalRoot ?? document.body)
+            }
+        </>
+    )
+}
+
+export default Modal;

src/layout/pages/MainLobby.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import useTitle from "../../utils/hooks/TitleHook";
 import Card from "../components/Card";
 import {useNavigate} from "react-router";
+import {NoButton} from "../components/Button";
 
 const ROOM_URL = `${process.env.REACT_APP_API_URL}/room`;
 
@@ -10,6 +11,7 @@ const MainLobby = () => {
     useTitle('Mau-Mau Lobby');
 
     const navigateTo = useNavigate();
+    const playerName = localStorage.getItem('playerName') ?? "";
 
     const handleCreateRoom = () => {
         fetch(ROOM_URL, {
@@ -19,18 +21,28 @@ const MainLobby = () => {
         });
     }
 
+    const changePlayerName = (name: string) => {
+        if (!name) return;
+        localStorage.setItem('playerName', name);
+    }
+
     return (
         <div className={"main-lobby"}>
             <h1 className={"main-lobby__title mau"}>Mau-Mau</h1>
+            <div className={"main-lobby__name mau"}>
+                <label htmlFor={"name-input"}>Enter your name</label>
+                <input id={"name-input"} type="text" placeholder="Enter your name"
+                       defaultValue={playerName} onBlur={(e) => changePlayerName(e.target.value)}/>
+            </div>
             <div className={"main-lobby__container"}>
-                <div className={"main-lobby__container-button clickable"} onClick={handleCreateRoom}>
+                <NoButton className={"main-lobby__container-button"} onClick={handleCreateRoom}>
                     <h2 className={"mau"}>Host Game</h2>
-                    <Card cardString={'SPADES ACE'} isClickable/>
-                </div>
-                <div className={"main-lobby__container-button clickable"} onClick={() => navigateTo('/rooms')}>
+                    <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/>
-                </div>
+                    <Card cardString={'SPADES ACE'} isHidden/>
+                </NoButton>
             </div>
         </div>
     );

src/layout/pages/Room.tsx

@@ -1,26 +1,24 @@
 import useWebSocket from "react-use-websocket";
-import React from "react";
+import React, {useEffect} from "react";
 import {useNavigate, useParams} from "react-router";
-import {GHButton} from "../components/Button";
 import useTitle from "../../utils/hooks/TitleHook";
-import Game from "../components/Game";
+import Game, {GameState} from "../views/Game/Game";
+import Lobby from "../views/Lobby/Lobby";
+import Chat from "../components/Chat";
+import {Button} from "../components/Button";
 
-interface GameState {
-    PlayerName: string;
-    Hand: string[];
-    CurrentCard: string;
-    CurrentPlayer: string;
-    Players: string[];
+export interface Connection {
+    Id: string;
+    Name: string;
 }
 
-interface ChatMessage {
-    PlayerName: string;
-    Message: string;
+export interface Player extends Connection {
+    CardsLeft: number;
 }
 
-interface SocketMessage {
+export interface SocketMessage {
     Type: string;
-    Payload: any;
+    Data: string;
 }
 
 const Room = () => {
@@ -31,33 +29,75 @@ const Room = () => {
 
     const {roomId} = useParams();
 
-    const WS_URL = `${process.env.REACT_APP_WEBSOCKET_URL}/room/${roomId}`;
+    const playerName = localStorage.getItem('playerName') ?? "";
+    const WS_URL = `${process.env.REACT_APP_WEBSOCKET_URL}/room/${roomId}/${playerName}`;
 
-    const [gameState, setGameState] = React.useState<GameState>({
-        PlayerName: '',
-        Hand: [],
-        CurrentCard: '',
-        CurrentPlayer: '',
-        Players: []
-    });
-    const [chatMessages, setChatMessages] = React.useState<ChatMessage[]>([]);
-    const [chatInput, setChatInput] = React.useState<string>('');
+    const [gameState, setGameState] = React.useState<GameState | undefined>(undefined);
+    const [winner, setWinner] = React.useState<string | undefined>(undefined);
+    const [playerList, setPlayerList] = React.useState<Connection[]>([]);
+
+    const chatRef = React.useRef<HTMLOListElement>(null);
+
+    const addChatMessage = (message: { Sender: string, Message: string }) => {
+        if (!chatRef.current) return;
+
+        const {scrollTop, scrollHeight, clientHeight} = chatRef.current;
+
+        const newChatElement = document.createElement('li');
+        newChatElement.innerHTML = `<strong>${message.Sender}:</strong> ${message.Message}`;
+        chatRef.current.appendChild(newChatElement);
+
+        const isNearBottom = scrollTop + clientHeight + newChatElement.scrollHeight * 2 >= scrollHeight;
+        if (isNearBottom) {
+            newChatElement.scrollIntoView({behavior: 'smooth'});
+        }
+    }
 
     const websocket = useWebSocket(WS_URL, {
         onOpen: () => {
             console.log('WebSocket connection established.');
         },
-        onMessage: (event) => {
-            const data = JSON.parse(event.data);
-            const payload = JSON.parse(data.Payload);
-            if (data.Type === 'GAME') setGameState(payload);
-            if (data.Type === 'CHAT') setChatMessages(prev => [...prev, payload]);
+        onMessage: (messageEvent) => {
+            const data: SocketMessage = JSON.parse(messageEvent.data);
+            const payload = JSON.parse(data.Data);
+            switch (data.Type) {
+                case 'GAME':
+                    setGameState(payload);
+                    break;
+                case 'CHAT':
+                    addChatMessage(payload);
+                    break;
+                case "END":
+                    setWinner(payload.Name)
+                    setGameState(undefined);
+                    break;
+                case "JOIN":
+                    onJoin(payload);
+                    break;
+                case "LEAVE":
+                    onLeave(payload.Connection);
+                    break;
+                default:
+                    console.log('Unknown message type:', data.Type);
+            }
+        },
+        onClose: (closeEvent) => {
+            navigateTo('/');
         }
     });
 
+    const onJoin = (payload: { Connections: Connection[], NewConnection: Connection }) => {
+        setPlayerList(payload.Connections);
+        addChatMessage({Sender: "System", Message: payload.NewConnection.Name + " has joined the room."});
+    }
+
+    const onLeave = (payload: Connection) => {
+        const connection = payload;
+        setPlayerList(playerList.filter(player => player.Id !== connection.Id));
+        addChatMessage({Sender: "System", Message: connection.Name + " has left the room."});
+    }
+
     const handleLeaveRoom = () => {
-        const socket = websocket.getWebSocket();
-        if (socket) socket.close();
         navigateTo('/');
     }
 
@@ -65,48 +105,51 @@ const Room = () => {
         websocket.sendMessage(JSON.stringify(message));
     }
 
-    const handleCardSend = (card: string) => {
-        handleSend({
-            Type: "GAME",
-            Payload: JSON.stringify({
-                Action: "PLAYCARD",
-                Data: JSON.stringify({
-                    CardType: card.split(' ')[0],
-                    CardValue: card.split(' ')[1]
-                })
-            })
-        })
+    const handleLobbyAction = (action: string) => {
+        handleSend({Type: "LOBBY", Data: JSON.stringify(action)});
     }
 
-    const handleDraw = () => {
-        handleSend({
-            Type: "GAME",
-            Payload: JSON.stringify({
-                Action: "DRAW",
-                Data: ""
-            })
-        });
+    const handleKick = (playerId: string) => {
+        handleSend({Type: "KICK", Data: playerId});
     }
 
-    const handleChat = (message: string) => {
+    const handleChatMessage = (chatMessage: string) => {
         handleSend({
             Type: "CHAT",
-            Payload: message
+            Data: chatMessage
         });
     }
 
+    useEffect(() => {
+        return () => {
+            const socket = websocket.getWebSocket();
+            if (socket) socket.close();
+        }
+        // this is a cleanup function and should not include any dependencies that would cause it to run more than once
+        // eslint-disable-next-line
+    }, []);
+
     return (
-        <div>
-            <h1>Room {roomId}</h1>
-            <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
-            <Game gameState={gameState} handleCardSend={handleCardSend} handleDraw={handleDraw}/>
-            <input type="text" placeholder={"Chat"} value={chatInput} onChange={(e) => setChatInput(e.target.value)} />
-            <button onClick={() => handleChat(chatInput)}>Send</button>
-            <ul>
-                {chatMessages.map((message, index) => (
-                    <li key={index}>{message.PlayerName}: {message.Message}</li>
-                ))}
-            </ul>
+        <div className={"room"}>
+            <aside className={"room-aside"}>
+                <header className={"aside-header"}>
+                    <hgroup className={"aside-header__titles"}>
+                        <h1>Mau-Mau</h1>
+                        <h2>Room {roomId?.split("-")[0]}</h2>
+                    </hgroup>
+                    <Button onClick={handleLeaveRoom} className={"icon-start"}>
+                        <i className="bi bi-arrow-bar-left"></i>
+                        Leave Room
+                    </Button>
+                </header>
+                <Chat chatRef={chatRef} handleSend={handleChatMessage}/>
+            </aside>
+            {
+                gameState ?
+                    <Game gameState={gameState} handleGameAction={handleSend}/>
+                    :
+                    <Lobby playerList={playerList} winner={winner} handleLobbyAction={handleLobbyAction} onKickClick={handleKick}/>
+            }
         </div>
     )
 }

src/layout/pages/Rooms.tsx

@@ -1,8 +1,9 @@
 import useTitle from "../../utils/hooks/TitleHook";
 import React from "react";
 import {useNavigate} from "react-router";
+import {NoButton} from "../components/Button";
 
-const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;
+const ROOM_URL = `${process.env.REACT_APP_API_URL}/room`;
 
 const Rooms = () => {
 
@@ -11,6 +12,13 @@ const Rooms = () => {
 
     const [rooms, setRooms] = React.useState<string[]>([]);
 
+    const handleRoomClick = (room: string) => {
+        if (!localStorage.getItem('playerName')){
+            localStorage.setItem("playerName", "Mau");
+        }
+        navigateTo(`/room/${room}`);
+    }
+
     React.useEffect(() => {
         fetch(ROOM_URL)
             .then(r => r.json())
@@ -19,12 +27,13 @@ const Rooms = () => {
 
     return (
         <div>
-            <h1>Rooms</h1>
+            <h1 className={"mau"}>Rooms</h1>
             <ul>
                 {
-                    rooms.map((room, index) => {
-                        return <li key={index} className={"clickable"}
-                                   onClick={() => navigateTo(`/room/${room}`)}>{room}</li>
+                    rooms.map((room) => {
+                        return <li key={room}>
+                            <NoButton onClick={() => handleRoomClick(room)}>{room}</NoButton>
+                        </li>
                     })
                 }
             </ul>

src/layout/views/Game/Game.tsx

@@ -0,0 +1,84 @@
+import React, {FunctionComponent} from "react";
+import {Player, SocketMessage} from "../../pages/Room";
+import Deck from "../../components/Deck";
+import Hand from "../../components/Hand";
+import CardTypeChoiceModal from "./components/CardTypeChoiceModal";
+
+export interface GameState {
+    Me: Player;
+    MyState: string;
+    Hand: string[];
+    CurrentCard: string;
+    NextAllowedCardType?: string
+    CurrentPlayer: Player;
+    Players: Player[];
+}
+
+interface Props {
+    gameState: GameState
+    handleGameAction: (message: SocketMessage) => void;
+}
+
+const Game: FunctionComponent<Props> = ({gameState, handleGameAction}) => {
+
+    const handleChoice = (choice: string) => {
+        handleGameAction({Type: 'CHOOSE', Data: choice});
+    }
+
+    const handleDraw = () => {
+        handleGameAction({Type: 'DRAW', Data: ""});
+    }
+
+    const handleCardSend = (cardString: string) => {
+        handleGameAction({
+            Type: "PLAY", Data: JSON.stringify({
+                CardType: cardString.split(' ')[0],
+                CardValue: cardString.split(' ')[1]
+            })
+        })
+    }
+
+    return (
+        <main id={"game"} className="game">
+            <ol className={"game__players"}>
+                {
+                    gameState?.Me?.Id &&
+                    gameState.Players.map((player) => {
+                        const isCurrentPlayer = player.Id === gameState.CurrentPlayer.Id;
+                        const isMe = player.Id === gameState.Me.Id;
+
+                        const style =
+                            {
+                                fontWeight: isMe ? 'bold' : 'normal',
+                                outline: isCurrentPlayer ? '2px solid red' : 'none'
+                            }
+
+                        return <li key={player.Id} style={style}>
+                            <div className={"game__players__info"}>
+                                <h3>{player.Name} {isMe && '(You)'}</h3>
+                                <p>{player.CardsLeft} left</p>
+                            </div>
+                        </li>
+                    })
+                }
+            </ol>
+            {
+                gameState.NextAllowedCardType &&
+                <p>Next card type: {gameState.NextAllowedCardType}</p>
+            }
+            {
+                gameState.CurrentCard &&
+                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw}/>
+            }
+            {
+                gameState.Hand &&
+                <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
+            }
+            {
+                <CardTypeChoiceModal isOpen={gameState.MyState === 'CHOOSE'} handleChoice={handleChoice}/>
+            }
+        </main>
+    )
+}
+
+export default Game;

src/layout/views/Game/components/CardTypeChoiceModal.tsx

@@ -0,0 +1,41 @@
+import React, {FunctionComponent} from "react";
+import {NoButton} from "../../../components/Button";
+import Modal from "../../../components/Modal";
+
+export interface Choice {
+    name: string;
+    icon: string;
+}
+
+interface Props {
+    isOpen: boolean;
+    handleChoice: (choice: string) => void;
+}
+
+const cardTypeChoices: Choice[] = [
+    {name: 'SPADES', icon: "bi-suit-spade-fill"},
+    {name: 'HEARTS', icon: "bi-suit-heart-fill"},
+    {name: 'DIAMONDS', icon: "bi-suit-diamond-fill"},
+    {name: 'CLUBS', icon: "bi-suit-club-fill"}
+];
+
+const CardTypeChoiceModal: FunctionComponent<Props> = (props) => {
+    return (
+        <Modal isOpen={props.isOpen} modalRoot={document.getElementById("game")}>
+            <div className={"card-type-choice-modal"}>
+                <div className={"card-type-choice-modal__choices"}>
+                    {
+                        cardTypeChoices.map(type =>
+                            <NoButton key={type.name} onClick={() => props.handleChoice(type.name)} aria-label={type.name.charAt(0) + type.name.substring(1).toLowerCase()}>
+                                <i className={`bi ${type.icon}`}/>
+                            </NoButton>
+                        )
+                    }
+                </div>
+                <h3 className={"card-type-choice-modal__title"}>Choose a card type</h3>
+            </div>
+        </Modal>
+    )
+}
+
+export default CardTypeChoiceModal;

src/layout/views/Lobby/Lobby.tsx

@@ -0,0 +1,46 @@
+import {FunctionComponent} from "react";
+import {Connection} from "../../pages/Room";
+import {Button} from "../../components/Button";
+
+interface Props {
+    winner: string | undefined;
+    handleLobbyAction: (action: string) => void;
+    playerList: Connection[];
+    onKickClick: (playerId: string) => void;
+}
+
+const Lobby: FunctionComponent<Props> = ({winner, handleLobbyAction, playerList, onKickClick}) => {
+
+    const onStartClick = () => {
+        console.log('Start Game');
+        handleLobbyAction("START");
+    }
+
+    return (
+        <main className={"game-lobby"}>
+            <h1>Waiting for host to start the game</h1>
+            <section>
+                <h2>Players</h2>
+                <ol className={"game-lobby__player-list"}>
+                    {
+                        playerList.map((player) => {
+                            return <li key={player.Id}>
+                                <p>{player.Name}</p>
+                                <Button className={"button-danger"} onClick={() => onKickClick(player.Id)}>Kick</Button>
+                            </li>
+                        })
+                    }
+                </ol>
+            </section>
+            <section>
+                <h2>Game Settings</h2>
+                <i>Not available... yet?</i>
+            </section>
+            <Button className={"button-success game-lobby__start-game"} onClick={onStartClick}>
+                <strong>Start Game</strong>
+            </Button>
+        </main>
+    );
+}
+
+export default Lobby;

src/styles/App.scss

@@ -7,9 +7,35 @@
   src: local('Mau'), url(../assets/fonts/OrientalCatsLight.otf) format('opentype');
 }
 
+* {
+  box-sizing: border-box;
+}
+
+body {
+  position: relative;
+  margin: 0;
+  overflow: hidden;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  height: 100dvh;
+  width: 100dvw;
+  background-color: #131313;
+  color: #ffffff;
+}
+
+#root, .app {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
 .app {
-  width: 100vw;
-  height: 100vh;
+  padding: 1rem;
+  height: 100%;
+  width: 100%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
 }
 
 .mau {

src/styles/layout/components/_components.scss

@@ -1,4 +1,10 @@
 @import "button";
 @import "card";
-@import "hand";
+@import "chat";
+@import "card-type-choice-modal";
 @import "deck";
+@import "game";
+@import "game-lobby";
+@import "hand";
+@import "modal";
+@import "room-header";

src/styles/layout/components/button.scss

@@ -1,56 +1,46 @@
-.gh-button {
-  appearance: none;
-  background-color: #FAFBFC;
-  border: 1px solid rgba(27, 31, 35, 0.15);
-  border-radius: 6px;
-  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
-  box-sizing: border-box;
-  color: #24292E;
+.icon-end {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+
+.icon-start {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.no-button {
+  background-color: transparent;
+  border: none;
+  color: inherit;
   cursor: pointer;
-  display: inline-block;
-  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  list-style: none;
-  padding: 6px 16px;
-  position: relative;
-  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: manipulation;
-  vertical-align: middle;
-  white-space: nowrap;
-  word-wrap: break-word;
-
-  :hover {
-    background-color: #F3F4F6;
-    text-decoration: none;
-    transition-duration: 0.1s;
 }
 
-  :disabled {
-    background-color: #FAFBFC;
-    border-color: rgba(27, 31, 35, 0.15);
-    color: #959DA5;
-    cursor: default;
+.button {
+  background-color: #2e2e2e;
+  border: none;
+  color: #fff;
+  font-size: 1rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #3e3e3e;
   }
 
-  :active {
-    background-color: #EDEFF2;
-    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
-    transition: none 0s;
+  &-success {
+    background-color: #276b00;
+
+    &:hover {
+      background-color: #3e8e00;
+    }
   }
 
-  :focus {
-    outline: 1px transparent;
-  }
+  &-danger {
+    background-color: #6b0000;
 
-  :before {
-    display: none;
-  }
-
-  ::-webkit-details-marker {
-    display: none;
+    &:hover {
+      background-color: #8e0000;
+    }
   }
 }

src/styles/layout/components/card-type-choice-modal.scss

@@ -0,0 +1,17 @@
+.card-type-choice-modal {
+  background-color: #9f7d2f;
+  border-radius: 0.5rem;
+  padding: 1rem 2rem;
+
+  &__choices {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: space-between;
+    font-size: 3rem;
+  }
+
+  &__title {
+    text-align: center;
+    margin-top: 1rem;
+  }
+}

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/chat.scss

@@ -0,0 +1,38 @@
+.chat {
+
+  &__list {
+    overflow-y: hidden;
+    word-wrap: break-word;
+    list-style-type: none;
+    padding: 0;
+    margin: 1rem 0;
+
+    &:hover {
+      overflow-y: scroll;
+    }
+  }
+
+  &-form {
+    display: flex;
+    flex-direction: column;
+
+    &__input {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      background-color: #2e2e2e;
+      border: none;
+      color: #fff;
+      font-size: 1rem;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+
+      > input {
+        background-color: transparent;
+        border: none;
+        color: #fff;
+        font-size: 1rem;
+        outline: none;
+      }
+    }
+  }
+}

src/styles/layout/components/game-lobby.scss

@@ -0,0 +1,41 @@
+.game-lobby {
+  display: grid;
+  grid-template-rows: auto 1fr 1fr auto;
+  grid-row-gap: 1rem;
+  justify-items: center;
+
+  > * {
+    width: 100%;
+  }
+
+  &__player-list {
+    overflow-y: hidden;
+    padding: 0;
+    list-style: none;
+    min-height: 90%;
+    max-height: 90%;
+    height: 0;
+
+    &:hover {
+      overflow-y: scroll;
+    }
+
+    li {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 0.5rem;
+      background-color: #2e2e2e;
+      border-radius: 0.5rem;
+      padding: 0.5rem;
+      margin: 0.5rem 0;
+
+      button {
+        padding: 0 1rem;
+      }
+    }
+  }
+
+  &__start-game {
+    font-size: 1rem;
+  }
+}

src/styles/layout/components/game.scss

@@ -0,0 +1,26 @@
+.game {
+  height: 100%;
+  display: grid;
+  grid-template-rows: 1fr 1fr 1fr;
+  place-items: center;
+  position: relative;
+
+  &__players {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row;
+    width: 100%;
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

src/styles/layout/components/hand.scss

@@ -1,9 +1,12 @@
 .hand {
   display: flex;
-  flex-direction: row;
-  //justify-content: center;
-  flex-flow: nowrap !important;
+  max-width: 100%;
+  flex-flow: row nowrap !important;
   overflow-x: scroll;
   padding: 0.5rem;
   gap: 0.5rem;
+
+  &__item {
+    list-style: none;
+  }
 }

src/styles/layout/components/modal.scss

@@ -0,0 +1,13 @@
+.modal {
+  &-root {
+    position: absolute;
+    padding: 1rem;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.25);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.5s ease-in-out;
+  }
+}

src/styles/layout/components/room-header.scss

@@ -0,0 +1,10 @@
+.aside-header {
+
+  &__titles {
+    margin-bottom: 1rem;
+
+    > * {
+      margin: 0;
+    }
+  }
+}

src/styles/layout/pages/_pages.scss

@@ -1 +1,2 @@
 @import "mainlobby";
+@import "room";

src/styles/layout/pages/mainlobby.scss

@@ -1,11 +1,16 @@
 .main-lobby {
-  width: 100vw;
   height: 75vh;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
 
+  &__name {
+    display: flex;
+    flex-direction: column;
+    font-size: 1.5rem;
+  }
+
   &__container {
     display: flex;
     gap: 2rem;
@@ -19,6 +24,6 @@
   }
 
   &__title {
-    font-size: 5rem;
+    font-size: 7.5rem;
   }
 }

src/styles/layout/pages/room.scss

@@ -0,0 +1,19 @@
+.room {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-column-gap: 1rem;
+  height: 100%;
+
+  &-aside {
+    display: grid;
+    min-width: 20%;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    overflow: hidden auto;
+
+    button {
+      padding: 0.5rem;
+      font-size: 1rem;
+      width: 100%;
+    }
+  }
+}

src/styles/utils/_utils.scss

@@ -1,2 +1 @@
 @import "pointer";
-@import "theme";

src/styles/utils/pointer.scss

@@ -1,4 +1,9 @@
-.clickable {
+.mouse-pointer {
   cursor: pointer;
   user-select: none;
 }
+
+.mouse-default {
+  cursor: default;
+  user-select: none;
+}

src/styles/utils/theme.scss

@@ -1,8 +0,0 @@
-.dark {
-  background-color: #333;
-  color: #fff;
-}
-.light {
-  background-color: #fff;
-  color: #333;
-}

src/styles/vendor/_vendor.scss

@@ -1 +1,2 @@
+@import "bootstrap";
 @import "normalize";

src/styles/vendor/bootstrap.scss

@@ -0,0 +1,2 @@
+//@import "../../../node_modules/bootstrap/scss/bootstrap.scss";
+@import "../../../node_modules/bootstrap-icons/font/bootstrap-icons.scss";