resource selection lifted to gameboard state

This commit is contained in:
Mikayla Dobson
2022-07-24 10:15:06 -05:00
parent dc603c891a
commit 30425cde91
2 changed files with 11 additions and 7 deletions

View File

@@ -12,6 +12,8 @@ export default function Gameboard({ state, setState }: StateProps) {
// callback for lifting state
const liftSelection = useCallback((value: keyof ResourceCost) => {
console.log(value)
if (!state.actions.getChips.active) return;
setState((prev: AppState) => {
@@ -55,7 +57,7 @@ export default function Gameboard({ state, setState }: StateProps) {
<CardRow tier={3} cards={state.gameboard.cardRows.tierThree} />
<CardRow tier={2} cards={state.gameboard.cardRows.tierTwo} />
<CardRow tier={1} cards={state.gameboard.cardRows.tierOne} />
<AvailableChips state={state} setState={setState} />
<AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
<AllPlayers state={state} setState={setState} />
</div>
)

View File

@@ -1,11 +1,13 @@
import { ResourceCost, StateProps } from "../../util/types";
import { v4 } from "uuid";
import "./AvailableChips.css"
import { useEffect, useState } from "react";
import { useEffect } from "react";
export default function AvailableChips({ state, setState }: StateProps) {
const [selection, setSelection] = useState([]);
interface ResourceProps extends StateProps {
liftSelection: (value: keyof ResourceCost) => void
}
export default function AvailableChips({ state, setState, liftSelection }: ResourceProps) {
useEffect(() => {
return;
}, [state])
@@ -13,11 +15,11 @@ export default function AvailableChips({ state, setState }: StateProps) {
return (
<div className="available-chips">
{
Object.keys(state.gameboard.tradingResources).map((key: string) => {
Object.keys(state.gameboard.tradingResources).map((key: string | keyof ResourceCost) => {
return (
<div key={v4()} className={`chips-${key}`}>
<button key={v4()} value={key} onClick={() => console.log(key)}>
{key}: {state.gameboard.tradingResources[key as keyof ResourceCost]}
<button key={v4()} value={key} onClick={() => liftSelection(key as keyof ResourceCost)}>
{key}: {state.gameboard.tradingResources[key]}
</button>
</div>
)