From 230655a872a2816c771d0c4eb01de4f6bfdf1fef Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Sat, 16 Apr 2022 13:28:26 -0500
Subject: [PATCH] setting up reducer/context structure
---
client/src/App.css | 36 +++----------
client/src/App.js | 4 +-
client/src/components/Cards/Materials.js | 0
client/src/components/Game/FullGameView.js | 9 ++++
client/src/components/Game/GameBoard.js | 6 +--
.../components/{Cards => Game}/Inventory.js | 2 +-
client/src/components/Game/PlayerInventory.js | 11 ++++
client/src/components/Game/Spirits.js | 52 ++++++++++++++++++
client/src/components/Welcome.js | 2 +-
client/src/store/Store.js | 53 +++++++++++++++++++
client/src/styles/GameBoard.css | 5 --
11 files changed, 137 insertions(+), 43 deletions(-)
delete mode 100644 client/src/components/Cards/Materials.js
create mode 100644 client/src/components/Game/FullGameView.js
rename client/src/components/{Cards => Game}/Inventory.js (96%)
create mode 100644 client/src/components/Game/PlayerInventory.js
create mode 100644 client/src/components/Game/Spirits.js
diff --git a/client/src/App.css b/client/src/App.css
index 74b5e05..82164e4 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -1,38 +1,14 @@
.App {
text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
}
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
+.gameboard {
+ display: flex;
+ flex-direction: column;
+ width: 95vw;
+ height: 75vh;
+}
\ No newline at end of file
diff --git a/client/src/App.js b/client/src/App.js
index 74064c4..f6bacb7 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -2,7 +2,7 @@ import './App.css';
import { Routes, Route, BrowserRouter } from 'react-router-dom';
import Welcome from './components/Welcome';
-import GameBoard from './components/Game/GameBoard';
+import FulLGameView from './components/Game/FullGameView';
function App() {
return (
@@ -10,7 +10,7 @@ function App() {
}/>
- }/>
+ }/>
diff --git a/client/src/components/Cards/Materials.js b/client/src/components/Cards/Materials.js
deleted file mode 100644
index e69de29..0000000
diff --git a/client/src/components/Game/FullGameView.js b/client/src/components/Game/FullGameView.js
new file mode 100644
index 0000000..f5713b9
--- /dev/null
+++ b/client/src/components/Game/FullGameView.js
@@ -0,0 +1,9 @@
+import GameBoard from "./GameBoard";
+
+export default function FulLGameView() {
+ return (
+ <>
+
+
+ )
+}
\ No newline at end of file
diff --git a/client/src/components/Game/GameBoard.js b/client/src/components/Game/GameBoard.js
index 962c719..e557396 100644
--- a/client/src/components/Game/GameBoard.js
+++ b/client/src/components/Game/GameBoard.js
@@ -11,12 +11,10 @@ export default function GameBoard() {
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(() => {
+ const AllDecks = [TierOneDeck, TierTwoDeck, TierThreeDeck];
+
// param limit sets limit on number of cards rendered
// param tier filters by card tier
const buildGameBoardRow = (limit, tier) => {
diff --git a/client/src/components/Cards/Inventory.js b/client/src/components/Game/Inventory.js
similarity index 96%
rename from client/src/components/Cards/Inventory.js
rename to client/src/components/Game/Inventory.js
index d7aeb9d..3e58b4f 100644
--- a/client/src/components/Cards/Inventory.js
+++ b/client/src/components/Game/Inventory.js
@@ -1,4 +1,4 @@
-import Card from "./Card";
+import Card from "../Cards/Card";
export default class Inventory {
constructor(state) {
diff --git a/client/src/components/Game/PlayerInventory.js b/client/src/components/Game/PlayerInventory.js
new file mode 100644
index 0000000..546c6ec
--- /dev/null
+++ b/client/src/components/Game/PlayerInventory.js
@@ -0,0 +1,11 @@
+import { useState } from "react"
+
+export default function PlayerInventory({ name }) {
+ const [materials, setMaterials] = useState(null);
+
+
+ return (
+ <>
+
+ )
+}
\ No newline at end of file
diff --git a/client/src/components/Game/Spirits.js b/client/src/components/Game/Spirits.js
new file mode 100644
index 0000000..def8cd3
--- /dev/null
+++ b/client/src/components/Game/Spirits.js
@@ -0,0 +1,52 @@
+export const Spirits = [
+ {
+ img: 'img src',
+ cost: {
+ cedar: 7,
+ birch: 0,
+ walnut: 0,
+ mahogany: 0,
+ cherry: 0
+ }
+ },
+ {
+ img: 'img src',
+ cost: {
+ cedar: 7,
+ birch: 0,
+ walnut: 0,
+ mahogany: 0,
+ cherry: 0
+ }
+ },
+ {
+ img: 'img src',
+ cost: {
+ cedar: 7,
+ birch: 0,
+ walnut: 0,
+ mahogany: 0,
+ cherry: 0
+ }
+ },
+ {
+ img: 'img src',
+ cost: {
+ cedar: 7,
+ birch: 0,
+ walnut: 0,
+ mahogany: 0,
+ cherry: 0
+ }
+ },
+ {
+ img: 'img src',
+ cost: {
+ cedar: 7,
+ birch: 0,
+ walnut: 0,
+ mahogany: 0,
+ cherry: 0
+ }
+ },
+]
\ No newline at end of file
diff --git a/client/src/components/Welcome.js b/client/src/components/Welcome.js
index 5e5a9f0..fec6a45 100644
--- a/client/src/components/Welcome.js
+++ b/client/src/components/Welcome.js
@@ -50,7 +50,7 @@ export default function Welcome() {
{localMulti ? : null}
- {cpuMulti ? : null}
+ {cpuMulti ? : null}
diff --git a/client/src/store/Store.js b/client/src/store/Store.js
index e69de29..3b617f3 100644
--- a/client/src/store/Store.js
+++ b/client/src/store/Store.js
@@ -0,0 +1,53 @@
+import { useReducer, createContext } from "react"
+
+import { TierOneDeck } from "../../store/TierOneDeck"
+import { TierTwoDeck } from "../../store/TierTwoDeck"
+import { TierThreeDeck } from "../../store/TierThreeDeck"
+import { Spirits } from "./Spirits"
+
+const initialGameState = {
+ players: [],
+ materials: {
+ cards: {
+ tierOneRemaining: TierOneDeck,
+ tierTwoRemaining: TierTwoDeck,
+ tierThreeRemaining: TierThreeDeck,
+ },
+ tokens: {
+ cedar: 7,
+ birch: 7,
+ walnut: 7,
+ mahogany: 7,
+ cherry: 7,
+ resin: 5,
+ },
+ spirits: [...Spirits]
+ },
+}
+
+const reducer = (state, action) => {
+ switch (action.type) {
+ case "ADD PLAYER":
+ state.players.push(action.payload);
+ break;
+ case "UPDATE PLAYER MATERIALS":
+ // find player in array of players and update their resources
+ // update list of available materials in state
+ break;
+ default:
+ break;
+ }
+}
+
+
+export default function Store({ children }) {
+ const [state, dispatch] = useReducer(reducer, initialGameState);
+
+ return (
+
+ { children }
+
+ )
+}
+
+export const Context = createContext(initialGameState);
\ No newline at end of file
diff --git a/client/src/styles/GameBoard.css b/client/src/styles/GameBoard.css
index cf58706..469db5e 100644
--- a/client/src/styles/GameBoard.css
+++ b/client/src/styles/GameBoard.css
@@ -1,8 +1,3 @@
-.gameboard {
- display: flex;
- flex-direction: column;
-}
-
.gameboard-title {
font-weight: bold;
}