From e987a2aad8dfe371e7741457db9669554214fa7a Mon Sep 17 00:00:00 2001 From: Mikayla Dobson Date: Thu, 25 Aug 2022 13:04:57 -0500 Subject: [PATCH] introducing logic for color sorting of chips --- src/components/Card/Card.scss | 30 ------------------- src/components/Card/CardRow.scss | 30 +++++++++++++++++++ src/components/Card/CardRow.tsx | 2 +- .../Player.scss => Gameboard/Gameboard.scss} | 0 src/components/Gameboard/Gameboard.tsx | 28 ++++++----------- src/components/Player/AllPlayers.scss | 19 ++++++++++-- src/components/Player/Player.tsx | 20 +++++++------ src/components/Resources/AvailableChips.scss | 10 +++++-- src/components/Resources/AvailableChips.tsx | 24 +++++++-------- src/components/Resources/SelectionView.scss | 16 ++++++++++ src/components/Resources/SelectionView.tsx | 1 + src/components/Resources/ViewHTML.tsx | 2 +- src/sass/App.scss | 6 ++++ src/sass/helper/_mixins.scss | 26 ++++++++++++++++ src/sass/helper/_placeholders.scss | 3 ++ 15 files changed, 139 insertions(+), 78 deletions(-) delete mode 100644 src/components/Card/Card.scss rename src/components/{Player/Player.scss => Gameboard/Gameboard.scss} (100%) create mode 100644 src/components/Resources/SelectionView.scss create mode 100644 src/sass/helper/_placeholders.scss diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss deleted file mode 100644 index 8176665..0000000 --- a/src/components/Card/Card.scss +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/components/Card/CardRow.scss b/src/components/Card/CardRow.scss index e69de29..23d04f9 100644 --- a/src/components/Card/CardRow.scss +++ b/src/components/Card/CardRow.scss @@ -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; +} \ No newline at end of file diff --git a/src/components/Card/CardRow.tsx b/src/components/Card/CardRow.tsx index 713975e..e54a90f 100644 --- a/src/components/Card/CardRow.tsx +++ b/src/components/Card/CardRow.tsx @@ -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); diff --git a/src/components/Player/Player.scss b/src/components/Gameboard/Gameboard.scss similarity index 100% rename from src/components/Player/Player.scss rename to src/components/Gameboard/Gameboard.scss diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx index c154356..073821e 100644 --- a/src/components/Gameboard/Gameboard.tsx +++ b/src/components/Gameboard/Gameboard.tsx @@ -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 } \ No newline at end of file diff --git a/src/components/Player/AllPlayers.scss b/src/components/Player/AllPlayers.scss index 19579b1..fe0daf9 100644 --- a/src/components/Player/AllPlayers.scss +++ b/src/components/Player/AllPlayers.scss @@ -1,9 +1,22 @@ +@import '../../sass/helper/mixins'; + .all-players { display: flex; background-color: rgb(237, 213, 156); color: black; -} + .player-ui { + p { + margin: 1rem; + } + .subheader { + font-weight: bold; + } -.all-players p { - margin: 1rem; + .resources { + .player-chips-enum { + display: flex; + @include map-gem-values(".player-chip"); + } + } + } } \ No newline at end of file diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx index 1c065fc..47159f4 100644 --- a/src/components/Player/Player.tsx +++ b/src/components/Player/Player.tsx @@ -57,11 +57,7 @@ export default function Player({ player, state, setState }: PlayerProps) { return (
- {/* Static Data */} -
-

Name: {player.name}

-

Is {player.starter || "not"} round starter

-
+

Name: {player.name} {player.starter && "(round starter)"}

{/* Dynamic data from state */}
@@ -90,13 +86,19 @@ export default function Player({ player, state, setState }: PlayerProps) {
- {dynamic?.name}'s Resources +

{dynamic?.name}'s Resources

Chips:

- { dynamic && Object.entries(dynamic.inventory).map(([key,value]) => { - return value > 0 &&

{key}: {value}

- })} +
+ { dynamic && Object.entries(dynamic.inventory).map(([key,value]) => { + return value > 0 && ( +

+ {key}: {value} +

+ ) + })} +
diff --git a/src/components/Resources/AvailableChips.scss b/src/components/Resources/AvailableChips.scss index 28281f0..4c47bd8 100644 --- a/src/components/Resources/AvailableChips.scss +++ b/src/components/Resources/AvailableChips.scss @@ -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 { - margin: 1rem; + p { + margin: 1rem; + } + + @include map-gem-values(".chips"); } \ No newline at end of file diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx index e0fd510..bdd99de 100644 --- a/src/components/Resources/AvailableChips.tsx +++ b/src/components/Resources/AvailableChips.tsx @@ -5,22 +5,22 @@ import "./AvailableChips.scss" export default function AvailableChips({ state, liftSelection }: ResourceProps) { return ( -
+
{ Object.keys(state.gameboard.tradingResources).map((key: string) => { const typedKey = key as keyof ResourceCost; + return ( -
- -
+ ) }) } diff --git a/src/components/Resources/SelectionView.scss b/src/components/Resources/SelectionView.scss new file mode 100644 index 0000000..2de8189 --- /dev/null +++ b/src/components/Resources/SelectionView.scss @@ -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%; + } + } +} \ No newline at end of file diff --git a/src/components/Resources/SelectionView.tsx b/src/components/Resources/SelectionView.tsx index 935a474..2e08708 100644 --- a/src/components/Resources/SelectionView.tsx +++ b/src/components/Resources/SelectionView.tsx @@ -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)); diff --git a/src/components/Resources/ViewHTML.tsx b/src/components/Resources/ViewHTML.tsx index 17a90d9..68a9ad8 100644 --- a/src/components/Resources/ViewHTML.tsx +++ b/src/components/Resources/ViewHTML.tsx @@ -28,7 +28,7 @@ export const GetChipsHTML = ({ state, setState }: StateProps) => {
{ state.actions.getChips.active && - state.actions.getChips.selection?.map((each: keyof ResourceCost) =>

{each}

) + state.actions.getChips.selection?.map((each: keyof ResourceCost) =>

{each}

) }
{ diff --git a/src/sass/App.scss b/src/sass/App.scss index bdc90c8..ac7a180 100644 --- a/src/sass/App.scss +++ b/src/sass/App.scss @@ -1,4 +1,10 @@ +@import './helper/placeholders'; + #root { + .hidden { + @extend %hidden; + } + display: flex; align-items: center; justify-content: center; diff --git a/src/sass/helper/_mixins.scss b/src/sass/helper/_mixins.scss index e69de29..91174b5 100644 --- a/src/sass/helper/_mixins.scss +++ b/src/sass/helper/_mixins.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/sass/helper/_placeholders.scss b/src/sass/helper/_placeholders.scss new file mode 100644 index 0000000..d35b7bb --- /dev/null +++ b/src/sass/helper/_placeholders.scss @@ -0,0 +1,3 @@ +%hidden { + display: none; +} \ No newline at end of file