gameboard rendering for cards from card deck in store

client/src/App.js

@@ -2,6 +2,7 @@ import './App.css';
 import { Routes, Route, BrowserRouter } from 'react-router-dom';
 
 import Welcome from './components/Welcome';
+import GameBoard from './components/Game/GameBoard';
 
 function App() {
   return (
@@ -9,6 +10,7 @@ function App() {
       <BrowserRouter>
           <Routes>
             <Route path="/" element={<Welcome />}/>
+            <Route path="/gameboard" element={<GameBoard />}/>
           </Routes>
         </BrowserRouter>
       </div>

client/src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

client/src/components/Cards/Card.js

@@ -1,16 +1,28 @@
-export default class Card {
+import '../../styles/Card.css';
-    constructor(state) {
+
-        this.state = {
+export default function Card({ state }) {
-            tier: state.tier,
+    const { tier, points, isWorth, cost } = state;
-            points: state.points,
+
-            isWorth: state.worth,
+    const mapCosts = () => {
-            cost: {
+        let allCosts = [];
-                acorns: state.cost.acorns,
+        for (let [key, value] of Object.entries(cost)) {
-                pineCones: state.cost.pineCones,
+            if (value < 1) continue;
-                walnuts: state.cost.walnuts,
+            allCosts.push(<>{value} {key}<br/></>);
-                apples: state.cost.apples,
+        }
-                twigs: state.cost.twigs
+        return allCosts;
-            }
-        };
     }
+
+    return (
+        <div className="card">
+            <div className="card-row">
+                <div className="value">{isWorth}</div>
+                <div className="points">{points} points</div>
+            </div>
+
+            <div className="card-row bottom-row">
+                <div className={`tier tier-${tier}`}></div>
+                <div className="costs">Costs:<br/> {mapCosts()}</div>
+            </div>
+        </div>
+    )
 }

client/src/components/Game/GameBoard.js

@@ -0,0 +1,51 @@
+import '../../styles/GameBoard.css';
+import Card from '../Cards/Card';
+import { CardDeck } from '../../store/CardDeck';
+import { useEffect, useState } from 'react';
+
+export default function GameBoard() {
+    const [trigger, setTrigger] = useState(true);
+    const [tierThree, setTierThree] = useState(null);
+    const [tierTwo, setTierTwo] = useState(null);
+    const [tierOne, setTierOne] = useState(null);
+
+    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) => {
+            let newBoard = [];
+            let iter = 0;
+            for (let cardConfig of CardDeck) {
+                while (iter < limit) {
+                    iter++;
+                    // if (cardConfig.tier !== tier) continue;
+                    newBoard.push(<Card state={cardConfig} />);
+                }
+            }
+            setContent(newBoard);
+            setTrigger(false);
+        }
+
+        if (trigger) buildGameBoardRow(6);
+    }, [trigger]);
+
+    return (
+        <div className="gameboard">
+            <h1 className="gameboard-title">SPLINTER</h1>
+
+            <div className="gameboard-row">
+                {content || 'Loading'}
+            </div>
+
+            <h2>Deck length: {CardDeck.length}</h2>
+        </div>
+    )
+}

client/src/store/CardDeck.js

@@ -0,0 +1,189 @@
+export const CardDeck = [
+    // TIER ONE CARDS
+    // total: 40
+    // cat 1: [2,1] cost cards
+    {
+        tier: 1,
+        points: 0,
+        isWorth: 'cedar',
+        cost: {
+            cedar: 2,
+            birch: 1,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 1,
+        points: 0,
+        isWorth: 'birch',
+        cost: {
+            cedar: 0,
+            birch: 2,
+            walnut: 1,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 1,
+        points: 0,
+        isWorth: 'walnut',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 2,
+            mahogany: 1,
+            cherry: 0
+        }
+    },
+    {
+        tier: 1,
+        points: 0,
+        isWorth: 'mahogany',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 0,
+            mahogany: 2,
+            cherry: 1
+        }
+    },
+    {
+        tier: 1,
+        points: 0,
+        isWorth: 'cherry',
+        cost: {
+            cedar: 1,
+            birch: 0,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 2
+        }
+    },
+
+    // cat 2: 3 of a kind cost
+    {
+        tier: 1,
+        points: 0,
+        isWorth: 'cedar',
+        cost: {
+            cedar: 3,
+            birch: 0,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 1,
+        points: 0,
+        isWorth: 'birch',
+        cost: {
+            cedar: 0,
+            birch: 3,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 1,
+        points: 0,
+        isWorth: 'walnut',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 3,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 1,
+        points: 0,
+        isWorth: 'mahogany',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 0,
+            mahogany: 3,
+            cherry: 0
+        }
+    },
+    {
+        tier: 1,
+        points: 0,
+        isWorth: 'cherry',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 3
+        }
+    },
+
+    // cat 3: 4 of a kind, one point
+    {
+        tier: 1,
+        points: 1,
+        isWorth: 'cedar',
+        cost: {
+            cedar: 4,
+            birch: 0,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 1,
+        points: 1,
+        isWorth: 'birch',
+        cost: {
+            cedar: 0,
+            birch: 4,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 1,
+        points: 1,
+        isWorth: 'walnut',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 4,
+            mahogany: 0,
+            cherry: 0
+        }
+    },
+    {
+        tier: 1,
+        points: 1,
+        isWorth: 'mahogany',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 0,
+            mahogany: 4,
+            cherry: 0
+        }
+    },
+    {
+        tier: 1,
+        points: 1,
+        isWorth: 'cherry',
+        cost: {
+            cedar: 0,
+            birch: 0,
+            walnut: 0,
+            mahogany: 0,
+            cherry: 4
+        }
+    },
+]

client/src/styles/Card.css

@@ -0,0 +1,37 @@
+.card {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid black;
+    width: 20vw;
+    height: 30vh;
+}
+
+.card-row {
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0.7rem;
+    height: 50%;
+}
+
+.bottom-row {
+    align-items: flex-end;
+}
+
+.tier {
+    display: inline-block;
+    height: 2rem;
+    width: 2rem;
+}
+
+.tier-3 {
+    background-color: blue;
+}
+
+.tier-2 {
+    background-color: yellow;
+}
+
+.tier-1 {
+    background-color: green;
+}

client/src/styles/GameBoard.css

@@ -0,0 +1,15 @@
+.gameboard {
+    display: flex;
+    flex-direction: column;
+}
+
+.gameboard-title {
+    font-weight: bold;
+}
+
+.gameboard-row {
+    display: flex;
+    flex-flow: row wrap;
+    width: 90vw;
+    justify-content: center;
+}