innocuous-symmetry/splendor-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implemented usePreviousPlayer, preparing to implement gold chip funcitonality

Browse Source
This commit is contained in:
Mikayla Dobson
2022-08-09 14:27:59 -05:00
parent fd6d96737a
commit 35931eb8e5
22 changed files with 78 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@@ -1,11 +1,11 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { initialState } from './util/stateSetters';
import { useEffect, useState } from 'react'
import { initialState } from './hooks/stateSetters';
import { useState } from 'react'
import Gameboard from './components/Gameboard/Gameboard'
import GameConstructor from './components/GameConstructor';
import './App.css'
import ResumeGame from './components/ResumeGame';
import './App.css'
function App() {
const [state, setState] = useState(initialState);

2
src/components/Card/Card.tsx
View File

@@ -1,7 +1,7 @@
import { v4 } from 'uuid';
import { CardProps } from '../../util/propTypes';
import { ResourceCost } from '../../util/types';
import { useCurrentPlayer } from '../../util/useCurrentPlayer';
import { useCurrentPlayer } from '../../hooks/useCurrentPlayer';
import { buyCardActions } from '../Player/ActionMethods';
import { hasMaxReserved, reserveCard } from '../Player/ActionMethods/reserveCardActions';
const { buyCard, tooExpensive } = buyCardActions;

2
src/components/Gameboard/Gameboard.tsx
View File

@@ -6,7 +6,7 @@ import { StateProps } from '../../util/propTypes';
import { Link } from 'react-router-dom';
// components
import Nobles from './Nobles';
import Nobles from '../Nobles/Nobles';
import initializeBoard, { setCardRows } from '../../util/initializeBoard';
import AvailableChips from '../Resources/AvailableChips';
import AllPlayers from '../Player/AllPlayers';

2
src/components/Gameboard/gameboard.test.ts
View File

@@ -1,6 +1,6 @@
import { expect, it, describe, vi } from 'vitest';
import initializeBoard from '../../util/initializeBoard';
import { initialState } from '../../util/stateSetters';
import { initialState } from '../../hooks/stateSetters';
import { AppState, setStateType } from '../../util/types';
describe('game config', () => {

0
src/components/Gameboard/Nobles.css → src/components/Nobles/Nobles.css
View File

0
src/components/Gameboard/Nobles.test.ts → src/components/Nobles/Nobles.test.ts
View File

2
src/components/Gameboard/Nobles.tsx → src/components/Nobles/Nobles.tsx
View File

@@ -1,7 +1,7 @@
import { v4 } from "uuid";
import { NobleData, ResourceCost } from "../../util/types";
import { StateProps } from "../../util/propTypes";
import "./Nobles.css"
import "../Nobles/Nobles.css"
export default function Nobles({ state }: StateProps) {
if (!state.gameboard.nobles.length) {

4
src/util/canPickUpNoble.ts → src/components/Nobles/canPickUpNoble.ts
View File

@@ -1,5 +1,5 @@
import getTotalBuyingPower from "./getTotalBuyingPower";
import { NobleData, PlayerData, ResourceCost } from "./types";
import getTotalBuyingPower from "../../util/getTotalBuyingPower";
import { NobleData, PlayerData, ResourceCost } from "../../util/types";
export const canPickUpNoble = (player: PlayerData, noble: NobleData) => {
const totalBuyingPower = getTotalBuyingPower(player);

2
src/components/Player/ActionMethods/buyCard.test.tsx
View File

@@ -1,7 +1,7 @@
import { expensiveCard, midGameCardOne, midGameCardTwo, midGameState, mockPlayerOne, mockPlayerTwo, mockState } from '../../../util/testUtils';
import { buyCard, tooExpensive } from './buyCardActions';
import getTotalBuyingPower from '../../../util/getTotalBuyingPower';
import { useCurrentPlayer } from '../../../util/useCurrentPlayer';
import { useCurrentPlayer } from '../../../hooks/useCurrentPlayer';
import { AppState, CardData, PlayerData, ResourceCost } from '../../../util/types';
import { test, expect, describe, vi, afterEach } from 'vitest';
import { renderHook } from "@testing-library/react";

18
src/components/Player/ActionMethods/buyCardActions.ts
View File

@@ -1,9 +1,10 @@
import { turnOrderUtil } from "../../../util/turnOrderUtil";
import { AppState, CardData, FullDeck, ResourceCost, setStateType } from "../../../util/types";
import { useCurrentPlayer } from "../../../util/useCurrentPlayer";
import { useCurrentPlayer } from "../../../hooks/useCurrentPlayer";
import getTotalBuyingPower from "../../../util/getTotalBuyingPower";
import { initialActions, setStateGetNoble } from "../../../util/stateSetters";
import { canPickUpNoble } from "../../../util/canPickUpNoble";
import { initialActions, setStateGetNoble } from "../../../hooks/stateSetters";
import { canPickUpNoble } from "../../Nobles/canPickUpNoble";
import usePreviousPlayer from "../../../hooks/usePreviousPlayer";
export const tooExpensive = (card: CardData, state: AppState): boolean => {
const currentPlayer = useCurrentPlayer(state);
@@ -95,10 +96,13 @@ export const buyCard = (state: AppState, setState: setStateType, card: CardData)
}
});
for (let each of state.gameboard.nobles) {
if (canPickUpNoble(currentPlayer, each)) {
console.log(`${currentPlayer.name} can pick up noble ${state.gameboard.nobles.indexOf(each)}`);
setState((prev) => setStateGetNoble(prev, each));
// iterates through gameboard nobles to determine if any can be acquired
for (let noble of state.gameboard.nobles) {
const previousPlayer = usePreviousPlayer(state);
if (!previousPlayer) return;
if (canPickUpNoble(previousPlayer, noble)) {
setState((prev) => setStateGetNoble(prev, noble, previousPlayer));
}
}
}

2
src/components/Player/ActionMethods/getChips.test.ts
View File

@@ -1,5 +1,5 @@
import { describe, expect, it, test } from "vitest";
import { initialActions } from "../../../util/stateSetters";
import { initialActions } from "../../../hooks/stateSetters";
import { mockPlayerOne, mockState } from "../../../util/testUtils";
import { AppState, PlayerData } from "../../../util/types";
import { hasMaxChips, validateChips } from "./getChipsActions";

4
src/components/Player/ActionMethods/getChipsActions.ts
View File

@@ -1,8 +1,8 @@
import { AppState, PlayerData, setStateType } from '../../../util/types';
import { useCurrentPlayer } from '../../../util/useCurrentPlayer';
import { useCurrentPlayer } from '../../../hooks/useCurrentPlayer';
// @ts-ignore
import { turnOrderUtil } from '../../../util/turnOrderUtil';
import { initialActions } from "../../../util/stateSetters";
import { initialActions } from "../../../hooks/stateSetters";
export const hasMaxChips = (player: PlayerData | null): boolean => {
if (!player) return true;

4
src/components/Player/ActionMethods/reserveCardActions.ts
View File

@@ -1,8 +1,8 @@
import cardTierToKey from "../../../util/cardTierToKey";
import { initialActions } from "../../../util/stateSetters";
import { initialActions } from "../../../hooks/stateSetters";
import { turnOrderUtil } from "../../../util/turnOrderUtil";
import { AppState, CardData, FullDeck, PlayerData, setStateType } from "../../../util/types";
import { useCurrentPlayer } from "../../../util/useCurrentPlayer";
import { useCurrentPlayer } from "../../../hooks/useCurrentPlayer";
export const goldAllowable = (player: PlayerData | null): boolean => {
if (!player) return false;

25
src/components/Player/Player.tsx
View File

@@ -1,4 +1,4 @@
import { setStateAwaitAction, setStateBuyCard, setStateGetChips, setStateReserveCard } from "../../util/stateSetters";
import { setStateAwaitAction, setStateBuyCard, setStateGetChips, setStateReserveCard } from "../../hooks/stateSetters";
import { useEffect, useState } from "react";
import { PlayerProps } from "../../util/propTypes";
import { CardData, PlayerData } from "../../util/types"
@@ -88,9 +88,26 @@ export default function Player({ player, state, setState }: PlayerProps) {
<section className="turn-and-action-based">
<p>Score: {dynamic && dynamic.points}</p>
<p>{dynamic?.turnActive ? "It's your turn!" : "..."}</p>
<button disabled={dynamic && hasMaxChips(dynamic)} onClick={() => handleClick(0)}>Get Chips</button>
<button onClick={() => handleClick(1)}>Buy Card</button>
<button disabled={dynamic && hasMaxReserved(dynamic)} onClick={() => handleClick(2)}>Reserve Card</button>
{/* Player actions */}
<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">

16
src/components/Resources/AvailableChips.tsx
View File

@@ -1,26 +1,24 @@
import { ResourceProps } from "../../util/propTypes";
import { ResourceCost } from "../../util/types";
import { useEffect } from "react";
import { v4 } from "uuid";
import "./AvailableChips.css"
export default function AvailableChips({ state, setState, liftSelection }: ResourceProps) {
useEffect(() => {
return;
}, [state])
export default function AvailableChips({ state, liftSelection }: ResourceProps) {
return (
<div className="available-chips">
{
Object.keys(state.gameboard.tradingResources).map((key: string | keyof ResourceCost) => {
Object.keys(state.gameboard.tradingResources).map((key: string) => {
const typedKey = key as keyof ResourceCost;
return (
<div key={v4()} className={`chips-${key}`}>
<button
key={v4()}
value={key}
onClick={() => liftSelection(key as keyof ResourceCost)}
// @ts-ignore
disabled={state.gameboard.tradingResources[typedKey] <= 0}
onClick={() => liftSelection(typedKey)}
>
{key}: {state.gameboard.tradingResources[key as keyof ResourceCost]}
{key}: {state.gameboard.tradingResources[typedKey]}
</button>
</div>
)

2
src/components/Resources/SelectionView.tsx
View File

@@ -1,6 +1,6 @@
import { useEffect, useState } from "react";
import { StateProps } from "../../util/propTypes";
import { useCurrentPlayer } from "../../util/useCurrentPlayer";
import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
import { GetChipsHTML, ReserveCardHTML } from "./ViewHTML";
export default function SelectionView({ state, setState }: StateProps) {

4
src/components/Resources/ViewHTML.tsx
View File

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

16
src/util/stateSetters.ts → src/hooks/stateSetters.ts
View File

@@ -1,6 +1,5 @@
import { AppState, CardData, NobleData, PlayerData, ResourceCost } from "./types";
import { AppState, CardData, NobleData, PlayerData, ResourceCost } from "../util/types";
import CardDeck from '../data/cards.json';
import { useCurrentPlayer } from "./useCurrentPlayer";
export const initialActions = {
buyCard: { active: false },
@@ -79,17 +78,14 @@ export const setStateReserveCard = (prev: AppState) => {
}
}
export const setStateGetNoble = (prev: AppState, noble: NobleData) => {
const currentPlayer = useCurrentPlayer(prev);
if (!currentPlayer) return prev;
export const setStateGetNoble = (prev: AppState, noble: NobleData, prevPlayer: PlayerData) => {
const updatedPlayer = {
...currentPlayer,
nobles: [...currentPlayer.nobles, noble],
points: currentPlayer.points + 3
...prevPlayer,
nobles: [...prevPlayer.nobles, noble],
points: prevPlayer.points + 3
}
const idx = prev.players.indexOf(currentPlayer);
const idx = prev.players.indexOf(prevPlayer);
const newPlayers = prev.players;
newPlayers[idx] = updatedPlayer;

2
src/util/useCurrentPlayer.tsx → src/hooks/useCurrentPlayer.tsx
View File

@@ -1,4 +1,4 @@
import { AppState, PlayerData } from "./types";
import { AppState, PlayerData } from "../util/types";
export const useCurrentPlayer = (state: AppState): PlayerData | null => {
/**

12
src/hooks/usePreviousPlayer.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { AppState } from "../util/types";
import { useCurrentPlayer } from "./useCurrentPlayer";
export default function usePreviousPlayer(state: AppState) {
const currentPlayer = useCurrentPlayer(state);
if (!currentPlayer) return;
const numPlayers = state.players.length;
const targetID = currentPlayer.id;
const idx = ((targetID - 2) < 0) ? (numPlayers - 1) : (targetID - 2);
return state.players[idx];
}

2
src/util/testUtils.ts
View File

@@ -1,4 +1,4 @@
import { initialState } from "./stateSetters"
import { initialState } from "../hooks/stateSetters"
import { AppState, CardData, NobleData, PlayerData } from "./types"
// mock data for early game

2
src/util/util.test.ts
View File

@@ -2,7 +2,7 @@ import { describe, expect, test } from "vitest"
import cardTierToKey from "./cardTierToKey";
import { mockPlayerOne, mockState } from "./testUtils";
import { turnOrderUtil } from "./turnOrderUtil";
import { useCurrentPlayer } from "./useCurrentPlayer";
import { useCurrentPlayer } from "../hooks/useCurrentPlayer";
describe('app utilities', () => {
test('useCurrentPlayer', () => {