diff --git a/src/App.tsx b/src/App.tsx index da48960..d5325d2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,27 +1,45 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom' +import { useState } from 'react' import Gameboard from './components/Gameboard/Gameboard' -import './App.css' -import { useCallback, useContext, useEffect, useState } from 'react' -import { appState, Context } from './context/Context' -import AvailableChips from './components/Resources/AvailableChips'; import GameConstructor from './util/GameConstructor'; -import { PlayerData } from './util/types'; +import { PlayerData, NobleData, CardData } from './util/types'; +import CardDeck from './data/cards.json'; +import './App.css' function App() { - let AppContext = useContext(Context); - let { players } = AppContext; + const [state, setState] = useState({ + gameboard: { + nobles: new Array, + cardRows: { + tierOne: new Array, + tierTwo: new Array, + tierThree: new Array, + }, + tradingResources: { + ruby: 7, + sapphire: 7, + emerald: 7, + diamond: 7, + onyx: 7, + gold: 5 + }, + deck: CardDeck, + }, + round: 0, + players: new Array, + }) return (
- -

SPLENDOR

- - - } /> - } /> - - - +

SPLENDOR

+ + + {/* @ts-ignore */} + } /> + {/* @ts-ignore */} + } /> + +
); } diff --git a/src/assets/img/FORGET-anna-rozwadowska-unsplash.jpg b/src/assets/img/FORGET-anna-rozwadowska-unsplash.jpg new file mode 100644 index 0000000..8819acf Binary files /dev/null and b/src/assets/img/FORGET-anna-rozwadowska-unsplash.jpg differ diff --git a/src/assets/img/FORGET-gemma-evans-unsplash.jpg b/src/assets/img/FORGET-gemma-evans-unsplash.jpg new file mode 100644 index 0000000..68b4e19 Binary files /dev/null and b/src/assets/img/FORGET-gemma-evans-unsplash.jpg differ diff --git a/src/assets/img/FORGET-k-mitch-hodge-unsplash.jpg b/src/assets/img/FORGET-k-mitch-hodge-unsplash.jpg new file mode 100644 index 0000000..0814615 Binary files /dev/null and b/src/assets/img/FORGET-k-mitch-hodge-unsplash.jpg differ diff --git a/src/assets/img/FORGET-krzysztof-kowalik-unsplash.jpg b/src/assets/img/FORGET-krzysztof-kowalik-unsplash.jpg new file mode 100644 index 0000000..9b26dba Binary files /dev/null and b/src/assets/img/FORGET-krzysztof-kowalik-unsplash.jpg differ diff --git a/src/assets/img/FORGET-olga-budko-unsplash.jpg b/src/assets/img/FORGET-olga-budko-unsplash.jpg new file mode 100644 index 0000000..f9b6014 Binary files /dev/null and b/src/assets/img/FORGET-olga-budko-unsplash.jpg differ diff --git a/src/assets/img/FORGET-yoksel-zok-unsplash.jpg b/src/assets/img/FORGET-yoksel-zok-unsplash.jpg new file mode 100644 index 0000000..608cc78 Binary files /dev/null and b/src/assets/img/FORGET-yoksel-zok-unsplash.jpg differ diff --git a/src/assets/img/LILY-deleece-cook-unsplash.jpg b/src/assets/img/LILY-deleece-cook-unsplash.jpg new file mode 100644 index 0000000..241d5fd Binary files /dev/null and b/src/assets/img/LILY-deleece-cook-unsplash.jpg differ diff --git a/src/assets/img/LILY-evie-s-unsplash-2.jpg b/src/assets/img/LILY-evie-s-unsplash-2.jpg new file mode 100644 index 0000000..851a301 Binary files /dev/null and b/src/assets/img/LILY-evie-s-unsplash-2.jpg differ diff --git a/src/assets/img/LILY-evie-s-unsplash.jpg b/src/assets/img/LILY-evie-s-unsplash.jpg new file mode 100644 index 0000000..f5b4ce7 Binary files /dev/null and b/src/assets/img/LILY-evie-s-unsplash.jpg differ diff --git a/src/assets/img/LILY-meghna-r-unsplash.jpg b/src/assets/img/LILY-meghna-r-unsplash.jpg new file mode 100644 index 0000000..7a3e8f2 Binary files /dev/null and b/src/assets/img/LILY-meghna-r-unsplash.jpg differ diff --git a/src/assets/img/LILY-serafima-lazarenko-unsplash.jpg b/src/assets/img/LILY-serafima-lazarenko-unsplash.jpg new file mode 100644 index 0000000..3dd9b25 Binary files /dev/null and b/src/assets/img/LILY-serafima-lazarenko-unsplash.jpg differ diff --git a/src/assets/img/LILY-yi-duo-unsplash.jpg b/src/assets/img/LILY-yi-duo-unsplash.jpg new file mode 100644 index 0000000..c9ebc8f Binary files /dev/null and b/src/assets/img/LILY-yi-duo-unsplash.jpg differ diff --git a/src/assets/img/ROSE-alexey-savchenko-unsplash.jpg b/src/assets/img/ROSE-alexey-savchenko-unsplash.jpg new file mode 100644 index 0000000..cecaf90 Binary files /dev/null and b/src/assets/img/ROSE-alexey-savchenko-unsplash.jpg differ diff --git a/src/assets/img/ROSE-aleza-van-der-werff-unsplash.jpg b/src/assets/img/ROSE-aleza-van-der-werff-unsplash.jpg new file mode 100644 index 0000000..bba46bf Binary files /dev/null and b/src/assets/img/ROSE-aleza-van-der-werff-unsplash.jpg differ diff --git a/src/assets/img/ROSE-arkadiy-unsplash.jpg b/src/assets/img/ROSE-arkadiy-unsplash.jpg new file mode 100644 index 0000000..9659c8d Binary files /dev/null and b/src/assets/img/ROSE-arkadiy-unsplash.jpg differ diff --git a/src/assets/img/ROSE-edward-howell-unsplash.jpg b/src/assets/img/ROSE-edward-howell-unsplash.jpg new file mode 100644 index 0000000..6465fe5 Binary files /dev/null and b/src/assets/img/ROSE-edward-howell-unsplash.jpg differ diff --git a/src/assets/img/ROSE-ekrem-osmanoglu-unsplash.jpg b/src/assets/img/ROSE-ekrem-osmanoglu-unsplash.jpg new file mode 100644 index 0000000..708dd81 Binary files /dev/null and b/src/assets/img/ROSE-ekrem-osmanoglu-unsplash.jpg differ diff --git a/src/assets/img/ROSE-engin-akyurt-unsplash.jpg b/src/assets/img/ROSE-engin-akyurt-unsplash.jpg new file mode 100644 index 0000000..2b89708 Binary files /dev/null and b/src/assets/img/ROSE-engin-akyurt-unsplash.jpg differ diff --git a/src/assets/img/SUCCULENT-angele-kamp-unsplash.jpg b/src/assets/img/SUCCULENT-angele-kamp-unsplash.jpg new file mode 100644 index 0000000..ba300e8 Binary files /dev/null and b/src/assets/img/SUCCULENT-angele-kamp-unsplash.jpg differ diff --git a/src/assets/img/SUCCULENT-annie-spratt-unsplash.jpg b/src/assets/img/SUCCULENT-annie-spratt-unsplash.jpg new file mode 100644 index 0000000..7f1806f Binary files /dev/null and b/src/assets/img/SUCCULENT-annie-spratt-unsplash.jpg differ diff --git a/src/assets/img/SUCCULENT-calle-macarone-unsplash.jpg b/src/assets/img/SUCCULENT-calle-macarone-unsplash.jpg new file mode 100644 index 0000000..3aee8dc Binary files /dev/null and b/src/assets/img/SUCCULENT-calle-macarone-unsplash.jpg differ diff --git a/src/assets/img/SUCCULENT-edgar-castrejon-unsplash.jpg b/src/assets/img/SUCCULENT-edgar-castrejon-unsplash.jpg new file mode 100644 index 0000000..1838311 Binary files /dev/null and b/src/assets/img/SUCCULENT-edgar-castrejon-unsplash.jpg differ diff --git a/src/assets/img/SUCCULENT-jacalyn-beales-unsplash.jpg b/src/assets/img/SUCCULENT-jacalyn-beales-unsplash.jpg new file mode 100644 index 0000000..7cf5f15 Binary files /dev/null and b/src/assets/img/SUCCULENT-jacalyn-beales-unsplash.jpg differ diff --git a/src/assets/img/SUCCULENT-tim-mossholder-unsplash.jpg b/src/assets/img/SUCCULENT-tim-mossholder-unsplash.jpg new file mode 100644 index 0000000..75d7db6 Binary files /dev/null and b/src/assets/img/SUCCULENT-tim-mossholder-unsplash.jpg differ diff --git a/src/assets/img/VIOLET-adrian-swancar-unsplash.jpg b/src/assets/img/VIOLET-adrian-swancar-unsplash.jpg new file mode 100644 index 0000000..30344b1 Binary files /dev/null and b/src/assets/img/VIOLET-adrian-swancar-unsplash.jpg differ diff --git a/src/assets/img/VIOLET-artiom-vallat-unsplash.jpg b/src/assets/img/VIOLET-artiom-vallat-unsplash.jpg new file mode 100644 index 0000000..dbe0092 Binary files /dev/null and b/src/assets/img/VIOLET-artiom-vallat-unsplash.jpg differ diff --git a/src/assets/img/VIOLET-nick-nice-unsplash.jpg b/src/assets/img/VIOLET-nick-nice-unsplash.jpg new file mode 100644 index 0000000..5a33fb0 Binary files /dev/null and b/src/assets/img/VIOLET-nick-nice-unsplash.jpg differ diff --git a/src/assets/img/VIOLET-rita-ox-unsplash.jpg b/src/assets/img/VIOLET-rita-ox-unsplash.jpg new file mode 100644 index 0000000..9d583af Binary files /dev/null and b/src/assets/img/VIOLET-rita-ox-unsplash.jpg differ diff --git a/src/assets/img/VIOLET-tobias-mockenhaupt-unsplash.jpg b/src/assets/img/VIOLET-tobias-mockenhaupt-unsplash.jpg new file mode 100644 index 0000000..d2f8197 Binary files /dev/null and b/src/assets/img/VIOLET-tobias-mockenhaupt-unsplash.jpg differ diff --git a/src/assets/img/VIOLET-yoksel-zok-unsplash.jpg b/src/assets/img/VIOLET-yoksel-zok-unsplash.jpg new file mode 100644 index 0000000..63b2873 Binary files /dev/null and b/src/assets/img/VIOLET-yoksel-zok-unsplash.jpg differ diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx index e1af511..9d1a7db 100644 --- a/src/components/Gameboard/Gameboard.tsx +++ b/src/components/Gameboard/Gameboard.tsx @@ -1,15 +1,12 @@ -import { useContext, useEffect, useState } from 'react'; -import { appState, Context } from '../../context/Context'; -import { NobleData } from '../../util/types'; +import { Dispatch, SetStateAction, useEffect, useState } from 'react'; +import { CardData, FullDeck, NobleData, StateProps } from '../../util/types'; import AllPlayers from '../Player/AllPlayers'; import AvailableChips from '../Resources/AvailableChips'; import CardRow from './CardRow'; import Nobles from './Nobles'; import NobleStore from '../../data/nobles.json'; -export default function Gameboard() { - let AppContext = useContext(Context); - let { gameboard, players } = AppContext; +export default function Gameboard({ state, setState }: StateProps) { const [view, setView] = useState(

Loading...

) useEffect(() => { @@ -17,7 +14,7 @@ export default function Gameboard() { }, []) useEffect(() => { - if (!players.length) { + if (!state.players.length) { setView(
Sorry! It appears we've lost track of your game data. @@ -27,20 +24,20 @@ export default function Gameboard() { } else { setView(
- - - - - - + + + + + +
) } - }, [AppContext]); + }, [state]); const shuffleDeck = () => { - if (!gameboard.deck) return; - let newDeck = gameboard.deck; + if (!state.gameboard.deck) return; + let newDeck: FullDeck = state.gameboard.deck; for (const [key, value] of Object.entries(newDeck)) { for (let i = value.length - 1; i > 0; i--) { @@ -51,7 +48,7 @@ export default function Gameboard() { } } - gameboard.deck = newDeck; + setState({ ...state, gameboard: { ...state.gameboard, deck: newDeck }}) } const setNobles = () => { @@ -64,26 +61,24 @@ export default function Gameboard() { shuffledNobles.push(randNoble); } - gameboard.nobles = shuffledNobles; + setState({ ...state, gameboard: { ...state.gameboard, nobles: shuffledNobles }}) } const initializeBoard = () => { shuffleDeck(); - setNobles(); - let newState = gameboard; - - for (const [key, value] of Object.entries(gameboard.deck)) { - // @ts-ignore - while (newState.cardRows[key].length < 4) { - const nextCard = value.shift(); + let newDeck = state.gameboard.cardRows; + for (const [key, value] of Object.entries(state.gameboard.deck)) { + while (newDeck[key as keyof FullDeck].length < 4) { // @ts-ignore - newState.cardRows[key].push(nextCard); + const nextCard = value.shift(); + newDeck[key as keyof FullDeck].push(nextCard); } } - gameboard = newState; + setState({ ...state, gameboard: { ...state.gameboard, cardRows: newDeck } }) + setNobles(); } - return view; + return view } \ No newline at end of file diff --git a/src/components/Gameboard/Nobles.tsx b/src/components/Gameboard/Nobles.tsx index c289556..e34bd74 100644 --- a/src/components/Gameboard/Nobles.tsx +++ b/src/components/Gameboard/Nobles.tsx @@ -1,16 +1,28 @@ +import { useEffect } from "react"; import { v4 } from "uuid"; -import { NobleData, ResourceCost } from "../../util/types"; +import { NobleData, ResourceCost, StateProps } from "../../util/types"; import "./Nobles.css" -export default function Nobles({ AppContext }: any) { - const { gameboard } = AppContext; +export default function Nobles({ state, setState }: StateProps) { + const removeNoble = (noble: NobleData) => { + console.log(noble); + setState((prev) => { + return { + ...prev, + gameboard: { + ...prev.gameboard, + nobles: prev.gameboard.nobles.filter((each) => each.nobleid !== noble.nobleid) + } + } + }) + } return (
NOBLES
{ - gameboard.nobles && gameboard.nobles.map((noble: NobleData) => { + state && state.gameboard.nobles.map((noble: NobleData) => { return (

Points: {noble.points}

@@ -23,7 +35,7 @@ export default function Nobles({ AppContext }: any) { }
) - }) ||

Nobles not found. Please wait...

+ }) }
diff --git a/src/components/Player/AllPlayers.tsx b/src/components/Player/AllPlayers.tsx index e493435..1378695 100644 --- a/src/components/Player/AllPlayers.tsx +++ b/src/components/Player/AllPlayers.tsx @@ -1,17 +1,13 @@ -import { useContext } from "react" -import { Context } from "../../context/Context" import Player from "./Player"; import { v4 } from "uuid"; import "./AllPlayers.css" -import { PlayerData } from "../../util/types"; - -export default function AllPlayers({ AppContext }: any) { - const { players } = AppContext; +import { PlayerData, StateProps } from "../../util/types"; +export default function AllPlayers({ state, setState }: StateProps) { return (
{ - players.map((player: PlayerData) => ) + state.players?.map((player: PlayerData) => ) }
) diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx index 5e1a53c..ddcce20 100644 --- a/src/components/Player/Player.tsx +++ b/src/components/Player/Player.tsx @@ -1,43 +1,36 @@ -import { useContext } from "react"; +import { AppState, PlayerData, ResourceCost, StateProps } from "../../util/types" import { v4 } from "uuid"; -import { Context } from "../../context/Context"; -import { GemValue, PlayerData, ResourceCost } from "../../util/types" -interface PlayerProps { - data: PlayerData +interface PlayerProps extends StateProps { + player: PlayerData } -export default function Player({ data }: PlayerProps) { - const AppContext = useContext(Context); - - let state: any; - let setState: any; - - // const [state, setState] = useState({ - // name: data.name, - // starter: data.starter, - // points: data.points, - // nobles: data.nobles, - // cards: data.cards, - // inventory: data.inventory - // }) - - // const buyCard = (cardData: CardData) => { - // let newCards = state.cards; - // newCards.push(cardData); - // setState({ ...state, cards: newCards }) - // } - +export default function Player({ player, state, setState }: PlayerProps) { const getChips = (resource: string) => { - AppContext.gameboard.tradingResources[resource as keyof ResourceCost] -= 1; - console.log(AppContext); + setState((prev: AppState) => { + return { + ...prev, + gameboard: { + ...prev.gameboard, + tradingResources: { + ...prev.gameboard.tradingResources, + [resource as keyof ResourceCost]: prev.gameboard.tradingResources[resource as keyof ResourceCost] -= 1 + } + } + } + }) + + console.log(state); } return (
-

Name: {data.name}

-

Score: {data.points}

-

Is {data.starter || "not"} round starter

+ {/* Static Data */} +

Name: {player.name}

+

Score: {player.points}

+

Is {player.starter || "not"} round starter

+ + {/* Dynamic data from state */}
diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx index 61ba953..baaad0a 100644 --- a/src/components/Resources/AvailableChips.tsx +++ b/src/components/Resources/AvailableChips.tsx @@ -1,19 +1,20 @@ -import { useContext, useEffect, useState } from "react" +import { ResourceCost, StateProps } from "../../util/types"; import { v4 } from "uuid"; -import { appState, Context } from "../../context/Context"; -import { ResourceCost } from "../../util/types"; import "./AvailableChips.css" +import { useEffect } from "react"; -export default function AvailableChips() { - const AppContext = useContext(Context); +export default function AvailableChips({ state }: StateProps) { + useEffect(() => { + return; + }, [state]) return (
{ - Object.keys(AppContext.gameboard.tradingResources).map((key: string) => { + Object.keys(state.gameboard.tradingResources).map((key: string) => { return (
-

{key}: {AppContext.gameboard.tradingResources[key as keyof ResourceCost]}

+

{key}: {state.gameboard.tradingResources[key as keyof ResourceCost]}

) }) diff --git a/src/context/Context.ts b/src/context/Context.ts deleted file mode 100644 index 1ec607e..0000000 --- a/src/context/Context.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { CardData, NobleData, PlayerData } from '../util/types'; -import CardDeck from '../data/cards.json'; -import { createContext } from 'react'; -import { AppState } from './types'; - -export const appState: AppState = { - gameboard: { - nobles: new Array, - cardRows: { - tierOne: new Array, - tierTwo: new Array, - tierThree: new Array, - }, - tradingResources: { - ruby: 7, - sapphire: 7, - emerald: 7, - diamond: 7, - onyx: 7, - gold: 5 - }, - deck: CardDeck, - }, - round: 0, - players: new Array, -} - -export const Context = createContext(appState); \ No newline at end of file diff --git a/src/context/types.d.ts b/src/context/types.d.ts deleted file mode 100644 index 4b67105..0000000 --- a/src/context/types.d.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { CardData, FullDeck, NobleData, PlayerData, ResourceCost } from "../util/types" - -export interface AppState { - gameboard: { - nobles: Array, - cardRows: { - tierOne: Array - tierTwo: Array - tierThree: Array - }, - tradingResources: ResourceCost - deck: FullDeck, - }, - round: number, - players: Array -} \ No newline at end of file diff --git a/src/data/nobles.json b/src/data/nobles.json index 56cf3a6..63b2f81 100644 --- a/src/data/nobles.json +++ b/src/data/nobles.json @@ -1,6 +1,7 @@ { "nobles": [ { + "nobleid": 1, "points": 3, "resourceCost": { "ruby": 0, @@ -11,6 +12,7 @@ } }, { + "nobleid": 2, "points": 3, "resourceCost": { "ruby": 0, @@ -21,6 +23,7 @@ } }, { + "nobleid": 3, "points": 3, "resourceCost": { "ruby": 3, @@ -31,6 +34,7 @@ } }, { + "nobleid": 4, "points": 3, "resourceCost": { "ruby": 4, @@ -41,6 +45,7 @@ } }, { + "nobleid": 5, "points": 3, "resourceCost": { "ruby": 0, @@ -51,6 +56,7 @@ } }, { + "nobleid": 6, "points": 3, "resourceCost": { "ruby": 3, @@ -61,6 +67,7 @@ } }, { + "nobleid": 7, "points": 3, "resourceCost": { "ruby": 0, @@ -71,6 +78,7 @@ } }, { + "nobleid": 8, "points": 3, "resourceCost": { "ruby": 3, @@ -81,6 +89,7 @@ } }, { + "nobleid": 9, "points": 3, "resourceCost": { "ruby": 4, @@ -91,6 +100,7 @@ } }, { + "nobleid": 10, "points": 3, "resourceCost": { "ruby": 0, diff --git a/src/util/GameConstructor.tsx b/src/util/GameConstructor.tsx index ce90c27..23d1961 100644 --- a/src/util/GameConstructor.tsx +++ b/src/util/GameConstructor.tsx @@ -1,7 +1,7 @@ import { useContext, useEffect, useState } from "react" import { useNavigate } from "react-router-dom" import { Context } from "../context/Context"; -import { CardData, NobleData, PlayerData } from "./types"; +import { CardData, NobleData, PlayerData, StateProps } from "./types"; interface InputState { playerOne: PlayerInput @@ -15,12 +15,10 @@ interface PlayerInput { starter: boolean } -export default function GameConstructor() { - const AppContext = useContext(Context); +export default function GameConstructor({ state, setState }: StateProps) { const navigate = useNavigate(); const [starter, setStarter] = useState(-1); - const [input, setInput] = useState({ playerOne: { name: '', @@ -66,7 +64,7 @@ export default function GameConstructor() { if (!player.name) newPlayers.splice(newPlayers.indexOf(player)); } - AppContext.players = newPlayers; + setState({ ...state, players: newPlayers }); navigate('/game'); } diff --git a/src/util/types.d.ts b/src/util/types.d.ts index edddb40..7fa4f83 100644 --- a/src/util/types.d.ts +++ b/src/util/types.d.ts @@ -1,3 +1,26 @@ +import { Dispatch, SetStateAction } from "react" +import { AppState } from "../context/types" + +export interface AppState { + gameboard: { + nobles: Array, + cardRows: { + tierOne: Array + tierTwo: Array + tierThree: Array + }, + tradingResources: ResourceCost + deck: FullDeck, + }, + round: number, + players: Array +} + +export interface StateProps { + state: AppState, + setState: Dispatch> +} + export interface GameInformation { players: PlayerData[], nobles: NobleData[], @@ -8,6 +31,7 @@ export interface GameInformation { export interface PlayerData { name: string, starter: boolean, + turnActive?: boolean, points: number, nobles: NobleData[], cards: CardData[], @@ -39,6 +63,7 @@ export interface ResourceCost { } export interface NobleData { + nobleid?: number, points: number, resourceCost: ResourceCost } @@ -50,4 +75,4 @@ export enum GemValue { diamond, onyx, gold, -} \ No newline at end of file +}