Added the ability to choose your cardtype when playing a jack or the newly added joker

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

.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

src/layout/components/Card.tsx

@@ -11,9 +11,17 @@ const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isCl
     const cardType = cardString.split(' ')[0].toLowerCase();
     const cardValue = cardString.split(' ')[1].toLowerCase();
 
-    const cardSource = isHidden ?
+    const cardSource = (): string => {
-        require(`../../assets/cards/back.png`) :
+        if (isHidden) return require("../../assets/cards/back.png");
-        require(`../../assets/cards/${cardType}_${cardValue}.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 = () => {
@@ -24,7 +32,7 @@ const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isCl
 
     return (
         <div className={`card ${isClickable && 'card-clickable'}`}>
-            <img className="card__texture" src={cardSource} alt={cardName} onClick={handleCardClick}/>
+            <img className="card__texture" src={cardSource()} alt={cardName} onClick={handleCardClick}/>
         </div>
     )
 }

src/layout/components/Game.tsx

@@ -1,9 +1,11 @@
 import React, {FunctionComponent} from "react";
 import Deck from "./Deck";
 import Hand from "./Hand";
+import {GHButton} from "./Button";
 
-interface GameState {
+export interface GameState {
     PlayerName: string;
+    CurrentState: string;
     Hand: string[];
     CurrentCard: string;
     CurrentPlayer: string;
@@ -14,9 +16,12 @@ interface Props {
     gameState: GameState
     handleCardSend: (cardString: string) => void;
     handleDraw: () => void;
+    handleChoice: (choice: string) => void;
 }
 
-const Game:FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw}) => {
+const CHOICES = ['SPADES', 'HEARTS', 'DIAMONDS', 'CLUBS'];
+
+const Game: FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw, handleChoice}) => {
     return (
         <div className="game">
             {
@@ -27,13 +32,17 @@ const Game:FunctionComponent<Props> = ({gameState, handleCardSend, handleDraw})
                 gameState.Hand &&
                 <Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
             }
+            {
+                gameState.CurrentState === 'CHOOSE' &&
+                CHOICES.map(choice => <GHButton key={choice} onClick={() => handleChoice(choice)}>{choice}</GHButton>)
+            }
             <ul>
                 {
-                    gameState.Players &&
+                    gameState?.Players &&
-                    gameState.Players.map((player, index) => {
+                    gameState.Players.map((player) => {
                         const isCurrentPlayer = player === gameState.CurrentPlayer;
                         const isMe = player === gameState.PlayerName;
-                        return <li key={index} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
+                        return <li key={player} style={{fontWeight: isCurrentPlayer ? 'bold' : 'normal'}}>
                             {player} {isMe && '(You)'}
                         </li>
                     })

src/layout/pages/Room.tsx

@@ -3,15 +3,7 @@ import React 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 "../components/Game";
-
-interface GameState {
-    PlayerName: string;
-    Hand: string[];
-    CurrentCard: string;
-    CurrentPlayer: string;
-    Players: string[];
-}
 
 interface ChatMessage {
     PlayerName: string;
@@ -35,6 +27,7 @@ const Room = () => {
 
     const [gameState, setGameState] = React.useState<GameState>({
         PlayerName: '',
+        CurrentState: '',
         Hand: [],
         CurrentCard: '',
         CurrentPlayer: '',
@@ -78,6 +71,16 @@ const Room = () => {
         })
     }
 
+    const handleChoice = (choice: string) => {
+        handleSend({
+            Type: "GAME",
+            Payload: JSON.stringify({
+                Action: "CHOOSE",
+                Data: choice
+            })
+        });
+    }
+
     const handleDraw = () => {
         handleSend({
             Type: "GAME",
@@ -99,7 +102,7 @@ const Room = () => {
         <div>
             <h1>Room {roomId}</h1>
             <GHButton onClick={handleLeaveRoom}>Leave Room</GHButton>
-            <Game gameState={gameState} handleCardSend={handleCardSend} handleDraw={handleDraw}/>
+            <Game gameState={gameState} handleCardSend={handleCardSend} handleDraw={handleDraw} handleChoice={handleChoice}/>
             <input type="text" placeholder={"Chat"} value={chatInput} onChange={(e) => setChatInput(e.target.value)} />
             <button onClick={() => handleChat(chatInput)}>Send</button>
             <ul>

src/layout/pages/Rooms.tsx

@@ -2,7 +2,7 @@ import useTitle from "../../utils/hooks/TitleHook";
 import React from "react";
 import {useNavigate} from "react-router";
 
-const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;
+const ROOM_URL = `${process.env.REACT_APP_API_URL}/room`;
 
 const Rooms = () => {