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

to do: rendering problem in resource component

Browse Source
This commit is contained in:
Mikayla Dobson
2022-07-21 17:34:25 -05:00
parent 65af1b284d
commit ec53f1889d
9 changed files with 99 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
package-lock.json generated
View File

@@ -11,6 +11,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"scss": "^0.2.4",
"uuid": "^8.3.2"
},
"devDependencies": {
@@ -1195,6 +1196,14 @@
"integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
"dev": true
},
"node_modules/ometa": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/ometa/-/ometa-0.2.2.tgz",
"integrity": "sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng==",
"engines": {
"node": ">= 0.2.0"
}
},
"node_modules/path-parse": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -1338,6 +1347,17 @@
"loose-envify": "^1.1.0"
}
},
"node_modules/scss": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/scss/-/scss-0.2.4.tgz",
"integrity": "sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==",
"dependencies": {
"ometa": "0.2.2"
},
"engines": {
"node": ">= 0.2.0"
}
},
"node_modules/semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -2251,6 +2271,11 @@
"integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
"dev": true
},
"ometa": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/ometa/-/ometa-0.2.2.tgz",
"integrity": "sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng=="
},
"path-parse": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -2353,6 +2378,14 @@
"loose-envify": "^1.1.0"
}
},
"scss": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/scss/-/scss-0.2.4.tgz",
"integrity": "sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==",
"requires": {
"ometa": "0.2.2"
}
},
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",

1
package.json
View File

