proper turn order handling, round change logic

src/App.tsx

@@ -25,7 +25,7 @@ function App() {
       },
       deck: CardDeck,
   },
-  round: 0,
+  round: 1,
   players: new Array<PlayerData>,
   })
 
@@ -34,9 +34,7 @@ function App() {
       <h1>SPLENDOR</h1>
       <BrowserRouter>
         <Routes>
-          {/* @ts-ignore */}
           <Route path="/" element={<GameConstructor state={state} setState={setState} />} />
-          {/* @ts-ignore */}
           <Route path="/game" element={<Gameboard state={state} setState={setState} />} />
         </Routes>
       </BrowserRouter>

src/components/Gameboard/Gameboard.tsx

@@ -24,6 +24,7 @@ export default function Gameboard({ state, setState }: StateProps) {
         } else {
             setView(
                 <div className="gameboard-rows">
+                    <strong>Round: {state.round}</strong>
                     <Nobles state={state} setState={setState} />
                     <CardRow tier={3} cards={state.gameboard.cardRows.tierThree} />
                     <CardRow tier={2} cards={state.gameboard.cardRows.tierTwo} />

src/components/Player/Player.tsx

@@ -1,26 +1,38 @@
 import { AppState, PlayerData, ResourceCost, StateProps } from "../../util/types"
 import { v4 } from "uuid";
+import { useEffect, useState } from "react";
+import { TurnOrderUtil } from "../../util/TurnOrderUtil";
 
 interface PlayerProps extends StateProps {
     player: PlayerData
 }
 
 export default function Player({ player, state, setState }: PlayerProps) {
+    const [dynamic, setDynamic] = useState<PlayerData>();
+
+    useEffect(() => {
+        setDynamic(state.players.find((element: PlayerData) => element.id === player.id));
+    }, [state]);
+
     const getChips = (resource: string) => {
+        if (!dynamic?.turnActive) return;
+
         setState((prev: AppState) => {
+            const { newPlayers, roundIncrement } = TurnOrderUtil(prev, dynamic);
+
             return {
                 ...prev,
+                round: (roundIncrement ? prev.round + 1 : prev.round),
                 gameboard: {
                     ...prev.gameboard,
                     tradingResources: {
                         ...prev.gameboard.tradingResources,
                         [resource as keyof ResourceCost]: prev.gameboard.tradingResources[resource as keyof ResourceCost] -= 1
                     }
-                }
+                },
+                players: newPlayers
             }
         })
-        
-        console.log(state);
     }
 
     return (
@@ -31,6 +43,7 @@ export default function Player({ player, state, setState }: PlayerProps) {
             <p>Is {player.starter || "not"} round starter</p>
 
             {/* Dynamic data from state */}
+            <p>{dynamic?.turnActive ? "My turn!" : "..."}</p>
             <button onClick={() => getChips('ruby')}>Get Chips</button>
             <div className="player-cards"></div>
             <div className="player-resources"></div>

src/util/GameConstructor.tsx

@@ -1,6 +1,6 @@
-import { useContext, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
-import { Context } from "../context/Context";
+import { v4 } from "uuid";
 import { CardData, NobleData, PlayerData, StateProps } from "./types";
 
 interface InputState {
@@ -19,6 +19,7 @@ export default function GameConstructor({ state, setState }: StateProps) {
     const navigate = useNavigate();
 
     const [starter, setStarter] = useState(-1);
+    const [error, setError] = useState('init');
     const [input, setInput] = useState<InputState>({
         playerOne: {
             name: '',
@@ -38,14 +39,30 @@ export default function GameConstructor({ state, setState }: StateProps) {
         },
     })
 
-    const newGame = () => {
-        if (!input.playerOne.name || !input.playerTwo.name) return;
-        if (input.playerFour.name && !input.playerThree.name) return;
+    useEffect(() => {
+        if (!input.playerOne.name || !input.playerTwo.name) {
+            setError("Please provide the minimum number of players.");
+        } else if (input.playerFour.name && !input.playerThree.name) {
+            setError("Your player input data is invalid. Please input players sequential turn order.");
+        } else if (error !== 'init' && starter === -1) {
+            setError("Please indicate a player to start.");
+        } else {
+            setError('');
+        }
+    }, [input, starter])
 
+    const newGame = () => {
+        if (error) return;
+
+        let i = 0;
         const newPlayers = Object.values(input).map((val: {name: string, starter: boolean}): PlayerData => {
+            i++;
+
             return {
                 name: val.name,
+                id: i,
                 starter: val.starter,
+                turnActive: val.starter,
                 points: 0,
                 nobles: new Array<NobleData>,
                 cards: new Array<CardData>,
@@ -151,7 +168,8 @@ export default function GameConstructor({ state, setState }: StateProps) {
                 </input>
             </div>
 
-            <button disabled={!input.playerOne.name || !input.playerTwo.name} onClick={newGame}>Start Game</button>
+            <p>{error !== 'init' && error}</p>
+            <button disabled={error.length > 0} onClick={newGame}>Start Game</button>
         </div>
     )
 }

src/util/TurnOrderUtil.ts

@@ -0,0 +1,22 @@
+import { AppState, PlayerData } from "./types";
+
+export const TurnOrderUtil = (prev: AppState, dynamic: PlayerData) => {
+    let roundIncrement = false;
+    const newPlayers = prev.players;
+
+    for (let each of newPlayers) {
+        if (each.id === dynamic.id) {
+            each.turnActive = false;
+        } else if (each.id === dynamic.id + 1) {
+            each.turnActive = true;
+        } else if (dynamic.id + 1 > newPlayers.length) {
+            each.turnActive = false;
+            newPlayers[0].turnActive = true;
+            roundIncrement = true;
+        } else {
+            each.turnActive = false;
+        }
+    }
+
+    return { newPlayers, roundIncrement };
+}

src/util/types.d.ts

@@ -30,6 +30,7 @@ export interface GameInformation {
 
 export interface PlayerData {
     name: string,
+    id: number,
     starter: boolean,
     turnActive?: boolean,
     points: number,