restructuring

src/components/Card/Card.tsx

@@ -1,12 +1,9 @@
 import { v4 } from 'uuid';
-import { CardData, StateProps } from '../../util/types';
+import { CardProps } from '../../util/propTypes';
+import { ResourceCost } from '../../util/types';
 import { buyCardActions } from '../Player/ActionMethods';
 const { buyCard, tooExpensive } = buyCardActions;
 
-interface CardProps extends StateProps {
-    data: CardData
-}
-
 export default function Card({ data, state, setState }: CardProps) {
     return (
         <div className={`card`}>
@@ -15,9 +12,9 @@ export default function Card({ data, state, setState }: CardProps) {
                 <p>Point value: {data.points || 0}</p>
                 <p>Cost:</p>
                 {
-                    Object.keys(data.resourceCost).map((key) => {
+                    Object.keys(data.resourceCost).map((key: keyof ResourceCost | string) => {
                         // @ts-ignore
-                        return (data.resourceCost[key] > 0) && <p key={v4()}>{key}: {data.resourceCost[key]}</p>
+                        return (data.resourceCost[key as keyof ResourceCost] > 0) && <p key={v4()}>{key}: {data.resourceCost[key as keyof ResourceCost]}</p>
                     })
                 }
                 { state.actions.buyCard.active &&

src/components/Card/CardRow.tsx

@@ -1,10 +1,7 @@
-import { v4 } from 'uuid';
+import { CardRowProps } from '../../util/propTypes';
-import { CardData, StateProps } from "../../util/types"
+import { CardData } from "../../util/types"
 import Card from "../Card/Card"
-
+import { v4 } from 'uuid';
-interface CardRowProps extends StateProps {
-    tier: number
-}
 
 export default function CardRow({tier, state, setState}: CardRowProps) {
     let cards: Array<CardData>

src/components/Card/MiniCard.tsx

@@ -0,0 +1,3 @@
+export const MiniCard = () => {
+    
+}

src/components/GameConstructor.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
-import { CardData, NobleData, PlayerData, StateProps } from "../util/types";
+import { CardData, NobleData, PlayerData } from "../util/types";
+import { StateProps } from '../util/propTypes';
 
 interface InputState {
     playerOne: PlayerInput

src/components/Gameboard/Gameboard.tsx

@@ -1,8 +1,9 @@
 // types, data, utils
-import { AppState, PlayerData, ResourceCost, SetActionType, StateProps } from '../../util/types';
+import { AppState, PlayerData, ResourceCost, SetActionType } from '../../util/types';
 import { setStateBuyCard, setStateGetChips, setStateReserveCard } from '../../util/stateSetters';
 import { useCallback, useEffect, useState } from 'react';
 import { getChipsActions } from '../Player/ActionMethods';
+import { StateProps } from '../../util/propTypes';
 const { validateChips } = getChipsActions;
 
 // components

src/components/Gameboard/Nobles.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { v4 } from "uuid";
-import { NobleData, ResourceCost, StateProps } from "../../util/types";
+import { NobleData, ResourceCost } from "../../util/types";
+import { StateProps } from "../../util/propTypes";
 import "./Nobles.css"
 
 export default function Nobles({ state, setState }: StateProps) {

src/components/Player/AllPlayers.tsx

@@ -1,17 +1,18 @@
 import Player from "./Player";
 import { v4 } from "uuid";
 import "./AllPlayers.css"
-import { PlayerData, SetActionType, StateProps } from "../../util/types";
+import { PlayerData } from "../../util/types";
-
+import { useState } from "react";
-interface AllPlayersProps extends StateProps {
+import { AllPlayersProps } from "../../util/propTypes";
-    setActionState: (value: SetActionType, player?: PlayerData) => void
-}
 
 export default function AllPlayers({ state, setState, setActionState }: AllPlayersProps) {
+    const [activePlayer, setActivePlayer] = useState();
+    const playerPool = state.players?.map((player: PlayerData) => <Player key={v4()} player={player} state={state} setState={setState} setActionState={setActionState} />);
+
     return (
         <div className="all-players">
             {
-                state.players?.map((player: PlayerData) => <Player key={v4()} player={player} state={state} setState={setState} setActionState={setActionState} />)
+                playerPool
             }
         </div>
     )

src/components/Player/Player.tsx

@@ -1,12 +1,8 @@
-import { PlayerData, SetActionType, StateProps } from "../../util/types"
+import { PlayerProps } from "../../util/propTypes";
+import { PlayerData } from "../../util/types"
 import { useEffect, useState } from "react";
 import { v4 } from "uuid";
 
-interface PlayerProps extends StateProps {
-    player: PlayerData,
-    setActionState: (value: SetActionType, player?: PlayerData) => void
-}
-
 export default function Player({ player, state, setState, setActionState }: PlayerProps) {
     const [dynamic, setDynamic] = useState<PlayerData>();
     const [prompt, setPrompt] = useState("Your turn! Select an action type below.");
@@ -33,22 +29,37 @@ export default function Player({ player, state, setState, setActionState }: Play
     return (
         <div className="player-ui" key={v4()}>
             {/* Static Data */}
-            <p>Name: {player.name}</p>
+            <section className="player-constants">
-            <p>Score: {player.points}</p>
+                <p>Name: {player.name}</p>
-            <p>Is {player.starter || "not"} round starter</p>
+                <p>Score: {player.points}</p>
+                <p>Is {player.starter || "not"} round starter</p>
+            </section>
 
             {/* Dynamic data from state */}
-            <p>{dynamic?.turnActive ? prompt : '...'}</p>
+            <section className="turn-and-action-based">
-            <button onClick={() => setActionSelection(0)}>Get Chips</button>
+                <p>{dynamic?.turnActive ? prompt : '...'}</p>
-            <button onClick={() => setActionSelection(1)}>Buy Card</button>
+                <button onClick={() => setActionSelection(0)}>Get Chips</button>
-            <button onClick={() => setActionSelection(2)}>Reserve Card</button>
+                <button onClick={() => setActionSelection(1)}>Buy Card</button>
-            <div className="player-cards">
+                <button onClick={() => setActionSelection(2)}>Reserve Card</button>
+            </section>
+
+            <section className="resources">
                 <strong>{dynamic?.name}'s Resources</strong>
-                { dynamic && Object.entries(dynamic?.inventory).map(([key,value]) => {
+
-                    return value > 0 && <p key={v4()}>{key}: {value}</p>
+                <div className="player-chips">
-                })}
+                    { dynamic && Object.entries(dynamic?.inventory).map(([key,value]) => {
-            </div>
+                        return value > 0 && <p key={v4()}>{key}: {value}</p>
-            <div className="player-resources"></div>
+                    })}
+                </div>
+
+                <div className="player-cards">
+                    { dynamic && dynamic.cards.length > 0 && Object.entries(dynamic.cards).map(([key, value]) => {
+                        return (
+                            <p key={v4()}></p>
+                        )
+                    })}
+                </div>
+            </section>
         </div>
     )
 }

src/components/Resources/AvailableChips.tsx

@@ -1,13 +1,9 @@
-import { AppState, ResourceCost, StateProps } from "../../util/types";
+import { ResourceProps } from "../../util/propTypes";
+import { ResourceCost } from "../../util/types";
 import { useEffect } from "react";
 import { v4 } from "uuid";
 import "./AvailableChips.css"
 import { setStateGetChips } from "../../util/stateSetters";
-// import { validateChips } from "../Player/ActionMethods";
-
-interface ResourceProps extends StateProps {
-    liftSelection: (value: keyof ResourceCost) => void
-}
 
 export default function AvailableChips({ state, setState, liftSelection }: ResourceProps) {
     useEffect(() => {

src/components/Resources/ViewHTML.tsx

@@ -1,7 +1,8 @@
 import { v4 } from "uuid";
 import { useEffect, useState } from "react";
 import { setStateGetChips } from "../../util/stateSetters";
-import { ResourceCost, StateProps } from "../../util/types";
+import { StateProps } from "../../util/propTypes";
+import { ResourceCost } from "../../util/types";
 import { getChipsActions } from "../Player/ActionMethods";
 const { getChips } = getChipsActions;
 

src/util/propTypes.ts

@@ -0,0 +1,27 @@
+import { AppState, CardData, PlayerData, ResourceCost, SetActionType, setStateType } from "./types";
+
+export interface StateProps {
+    state: AppState,
+    setState: setStateType
+}
+
+export interface CardProps extends StateProps {
+    data: CardData
+}
+
+export interface CardRowProps extends StateProps {
+    tier: number
+}
+
+export interface AllPlayersProps extends StateProps {
+    setActionState: (value: SetActionType, player?: PlayerData) => void
+}
+
+export interface PlayerProps extends AllPlayersProps {
+    player: PlayerData
+}
+
+export interface ResourceProps extends StateProps {
+    liftSelection: (value: keyof ResourceCost) => void
+}
+

src/util/types.ts

@@ -48,11 +48,6 @@ export enum SetActionType {
 
 export type setStateType = Dispatch<SetStateAction<AppState>>
 
-export interface StateProps {
-    state: AppState,
-    setState: setStateType
-}
-
 export interface GameInformation {
     players: PlayerData[],
     nobles: NobleData[],