@@ -12,6 +12,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"scss": "^0.2.4",
"uuid": "^8.3.2"
},
"devDependencies": {

16
src/App.tsx
View File

@@ -13,13 +13,15 @@ function App() {
return (
<div className="App">
<h1>SPLENDOR</h1>
<BrowserRouter>
<Routes>
<Route path="/" element={<GameConstructor />} />
<Route path="/game" element={<Gameboard />} />
</Routes>
</BrowserRouter>
<Context.Provider value={appState}>
<h1>SPLENDOR</h1>
<BrowserRouter>
<Routes>
<Route path="/" element={<GameConstructor />} />
<Route path="/game" element={<Gameboard />} />
</Routes>
</BrowserRouter>
</Context.Provider>
</div>
);
}

9
src/components/Gameboard/Gameboard.tsx
View File

@@ -1,6 +1,5 @@
import { useContext, useEffect, useState } from 'react';
import { Context } from '../../context/Context';
import GameConstructor from '../../util/GameConstructor';
import { appState, Context } from '../../context/Context';
import { NobleData } from '../../util/types';
import AllPlayers from '../Player/AllPlayers';
import AvailableChips from '../Resources/AvailableChips';
@@ -28,16 +27,16 @@ export default function Gameboard() {
} else {
setView(
<div className="gameboard-rows">
<Nobles />
<Nobles AppContext={AppContext} />
<CardRow tier={3} cards={gameboard.cardRows.tierThree} />
<CardRow tier={2} cards={gameboard.cardRows.tierTwo} />
<CardRow tier={1} cards={gameboard.cardRows.tierOne} />
<AvailableChips />
<AllPlayers />
<AllPlayers AppContext={AppContext} />
</div>
)
}
}, [players]);
}, [AppContext]);
const shuffleDeck = () => {
if (!gameboard.deck) return;

11
src/components/Gameboard/Nobles.tsx
View File

@@ -1,17 +1,16 @@
import { useContext, useEffect } from "react";
import { v4 } from "uuid";
import { Context } from "../../context/Context";
import { NobleData, ResourceCost } from "../../util/types";
import "./Nobles.css"
export default function Nobles() {
const { gameboard } = useContext(Context);
export default function Nobles({ AppContext }: any) {
const { gameboard } = AppContext;
return (
<div className="nobles-panel">
<strong>NOBLES</strong>
<div className="all-nobles">
{
gameboard.nobles.map((noble) => {
gameboard.nobles && gameboard.nobles.map((noble: NobleData) => {
return (
<div className="noble-card" key={v4()}>
<p>Points: {noble.points}</p>
@@ -19,7 +18,7 @@ export default function Nobles() {
{
Object.keys(noble.resourceCost).map((each) => {
// @ts-ignore
return (noble.resourceCost[each] > 0) && <p key={v4()}>{each}: {noble.resourceCost[each]}</p>
return (noble.resourceCost[each as keyof ResourceCost] > 0) && <p key={v4()}>{each}: {noble.resourceCost[each as keyof ResourceCost]}</p>
})
}
</div>

7
src/components/Player/AllPlayers.tsx
View File

@@ -3,14 +3,15 @@ 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() {
const { players } = useContext(Context);
export default function AllPlayers({ AppContext }: any) {
const { players } = AppContext;
return (
<div className="all-players">
{
players.map((player) => <Player key={v4()} data={player} />)
players.map((player: PlayerData) => <Player key={v4()} data={player} />)
}
</div>
)

50
src/components/Player/Player.tsx
View File

@@ -1,39 +1,36 @@
import { useContext } from "react";
import { v4 } from "uuid";
import { useState } from "react";
import { CardData, GemValue, PlayerData } from "../../util/types";
import { Context } from "../../context/Context";
import { GemValue, PlayerData, ResourceCost } from "../../util/types"
interface PlayerProps {
data: PlayerData
}
export default function Player({ data }: PlayerProps) {
const [state, setState] = useState({
name: data.name,
starter: data.starter,
points: data.points,
nobles: data.nobles,
cards: data.cards,
inventory: data.inventory
})
const AppContext = useContext(Context);
const buyCard = (cardData: CardData) => {
let newCards = state.cards;
newCards.push(cardData);
setState({ ...state, cards: newCards })
}
let state: any;
let setState: any;
const getChips = (payload: (string | GemValue)[]) => {
let newInventory = state.inventory;
for (let value of payload) {
for (let key in newInventory) {
if (value === key) {
// @ts-ignore
newInventory[value] += 1;
}
}
}
// const [state, setState] = useState({
// name: data.name,
// starter: data.starter,
// points: data.points,
// nobles: data.nobles,
// cards: data.cards,
// inventory: data.inventory
// })
setState({ ...state, inventory: newInventory });
// const buyCard = (cardData: CardData) => {
// let newCards = state.cards;
// newCards.push(cardData);
// setState({ ...state, cards: newCards })
// }
const getChips = (resource: string) => {
AppContext.gameboard.tradingResources[resource as keyof ResourceCost] -= 1;
console.log(AppContext);
}
return (
@@ -41,6 +38,7 @@ export default function Player({ data }: PlayerProps) {
<p>Name: {data.name}</p>
<p>Score: {data.points}</p>
<p>Is {data.starter || "not"} round starter</p>
<button onClick={() => getChips('ruby')}>Get Chips</button>
<div className="player-cards"></div>
<div className="player-resources"></div>
</div>

26
src/components/Resources/AvailableChips.tsx
View File

@@ -1,23 +1,23 @@
import { useContext } from "react"
import { Context } from "../../context/Context"
import { useContext, useEffect, useState } from "react"
import { v4 } from "uuid";
import { appState, Context } from "../../context/Context";
import { ResourceCost } from "../../util/types";
import "./AvailableChips.css"
export default function AvailableChips() {
const { gameboard } = useContext(Context);
const AppContext = useContext(Context);
return (
<div className="available-chips">
{
Object.keys(gameboard.tradingResources).map((key: string) => {
return (
<div key={v4()} className={`chips-${key}`}>
{/* @ts-ignore */}
<p>{key}: {gameboard.tradingResources[key]}</p>
</div>
)
})
}
{
Object.keys(AppContext.gameboard.tradingResources).map((key: string) => {
return (
<div key={v4()} className={`chips-${key}`}>
<p>{key}: {AppContext.gameboard.tradingResources[key as keyof ResourceCost]}</p>
</div>
)
})
}
</div>
)
}

12
src/util/types.d.ts vendored
View File

@@ -44,10 +44,10 @@ export interface NobleData {
}
export enum GemValue {
Ruby,
Sapphire,
Emerald,
Diamond,
Onyx,
Gold,
ruby,
sapphire,
emerald,
diamond,
onyx,
gold,
}