Merge branch 'initial_react_frontend' of http://github.com/NielsOverkamp/Keezen into initial_react_frontend

frontend/keezen-frontend/src/Lobby.js

@@ -6,7 +6,8 @@ import { Commands } from "./StateRouter";
 
 export default function Lobby({ message, pickColor, deal }) {
     const { color, options, state, game_code, others, name,...args } = message;
-    const circle_args = { state, myColor: color, myName: name, others, pickColor };
+    const pickableColors = options.filter((o) => o.code === Commands.PICK_COLOR).map((o) => o.color);
+    const circle_args = { state, myColor: color, myName: name, others, pickableColors, pickColor };
     const canDeal = options.find((o) => o.code === Commands.DEAL);
     return <div className="mt-4">
         <div className="row my-2">
@@ -32,12 +33,12 @@ export default function Lobby({ message, pickColor, deal }) {
     </div>
 }
 
-function Circle({ color, myColor, myName, others, pickColor }) {
+function Circle({ color, myColor, myName, others, pickableColors, pickColor }) {
     const isMine = color === myColor;
     const playerInfo = isMine ?
         {color, name: myName} :
         others.find((o) => o.color === color);
-    const isSelectable = !(playerInfo ?? false);
+    const isSelectable = pickableColors.includes(color);
     const isPicked = !isSelectable;
     const name = (playerInfo && playerInfo.name) || "";
     return <div className="col-2 flex-column">

frontend/keezen-frontend/src/StateRouter.js

@@ -122,10 +122,7 @@ export default function StateRouter() {
                                     game_code: 3936,
                                     text: "Neem deel aan spel 3936",
                                 })}/>
-        case SiteState.JOIN_OTHERS:
         case SiteState.PICK_COLOR:
-        case SiteState.PICK_COLOR_OTHERS:
-        case SiteState.FIRST_DEAL:
             return <Lobby message={message}
                           pickColor={(color) => send({
                               code: Commands.PICK_COLOR,