innocuous-symmetry/splinter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gameboard 041622 #2

Merged
innocuous-symmetry merged 3 commits from gameboard-041622 into main 2022-04-16 17:35:51 +00:00
Conversation 0 Commits 3 Files Changed 10 +515 -22
10 changed files with 515 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.js
View File

@@ -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>

8
client/src/App.test.js
View File

@@ -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();
});

40
client/src/components/Cards/Card.js
View File

@@ -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}<br/></>);
}
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>
)
}

77
client/src/components/Game/GameBoard.js Normal file
View File

@@ -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(<Card state={AllDecks[tier-1][iter-1]} />);
}
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 (
<div className="gameboard">
<h1 className="gameboard-title">SPLINTER</h1>
<div className="gameboard-row">
{tierThree || 'Loading'}
</div>
<div className="gameboard-row">
{tierTwo || 'Loading'}
</div>
<div className="gameboard-row">
{tierOne || 'Loading'}
</div>
<h2>Deck length: {TierOneDeck.length}</h2>
</div>
)
}

0
client/src/store/Store.js Normal file
View File

189
client/src/store/TierOneDeck.js Normal file
View File

@@ -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
}
},
]

115
client/src/store/TierThreeDeck.js Normal file
View File

@@ -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
}
},
]

54
client/src/store/TierTwoDeck.js Normal file
View File

@@ -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
}
},
]

37
client/src/styles/Card.css Normal file
View File

@@ -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;
}

15
client/src/styles/GameBoard.css Normal file
View File

@@ -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;
}