card tier handling for game board rendering

client/src/components/Game/GameBoard.js

@@ -11,30 +11,41 @@ export default function GameBoard() {
 
     const [content, setContent] = useState(null);
     
-    let currentCards = {
-        tierOneCards: null,
-        tierTwoCards: null,
-        tierThreeCards: null,
-    };
-    
     useEffect(() => {
         // param limit sets limit on number of cards rendered
         // param tier filters by card tier
-        const buildGameBoardRow = (limit) => {
+        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} />);
                 }
             }
-            setContent(newBoard);
+
+            switch (tier) {
+                case 1:
+                    setTierOne(newBoard);
                     setTrigger(false);
+                    break;
+                case 2:
+                    setTierTwo(newBoard);
+                    setTrigger(false);
+                    break;
+                case 3:
+                    setTierThree(newBoard);
+                    setTrigger(false);
+                    break;
+                default:
+                    setTrigger(false);
+                    break;
+            }
         }
 
-        if (trigger) buildGameBoardRow(6);
+        if (trigger) buildGameBoardRow(6,1);
     }, [trigger]);
 
     return (
@@ -42,7 +53,7 @@ export default function GameBoard() {
             <h1 className="gameboard-title">SPLINTER</h1>
 
             <div className="gameboard-row">
-                {content || 'Loading'}
+                {tierOne || 'Loading'}
             </div>
 
             <h2>Deck length: {CardDeck.length}</h2>