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 1/3] 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 From d1154817184e447f3c137a1b0058db8fdd424c4c Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Sat, 16 Apr 2022 11:56:54 -0500 Subject: [PATCH 2/3] card tier handling for game board rendering --- client/src/components/Game/GameBoard.js | 33 ++++++++++++++++--------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/client/src/components/Game/GameBoard.js b/client/src/components/Game/GameBoard.js index a3e2f99..71c461b 100644 --- a/client/src/components/Game/GameBoard.js +++ b/client/src/components/Game/GameBoard.js @@ -10,31 +10,42 @@ export default function GameBoard() { 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) => { + 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(); } } - setContent(newBoard); - setTrigger(false); + + 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() {

SPLINTER

- {content || 'Loading'} + {tierOne || 'Loading'}

Deck length: {CardDeck.length}

From 2b8d5045de9a5c9f2ef36faa5e41621cfb6dd30a Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Sat, 16 Apr 2022 12:35:08 -0500 Subject: [PATCH 3/3] basic rendering for all three card tiers --- client/src/components/Game/GameBoard.js | 37 ++++-- .../src/store/{CardDeck.js => TierOneDeck.js} | 2 +- client/src/store/TierThreeDeck.js | 115 ++++++++++++++++++ client/src/store/TierTwoDeck.js | 54 ++++++++ 4 files changed, 196 insertions(+), 12 deletions(-) rename client/src/store/{CardDeck.js => TierOneDeck.js} (99%) create mode 100644 client/src/store/TierThreeDeck.js create mode 100644 client/src/store/TierTwoDeck.js diff --git a/client/src/components/Game/GameBoard.js b/client/src/components/Game/GameBoard.js index 71c461b..962c719 100644 --- a/client/src/components/Game/GameBoard.js +++ b/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); @@ -10,6 +13,8 @@ export default function GameBoard() { const [tierOne, setTierOne] = useState(null); const [content, setContent] = useState(null); + + const AllDecks = [TierOneDeck, TierTwoDeck, TierThreeDeck]; useEffect(() => { // param limit sets limit on number of cards rendered @@ -17,13 +22,11 @@ export default function GameBoard() { 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(); - } + while (iter < limit) { + iter++; + + if (!AllDecks[tier-1][iter-1]) continue; + newBoard.push(); } 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 (

SPLINTER

+
+ {tierThree || 'Loading'} +
+ +
+ {tierTwo || 'Loading'} +
+
{tierOne || 'Loading'}
-

Deck length: {CardDeck.length}

+

Deck length: {TierOneDeck.length}

) } \ No newline at end of file diff --git a/client/src/store/CardDeck.js b/client/src/store/TierOneDeck.js similarity index 99% rename from client/src/store/CardDeck.js rename to client/src/store/TierOneDeck.js index 83f600a..5f1b55c 100644 --- a/client/src/store/CardDeck.js +++ b/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 diff --git a/client/src/store/TierThreeDeck.js b/client/src/store/TierThreeDeck.js new file mode 100644 index 0000000..9d4cacd --- /dev/null +++ b/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 + } + }, +] \ No newline at end of file diff --git a/client/src/store/TierTwoDeck.js b/client/src/store/TierTwoDeck.js new file mode 100644 index 0000000..cde13a1 --- /dev/null +++ b/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 + } + }, + +] \ No newline at end of file