formatting for localmulti form

client/src/components/GameConfigForms/CpuMultiForm.js

@@ -0,0 +1,7 @@
+export default function CpuMultiForm() {
+    return (
+        <form className="local-multi-form">
+            <h1>AI and stuff?</h1>
+        </form>
+    )
+}

client/src/components/GameConfigForms/LocalMultiForm.js

@@ -0,0 +1,76 @@
+import { useState, useEffect } from "react";
+
+const formVariants = [
+    <>   { /* Fragment, expects to be concatenated as necessary within a <form> element */ }
+            { /* Player one and two base; index 0 */ }
+    <label key="p1" htmlFor="player-one">Player One:</label>
+    <input key="t1" type="text" id="playerOne" onChange={(e) => console.log(e.target.value)}></input>
+    <label key="p2" htmlFor="player-two">Player Two:</label>
+    <input key="t2" type="text" id="playerTwo" onChange={(e) => console.log(e.target.value)}></input>
+    </>
+    ,
+    <>  { /* Player three add on */ }
+    <label key="p3" htmlFor="player-three">Player Three:</label>
+    <input key="t3" type="text" id="playerThree" onChange={(e) => console.log(e.target.value)}></input>
+    </>
+    ,
+    <>
+    <label key="p4" htmlFor="player-four">Player Four:</label>
+    <input key="t4" type="text" id="playerFour" onChange={(e) => console.log(e.target.value)}></input>
+    </>
+];
+
+
+
+export default function LocalMultiForm() {
+    const [players, setPlayers] = useState(null);
+    const [formVariant, setFormVariant] = useState(null);
+    const [playerNames, setPlayerNames] = useState({
+        playerOne: null,
+        playerTwo: null,
+        playerThree: null,
+        playerFour: null
+    });
+
+    useEffect(() => {
+        switch (players) {
+            case "2":
+                setFormVariant(formVariants[0]);
+                break;
+            case "3":
+                setFormVariant([formVariants[0], formVariants[1]]);
+                break;
+            case "4":
+                setFormVariant([...formVariants]);
+                break;
+            default:
+                console.log("none");
+                break;
+        }
+    }, [players]);
+
+    return (
+        <>
+        <form className="local-multi-form" style={{paddingBottom: '2rem'}}>
+            <h3 htmlFor="num-players">Number of players:</h3>
+
+            <div>
+                <label htmlFor="2">2 Players</label>
+                <input id="2" name="num-players" type="radio" onChange={(e) => setPlayers(e.target.id)}></input>
+            </div>
+            <div>
+                <label htmlFor="3">3 Players</label>
+                <input id="3" name="num-players" type="radio" onChange={(e) => setPlayers(e.target.id)}></input>
+            </div>
+            <div>
+                <label htmlFor="4">4 Players</label>
+                <input id="4" name="num-players" type="radio" onChange={(e) => setPlayers(e.target.id)}></input>
+            </div>
+        </form>
+
+        <form className="player-input" style={{paddingBottom: '1rem'}}>
+            {formVariant}
+        </form>
+        </>
+    )
+}

client/src/components/Welcome.js

@@ -1,4 +1,37 @@
+import { useState, useRef } from "react"
+import LocalMultiForm from "./GameConfigForms/LocalMultiForm";
+import CpuMultiForm from "./GameConfigForms/CpuMultiForm";
+
 export default function Welcome() {
+    const [localMulti, setLocalMulti] = useState(false);
+    const [cpuMulti, setCpuMulti] = useState(false);
+
+    const [value, setValue] = useState('');
+
+    const localMultiRadio = useRef();
+    const cpuRadio = useRef();
+
+    const handleChange = (e) => {
+        setValue(e.target.id);
+
+        if (e.target.id === 'local-multi') {
+            setLocalMulti(true);
+            setCpuMulti(false);
+        } else {
+            setLocalMulti(false);
+            setCpuMulti(true);
+        }
+    }
+
+    const handleClear = () => {
+        localMultiRadio.current.checked = false;
+        cpuRadio.current.checked = false;
+
+        setLocalMulti(false);
+        setCpuMulti(false);
+        setValue('');
+    }
+
     return (
         <>
         <h1>Welcome to Splinter</h1>
@@ -6,8 +39,20 @@ export default function Welcome() {
 
         <h2>Choose from the options below:</h2>
         <form className="game-config">
-            
+            <div>
+                <label htmlFor="local-multi">Local multiplayer?</label>
+                <input name="game-group" id="local-multi" ref={localMultiRadio} type="radio" onChange={(e) => handleChange(e)}></input>
+            </div>
+            <div>
+                <label htmlFor="cpu-multi">CPU multiplayer? (under construction)</label>
+                <input name="game-group" id="cpu-multi" ref={cpuRadio} type="radio" onChange={(e) => handleChange(e)}></input>
+            </div>
         </form>
+
+        {localMulti ? <LocalMultiForm /> : null}
+        {cpuMulti ? <CpuMultiForm /> : null}
+
+        <button onClick={handleClear}>Clear form input</button>
         </>
     )
 }