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..962c719 --- /dev/null +++ b/client/src/components/Game/GameBoard.js @@ -0,0 +1,77 @@ +import '../../styles/GameBoard.css'; +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); + const [tierTwo, setTierTwo] = useState(null); + 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 + // param tier filters by card tier + const buildGameBoardRow = (limit, tier) => { + let newBoard = []; + let iter = 0; + while (iter < limit) { + iter++; + + if (!AllDecks[tier-1][iter-1]) continue; + newBoard.push(); + } + + 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(4,3); + buildGameBoardRow(4,2); + buildGameBoardRow(4,1); + } + }, [trigger]); + + return ( +
+

SPLINTER

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

Deck length: {TierOneDeck.length}

+
+ ) +} \ 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/store/TierOneDeck.js b/client/src/store/TierOneDeck.js new file mode 100644 index 0000000..5f1b55c --- /dev/null +++ b/client/src/store/TierOneDeck.js @@ -0,0 +1,189 @@ +export const TierOneDeck = [ + // 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/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 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