Merge pull request 'Back-end update and new styling' (#4) from quality-rewrite into developmaunt

Reviewed-on: https://git.mau-mau.nl/MauMau/MauMau-Client/pulls/4

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",
+      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
-      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "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",
+      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz",
-      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "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

@@ -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}` : "");
+}

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/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"}/>
+                <label className={"chat-form__input"}>
-                <GHButton type={"submit"}>Send</GHButton>
+                    <input type={"text"} placeholder={"Chat here..."} id={"chat-input"} name={"chat-input"}
+                           autoComplete={"off"}/>
+                    <NoButton type={"submit"} className={"bi bi-send"}/>
+                </label>
             </form>
         </>
     )

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

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

@@ -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

@@ -1,25 +1,23 @@
 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 Game, {GameState} from "../views/Game/Game";
-import Lobby from "../components/Lobby";
+import Lobby from "../views/Lobby/Lobby";
 import Chat from "../components/Chat";
+import {Button} from "../components/Button";
 
-export interface Player {
+export interface Connection {
-    Name: string;
     Id: string;
+    Name: string;
+}
+
+export interface Player extends Connection {
     CardsLeft: number;
 }
 
-interface SocketMessage {
+export interface SocketMessage {
     Type: string;
-    Payload: any;
-}
-
-export interface GameAction {
-    Action: string;
     Data: string;
 }
 
@@ -31,12 +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 [lobbyState, setLobbyState] = React.useState<string>("");
     const [winner, setWinner] = React.useState<string | undefined>(undefined);
+    const [playerList, setPlayerList] = React.useState<Connection[]>([]);
 
     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,12 +71,32 @@ const Room = () => {
                     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 = () => {
         navigateTo('/');
     }
@@ -91,18 +105,18 @@ const Room = () => {
         websocket.sendMessage(JSON.stringify(message));
     }
 
-    const handleGameAction = (action: GameAction) => {
+    const handleLobbyAction = (action: string) => {
-        handleSend({Type: "GAME", Payload: JSON.stringify(action)});
+        handleSend({Type: "LOBBY", Data: JSON.stringify(action)});
     }
 
-    const handleLobbyAction = (action: string) => {
+    const handleKick = (playerId: string) => {
-        handleSend({Type: "LOBBY", Payload: JSON.stringify(action)});
+        handleSend({Type: "KICK", Data: playerId});
     }
 
     const handleChatMessage = (chatMessage: string) => {
         handleSend({
             Type: "CHAT",
-            Payload: chatMessage
+            Data: chatMessage
         });
     }
 
@@ -118,23 +132,24 @@ const Room = () => {
     return (
         <div className={"room"}>
             <aside className={"room-aside"}>
-                <header>
+                <header className={"aside-header"}>
-                    <hgroup>
+                    <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 ?
-                    gameState ?
+                    <Game gameState={gameState} handleGameAction={handleSend}/>
-                        <Game gameState={gameState} handleGameAction={handleGameAction}/>
+                    :
-                        : lobbyState === 'LOBBY' &&
+                    <Lobby playerList={playerList} winner={winner} handleLobbyAction={handleLobbyAction} onKickClick={handleKick}/>
-                        <Lobby winner={winner} handleLobbyAction={handleLobbyAction}/>
+            }
-                }
-            </main>
         </div>
     )
 }

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) => {
+                    rooms.map((room) => {
-                        return <li key={index} className={"mouse-pointer mau"}
+                        return <li key={room}>
-                                   onClick={() => navigateTo(`/room/${room}`)}>{room}</li>
+                            <NoButton onClick={() => handleRoomClick(room)}>{room}</NoButton>
+                        </li>
                     })
                 }
             </ul>

src/layout/views/Game/Game.tsx

@@ -1,44 +1,45 @@
 import React, {FunctionComponent} from "react";
-import Deck from "./Deck";
+import {Player, SocketMessage} from "../../pages/Room";
-import Hand from "./Hand";
+import Deck from "../../components/Deck";
-import {GHButton} from "./Button";
+import Hand from "../../components/Hand";
-import {GameAction, Player} from "../pages/Room";
+import CardTypeChoiceModal from "./components/CardTypeChoiceModal";
 
 export interface GameState {
     Me: Player;
-    CurrentState: string;
+    MyState: string;
     Hand: string[];
     CurrentCard: string;
+    NextAllowedCardType?: string
     CurrentPlayer: Player;
     Players: Player[];
 }
 
 interface Props {
     gameState: GameState
-    handleGameAction: (action: GameAction) => void;
+    handleGameAction: (message: SocketMessage) => void;
 }
 
-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({
-            CardType: cardString.split(' ')[0],
+            Type: "PLAY", Data: JSON.stringify({
-            CardValue: cardString.split(' ')[1]
+                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.CurrentState === 'CHOOSE' &&
+                <CardTypeChoiceModal isOpen={gameState.MyState === 'CHOOSE'} handleChoice={handleChoice}/>
-                CHOICES.map(choice => <GHButton key={choice} onClick={() => handleChoice(choice)}>{choice}</GHButton>)
             }
-        </div>
+        </main>
     )
 }
 

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

@@ -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;
+  position: absolute;
-  color: #ffffff;
+  height: 100%;
+  width: 100%;
+}
+
+.app {
   padding: 1rem;
   height: 100%;
+  width: 100%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
 }
 
 .mau {

src/styles/layout/components/_components.scss

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

src/styles/layout/components/button.scss

@@ -1,58 +1,11 @@
-.gh-button {
+.icon-end {
-  appearance: none;
+  display: grid;
-  background-color: #FAFBFC;
+  grid-template-columns: 1fr auto;
-  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;
 
-  :hover {
+.icon-start {
-    background-color: #F3F4F6;
+  display: grid;
-    text-decoration: none;
+  grid-template-columns: auto 1fr;
-    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;
-  }
 }
 
 .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;
+    }
+  }
+}

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

@@ -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;
+      }
     }
   }
 }

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

@@ -3,6 +3,7 @@
   display: grid;
   grid-template-rows: 1fr 1fr 1fr;
   place-items: center;
+  position: relative;
 
   &__players {
     list-style-type: none;

src/styles/layout/components/hand.scss

@@ -5,4 +5,8 @@
   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/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%;
+    }
   }
 }

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