Modify frontend to use updated backend messages

There is a bug with the play_card_other state not showing, but that seems to be a backend bug.

frontend/keezen-frontend/src/Card.js

@@ -8,7 +8,11 @@ export function Card({value: {suit, denom}, play, animate, selected, select}) {
             <span className="card-denom">{denomToChar(denom)}</span>
             <span className="card-suit">{suitToIcon(suit)}</span>
         </div>
-        {play && <button className="btn btn-success"  onClick={play}><i className="fa fa-arrow-up"/></button>}
+        {play && <button className="btn btn-success"  onClick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            play(event);
+        }}><i className="fa fa-arrow-up"/></button>}
     </div>;
 }
 

frontend/keezen-frontend/src/Game.js

@@ -5,48 +5,46 @@ import { Card } from "./Card";
 
 export default function Game({ message, swapCard, playCard, confirmPlay, undoPlay }) {
     console.log(message);
-    const { hand, state: { code: state, args: {other_player_name, card} }, selected_card } = message;
+    const { hand, state, current_player, play_card, swap_card } = message;
 
     let play = null;
+    let card = null;
     let text;
     switch (state) {
         case SiteState.SWAP_CARD:
             play = swapCard;
-            text = "Kies een kaart voor je partner";
-            break;
-        case SiteState.SWAP_CARD_PARTNER:
-            text = "Wacht op een kaart van je partner";
+            if (swap_card) {
+                card = swap_card;
+                text = "Wacht op een kaart van je partner";
+            } else {
+                text = "Kies een kaart voor je partner";
+            }
             break;
         case SiteState.SWAP_CARD_OTHERS:
             text = "Wacht op het andere team";
             break;
         case SiteState.PLAY_CARD:
             play = playCard;
+            card = play_card;
             text = "Kies een kaart om te spelen";
             break;
-        case SiteState.PLAYING_CARD:
-            text = "Bevestig kaart keuze";
-            break;
         case SiteState.PLAY_CARD_OTHER:
-            text = `${other_player_name} is een kaart aan het kiezen`;
+            card = play_card;
+            text = `${current_player.color}(${current_player.name}) is een kaart aan het kiezen`;
             break;
-        case SiteState.PLAYING_CARD_OTHER:
-            text = `${other_player_name} speelt kaart`;
-            break;
-
     }
 
 
     return <Fragment>
         <h1>{text}</h1>
-        {card || selected_card ?
-            <Card value={card || selected_card}/> : null
+        {card &&
+        <Card value={card}/>
         }
-        {state === SiteState.PLAYING_CARD ?
-                <button className="btn btn-primary" onClick={confirmPlay}>Bevestig</button> : null
+        {card && play_card &&
+        <button className="btn btn-primary" onClick={confirmPlay}>Bevestig</button>
         }
-        {state === SiteState.SWAP_CARD_PARTNER || state === SiteState.PLAYING_CARD ?
-            <button className="btn btn-danger" onClick={undoPlay}>Neem terug</button> : null
+        {card &&
+        <button className="btn btn-danger" onClick={undoPlay}>Neem terug</button>
         }
         <Hand cards={hand} play={play}/>
     </Fragment>;

frontend/keezen-frontend/src/Lobby.js

@@ -2,29 +2,25 @@ import React from "react";
 import "./css/lobby.css"
 import Colors from "./util/colors";
 import deck from './img/deck.svg';
-import { SiteState } from "./StateRouter";
+import { Commands } from "./StateRouter";
 
 export default function Lobby({ message, pickColor, deal }) {
-    const { color, options, state: { code: state, args: { game_code, ...state_args } } } = message;
-    const freeColors = (options && options.map((o) => o.color)) || [];
-    const circle_args = { state, myColor: color, freeColors, pickColor };
+    const { color, options, state, game_code, others, name,...args } = message;
+    const circle_args = { state, myColor: color, myName: name, others, pickColor };
+    const canDeal = options.find((o) => o.code === Commands.DEAL);
     return <div className="mt-4">
+        <div className="row my-2">
+            <h1>Je kan meedoen door naar <a href={`/${game_code}`}>{window.location.host}/{game_code}</a> te gaan
+            </h1>
+        </div>
+        <div className="row justify-content-center my-2">
+            <Circle color={Colors.RED} {...circle_args}/>
+            <Circle color={Colors.YELLOW} {...circle_args}/>
+            <Circle color={Colors.BLUE} {...circle_args}/>
+            <Circle color={Colors.GREEN} {...circle_args}/>
+        </div>
         {
-            state === SiteState.JOIN_OTHERS &&
-            <div className="row my-2">
-                <h1>Je kan meedoen door naar <a href={`/${game_code}`}>{window.location.host}/{game_code}</a> te gaan
-                </h1>
-            </div>
-        }{/*<hr/>*/}{
-            state !== SiteState.JOIN_OTHERS &&
-            <div className="row justify-content-center my-2">
-                <Circle color={Colors.RED} {...circle_args}/>
-                <Circle color={Colors.YELLOW} {...circle_args}/>
-                <Circle color={Colors.BLUE} {...circle_args}/>
-                <Circle color={Colors.GREEN} {...circle_args}/>
-            </div>
-        }{
-            state === SiteState.FIRST_DEAL &&
+            canDeal &&
             <div className="row justify-content-center my-2">
                 <div className="btn btn-link" onClick={deal}>
                     <img src={deck} alt="kaartenstapel"/>
@@ -36,16 +32,21 @@ export default function Lobby({ message, pickColor, deal }) {
     </div>
 }
 
-function Circle({ state, color, myColor, freeColors, pickColor }) {
+function Circle({ color, myColor, myName, others, pickColor }) {
     const isMine = color === myColor;
-    const isSelectable = freeColors.includes(color)
-    const isPicked = state === SiteState.PICK_COLOR && !isSelectable;
-    return <div className="col-2">
+    const playerInfo = isMine ?
+        {color, name: myName} :
+        others.find((o) => o.color === color);
+    const isSelectable = !(playerInfo ?? false);
+    const isPicked = !isSelectable;
+    const name = (playerInfo && playerInfo.name) || "";
+    return <div className="col-2 flex-column">
         <div className={`color-pick 
                 ${color} ${isPicked ? "selected" : ""} 
                 ${isSelectable ? "selectable" : ""} 
                 ${isMine ? "mine" : ""}`}
-            onClick={() => isSelectable && pickColor(color)}
+             onClick={() => isSelectable && pickColor(color)}
         />
+        <h4>{name}</h4>
     </div>
 }

frontend/keezen-frontend/src/StateRouter.js

@@ -12,20 +12,15 @@ export const SiteState = {
     JOIN_LINK: "join_link",
     // Lobby
     START: "start",
-    JOIN_OTHERS: "join_others",
     PICK_COLOR: "pick_color",
-    PICK_COLOR_OTHERS: "pick_color_others",
-    FIRST_DEAL: "first_deal",
-    // Hand
+    // Dealing
     DEAL: "deal",
     DEAL_OTHER: "deal_other",
+    // Hand
     SWAP_CARD: "swap_card",
-    SWAP_CARD_PARTNER: "swap_card_partner",
     SWAP_CARD_OTHERS: "swap_card_others",
     PLAY_CARD: "play_card",
     PLAY_CARD_OTHER: "play_card_other",
-    PLAYING_CARD: "playing_card",
-    PLAYING_CARD_OTHER: "playing_card_other",
 
 }
 
@@ -52,8 +47,8 @@ export default function StateRouter() {
 
     console.log({path, path_code});
     const initial_state = path_code === null ?
-        { state: { code: SiteState.WAITING_FOR_WS } } :
-        { state: { code: SiteState.JOIN_LINK, args: { game_code: path_code } } };
+        { state: SiteState.WAITING_FOR_WS } :
+        { state: SiteState.JOIN_LINK, game_code: path_code };
 
     const send = websocketStatus === WebsocketStatus.CONNECTED ?
         (data) => websocket.send(JSON.stringify(data)) :
@@ -61,21 +56,21 @@ export default function StateRouter() {
 
     const [message, setMessage] = useState(initial_state);
 
-    const { state: { code: state, args: state_args }, options } = message;
+    const { state, options, game_code, ...args } = message;
 
     useEffect(() => {
         if (websocketStatus === WebsocketStatus.CONNECTED && state === SiteState.JOIN_LINK) {
             send({
                 code: Commands.JOIN_GAME,
-                game_code: state_args.game_code,
+                game_code,
                 text: "Neem deel aan spel",
             })
         }
     }, [websocketStatus, message])
 
     useEffect(() => {
-        if (state_args && state_args.game_code !== undefined && state_args.game_code !== null) {
-            window.history.pushState(null, "", `/${state_args.game_code}`)
+        if (game_code !== undefined && game_code !== null) {
+            window.history.pushState(null, "", `/${game_code}`)
         }
         if (isNaN(path_code)) {
             window.history.pushState(null, "", "/")
@@ -142,12 +137,9 @@ export default function StateRouter() {
                               text: "Deel", 
                           })}/>
         case SiteState.SWAP_CARD:
-        case SiteState.SWAP_CARD_PARTNER:
         case SiteState.SWAP_CARD_OTHERS:
         case SiteState.PLAY_CARD:
         case SiteState.PLAY_CARD_OTHER:
-        case SiteState.PLAYING_CARD:
-        case SiteState.PLAYING_CARD_OTHER:
             return <Game message={message}
                          swapCard={(card) => send({
                              code: Commands.SWAP_CARD,
@@ -178,9 +170,8 @@ export default function StateRouter() {
                 </div>
             </div>;
         case SiteState.DEAL_OTHER:
-            return <h1>Wachten tot {state_args.other_player_name} heeft gedeeld</h1>
-            
+            return <h1>Wachten tot {args.current_player.color}({args.current_player.name}) heeft gedeeld</h1>
+        default:
+            return `state: ${state}, wsstatus: ${websocketStatus}`
     }
-
-    return `state: ${state}, wsstatus: ${websocketStatus}`
 }