From 65af1b284d8dfad283c70c405f7d6f45934acbaa Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Thu, 21 Jul 2022 16:34:38 -0500
Subject: [PATCH] bug fix in config options, error message cleanup

---
 src/components/Gameboard/Nobles.tsx  | 2 +-
 src/components/Player/AllPlayers.tsx | 3 ++-
 src/components/Player/Player.tsx     | 5 +++--
 src/util/GameConstructor.tsx         | 8 ++++----
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Gameboard/Nobles.tsx b/src/components/Gameboard/Nobles.tsx
index 1037bca..a184cb3 100644
--- a/src/components/Gameboard/Nobles.tsx
+++ b/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>
diff --git a/src/components/Player/AllPlayers.tsx b/src/components/Player/AllPlayers.tsx
index a7b661c..2573bd9 100644
--- a/src/components/Player/AllPlayers.tsx
+++ b/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>
     )
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index 4968e92..7161028 100644
--- a/src/components/Player/Player.tsx
+++ b/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>
diff --git a/src/util/GameConstructor.tsx b/src/util/GameConstructor.tsx
index 1512e8f..ce90c27 100644
--- a/src/util/GameConstructor.tsx
+++ b/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>