introducing logic for color sorting of chips

src/components/Card/Card.scss

@@ -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;
-}

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;
+}

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);

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(() => {
+    useEffect(() => initializeBoard(state, setState), [])
-        initializeBoard(state, setState);
-    }, [])
 
     useEffect(() => {
         setCardRows(state);
     }, [state])
 
-    useEffect(() => {
+    // endgame logic: once triggered, sets "endgame" to the player who triggered the effect
-        if (state.actions.buyCard.active) {
-            const currentPlayer = useCurrentPlayer(state);
-            currentPlayer && console.log(getTotalBuyingPower(currentPlayer));
-        }
-    }, [state.actions])
-
     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
 }

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 {
+        .resources {
-    margin: 1rem;
+            .player-chips-enum {
+                display: flex;
+                @include map-gem-values(".player-chip");
+            }
+        }
+    }
 }

src/components/Player/Player.tsx

@@ -57,11 +57,7 @@ export default function Player({ player, state, setState }: PlayerProps) {
 
     return (
         <div className="player-ui" key={v4()}>
-            {/* Static Data */}
+            <p className="subheader">Name: {player.name} {player.starter && "(round starter)"}</p>
-            <section className="player-constants">
-                <p>Name: {player.name}</p>
-                <p>Is {player.starter || "not"} round starter</p>
-            </section>
 
             {/* Dynamic data from state */}
             <section className="turn-and-action-based">
@@ -90,13 +86,19 @@ 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>
-                    { dynamic && Object.entries(dynamic.inventory).map(([key,value]) => {
+                    <div className="player-chips-enum">
-                        return value > 0 && <p key={v4()}>{key}: {value}</p>
+                        { dynamic && Object.entries(dynamic.inventory).map(([key,value]) => {
-                    })}
+                            return value > 0 && (
+                                <p key={v4()} className={`player-chip-${key}`}>
+                                    {key}: {value}
+                                </p>
+                            )
+                        })}
+                    </div>
                 </div>
 
                 <div className="player-cards">

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 {
+    p {
-    margin: 1rem;
+        margin: 1rem;
+    }
+
+    @include map-gem-values(".chips");
 }

src/components/Resources/AvailableChips.tsx

@@ -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
-                            <button
+                            key={v4()}
-                                key={v4()}
+                            value={key}
-                                value={key}
+                            className={`chips-${key}`}
-                                // @ts-ignore
+                            // @ts-ignore
-                                disabled={state.gameboard.tradingResources[typedKey] <= 0}
+                            disabled={state.gameboard.tradingResources[typedKey] <= 0}
-                                onClick={() => liftSelection(typedKey)}
+                            onClick={() => liftSelection(typedKey)}
-                                >
+                            >
-                                {key}: {state.gameboard.tradingResources[typedKey]}
+                            {key}: {state.gameboard.tradingResources[typedKey]}
-                            </button>
+                        </button>
-                        </div>
                     )
                 })
             }

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%;
+        }
+    }
+}

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));

src/components/Resources/ViewHTML.tsx

@@ -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>
             {

src/sass/App.scss

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

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;
+        }
+    }
+}

src/sass/helper/_placeholders.scss

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