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

introducing logic for color sorting of chips

Browse Source
This commit is contained in:
Mikayla Dobson
2022-08-25 13:04:57 -05:00
parent 4cfc41374e
commit e987a2aad8
15 changed files with 139 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Card/Card.scss
View File

@@ -1,30 +0,0 @@
.card-row {
display: flex;
flex-flow: column nowrap;
margin: 2rem;
width: 80vw;
}
.card-row-cards-visible {
display: flex;
flex-flow: row nowrap;
width: 100%;
justify-content: space-around;
}
.card {
width: 25%;
}
.tier-1 {
background-color: green;
}
.tier-2 {
background-color: yellow;
color: black;
}
.tier-3 {
background-color: blue;
}

30
src/components/Card/CardRow.scss
View File

@@ -0,0 +1,30 @@
.card-row {
display: flex;
flex-flow: column nowrap;
margin: 2rem;
width: 80vw;
.card-row-cards-visible {
display: flex;
flex-flow: row nowrap;
width: 100%;
justify-content: space-around;
}
}
.card {
width: 25%;
}
.tier-1 {
background-color: green;
}
.tier-2 {
background-color: yellow;
color: black;
}
.tier-3 {
background-color: blue;
}

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

@@ -3,7 +3,7 @@ import { CardData } from "../../util/types"
import Card from "../Card/Card"
import { v4 } from 'uuid';
import cardTierToKey from '../../util/cardTierToKey';
import "./Card.scss";
import "./CardRow.scss";
export default function CardRow({tier, state, setState}: CardRowProps) {
const typedTier = cardTierToKey(tier);

0
src/components/Player/Player.scss → src/components/Gameboard/Gameboard.scss
View File

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

@@ -1,19 +1,19 @@
// types, data, utils
import { AppState, PlayerData, ResourceCost } from '../../util/types';
import { useCallback, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import initializeBoard, { setCardRows } from '../../util/initializeBoard';
import { AppState, PlayerData, ResourceCost } from '../../util/types';
import { getChipsActions } from '../Player/ActionMethods';
import { StateProps } from '../../util/propTypes';
import { Link } from 'react-router-dom';
import './Gameboard.scss';
// components
import Nobles from '../Nobles/Nobles';
import initializeBoard, { setCardRows } from '../../util/initializeBoard';
import AvailableChips from '../Resources/AvailableChips';
import AllPlayers from '../Player/AllPlayers';
import CardRow from '../Card/CardRow';
import SelectionView from '../Resources/SelectionView';
import { useCurrentPlayer } from '../../hooks/useCurrentPlayer';
import getTotalBuyingPower from '../../util/getTotalBuyingPower';
import usePreviousPlayer from '../../hooks/usePreviousPlayer';
const { validateChips } = getChipsActions;
@@ -47,35 +47,26 @@ export default function Gameboard({ state, setState }: StateProps) {
}, [state]);
// util functions, setup on mount
useEffect(() => {
initializeBoard(state, setState);
}, [])
useEffect(() => initializeBoard(state, setState), [])
useEffect(() => {
setCardRows(state);
}, [state])
useEffect(() => {
if (state.actions.buyCard.active) {
const currentPlayer = useCurrentPlayer(state);
currentPlayer && console.log(getTotalBuyingPower(currentPlayer));
}
}, [state.actions])
// endgame logic: once triggered, sets "endgame" to the player who triggered the effect
useEffect(() => {
const previousPlayer = usePreviousPlayer(state);
if (previousPlayer && previousPlayer.points >= 15) setEndgame(previousPlayer);
}, [state])
// endgame logic: determines the player with highest score after remaining allowed turns
useEffect(() => {
if (endgame) {
console.log('endgame!');
let winner: PlayerData;
const currentPlayer = useCurrentPlayer(state);
if (!currentPlayer) return;
if (currentPlayer.id <= endgame.id) {
let winner: PlayerData;
const winnerData = state.players;
winner = winnerData.sort((x,y) => x.points - y.points)[0];
console.log(winner.name + ' wins!');
@@ -83,7 +74,7 @@ export default function Gameboard({ state, setState }: StateProps) {
}
}, [state, endgame])
// displays state of board if data is populated, otherwise points to game constructor
// rendering: displays state of board if data is populated, otherwise points to game constructor
useEffect(() => {
if (!state.players.length) {
setView(
@@ -108,6 +99,5 @@ export default function Gameboard({ state, setState }: StateProps) {
}
}, [state]);
// render
return view
}

19
src/components/Player/AllPlayers.scss
View File

@@ -1,9 +1,22 @@
@import '../../sass/helper/mixins';
.all-players {
display: flex;
background-color: rgb(237, 213, 156);
color: black;
}
.all-players p {
.player-ui {
p {
margin: 1rem;
}
.subheader {
font-weight: bold;
}
.resources {
.player-chips-enum {
display: flex;
@include map-gem-values(".player-chip");
}
}
}
}

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

@@ -57,11 +57,7 @@ export default function Player({ player, state, setState }: PlayerProps) {
return (
<div className="player-ui" key={v4()}>
{/* Static Data */}
<section className="player-constants">
<p>Name: {player.name}</p>
<p>Is {player.starter || "not"} round starter</p>
</section>
<p className="subheader">Name: {player.name} {player.starter && "(round starter)"}</p>
{/* Dynamic data from state */}
<section className="turn-and-action-based">
@@ -90,14 +86,20 @@ export default function Player({ player, state, setState }: PlayerProps) {
</section>
<section className="resources">
<strong>{dynamic?.name}'s Resources</strong>
<p className="subheader">{dynamic?.name}'s Resources</p>
<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()}>{key}: {value}</p>
return value > 0 && (
<p key={v4()} className={`player-chip-${key}`}>
{key}: {value}
</p>
)
})}
</div>
</div>
<div className="player-cards">
{dynamic && cardView}

8
src/components/Resources/AvailableChips.scss
View File

@@ -1,10 +1,14 @@
@import "../../sass/helper/mixins";
.available-chips {
display: flex;
flex-flow: row nowrap;
background-color: rgb(236, 238, 186);
color: black;
}
.available-chips p {
p {
margin: 1rem;
}
@include map-gem-values(".chips");
}

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

@@ -5,22 +5,22 @@ import "./AvailableChips.scss"
export default function AvailableChips({ state, liftSelection }: ResourceProps) {
return (
<div className="available-chips">
<div className={state.actions.getChips.active ? 'available-chips' : 'hidden'}>
{
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}
className={`chips-${key}`}
// @ts-ignore
disabled={state.gameboard.tradingResources[typedKey] <= 0}
onClick={() => liftSelection(typedKey)}
>
{key}: {state.gameboard.tradingResources[typedKey]}
</button>
</div>
)
})
}

16
src/components/Resources/SelectionView.scss Normal file
View File

@@ -0,0 +1,16 @@
@import "../../sass/helper/mixins";
.selection-view {
.current-selections {
display: flex;
align-items: center;
justify-content: center;
@include map-gem-values(".selection-value");
p {
margin: 1rem;
padding: 0.5rem;
border-radius: 25%;
}
}
}

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

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
import { StateProps } from "../../util/propTypes";
import { useCurrentPlayer } from "../../hooks/useCurrentPlayer";
import { GetChipsHTML, ReserveCardHTML } from "./ViewHTML";
import './SelectionView.scss';
export default function SelectionView({ state, setState }: StateProps) {
const [currentPlayer, setCurrentPlayer] = useState(useCurrentPlayer(state));

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

@@ -28,7 +28,7 @@ export const GetChipsHTML = ({ state, setState }: StateProps) => {
<div className="current-selections">
{
state.actions.getChips.active &&
state.actions.getChips.selection?.map((each: keyof ResourceCost) => <p key={v4()}>{each}</p>)
state.actions.getChips.selection?.map((each: keyof ResourceCost) => <p className={`selection-value-${each}`} key={v4()}>{each}</p>)
}
</div>
{

6
src/sass/App.scss
View File

@@ -1,4 +1,10 @@
@import './helper/placeholders';
#root {
.hidden {
@extend %hidden;
}
display: flex;
align-items: center;
justify-content: center;

26
src/sass/helper/_mixins.scss
View File

@@ -0,0 +1,26 @@
@mixin map-gem-values($parentClass) {
#{$parentClass} {
&-emerald {
background-color: green;
}
&-diamond {
background-color: white;
color: black;
}
&-onyx {
background-color: black;
color: white;
}
&-sapphire {
background-color: blue;
color: white;
}
&-ruby {
background-color: red;
}
&-gold {
background-color: gold;
color: black;
}
}
}

3
src/sass/helper/_placeholders.scss Normal file
View File

@@ -0,0 +1,3 @@
%hidden {
display: none;
}