key mapping

client/package-lock.json

@@ -15,6 +15,7 @@
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.2.2",
         "react-scripts": "5.0.0",
+        "uuid": "^8.3.2",
         "web-vitals": "^2.1.4"
       }
     },

client/package.json

@@ -10,6 +10,7 @@
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
+    "uuid": "^8.3.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

client/src/components/Game/GameBoard.js

@@ -6,6 +6,8 @@ import { TierOneDeck } from '../../store/TierOneDeck';
 import { TierTwoDeck } from '../../store/TierTwoDeck';
 import { TierThreeDeck } from '../../store/TierThreeDeck';
 
+import {v4} from 'uuid';
+
 export default function GameBoard() {
     const [state, dispatch] = useContext(Context);
 
@@ -26,7 +28,7 @@ export default function GameBoard() {
                 iter++;
 
                 if (!AllDecks[tier-1][iter-1]) continue;
-                newBoard.push(<Card state={AllDecks[tier-1][iter-1]} />);
+                newBoard.push(<Card key={`card-${v4()}`}state={AllDecks[tier-1][iter-1]} />);
             }
 
             switch (tier) {
@@ -58,7 +60,10 @@ export default function GameBoard() {
     return (
         <div className="gameboard">
             <h1 className="gameboard-title">SPLINTER</h1>
-            <h2>Players: {state.players}</h2>
+            <div>
+                <h2>Players:</h2>
+                {state.players.map(player => <p key={`player-${v4()}`}>{player}</p>)}
+            </div>
 
             <div className="gameboard-row">
                 {tierThree || 'Loading'}

client/src/components/GameConfigForms/LocalMultiForm.js

@@ -1,8 +1,10 @@
 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);
@@ -67,6 +69,7 @@ export default function LocalMultiForm() {
         }
 
         dispatch({ type: "ADD PLAYERS", payload: toSubmit });
+        navigate('/gameboard');
     }
 
     return (
@@ -91,7 +94,7 @@ export default function LocalMultiForm() {
         <form className="player-input" style={{paddingBottom: '1rem'}}>
             {formVariant}
         </form>
-        <button href='/' onClick={handleStartGame}>Start game</button>
+        <button onClick={handleStartGame}>Start game</button>
         <button onClick={() => dispatch({type: "PRINT PLAYERS"})}>Get Players</button>
         </>
     )