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/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..ce93ea7 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -2,18 +2,21 @@ 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'; +import Store from './store/Store'; function App() { return ( -
- - - }/> - }/> - - -
+ +
+ + + }/> + }/> + + +
+
); } 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..35df537 100644 --- a/client/src/components/Game/GameBoard.js +++ b/client/src/components/Game/GameBoard.js @@ -1,22 +1,24 @@ +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'; +import {v4} from 'uuid'; + export default function GameBoard() { + const [state, dispatch] = useContext(Context); + 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(() => { + const AllDecks = [TierOneDeck, TierTwoDeck, TierThreeDeck]; + // param limit sets limit on number of cards rendered // param tier filters by card tier const buildGameBoardRow = (limit, tier) => { @@ -26,7 +28,7 @@ export default function GameBoard() { iter++; if (!AllDecks[tier-1][iter-1]) continue; - newBoard.push(); + newBoard.push(); } switch (tier) { @@ -57,7 +59,19 @@ export default function GameBoard() { return (
-

SPLINTER

+ SPLINTER +
+

Players:

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

{player.name}

+

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

+
+ ) + }) + } +
{tierThree || 'Loading'} 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/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..b4561dd 100644 --- a/client/src/components/GameConfigForms/LocalMultiForm.js +++ b/client/src/components/GameConfigForms/LocalMultiForm.js @@ -1,6 +1,11 @@ -import { useState, useEffect } from "react"; +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); const [playerOne, setPlayerOne] = useState(''); @@ -8,6 +13,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 +53,43 @@ export default function LocalMultiForm() { break; } }, [players]); + + const handleStartGame = () => { + let toSubmit = []; + let iter = 0; + while (iter < players) { + 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++; + } + + if (toSubmit.length < players) return; + + for (let item of toSubmit) { + if (!item) return; + } + + dispatch({ type: "ADD PLAYERS", payload: toSubmit }); + navigate('/gameboard'); + } return ( <> @@ -69,6 +113,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 5e5a9f0..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); @@ -50,7 +53,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..346f735 100644 --- a/client/src/store/Store.js +++ b/client/src/store/Store.js @@ -0,0 +1,58 @@ +import { useReducer, createContext } from "react" + +import { TierOneDeck } from './TierOneDeck'; +import { TierTwoDeck } from './TierTwoDeck'; +import { TierThreeDeck } from './TierThreeDeck'; +import { Spirits } from '../components/Game/Spirits'; + +const initialGameState = { + players: [{name: 'no players', inventory: null, cards: null}], + 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 "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; + } +} + + +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..68e68da 100644 --- a/client/src/styles/GameBoard.css +++ b/client/src/styles/GameBoard.css @@ -1,9 +1,6 @@ -.gameboard { - display: flex; - flex-direction: column; -} - .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" + } +}