bug fix in config options, error message cleanup

src/components/Gameboard/Nobles.tsx

@@ -19,7 +19,7 @@ export default function Nobles() {
                             {
                                 Object.keys(noble.resourceCost).map((each) => {
                                     // @ts-ignore
-                                    return (noble.resourceCost[each] > 0) && <p>{each}: {noble.resourceCost[each]}</p>
+                                    return (noble.resourceCost[each] > 0) && <p key={v4()}>{each}: {noble.resourceCost[each]}</p>
                                 })
                             }
                         </div>

src/components/Player/AllPlayers.tsx

@@ -1,6 +1,7 @@
 import { useContext } from "react"
 import { Context } from "../../context/Context"
 import Player from "./Player";
+import { v4 } from "uuid";
 import "./AllPlayers.css"
 
 export default function AllPlayers() {
@@ -9,7 +10,7 @@ export default function AllPlayers() {
     return (
         <div className="all-players">
             {
-                players.map((player) => <Player data={player} />)
+                players.map((player) => <Player key={v4()} data={player} />)
             }
         </div>
     )

src/components/Player/Player.tsx

@@ -1,5 +1,6 @@
+import { v4 } from "uuid";
 import { useState } from "react";
-import { CardData, GemValue, NobleData, PlayerData } from "../../util/types";
+import { CardData, GemValue, PlayerData } from "../../util/types";
 
 interface PlayerProps {
     data: PlayerData
@@ -36,7 +37,7 @@ export default function Player({ data }: PlayerProps) {
     }
 
     return (
-        <div className="player-ui">
+        <div className="player-ui" key={v4()}>
             <p>Name: {data.name}</p>
             <p>Score: {data.points}</p>
             <p>Is {data.starter || "not"} round starter</p>

src/util/GameConstructor.tsx

@@ -102,7 +102,7 @@ export default function GameConstructor() {
                     id="P1-START"
                     required
                     onChange={() => handleRadio(1)}
-                    checked={starter === 0}>
+                    checked={starter === 0 && input.playerOne.name.length > 0}>
                 </input>
             </div>
 
@@ -118,7 +118,7 @@ export default function GameConstructor() {
                     id="P2-START"
                     required
                     onChange={() => handleRadio(2)}
-                    checked={starter === 1}>
+                    checked={starter === 1 && input.playerTwo.name.length > 0}>
                 </input>
             </div>
 
@@ -134,7 +134,7 @@ export default function GameConstructor() {
                     id="P3-START"
                     required
                     onChange={() => handleRadio(3)}
-                    checked={starter === 2}>
+                    checked={starter === 2 && input.playerThree.name.length > 0}>
                 </input>
             </div>
 
@@ -149,7 +149,7 @@ export default function GameConstructor() {
                     type="radio"
                     id="P1-START"
                     onChange={() => handleRadio(4)}
-                    checked={starter === 3}>
+                    checked={starter === 3 && input.playerFour.name.length > 0}>
                 </input>
             </div>