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 1/4] 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; } From f53645be8b3e8e7bcb08656faca6816f0e9a47a2 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Sat, 16 Apr 2022 13:58:27 -0500 Subject: [PATCH 2/4] local multi form writes to store --- client/src/App.js | 19 ++++++++------ client/src/components/Game/GameBoard.js | 7 +++-- .../GameConfigForms/CpuMultiForm.js | 1 + .../GameConfigForms/LocalMultiForm.js | 26 ++++++++++++++++++- client/src/components/Welcome.js | 5 +++- client/src/store/Store.js | 21 +++++++++------ 6 files changed, 59 insertions(+), 20 deletions(-) diff --git a/client/src/App.js b/client/src/App.js index f6bacb7..ce93ea7 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -3,17 +3,20 @@ import { Routes, Route, BrowserRouter } from 'react-router-dom'; import Welcome from './components/Welcome'; import FulLGameView from './components/Game/FullGameView'; +import Store from './store/Store'; function App() { return ( -
- - - }/> - }/> - - -
+ +
+ + + }/> + }/> + + +
+ ); } diff --git a/client/src/components/Game/GameBoard.js b/client/src/components/Game/GameBoard.js index e557396..5103d0e 100644 --- a/client/src/components/Game/GameBoard.js +++ b/client/src/components/Game/GameBoard.js @@ -1,12 +1,14 @@ +import { useContext, useEffect, useState } from 'react'; +import { Context } from '../../store/Store'; 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 [state, dispatch] = useContext(Context); + const [trigger, setTrigger] = useState(true); const [tierThree, setTierThree] = useState(null); const [tierTwo, setTierTwo] = useState(null); @@ -56,6 +58,7 @@ export default function GameBoard() { return (

SPLINTER

+

Players: {state.players}

{tierThree || 'Loading'} diff --git a/client/src/components/GameConfigForms/CpuMultiForm.js b/client/src/components/GameConfigForms/CpuMultiForm.js index 03892ef..95780ea 100644 --- a/client/src/components/GameConfigForms/CpuMultiForm.js +++ b/client/src/components/GameConfigForms/CpuMultiForm.js @@ -2,6 +2,7 @@ export default function CpuMultiForm() { return (

AI and stuff?

+

Coming soon!

) } \ No newline at end of file diff --git a/client/src/components/GameConfigForms/LocalMultiForm.js b/client/src/components/GameConfigForms/LocalMultiForm.js index 43ea700..52aa568 100644 --- a/client/src/components/GameConfigForms/LocalMultiForm.js +++ b/client/src/components/GameConfigForms/LocalMultiForm.js @@ -1,6 +1,9 @@ -import { useState, useEffect } from "react"; +import { useState, useEffect, useContext } from "react"; +import { Context } from "../../store/Store"; export default function LocalMultiForm() { + const [state, dispatch] = useContext(Context); + const [players, setPlayers] = useState(null); const [formVariant, setFormVariant] = useState(null); const [playerOne, setPlayerOne] = useState(''); @@ -8,6 +11,8 @@ export default function LocalMultiForm() { const [playerThree, setPlayerThree] = useState(''); const [playerFour, setPlayerFour] = useState(''); + const allPlayerNames = [playerOne, playerTwo, playerThree, playerFour]; + const formVariants = [ <> { /* Fragment, expects to be concatenated as necessary within a
element */ } { /* Player one and two base; index 0 */ } @@ -46,6 +51,23 @@ export default function LocalMultiForm() { break; } }, [players]); + + const handleStartGame = () => { + let toSubmit = []; + let iter = 0; + while (iter < players) { + toSubmit.push(allPlayerNames[iter]); + iter++; + } + + if (toSubmit.length < players) return; + + for (let item of toSubmit) { + if (!item) return; + } + + dispatch({ type: "ADD PLAYERS", payload: toSubmit }); + } return ( <> @@ -69,6 +91,8 @@ export default function LocalMultiForm() { {formVariant}
+ + ) } \ No newline at end of file diff --git a/client/src/components/Welcome.js b/client/src/components/Welcome.js index fec6a45..fdc4ac2 100644 --- a/client/src/components/Welcome.js +++ b/client/src/components/Welcome.js @@ -1,8 +1,11 @@ -import { useState, useRef } from "react" +import { useState, useRef, useContext } from "react" import LocalMultiForm from "./GameConfigForms/LocalMultiForm"; import CpuMultiForm from "./GameConfigForms/CpuMultiForm"; +import { Context } from "../store/Store"; export default function Welcome() { + const [state, dispatch] = useContext(Context); + const [localMulti, setLocalMulti] = useState(false); const [cpuMulti, setCpuMulti] = useState(false); diff --git a/client/src/store/Store.js b/client/src/store/Store.js index 3b617f3..8f4b674 100644 --- a/client/src/store/Store.js +++ b/client/src/store/Store.js @@ -1,12 +1,12 @@ import { useReducer, createContext } from "react" -import { TierOneDeck } from "../../store/TierOneDeck" -import { TierTwoDeck } from "../../store/TierTwoDeck" -import { TierThreeDeck } from "../../store/TierThreeDeck" -import { Spirits } from "./Spirits" +import { TierOneDeck } from './TierOneDeck'; +import { TierTwoDeck } from './TierTwoDeck'; +import { TierThreeDeck } from './TierThreeDeck'; +import { Spirits } from '../components/Game/Spirits'; const initialGameState = { - players: [], + players: ['no players'], materials: { cards: { tierOneRemaining: TierOneDeck, @@ -27,13 +27,18 @@ const initialGameState = { const reducer = (state, action) => { switch (action.type) { - case "ADD PLAYER": - state.players.push(action.payload); - break; + case "GET PLAYERS": + return state; + case "ADD PLAYERS": + state.players = action.payload; + return state; case "UPDATE PLAYER MATERIALS": // find player in array of players and update their resources // update list of available materials in state break; + case "PRINT PLAYERS": + console.log(state.players); + return state; default: break; } From 42c15e2160b24ad61c511149f50b31a52e4958fe Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Sat, 16 Apr 2022 14:09:15 -0500 Subject: [PATCH 3/4] key mapping --- client/package-lock.json | 1 + client/package.json | 1 + client/src/components/Game/GameBoard.js | 9 +++++++-- client/src/components/GameConfigForms/LocalMultiForm.js | 5 ++++- 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index a8f47d0..713f4a8 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -15,6 +15,7 @@ "react-dom": "^18.0.0", "react-router-dom": "^6.2.2", "react-scripts": "5.0.0", + "uuid": "^8.3.2", "web-vitals": "^2.1.4" } }, diff --git a/client/package.json b/client/package.json index 59d524c..88c655f 100644 --- a/client/package.json +++ b/client/package.json @@ -10,6 +10,7 @@ "react-dom": "^18.0.0", "react-router-dom": "^6.2.2", "react-scripts": "5.0.0", + "uuid": "^8.3.2", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/client/src/components/Game/GameBoard.js b/client/src/components/Game/GameBoard.js index 5103d0e..e42ace2 100644 --- a/client/src/components/Game/GameBoard.js +++ b/client/src/components/Game/GameBoard.js @@ -6,6 +6,8 @@ import { TierOneDeck } from '../../store/TierOneDeck'; import { TierTwoDeck } from '../../store/TierTwoDeck'; import { TierThreeDeck } from '../../store/TierThreeDeck'; +import {v4} from 'uuid'; + export default function GameBoard() { const [state, dispatch] = useContext(Context); @@ -26,7 +28,7 @@ export default function GameBoard() { iter++; if (!AllDecks[tier-1][iter-1]) continue; - newBoard.push(); + newBoard.push(); } switch (tier) { @@ -58,7 +60,10 @@ export default function GameBoard() { return (

SPLINTER

-

Players: {state.players}

+
+

Players:

+ {state.players.map(player =>

{player}

)} +
{tierThree || 'Loading'} diff --git a/client/src/components/GameConfigForms/LocalMultiForm.js b/client/src/components/GameConfigForms/LocalMultiForm.js index 52aa568..b9644bf 100644 --- a/client/src/components/GameConfigForms/LocalMultiForm.js +++ b/client/src/components/GameConfigForms/LocalMultiForm.js @@ -1,8 +1,10 @@ import { useState, useEffect, useContext } from "react"; import { Context } from "../../store/Store"; +import { useNavigate } from "react-router-dom"; export default function LocalMultiForm() { const [state, dispatch] = useContext(Context); + const navigate = useNavigate(); const [players, setPlayers] = useState(null); const [formVariant, setFormVariant] = useState(null); @@ -67,6 +69,7 @@ export default function LocalMultiForm() { } dispatch({ type: "ADD PLAYERS", payload: toSubmit }); + navigate('/gameboard'); } return ( @@ -91,7 +94,7 @@ export default function LocalMultiForm() {
{formVariant}
- + ) From b272df9b392cdac2af0c6e383fc3edbfb750b2b4 Mon Sep 17 00:00:00 2001 From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com> Date: Sat, 16 Apr 2022 14:22:45 -0500 Subject: [PATCH 4/4] player state passed into gameboard --- client/src/components/Game/GameBoard.js | 12 +++++++-- .../GameConfigForms/LocalMultiForm.js | 21 ++++++++++++++- client/src/store/Store.js | 2 +- client/src/styles/GameBoard.css | 2 ++ package-lock.json | 27 +++++++++++++++++++ package.json | 5 ++++ 6 files changed, 65 insertions(+), 4 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json diff --git a/client/src/components/Game/GameBoard.js b/client/src/components/Game/GameBoard.js index e42ace2..35df537 100644 --- a/client/src/components/Game/GameBoard.js +++ b/client/src/components/Game/GameBoard.js @@ -59,10 +59,18 @@ export default function GameBoard() { return (
-

SPLINTER

+ SPLINTER

Players:

- {state.players.map(player =>

{player}

)} + {state.players.map(player => { + return ( +
+

{player.name}

+

{player.points && `Score: ${player.points}`}

+
+ ) + }) + }
diff --git a/client/src/components/GameConfigForms/LocalMultiForm.js b/client/src/components/GameConfigForms/LocalMultiForm.js index b9644bf..b4561dd 100644 --- a/client/src/components/GameConfigForms/LocalMultiForm.js +++ b/client/src/components/GameConfigForms/LocalMultiForm.js @@ -58,7 +58,26 @@ export default function LocalMultiForm() { let toSubmit = []; let iter = 0; while (iter < players) { - toSubmit.push(allPlayerNames[iter]); + toSubmit.push({ + name: allPlayerNames[iter], + tokens: { + cedar: 0, + birch: 0, + walnut: 0, + mahogany: 0, + cherry: 0, + resin: 0, + }, + cards: { + cedar: 0, + birch: 0, + walnut: 0, + mahogany: 0, + cherry: 0, + }, + points: 0, + spirits: 0, + }); iter++; } diff --git a/client/src/store/Store.js b/client/src/store/Store.js index 8f4b674..346f735 100644 --- a/client/src/store/Store.js +++ b/client/src/store/Store.js @@ -6,7 +6,7 @@ import { TierThreeDeck } from './TierThreeDeck'; import { Spirits } from '../components/Game/Spirits'; const initialGameState = { - players: ['no players'], + players: [{name: 'no players', inventory: null, cards: null}], materials: { cards: { tierOneRemaining: TierOneDeck, diff --git a/client/src/styles/GameBoard.css b/client/src/styles/GameBoard.css index 469db5e..68e68da 100644 --- a/client/src/styles/GameBoard.css +++ b/client/src/styles/GameBoard.css @@ -1,4 +1,6 @@ .gameboard-title { + text-decoration: none; + font-size: 2rem; font-weight: bold; } diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..e6d0f43 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,27 @@ +{ + "name": "splinter", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "dependencies": { + "uuid": "^8.3.2" + } + }, + "node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + } + }, + "dependencies": { + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..1456e6d --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "uuid": "^8.3.2" + } +}