From 33736c6659c1c25735143aa9538067e3bd3ade6f Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Sun, 24 Jul 2022 11:36:37 -0500
Subject: [PATCH] in progress: ui prompt on player component

---
 src/App.tsx                            |  2 +-
 src/components/Gameboard/Gameboard.tsx | 32 +++++++++---
 src/components/Player/ActionMethods.ts |  2 +-
 src/components/Player/Player.tsx       | 43 +++++++++-------
 src/util/initialState.ts               | 29 -----------
 src/util/stateSetters.ts               | 70 ++++++++++++++++++++++++++
 src/util/types.ts                      |  1 +
 7 files changed, 123 insertions(+), 56 deletions(-)
 delete mode 100644 src/util/initialState.ts
 create mode 100644 src/util/stateSetters.ts

diff --git a/src/App.tsx b/src/App.tsx
index 9784a1e..b8a5d75 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import Gameboard from './components/Gameboard/Gameboard'
 import GameConstructor from './util/GameConstructor';
-import { initialState } from './util/initialState';
+import { initialState } from './util/stateSetters';
 import './App.css'
 
 function App() {
diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx
index 0450325..16a338a 100644
--- a/src/components/Gameboard/Gameboard.tsx
+++ b/src/components/Gameboard/Gameboard.tsx
@@ -1,10 +1,14 @@
-import { useCallback, useEffect, useState } from 'react';
+// types, data, utils
 import { AppState, PlayerData, ResourceCost, SetActionType, StateProps } from '../../util/types';
+import { setStateBuyCard, setStateGetChips, setStateReserveCard } from '../../util/stateSetters';
+import { useCallback, useEffect, useState } from 'react';
+import Nobles from './Nobles';
+
+// components
 import initializeBoard from '../../util/initializeBoard';
 import AvailableChips from '../Resources/AvailableChips';
 import AllPlayers from '../Player/AllPlayers';
 import CardRow from '../Card/CardRow';
-import Nobles from './Nobles';
 
 export default function Gameboard({ state, setState }: StateProps) {
     const [view, setView] = useState(<p>Loading...</p>);
@@ -30,16 +34,27 @@ export default function Gameboard({ state, setState }: StateProps) {
                 }
             }
         })
-
-        console.log(state);
     }, []);
 
     const setActionState = useCallback((value: SetActionType, player: PlayerData) => {
         if (!player?.turnActive) return;
-        console.log(player.name + SetActionType[value]);
+
+        switch (value) {
+            case 0:
+                if (!state.actions.getChips.active) setState((prev) => setStateGetChips(prev));
+                break;
+            case 1:
+                if (!state.actions.buyCard.active) setState((prev) => setStateBuyCard(prev));
+                break;
+            case 2:
+                if (!state.actions.reserveCard.active) setState((prev) => setStateReserveCard(prev));
+                break;
+            default:
+                break;
+        }
     }, []);
 
-    // util functions to set up initial board
+    // util functions, setup on mount
     useEffect(() => {
         initializeBoard(state, setState);
     }, [])
@@ -69,6 +84,11 @@ export default function Gameboard({ state, setState }: StateProps) {
         }
     }, [state]);
 
+    // DEBUG
+    useEffect(() => {
+        console.log(state);
+    }, [state])
+
     // render
     return view
 }
\ No newline at end of file
diff --git a/src/components/Player/ActionMethods.ts b/src/components/Player/ActionMethods.ts
index 97268a0..31c03df 100644
--- a/src/components/Player/ActionMethods.ts
+++ b/src/components/Player/ActionMethods.ts
@@ -1,7 +1,7 @@
 import { AppState, PlayerData, ResourceCost, setStateType } from "../../util/types";
 import { TurnOrderUtil } from "../../util/TurnOrderUtil";
 
