From f53645be8b3e8e7bcb08656faca6816f0e9a47a2 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Sat, 16 Apr 2022 13:58:27 -0500
Subject: [PATCH] local multi form writes to store

---
 client/src/App.js                             | 19 ++++++++------
 client/src/components/Game/GameBoard.js       |  7 +++--
 .../GameConfigForms/CpuMultiForm.js           |  1 +
 .../GameConfigForms/LocalMultiForm.js         | 26 ++++++++++++++++++-
 client/src/components/Welcome.js              |  5 +++-
 client/src/store/Store.js                     | 21 +++++++++------
 6 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index f6bacb7..ce93ea7 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,17 +3,20 @@ import { Routes, Route, BrowserRouter } from 'react-router-dom';
 
 import Welcome from './components/Welcome';
 import FulLGameView from './components/Game/FullGameView';
+import Store from './store/Store';
 
 function App() {
   return (
-    <div className="App">
-      <BrowserRouter>
-          <Routes>
-            <Route path="/" element={<Welcome />}/>
-            <Route path="/gameboard" element={<FulLGameView />}/>
-          </Routes>
-        </BrowserRouter>
-      </div>
+    <Store>
+      <div className="App">
+        <BrowserRouter>
+            <Routes>
+              <Route path="/" element={<Welcome />}/>
+              <Route path="/gameboard" element={<FulLGameView />}/>
+            </Routes>
+          </BrowserRouter>
+        </div>
+      </Store>
   );
 }
 
diff --git a/client/src/components/Game/GameBoard.js b/client/src/components/Game/GameBoard.js
index e557396..5103d0e 100644
--- a/client/src/components/Game/GameBoard.js
+++ b/client/src/components/Game/GameBoard.js
@@ -1,12 +1,14 @@
+import { useContext, useEffect, useState } from 'react';
+import { Context } from '../../store/Store';
 import '../../styles/GameBoard.css';
-import { useEffect, useState } from 'react';
-
 import Card from '../Cards/Card';
 import { TierOneDeck } from '../../store/TierOneDeck';
 import { TierTwoDeck } from '../../store/TierTwoDeck';
 import { TierThreeDeck } from '../../store/TierThreeDeck';
 
 export default function GameBoard() {
+    const [state, dispatch] = useContext(Context);
+
     const [trigger, setTrigger] = useState(true);
     const [tierThree, setTierThree] = useState(null);
     const [tierTwo, setTierTwo] = useState(null);
@@ -56,6 +58,7 @@ export default function GameBoard() {
     return (
         <div className="gameboard">
             <h1 className="gameboard-title">SPLINTER</h1>
+            <h2>Players: {state.players}</h2>
 
             <div className="gameboard-row">
                 {tierThree || 'Loading'}
diff --git a/client/src/components/GameConfigForms/CpuMultiForm.js b/client/src/components/GameConfigForms/CpuMultiForm.js
index 03892ef..95780ea 100644
--- a/client/src/components/GameConfigForms/CpuMultiForm.js
+++ b/client/src/components/GameConfigForms/CpuMultiForm.js
@@ -2,6 +2,7 @@ export default function CpuMultiForm() {
     return (
         <form className="local-multi-form">
             <h1>AI and stuff?</h1>
+            <h2>Coming soon!</h2>
         </form>
     )
 }
\ No newline at end of file
diff --git a/client/src/components/GameConfigForms/LocalMultiForm.js b/client/src/components/GameConfigForms/LocalMultiForm.js
index 43ea700..52aa568 100644
--- a/client/src/components/GameConfigForms/LocalMultiForm.js
+++ b/client/src/components/GameConfigForms/LocalMultiForm.js
@@ -1,6 +1,9 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useContext } from "react";
+import { Context } from "../../store/Store";
 
 export default function LocalMultiForm() {
+    const [state, dispatch] = useContext(Context);
+    
     const [players, setPlayers] = useState(null);
     const [formVariant, setFormVariant] = useState(null);
     const [playerOne, setPlayerOne] = useState('');
@@ -8,6 +11,8 @@ export default function LocalMultiForm() {
     const [playerThree, setPlayerThree] = useState('');
     const [playerFour, setPlayerFour] = useState('');
 
+    const allPlayerNames = [playerOne, playerTwo, playerThree, playerFour];
+
     const formVariants = [
         <>   { /* Fragment, expects to be concatenated as necessary within a <form> element */ }
                 { /* Player one and two base; index 0 */ }
@@ -46,6 +51,23 @@ export default function LocalMultiForm() {
                 break;
         }
     }, [players]);
+    
+    const handleStartGame = () => {
+        let toSubmit = [];
+        let iter = 0;
+        while (iter < players) {
+            toSubmit.push(allPlayerNames[iter]);
+            iter++;
+        }
+
+        if (toSubmit.length < players) return;
+
+        for (let item of toSubmit) {
+            if (!item) return;
+        }
+
+        dispatch({ type: "ADD PLAYERS", payload: toSubmit });
+    }
 
     return (
         <>
@@ -69,6 +91,8 @@ export default function LocalMultiForm() {
         <form className="player-input" style={{paddingBottom: '1rem'}}>
             {formVariant}
         </form>
+        <button href='/' onClick={handleStartGame}>Start game</button>
+        <button onClick={() => dispatch({type: "PRINT PLAYERS"})}>Get Players</button>
         </>
     )
 }
\ No newline at end of file
diff --git a/client/src/components/Welcome.js b/client/src/components/Welcome.js
index fec6a45..fdc4ac2 100644
--- a/client/src/components/Welcome.js
+++ b/client/src/components/Welcome.js
@@ -1,8 +1,11 @@
-import { useState, useRef } from "react"
+import { useState, useRef, useContext } from "react"
 import LocalMultiForm from "./GameConfigForms/LocalMultiForm";
 import CpuMultiForm from "./GameConfigForms/CpuMultiForm";
+import { Context } from "../store/Store";
 
 export default function Welcome() {
+    const [state, dispatch] = useContext(Context);
+
     const [localMulti, setLocalMulti] = useState(false);
     const [cpuMulti, setCpuMulti] = useState(false);
 
diff --git a/client/src/store/Store.js b/client/src/store/Store.js
index 3b617f3..8f4b674 100644
--- a/client/src/store/Store.js
+++ b/client/src/store/Store.js
@@ -1,12 +1,12 @@
 import { useReducer, createContext } from "react"
 
-import { TierOneDeck } from "../../store/TierOneDeck"
-import { TierTwoDeck } from "../../store/TierTwoDeck"
-import { TierThreeDeck } from "../../store/TierThreeDeck"
-import { Spirits } from "./Spirits"
+import { TierOneDeck } from './TierOneDeck';
+import { TierTwoDeck } from './TierTwoDeck';
+import { TierThreeDeck } from './TierThreeDeck';
+import { Spirits } from '../components/Game/Spirits';
 
 const initialGameState = {
-    players: [],
+    players: ['no players'],
     materials: {
         cards: {
             tierOneRemaining: TierOneDeck,
@@ -27,13 +27,18 @@ const initialGameState = {
 
 const reducer = (state, action) => {
     switch (action.type) {
-        case "ADD PLAYER":
-            state.players.push(action.payload);
-            break;
+        case "GET PLAYERS":
+            return state;
+        case "ADD PLAYERS":
+            state.players = action.payload;
+            return state;
         case "UPDATE PLAYER MATERIALS":
             // find player in array of players and update their resources
             // update list of available materials in state
             break;
+        case "PRINT PLAYERS":
+            console.log(state.players);
+            return state;
         default:
             break;
     }