101 lines
3.6 KiB
JavaScript
101 lines
3.6 KiB
JavaScript
import { useState, useEffect, useContext } from "react";
|
|
import { Context } from "../../store/Store";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export default function LocalMultiForm() {
|
|
const [state, dispatch] = useContext(Context);
|
|
const navigate = useNavigate();
|
|
|
|
const [players, setPlayers] = useState(null);
|
|
const [formVariant, setFormVariant] = useState(null);
|
|
const [playerOne, setPlayerOne] = useState('');
|
|
const [playerTwo, setPlayerTwo] = useState('');
|
|
const [playerThree, setPlayerThree] = useState('');
|
|
const [playerFour, setPlayerFour] = useState('');
|
|
|
|
const allPlayerNames = [playerOne, playerTwo, playerThree, playerFour];
|
|
|
|
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) => setPlayerOne(e.target.value)}></input>
|
|
<label key="p2" htmlFor="player-two">Player Two:</label>
|
|
<input key="t2" type="text" id="playerTwo" onChange={(e) => setPlayerTwo(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) => setPlayerThree(e.target.value)}></input>
|
|
</>
|
|
,
|
|
<>
|
|
<label key="p4" htmlFor="player-four">Player Four:</label>
|
|
<input key="t4" type="text" id="playerFour" onChange={(e) => setPlayerFour(e.target.value)}></input>
|
|
</>
|
|
];
|
|
|
|
// useEffect for player form logic
|
|
|
|
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]);
|
|
|
|
const handleStartGame = () => {
|
|
let toSubmit = [];
|
|
let iter = 0;
|
|
while (iter < players) {
|
|
toSubmit.push(allPlayerNames[iter]);
|
|
iter++;
|
|
}
|
|
|
|
if (toSubmit.length < players) return;
|
|
|
|
for (let item of toSubmit) {
|
|
if (!item) return;
|
|
}
|
|
|
|
dispatch({ type: "ADD PLAYERS", payload: toSubmit });
|
|
navigate('/gameboard');
|
|
}
|
|
|
|
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>
|
|
<button onClick={handleStartGame}>Start game</button>
|
|
<button onClick={() => dispatch({type: "PRINT PLAYERS"})}>Get Players</button>
|
|
</>
|
|
)
|
|
} |