From 42c15e2160b24ad61c511149f50b31a52e4958fe Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Sat, 16 Apr 2022 14:09:15 -0500
Subject: [PATCH] key mapping

---
 client/package-lock.json                                | 1 +
 client/package.json                                     | 1 +
 client/src/components/Game/GameBoard.js                 | 9 +++++++--
 client/src/components/GameConfigForms/LocalMultiForm.js | 5 ++++-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index a8f47d0..713f4a8 100644
--- a/client/package-lock.json
+++ b/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"
       }
     },
diff --git a/client/package.json b/client/package.json
index 59d524c..88c655f 100644
--- a/client/package.json
+++ b/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": {
diff --git a/client/src/components/Game/GameBoard.js b/client/src/components/Game/GameBoard.js
index 5103d0e..e42ace2 100644
--- a/client/src/components/Game/GameBoard.js
+++ b/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'}
diff --git a/client/src/components/GameConfigForms/LocalMultiForm.js b/client/src/components/GameConfigForms/LocalMultiForm.js
index 52aa568..b9644bf 100644
--- a/client/src/components/GameConfigForms/LocalMultiForm.js
+++ b/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>
         </>
     )