in progress: ui for viewing player resources

src/components/Card/Card.tsx

@@ -1,11 +1,11 @@
-import { CardData } from '../../util/types';
+import { CardData, StateProps } from '../../util/types';
 import { v4 } from 'uuid';
 
-type CardProps = {
+interface CardProps extends StateProps {
     data: CardData
 }
 
-export default function Card({ data }: CardProps) {
+export default function Card({ data, state, setState }: CardProps) {
     return (
         <div className={`card`}>
             <div className="top-row">
@@ -18,6 +18,7 @@ export default function Card({ data }: CardProps) {
                         return (data.resourceCost[key] > 0) && <p key={v4()}>{key}: {data.resourceCost[key]}</p>
                     })
                 }
+                { state.actions.buyCard.active && <button>Buy This Card</button> }
             </div>
         </div>
     )

src/components/Card/CardRow.tsx

@@ -1,18 +1,35 @@
 import { v4 } from 'uuid';
-import { CardData } from "../../util/types"
+import { CardData, StateProps } from "../../util/types"
 import Card from "../Card/Card"
 
-interface CardRowProps {
+interface CardRowProps extends StateProps {
-    tier: number,
+    tier: number
-    cards: CardData[]
 }
 
-export default function CardRow({tier, cards}: CardRowProps) {
+export default function CardRow({tier, state, setState}: CardRowProps) {
+    let cards: Array<CardData>
+    switch (tier) {
+        case 1:
+            cards = state.gameboard.cardRows.tierOne;
+            break;
+        case 2:
+            cards = state.gameboard.cardRows.tierTwo;
+            break;
+        case 3:
+            cards = state.gameboard.cardRows.tierThree;
+            break;
+        default:
+            cards = new Array<CardData>;
+            break;
+    }
+
     return (
         <div className={`card-row tier-${tier}`}>
             <p>Tier: {tier}</p>
             <div className="card-row-cards-visible">
-                { cards && cards.map((cardData: CardData) => <Card key={v4()} data={cardData} />) }
+                { cards && cards.map((cardData: CardData) => {
+                    return <Card key={v4()} data={cardData} state={state} setState={setState} />
+                })}
             </div>
         </div>
     )

src/components/Gameboard/Gameboard.tsx

@@ -79,9 +79,9 @@ export default function Gameboard({ state, setState }: StateProps) {
                 <div className="gameboard-rows">
                     <strong>Round: {state.round}</strong>
                     <Nobles state={state} setState={setState} />
-                    <CardRow tier={3} cards={state.gameboard.cardRows.tierThree} />
+                    <CardRow tier={3} state={state} setState={setState} />
-                    <CardRow tier={2} cards={state.gameboard.cardRows.tierTwo} />
+                    <CardRow tier={2} state={state} setState={setState} />
-                    <CardRow tier={1} cards={state.gameboard.cardRows.tierOne} />
+                    <CardRow tier={1} state={state} setState={setState} />
                     <SelectionView state={state} setState={setState} />
                     <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
                     {/* @ts-ignore */}

src/components/Player/ActionMethods.ts

@@ -2,27 +2,6 @@ import { AppState, PlayerData, ResourceCost, setStateType } from "../../util/typ
 import { turnOrderUtil } from "../../util/TurnOrderUtil";
 import { initialActions } from "../../util/stateSetters";
 
-export const _getChips = (resource: string | Array<keyof ResourceCost>, dynamic: PlayerData | undefined, setState: setStateType) => {
-    if (!dynamic || !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
-        }
-    })
-}
-
 export const validateChips = (state: AppState): boolean => {
     if (!state.actions.getChips.active || !state.actions.getChips.selection) return false;
 
@@ -50,13 +29,7 @@ export const validateChips = (state: AppState): boolean => {
     return true;
 }
 
-export const getChips = (state: AppState, setState: setStateType): boolean => {
+export const getChips = (state: AppState, setState: setStateType) => {
-    /**
-     * features:
-     * update their inventory state
-     * update the total available resources
-    */
-
     let targetPlayer: PlayerData;
 
     for (let each in state.players) {
@@ -88,10 +61,8 @@ export const getChips = (state: AppState, setState: setStateType): boolean => {
                     }
                 }
             }
-
         }
 
-
         return {
             ...prev,
             round: (roundIncrement ? prev.round + 1 : prev.round),
@@ -103,10 +74,6 @@ export const getChips = (state: AppState, setState: setStateType): boolean => {
             actions: initialActions
         }
     })
-
-    console.log(state.players);
-
-    return true;
 }
 
 export const buyCard = () => {

src/components/Player/Player.tsx

@@ -12,7 +12,9 @@ export default function Player({ player, state, setState, setActionState }: Play
     const [prompt, setPrompt] = useState("Your turn! Select an action type below.");
     const [actionSelection, setActionSelection] = useState(-1);
 
-    useEffect(() => setDynamic(state.players.find((element: PlayerData) => element.id === player.id)), [state]);
+    useEffect(() => {
+        setDynamic(state.players.find((element: PlayerData) => element.id === player.id))
+    }, [state]);
 
     useEffect(() => {
         setActionState(actionSelection, dynamic);
@@ -40,7 +42,12 @@ export default function Player({ player, state, setState, setActionState }: Play
             <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-cards">
+                <strong>{dynamic?.name}'s Resources</strong>
+                { dynamic && Object.entries(dynamic?.inventory).map(([key,value]) => {
+                    return value > 0 && <p key={v4()}>{key}: {value}</p>
+                })}
+            </div>
             <div className="player-resources"></div>
         </div>
     )