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

2024-05-19 23:50:47 +02:00
parent 4ae1538552
commit 6ba1523853
25 changed files with 481 additions and 155 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/App.tsx
+++ b/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>
    );
--- a/src/layout/components/AnimatedDiv.tsx
+++ b/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;
--- a/src/layout/components/Button.tsx
+++ b/src/layout/components/Button.tsx
@@ -4,20 +4,23 @@ interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonE

 }

-export const GHButton: FunctionComponent<ButtonProps> = (props) => {
-
-    const {className, ...rest} = props;
-
-    return (
-        <button className={`gh-button ${className}`} {...rest}></button>
-    );
-}
-
 export const NoButton: FunctionComponent<ButtonProps> = (props) => {

    const {className, ...rest} = props;

    return (
-        <button className={`no-button ${className}`} {...rest}></button>
+        <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}` : "");
+}
--- a/src/layout/components/Chat.tsx
+++ b/src/layout/components/Chat.tsx
@@ -1,7 +1,7 @@
-import {GHButton} from "./Button";
 import React, {FormEvent, FunctionComponent, RefObject} from "react";
+import {NoButton} from "./Button";

-interface Props{
+interface Props {
    chatRef: RefObject<HTMLOListElement>;
    handleSend: (message: string) => void;
 }
@@ -12,7 +12,7 @@ const Chat: FunctionComponent<Props> = ({chatRef, handleSend}) => {
        form.preventDefault();
        const data = new FormData(form.currentTarget);
        const chatInput = data.get("chat-input") as string;
-        if(!chatInput) return;
+        if (!chatInput) return;
        handleSend(chatInput);
        form.currentTarget.reset();
    }
@@ -21,8 +21,11 @@ const Chat: FunctionComponent<Props> = ({chatRef, handleSend}) => {
        <>
            <ol className={"chat__list"} ref={chatRef}/>
            <form className={"chat-form"} onSubmit={handleChat}>
-                <input className={"chat-form__input"} type="text" placeholder={"Chat here..."} id={"chat-input"} name={"chat-input"}/>
-                <GHButton type={"submit"}>Send</GHButton>
+                <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>
        </>
    )
--- a/src/layout/components/Lobby.tsx
+++ b/src/layout/components/Lobby.tsx
@@ -1,29 +0,0 @@
-import {FunctionComponent} from "react";
-import {GHButton} from "./Button";
-
-interface Props {
-    winner: string | undefined;
-    handleLobbyAction: (action: string) => void;
-}
-
-const Lobby: FunctionComponent<Props> = ({winner, handleLobbyAction}) => {
-
-    const onStartClick = () => {
-        console.log('Start Game');
-        handleLobbyAction("START");
-    }
-
-    // @ts-ignore
-    return (
-        <div>
-            <h1>Lobby</h1>
-            {
-                winner &&
-                <h2>{winner} has won the game!</h2>
-            }
-            <GHButton onClick={onStartClick}>Start Game</GHButton>
-        </div>
-    );
-}
-
-export default Lobby;
--- a/src/layout/components/Modal.tsx
+++ b/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;
--- a/src/layout/pages/Room.tsx
+++ b/src/layout/pages/Room.tsx
@@ -1,15 +1,18 @@
 import useWebSocket from "react-use-websocket";
 import React, {useEffect} from "react";
 import {useNavigate, useParams} from "react-router";
-import {GHButton} from "../components/Button";
 import useTitle from "../../utils/hooks/TitleHook";
-import Game, {GameState} from "../components/Game";
-import Lobby from "../components/Lobby";
+import Game, {GameState} from "../views/Game/Game";
+import Lobby from "../views/Lobby/Lobby";
 import Chat from "../components/Chat";
+import {Button} from "../components/Button";

-export interface Player {
-    Name: string;
+export interface Connection {
    Id: string;
+    Name: string;
+}
+
+export interface Player extends Connection {
    CardsLeft: number;
 }

@@ -18,10 +21,6 @@ export interface SocketMessage {
    Data: string;
 }

-interface JoinLeaveMessage {
-    ChatMessage: string;
-}
-
 const Room = () => {

    useTitle('Mau!');
@@ -30,11 +29,12 @@ const Room = () => {

    const {roomId} = useParams();

-    const playerName = localStorage.getItem('playerName') ?? Math.random().toString(36).substring(7);
+    const playerName = localStorage.getItem('playerName') ?? "";
    const WS_URL = `${process.env.REACT_APP_WEBSOCKET_URL}/room/${roomId}/${playerName}`;

    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);

@@ -72,17 +72,31 @@ const Room = () => {
                    setGameState(undefined);
                    break;
                case "JOIN":
-                    addChatMessage({Sender: "System", Message: (JSON.parse(data.Data) as JoinLeaveMessage).ChatMessage});
+                    onJoin(payload);
                    break;
                case "LEAVE":
-                    addChatMessage({Sender: "System", Message: (JSON.parse(data.Data) as JoinLeaveMessage).ChatMessage});
+                    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 = () => {
        navigateTo('/');
    }
@@ -95,6 +109,10 @@ const Room = () => {
        handleSend({Type: "LOBBY", Data: JSON.stringify(action)});
    }

+    const handleKick = (playerId: string) => {
+        handleSend({Type: "KICK", Data: playerId});
+    }
+
    const handleChatMessage = (chatMessage: string) => {
        handleSend({
            Type: "CHAT",
@@ -114,23 +132,24 @@ const Room = () => {
    return (
        <div className={"room"}>
            <aside className={"room-aside"}>
-                <header>
-                    <hgroup>
+                <header className={"aside-header"}>
+                    <hgroup className={"aside-header__titles"}>
                        <h1>Mau-Mau</h1>
                        <h2>Room {roomId?.split("-")[0]}</h2>
                    </hgroup>
-                    <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
+                    <Button onClick={handleLeaveRoom} className={"icon-start"}>
+                        <i className="bi bi-arrow-bar-left"></i>
+                        Leave Room
+                    </Button>
                </header>
                <Chat chatRef={chatRef} handleSend={handleChatMessage}/>
            </aside>
-            <main className={"room-main"}>
            {
                gameState ?
                    <Game gameState={gameState} handleGameAction={handleSend}/>
                    :
-                        <Lobby winner={winner} handleLobbyAction={handleLobbyAction}/>
+                    <Lobby playerList={playerList} winner={winner} handleLobbyAction={handleLobbyAction} onKickClick={handleKick}/>
            }
-            </main>
        </div>
    )
 }
--- a/src/layout/pages/Rooms.tsx
+++ b/src/layout/pages/Rooms.tsx
@@ -1,6 +1,7 @@
 import useTitle from "../../utils/hooks/TitleHook";
 import React from "react";
 import {useNavigate} from "react-router";
+import {NoButton} from "../components/Button";

 const ROOM_URL = `${process.env.REACT_APP_API_URL}/room`;

@@ -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())
@@ -22,9 +30,10 @@ const Rooms = () => {
            <h1 className={"mau"}>Rooms</h1>
            <ul>
                {
-                    rooms.map((room, index) => {
-                        return <li key={index} className={"mouse-pointer mau"}
-                                   onClick={() => navigateTo(`/room/${room}`)}>{room}</li>
+                    rooms.map((room) => {
+                        return <li key={room}>
+                            <NoButton onClick={() => handleRoomClick(room)}>{room}</NoButton>
+                        </li>
                    })
                }
            </ul>
--- a/src/layout/views/Game/Game.tsx
+++ b/src/layout/views/Game/Game.tsx
@@ -1,14 +1,15 @@
 import React, {FunctionComponent} from "react";
-import Deck from "./Deck";
-import Hand from "./Hand";
-import {GHButton} from "./Button";
-import {Player, SocketMessage} from "../pages/Room";
+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[];
 }
@@ -18,8 +19,6 @@ interface Props {
    handleGameAction: (message: SocketMessage) => void;
 }

-const CHOICES = ['SPADES', 'HEARTS', 'DIAMONDS', 'CLUBS'];
-
 const Game: FunctionComponent<Props> = ({gameState, handleGameAction}) => {

    const handleChoice = (choice: string) => {
@@ -31,14 +30,16 @@ const Game: FunctionComponent<Props> = ({gameState, handleGameAction}) => {
    }

    const handleCardSend = (cardString: string) => {
-        handleGameAction({Type: "PLAY", Data: JSON.stringify({
+        handleGameAction({
+            Type: "PLAY", Data: JSON.stringify({
                CardType: cardString.split(' ')[0],
                CardValue: cardString.split(' ')[1]
-        })})
+            })
+        })
    }

    return (
-        <div className="game">
+        <main id={"game"} className="game">
            <ol className={"game__players"}>
                {
                    gameState?.Me?.Id &&
@@ -61,6 +62,10 @@ const Game: FunctionComponent<Props> = ({gameState, handleGameAction}) => {
                    })
                }
            </ol>
+            {
+                gameState.NextAllowedCardType &&
+                <p>Next card type: {gameState.NextAllowedCardType}</p>
+            }
            {
                gameState.CurrentCard &&
                <Deck currentCard={gameState.CurrentCard} actionOnClick={handleDraw}/>
@@ -70,10 +75,9 @@ const Game: FunctionComponent<Props> = ({gameState, handleGameAction}) => {
                <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
            }
            {
-                gameState.MyState === 'CHOOSE' &&
-                CHOICES.map(choice => <GHButton key={choice} onClick={() => handleChoice(choice)}>{choice}</GHButton>)
+                <CardTypeChoiceModal isOpen={gameState.MyState === 'CHOOSE'} handleChoice={handleChoice}/>
            }
-        </div>
+        </main>
    )
 }

--- a/src/layout/views/Game/components/CardTypeChoiceModal.tsx
+++ b/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;
--- a/src/layout/views/Lobby/Lobby.tsx
+++ b/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;
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -12,17 +12,30 @@
 }

 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;
-  overflow: hidden;
+  background-color: #131313;
+  color: #ffffff;
 }

 #root, .app {
-  background-color: #131313;
-  color: #ffffff;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.app {
  padding: 1rem;
  height: 100%;
+  width: 100%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
 }

 .mau {
--- a/src/styles/layout/components/_components.scss
+++ b/src/styles/layout/components/_components.scss
@@ -1,6 +1,10 @@
@import "button";
@import "card";
@import "chat";
-@import "hand";
-@import "game";
+@import "card-type-choice-modal";
@import "deck";
+@import "game";
+@import "game-lobby";
+@import "hand";
+@import "modal";
+@import "room-header";
--- a/src/styles/layout/components/button.scss
+++ b/src/styles/layout/components/button.scss
@@ -1,58 +1,11 @@
-.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;
-  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;
+.icon-end {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}

-  :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;
-  }
-
-  :active {
-    background-color: #EDEFF2;
-    box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
-    transition: none 0s;
-  }
-
-  :focus {
-    outline: 1px transparent;
-  }
-
-  :before {
-    display: none;
-  }
-
-  ::-webkit-details-marker {
-    display: none;
-  }
+.icon-start {
+  display: grid;
+  grid-template-columns: auto 1fr;
 }

 .no-button {
@@ -61,3 +14,33 @@
  color: inherit;
  cursor: pointer;
 }
+
+.button {
+  background-color: #2e2e2e;
+  border: none;
+  color: #fff;
+  font-size: 1rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #3e3e3e;
+  }
+
+  &-success {
+    background-color: #276b00;
+
+    &:hover {
+      background-color: #3e8e00;
+    }
+  }
+
+  &-danger {
+    background-color: #6b0000;
+
+    &:hover {
+      background-color: #8e0000;
+    }
+  }
+}
--- a/src/styles/layout/components/card-type-choice-modal.scss
+++ b/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;
+  }
+}
--- a/src/styles/layout/components/chat.scss
+++ b/src/styles/layout/components/chat.scss
@@ -17,12 +17,22 @@
    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;
+      }
    }
  }
 }
--- a/src/styles/layout/components/game-lobby.scss
+++ b/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;
+  }
+}
--- a/src/styles/layout/components/game.scss
+++ b/src/styles/layout/components/game.scss
@@ -3,6 +3,7 @@
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  place-items: center;
+  position: relative;

  &__players {
    list-style-type: none;
--- a/src/styles/layout/components/modal.scss
+++ b/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;
+  }
+}
--- a/src/styles/layout/components/room-header.scss
+++ b/src/styles/layout/components/room-header.scss
@@ -0,0 +1,10 @@
+.aside-header {
+
+  &__titles {
+    margin-bottom: 1rem;
+
+    > * {
+      margin: 0;
+    }
+  }
+}
--- a/src/styles/layout/pages/room.scss
+++ b/src/styles/layout/pages/room.scss
@@ -1,6 +1,7 @@
 .room {
  display: grid;
  grid-template-columns: auto 1fr;
+  grid-column-gap: 1rem;
  height: 100%;

  &-aside {
@@ -8,5 +9,11 @@
    min-width: 20%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden auto;
+
+    button {
+      padding: 0.5rem;
+      font-size: 1rem;
+      width: 100%;
+    }
  }
 }
--- a/src/styles/vendor/_vendor.scss
+++ b/src/styles/vendor/_vendor.scss
@@ -1 +1,2 @@
+@import "bootstrap";
@import "normalize";
--- a/src/styles/vendor/bootstrap.scss
+++ b/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";