created menu entry to enter join code

1 files changed, 33 insertions, 12 deletions

diff --git a/src/components/MultiplayerMenu.js b/src/components/MultiplayerMenu.js
index 1dfe9dd..aa77507 100644
--- a/src/components/MultiplayerMenu.js
+++ b/src/components/MultiplayerMenu.js
@@ -15,24 +15,45 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import './style.css';
 
 const MultiplayerMenu = (props) => {
+  const [showCodeInput, setShowCodeInput] = useState(false)
+  const [joinCode, setJoinCode] = useState("");
+
   return (
     <div className={"MultiplayerMenu"}>
-      <div className={"GamemodeButton"} onClick={() => {
-        props.setIsHost(true);
-        props.setGameStarted(true);
-      }}>
-        HOST GAME
-      </div>
+      {showCodeInput 
+        ? <>
+          <input type="text" placeholder={"ENTER CODE"}
+            className={"GamemodeButton"} onChange={
+              (event) => setJoinCode(event.target.value)
+            }
+          />
+
+          <div className={"GamemodeButton"} onClick={() => {
+            props.setGameStarted(true);
+            props.setJoinCode(joinCode);
+          }}>
+            START
+          </div>
+        </>
+        : <>
+          <div className={"GamemodeButton"} onClick={() => {
+            props.setIsHost(true);
+            props.setGameStarted(true);
+          }}>
+            HOST GAME
+          </div>
 
-      <div className={"GamemodeButton"} onClick={() => {
-        props.setGameStarted(true);
-      }}>
-        JOIN GAME
-      </div>
+          <div className={"GamemodeButton"} onClick={() => {
+            setShowCodeInput(true);
+          }}>
+            JOIN GAME
+          </div>
+        </>
+      }
     </div>
   );
 }