Merge remote-tracking branch 'origin/master'

frontend/keezen-frontend/src/LandingPage.js

@@ -1,7 +1,27 @@
-import React from 'react';
+import React, { useState } from 'react';
 import "./css/landingpage.css";
 
 export default function LandingPage({ message, newGame, joinGame }) {
+    const [showCodeInput, setShowCodeInput] = useState(false);
+    const [code, setCode] = useState("");
+
+    function handleCodeChange(e) {
+        const value = e.target.value;
+        if (value.length > 4) {
+            return
+        }
+        if (value === "") {
+            setCode(value);
+        } else {
+            const parsedCode = parseInt(e.target.value);
+            if (isNaN(parsedCode)) {
+                return
+            }
+            setCode(parsedCode)
+        }
+    }
+
+                                                                                                                                                    
     return <div className="landing-page row h-100 align-content-center justify-content-center flex-md-column">
         <button className="btn btn-primary mb-5" onClick={newGame}>Start een nieuw spel</button>
         {showCodeInput ?

frontend/keezen-frontend/src/StateRouter.js

@@ -119,8 +119,8 @@ export default function StateRouter() {
                                 })}
                                 joinGame={(code) => send({
                                     code: Commands.JOIN_GAME,
-                                    game_code: 3936,
-                                    text: "Neem deel aan spel 3936",
+                                    game_code: code,
+                                    text: `Neem deel aan spel ${code}`,
                                 })}/>
         case SiteState.PICK_COLOR:
             return <Lobby message={message}