101 lines
3.7 KiB
TypeScript
101 lines
3.7 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { v4 } from "uuid";
|
|
import { setStateAwaitAction, setStateBuyCard, setStateGetChips, setStateReserveCard } from "../../hooks/stateSetters";
|
|
import { hasMaxReserved } from "./ActionMethods/reserveCardActions";
|
|
import { hasMaxChips } from "./ActionMethods/getChipsActions";
|
|
import { CardData, PlayerData } from "../../util/types"
|
|
import { PlayerProps } from "../../util/propTypes";
|
|
import Card from "../Card/Card";
|
|
|
|
export default function Player({ player, state, setState }: PlayerProps) {
|
|
const [dynamic, setDynamic] = useState<PlayerData>();
|
|
const [cardView, setCardView] = useState(<p>Cards:</p>);
|
|
const [reservedView, setReservedView] = useState(<p>Reserved cards:</p>);
|
|
|
|
useEffect(() => {
|
|
setDynamic(state.players.find((element: PlayerData) => element.id === player.id))
|
|
}, [state]);
|
|
|
|
useEffect(() => {
|
|
dynamic && setCardView(
|
|
<div className="card-view">
|
|
<p>Cards:</p>
|
|
{
|
|
Object.entries(dynamic.cards).map(([key, value]) => value.length > 0 && <p className={`mini-card ${key}`} key={v4()}>{key}: {value.length}</p>)
|
|
}
|
|
</div>
|
|
)
|
|
|
|
dynamic && setReservedView(
|
|
<div className="reserved-card-view">
|
|
<p>Reserved cards:</p>
|
|
{ dynamic.reservedCards?.map((data: CardData) => <Card key={v4()} data={data} state={state} setState={setState} reserved={true} />) }
|
|
</div>
|
|
)
|
|
}, [dynamic, setState])
|
|
|
|
const handleClick = (actionSelection: number) => {
|
|
switch (actionSelection) {
|
|
case 0:
|
|
setState((prev) => setStateGetChips(prev));
|
|
break;
|
|
case 1:
|
|
setState((prev) => setStateBuyCard(prev));
|
|
break;
|
|
case 2:
|
|
setState((prev) => setStateReserveCard(prev));
|
|
break;
|
|
default:
|
|
setState((prev) => setStateAwaitAction(prev));
|
|
break;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="player-ui" key={v4()}>
|
|
<p className="subheader">Name: {player.name} {player.starter && "(round starter)"}</p>
|
|
<p>Score: {dynamic && dynamic.points}</p>
|
|
|
|
<section className="turn-and-action-based">
|
|
<button
|
|
disabled={(dynamic && hasMaxChips(dynamic)) || (!dynamic?.turnActive)}
|
|
onClick={() => handleClick(0)}>
|
|
Get Chips
|
|
</button>
|
|
|
|
<button
|
|
disabled={!dynamic?.turnActive}
|
|
onClick={() => handleClick(1)}>
|
|
Buy Card
|
|
</button>
|
|
|
|
<button
|
|
disabled={(dynamic && hasMaxReserved(dynamic)) || (!dynamic?.turnActive)}
|
|
onClick={() => handleClick(2)}>
|
|
Reserve Card
|
|
</button>
|
|
</section>
|
|
|
|
<section className="resources">
|
|
<div className="player-chips">
|
|
<p>Chips:</p>
|
|
<div className="player-chips-enum">
|
|
{ dynamic && Object.entries(dynamic.inventory).map(([key,value]) => {
|
|
return value > 0 && (
|
|
<p key={v4()} className={`player-chip-${key}`}>{value}</p>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="player-cards">
|
|
{dynamic && cardView}
|
|
</div>
|
|
|
|
<div className="reserved-cards">
|
|
{dynamic && reservedView}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
)
|
|
} |