From 9389dafa6b7cdfd0bce8b163b4bc2d3c7942cdee Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Sat, 16 Apr 2022 11:52:52 -0500 Subject: [PATCH] gameboard rendering for cards from card deck in store --- client/src/App.js | 2 + client/src/App.test.js | 8 - client/src/components/Cards/Card.js | 40 +++-- client/src/components/Game/GameBoard.js | 51 +++++++ client/src/store/CardDeck.js | 189 ++++++++++++++++++++++++ client/src/store/Store.js | 0 client/src/styles/Card.css | 37 +++++ client/src/styles/GameBoard.css | 15 ++ 8 files changed, 320 insertions(+), 22 deletions(-) delete mode 100644 client/src/App.test.js create mode 100644 client/src/components/Game/GameBoard.js create mode 100644 client/src/store/CardDeck.js create mode 100644 client/src/store/Store.js create mode 100644 client/src/styles/Card.css create mode 100644 client/src/styles/GameBoard.css diff --git a/client/src/App.js b/client/src/App.js index 93d5281..74064c4 100644 --- a/client/src/App.js +++ b/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() { }/> + }/> diff --git a/client/src/App.test.js b/client/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/client/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/client/src/components/Cards/Card.js b/client/src/components/Cards/Card.js index 378f9e5..0e0b5b0 100644 --- a/client/src/components/Cards/Card.js +++ b/client/src/components/Cards/Card.js @@ -1,16 +1,28 @@ -export default class Card { - constructor(state) { - this.state = { - tier: state.tier, - points: state.points, - isWorth: state.worth, - cost: { - acorns: state.cost.acorns, - pineCones: state.cost.pineCones, - walnuts: state.cost.walnuts, - apples: state.cost.apples, - twigs: state.cost.twigs - } - }; +import '../../styles/Card.css'; + +export default function Card({ state }) { + const { tier, points, isWorth, cost } = state; + + const mapCosts = () => { + let allCosts = []; + for (let [key, value] of Object.entries(cost)) { + if (value < 1) continue; + allCosts.push(<>{value} {key}
); + } + return allCosts; } + + return ( +
+
+
{isWorth}
+
{points} points
+
+ +
+
+
Costs:
{mapCosts()}
+
+
+ ) } \ No newline at end of file diff --git a/client/src/components/Game/GameBoard.js b/client/src/components/Game/GameBoard.js new file mode 100644 index 0000000..a3e2f99 --- /dev/null +++ b/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(); + } + } + setContent(newBoard); + setTrigger(false); + } + + if (trigger) buildGameBoardRow(6); + }, [trigger]); + + return ( +
+

SPLINTER

+ +
+ {content || 'Loading'} +
+ +

Deck length: {CardDeck.length}

+
+ ) +} \ No newline at end of file diff --git a/client/src/store/CardDeck.js b/client/src/store/CardDeck.js new file mode 100644 index 0000000..83f600a --- /dev/null +++ b/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 + } + }, +] \ No newline at end of file diff --git a/client/src/store/Store.js b/client/src/store/Store.js new file mode 100644 index 0000000..e69de29 diff --git a/client/src/styles/Card.css b/client/src/styles/Card.css new file mode 100644 index 0000000..713b98a --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/client/src/styles/GameBoard.css b/client/src/styles/GameBoard.css new file mode 100644 index 0000000..cf58706 --- /dev/null +++ b/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; +} \ No newline at end of file