radio button state works as intended. some cleanup

src/components/Gameboard/Gameboard.tsx

@@ -21,7 +21,7 @@ export default function Gameboard() {
         if (!players.length) {
             setView(
                 <div className="error-page">
-                    <h1>Sorry! It appears we've lost track of your game data.</h1>
+                    <strong>Sorry! It appears we've lost track of your game data.</strong>
                     <p>Please head back to the <a href="/">home page</a> to start a fresh game.</p>
                 </div>
             );
@@ -53,7 +53,6 @@ export default function Gameboard() {
         }
 
         gameboard.deck = newDeck;
-        // setState({ ...gameboard, deck: newDeck });
     }
 
     const setNobles = () => {
@@ -65,11 +64,7 @@ export default function Gameboard() {
             const randNoble = newNobles.splice(rand,1)[0];
             shuffledNobles.push(randNoble);
         }
-
-        console.log(newNobles);
-        console.log(shuffledNobles);
         
-        // setState({ ...gameboard, nobles: shuffledNobles });
         gameboard.nobles = shuffledNobles;
     }
 

src/components/Gameboard/Nobles.tsx

@@ -5,10 +5,6 @@ import "./Nobles.css"
 
 export default function Nobles() {
     const { gameboard } = useContext(Context);
-    
-    useEffect(() => {
-        console.log(gameboard);
-    }, [gameboard])
 
     return (
         <div className="nobles-panel">

src/components/Player/Player.tsx

@@ -39,6 +39,7 @@ export default function Player({ data }: PlayerProps) {
         <div className="player-ui">
             <p>Name: {data.name}</p>
             <p>Score: {data.points}</p>
+            <p>Is {data.starter || "not"} round starter</p>
             <div className="player-cards"></div>
             <div className="player-resources"></div>
         </div>

src/util/GameConstructor.tsx

@@ -1,27 +1,53 @@
-import { useContext, useState } from "react"
+import { useContext, useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { Context } from "../context/Context";
 import { CardData, NobleData, PlayerData } from "./types";
 
+interface InputState {
+    playerOne: PlayerInput
+    playerTwo: PlayerInput
+    playerThree: PlayerInput
+    playerFour: PlayerInput
+}
+
+interface PlayerInput {
+    name: string,
+    starter: boolean
+}
+
 export default function GameConstructor() {
     const AppContext = useContext(Context);
     const navigate = useNavigate();
 
-    const [input, setInput] = useState({
+    const [starter, setStarter] = useState(-1);
-        playerOne: '',
+
-        playerTwo: '',
+    const [input, setInput] = useState<InputState>({
-        playerThree: '',
+        playerOne: {
-        playerFour: '',
+            name: '',
+            starter: false
+        },
+        playerTwo: {
+            name: '',
+            starter: false
+        },
+        playerThree: {
+            name: '',
+            starter: false
+        },
+        playerFour: {
+            name: '',
+            starter: false
+        },
     })
 
     const newGame = () => {
-        if (!input.playerOne || !input.playerTwo) return;
+        if (!input.playerOne.name || !input.playerTwo.name) return;
-        if (input.playerFour && !input.playerThree) return;
+        if (input.playerFour.name && !input.playerThree.name) return;
 
-        const newPlayers = Object.values(input).map((name: string): PlayerData => {
+        const newPlayers = Object.values(input).map((val: {name: string, starter: boolean}): PlayerData => {
             return {
-                name: name,
+                name: val.name,
-                starter: false,
+                starter: val.starter,
                 points: 0,
                 nobles: new Array<NobleData>,
                 cards: new Array<CardData>,
@@ -41,30 +67,93 @@ export default function GameConstructor() {
         }
 
         AppContext.players = newPlayers;
-
-        console.log(AppContext)
         navigate('/game');
     }
 
+    const handleRadio = (x: number) => {
+        const playerKeys = ["playerOne", "playerTwo", "playerThree", "playerFour"]
+        const inputKey = playerKeys[x-1];
+        setStarter(x-1);
+
+        setInput((prev) => {
+            let newState = prev;
+            for (let key of Object.keys(prev)) {
+                // @ts-ignore
+                newState[key].starter = (key === inputKey);
+            }
+
+            return newState;
+        })
+    }
+
     return (
         <div className="game-constructor App">
             <h1>Configure a new game:</h1>
 
             <div>
                 <label htmlFor="P1-NAME">Player 1 Name:</label>
-                <input type="text" id="P1-NAME" required onChange={(e) => setInput({ ...input, playerOne: e.target.value})}></input>
+                <input
+                    type="text"
+                    id="P1-NAME" required
+                    onChange={(e) => setInput({ ...input, playerOne: {...input.playerOne, name: e.target.value}})}>
+                </input>
+                <input
+                    type="radio"
+                    id="P1-START"
+                    required
+                    onChange={() => handleRadio(1)}
+                    checked={starter === 0}>
+                </input>
+            </div>
+
+            <div>
                 <label htmlFor="P2-NAME">Player 2 Name:</label>
-                <input type="text" id="P2-NAME" required onChange={(e) => setInput({ ...input, playerTwo: e.target.value})}></input>
+                <input
+                    type="text"
+                    id="P2-NAME" required
+                    onChange={(e) => setInput({ ...input, playerTwo: {...input.playerTwo, name: e.target.value}})}>
+                </input>
+                <input
+                    type="radio"
+                    id="P2-START"
+                    required
+                    onChange={() => handleRadio(2)}
+                    checked={starter === 1}>
+                </input>
             </div>
 
             <div>
                 <label htmlFor="P3-NAME">Player 3 Name:</label>
-                <input type="text" id="P3-NAME" onChange={(e) => setInput({ ...input, playerThree: e.target.value})}></input>
+                <input
-                <label htmlFor="P4-NAME">Player 4 Name:</label>
+                    type="text"
-                <input type="text" id="P4-NAME" onChange={(e) => setInput({ ...input, playerFour: e.target.value})}></input>
+                    id="P3-NAME"
+                    onChange={(e) => setInput({ ...input, playerThree: {...input.playerThree, name: e.target.value}})}>
+                </input>
+                <input
+                    type="radio"
+                    id="P3-START"
+                    required
+                    onChange={() => handleRadio(3)}
+                    checked={starter === 2}>
+                </input>
             </div>
 
-            <button onClick={newGame}>Start Game</button>
+            <div>
+                <label htmlFor="P4-NAME">Player 4 Name:</label>
+                <input
+                    type="text"
+                    id="P4-NAME"
+                    onChange={(e) => setInput({ ...input, playerFour: {...input.playerFour, name: e.target.value}})}>
+                </input>
+                <input
+                    type="radio"
+                    id="P1-START"
+                    onChange={() => handleRadio(4)}
+                    checked={starter === 3}>
+                </input>
+            </div>
+
+            <button disabled={!input.playerOne.name || !input.playerTwo.name} onClick={newGame}>Start Game</button>
         </div>
     )
 }