basic rendering for all three card tiers

client/src/components/Game/GameBoard.js

@@ -1,8 +1,11 @@
 import '../../styles/GameBoard.css';
-import Card from '../Cards/Card';
-import { CardDeck } from '../../store/CardDeck';
 import { useEffect, useState } from 'react';
 
+import Card from '../Cards/Card';
+import { TierOneDeck } from '../../store/TierOneDeck';
+import { TierTwoDeck } from '../../store/TierTwoDeck';
+import { TierThreeDeck } from '../../store/TierThreeDeck';
+
 export default function GameBoard() {
     const [trigger, setTrigger] = useState(true);
     const [tierThree, setTierThree] = useState(null);
@@ -11,19 +14,19 @@ export default function GameBoard() {
 
     const [content, setContent] = useState(null);
 
+    const AllDecks = [TierOneDeck, TierTwoDeck, TierThreeDeck];
+    
     useEffect(() => {
         // param limit sets limit on number of cards rendered
         // param tier filters by card tier
         const buildGameBoardRow = (limit, tier) => {
             let newBoard = [];
             let iter = 0;
-            for (let cardConfig of CardDeck) {
-                if (cardConfig.tier !== tier) continue;
-                while (iter < limit) {
-                    iter++;
-                    // if (cardConfig.tier !== tier) continue;
-                    newBoard.push(<Card state={cardConfig} />);
-                }
+            while (iter < limit) {
+                iter++;
+
+                if (!AllDecks[tier-1][iter-1]) continue;
+                newBoard.push(<Card state={AllDecks[tier-1][iter-1]} />);
             }
 
             switch (tier) {
@@ -45,18 +48,30 @@ export default function GameBoard() {
             }
         }
 
-        if (trigger) buildGameBoardRow(6,1);
+        if (trigger) {
+            buildGameBoardRow(4,3);
+            buildGameBoardRow(4,2);
+            buildGameBoardRow(4,1);
+        }
     }, [trigger]);
 
     return (
         <div className="gameboard">
             <h1 className="gameboard-title">SPLINTER</h1>
 
+            <div className="gameboard-row">
+                {tierThree || 'Loading'}
+            </div>
+
+            <div className="gameboard-row">
+                {tierTwo || 'Loading'}
+            </div>
+
             <div className="gameboard-row">
                 {tierOne || 'Loading'}
             </div>
 
-            <h2>Deck length: {CardDeck.length}</h2>
+            <h2>Deck length: {TierOneDeck.length}</h2>
         </div>
     )
 }

client/src/store/TierOneDeck.js

@@ -1,4 +1,4 @@
-export const CardDeck = [
+export const TierOneDeck = [
     // TIER ONE CARDS
     // total: 40
     // cat 1: [2,1] cost cards

client/src/store/TierThreeDeck.js

@@ -0,0 +1,115 @@
+export const TierThreeDeck = [
+    // TIER THREE CARDS
+    // total: 20
+    // cat 1: 7 of a kind
+    {
+        tier: 3,
+        points: 5,
+        isWorth: 'cedar',
+        cost: {
+            cedar: 7,
+            birch: 0,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 3,
+        points: 5,
+        isWorth: 'birch',
+        cost: {
+            cedar: 0,
+            birch: 7,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 3,
+        points: 5,
+        isWorth: 'walnut',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 7,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 3,
+        points: 5,
+        isWorth: 'mahogany',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 0,
+            mahogany: 7,
+            cherry: 0
+        }
+    },
+    {
+        tier: 3,
+        points: 5,
+        isWorth: 'cherry',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 7
+        }
+    },
+
+    // cat 2: [7,3] cost cards
+    {
+        tier: 2,
+        points: 5,
+        isWorth: 'cedar',
+        cost: {
+            cedar: 7,
+            birch: 3,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 2,
+        points: 5,
+        isWorth: 'birch',
+        cost: {
+            cedar: 0,
+            birch: 7,
+            walnut: 3,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 2,
+        points: 5,
+        isWorth: 'walnut',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 7,
+            mahogany: 3,
+            cherry: 0
+        }
+    },
+    {
+        tier: 2,
+        points: 5,
+        isWorth: 'mahogany',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 0,
+            mahogany: 7,
+            cherry: 3
+        }
+    },
+]

client/src/store/TierTwoDeck.js

@@ -0,0 +1,54 @@
+export const TierTwoDeck = [
+    // TIER TWO CARDS
+    // total: 30
+    // cat 1: [5,3] cost cards
+    {
+        tier: 2,
+        points: 3,
+        isWorth: 'cedar',
+        cost: {
+            cedar: 5,
+            birch: 3,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 2,
+        points: 3,
+        isWorth: 'birch',
+        cost: {
+            cedar: 0,
+            birch: 5,
+            walnut: 3,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 2,
+        points: 3,
+        isWorth: 'walnut',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 5,
+            mahogany: 3,
+            cherry: 0
+        }
+    },
+    {
+        tier: 2,
+        points: 3,
+        isWorth: 'mahogany',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 0,
+            mahogany: 5,
+            cherry: 3
+        }
+    },
+    
+]