-export const getChips = (resource: string, dynamic: PlayerData | undefined, setState: setStateType) => {
+export const getChips = (resource: string | Array<keyof ResourceCost>, dynamic: PlayerData | undefined, setState: setStateType) => {
     if (!dynamic || !dynamic?.turnActive) return;
 
     setState((prev: AppState) => {
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index 6dab0c0..34af27d 100644
--- a/src/components/Player/Player.tsx
+++ b/src/components/Player/Player.tsx
@@ -1,6 +1,5 @@
 import { PlayerData, SetActionType, StateProps } from "../../util/types"
 import { useEffect, useState } from "react";
-import { getChips } from "./ActionMethods";
 import { v4 } from "uuid";
 
 interface PlayerProps extends StateProps {
@@ -10,23 +9,29 @@ interface PlayerProps extends StateProps {
 
 export default function Player({ player, state, setState, setActionState }: PlayerProps) {
     const [dynamic, setDynamic] = useState<PlayerData>();
+    const [prompt, setPrompt] = useState("My turn!");
+    const [actionSelection, setActionSelection] = useState(-1);
 
     useEffect(() => setDynamic(state.players.find((element: PlayerData) => element.id === player.id)), [state]);
 
-    const handleSelection = (input: number) => {
-        switch (input) {
-            case 0:
-                setActionState(SetActionType.GETCHIPS, player);
-                getChips('ruby', dynamic, setState);
-                break;
-            case 1:
-                setActionState(SetActionType.BUYCARD, player);
-                break;
-            default:
-                setActionState(SetActionType.AWAIT, player);
-                break;
-        }
-    }
+    useEffect(() => {
+        setActionState(actionSelection, dynamic);
+        setPrompt(() => {
+            switch (actionSelection) {
+                case -1:
+                    return "My turn!"
+                case 0:
+                    return "Select up to three different chips, or two of the same color."
+                case 1:
+                    return "Buy a card from the ones above using your available resources."
+                case 2:
+                    return "Choose a card from the ones above to reserve for later purchase. \
+                    If you have less than ten chips, you may also pick up a gold chip."
+                default:
+                    return ""
+            }
+        })
+    }, [actionSelection, prompt])
 
     return (
         <div className="player-ui" key={v4()}>
@@ -36,10 +41,10 @@ export default function Player({ player, state, setState, setActionState }: Play
             <p>Is {player.starter || "not"} round starter</p>
 
             {/* Dynamic data from state */}
-            <p>{dynamic?.turnActive ? "My turn!" : "..."}</p>
-            <button onClick={() => handleSelection(0)}>Get Chips</button>
-            <button onClick={() => handleSelection(1)}>Buy Card</button>
-            <button onClick={() => handleSelection(2)}>Reserve Card</button>
+            {dynamic?.turnActive ? <p>{prompt}</p> : <p>...</p>}
+            <button onClick={() => setActionSelection(0)}>Get Chips</button>
+            <button onClick={() => setActionSelection(1)}>Buy Card</button>
+            <button onClick={() => setActionSelection(2)}>Reserve Card</button>
             <div className="player-cards"></div>
             <div className="player-resources"></div>
         </div>
diff --git a/src/util/initialState.ts b/src/util/initialState.ts
deleted file mode 100644
index d718873..0000000
--- a/src/util/initialState.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { CardData, NobleData, PlayerData } from "./types";
-import CardDeck from '../data/cards.json';
-
-export const initialState = {
-    gameboard: {
-        nobles: new Array<NobleData>,
-        cardRows: {
-            tierOne: new Array<CardData>,
-            tierTwo: new Array<CardData>,
-            tierThree: new Array<CardData>,
-        },
-        tradingResources: {
-            ruby: 7,
-            sapphire: 7,
-            emerald: 7,
-            diamond: 7,
-            onyx: 7,
-            gold: 5
-        },
-        deck: CardDeck,
-    },
-    round: 1,
-    players: new Array<PlayerData>,
-    actions: {
-        buyCard: { active: false },
-        getChips: { active: false },
-        reserveCard: { active: false }
-    }
-}
\ No newline at end of file
diff --git a/src/util/stateSetters.ts b/src/util/stateSetters.ts
new file mode 100644
index 0000000..6fe152f
--- /dev/null
+++ b/src/util/stateSetters.ts
@@ -0,0 +1,70 @@
+import { AppState, CardData, NobleData, PlayerData, ResourceCost } from "./types";
+import CardDeck from '../data/cards.json';
+
+export const initialState = {
+    gameboard: {
+        nobles: new Array<NobleData>,
+        cardRows: {
+            tierOne: new Array<CardData>,
+            tierTwo: new Array<CardData>,
+            tierThree: new Array<CardData>,
+        },
+        tradingResources: {
+            ruby: 7,
+            sapphire: 7,
+            emerald: 7,
+            diamond: 7,
+            onyx: 7,
+            gold: 5
+        },
+        deck: CardDeck,
+    },
+    round: 1,
+    players: new Array<PlayerData>,
+    actions: {
+        buyCard: { active: false },
+        getChips: { active: false },
+        reserveCard: { active: false }
+    }
+}
+
+export const setStateGetChips = (prev: AppState) => {
+    return {
+        ...prev,
+        actions: {
+            ...initialState.actions,
+            getChips: {
+                active: true,
+                selection: new Array<keyof ResourceCost>,
+                valid: false
+            }
+        }
+    }
+}
+
+export const setStateBuyCard = (prev: AppState) => {
+    return {
+        ...prev,
+        actions: {
+            ...initialState.actions,
+            buyCard: {
+                active: true,
+                valid: false
+            }
+        }
+    }
+}
+
+export const setStateReserveCard = (prev: AppState) => {
+    return {
+        ...prev,
+        actions: {
+            ...initialState.actions,
+            reserveCard: {
+                active: true,
+                includeGold: false,
+                valid: false
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/util/types.ts b/src/util/types.ts
index d2dbd71..96a8a1e 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -34,6 +34,7 @@ interface StateActions {
         active: boolean
         selection?: CardData
         includeGold?: boolean
+        valid?: boolean
         confirm?: () => void
     }
 }