diff --git a/package-lock.json b/package-lock.json index 380e6a7..64501b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,10 +13,12 @@ "@types/node": "18.13.0", "@types/react": "18.0.27", "@types/react-dom": "18.0.10", + "chart.js": "^4.2.1", "eslint": "8.33.0", "eslint-config-next": "13.1.6", "next": "13.1.6", "react": "18.2.0", + "react-chartjs-2": "^5.2.0", "react-dom": "18.2.0", "sqlite": "^4.1.2", "sqlite3": "^5.1.4", @@ -97,6 +99,11 @@ "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==" }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@mapbox/node-pre-gyp": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz", @@ -1238,6 +1245,17 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/chart.js": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.2.1.tgz", + "integrity": "sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": "^7.0.0" + } + }, "node_modules/chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -4230,6 +4248,15 @@ "node": ">=0.10.0" } }, + "node_modules/react-chartjs-2": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz", + "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==", + "peerDependencies": { + "chart.js": "^4.1.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -5290,6 +5317,11 @@ "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==" }, + "@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "@mapbox/node-pre-gyp": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz", @@ -6030,6 +6062,14 @@ "supports-color": "^7.1.0" } }, + "chart.js": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.2.1.tgz", + "integrity": "sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw==", + "requires": { + "@kurkle/color": "^0.3.0" + } + }, "chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -8144,6 +8184,12 @@ "loose-envify": "^1.1.0" } }, + "react-chartjs-2": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz", + "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==", + "requires": {} + }, "react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", diff --git a/package.json b/package.json index d6eb45d..f428f7d 100644 --- a/package.json +++ b/package.json @@ -14,10 +14,12 @@ "@types/node": "18.13.0", "@types/react": "18.0.27", "@types/react-dom": "18.0.10", + "chart.js": "^4.2.1", "eslint": "8.33.0", "eslint-config-next": "13.1.6", "next": "13.1.6", "react": "18.2.0", + "react-chartjs-2": "^5.2.0", "react-dom": "18.2.0", "sqlite": "^4.1.2", "sqlite3": "^5.1.4", diff --git a/src/app/Components/Chart.tsx b/src/app/Components/Chart.tsx new file mode 100644 index 0000000..70c3c79 --- /dev/null +++ b/src/app/Components/Chart.tsx @@ -0,0 +1,99 @@ +import React from "react"; +import { useState, useEffect } from "react"; +import { Line } from "react-chartjs-2"; +import { + Chart as ChartJS, + CategoryScale, + LinearScale, + PointElement, + LineElement, + Title, + Tooltip, + Legend, + Filler, + BarElement, + ArcElement, +} from "chart.js"; + +ChartJS.register( + CategoryScale, + LinearScale, + PointElement, + LineElement, + BarElement, + ArcElement, + Title, + Tooltip, + Legend, + Filler +); + +import { IChart, IUpgrade } from "typings"; + +// https://www.chartjs.org/docs/latest/samples/scale-options/grid.html + +const Chart = (props: { upgrades: IUpgrade[] }) => { + const options = { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + position: "bottom" as const, + }, + title: { + display: false, + }, + }, + scales: { + x: { + grid: { + display: false, + }, + }, + }, + }; + + const [chartData, setChartData] = useState({ + labels: props.upgrades.map((upgrade) => `$${upgrade.price}`), + datasets: [ + { + label: "Upgrades", + backgroundColor: "rgb(242, 244, 250, 1)", + data: props.upgrades.map((upgrade) => upgrade.claimBoost), + tension: 0.3, + borderWidth: 2, + pointRadius: 4, + pointHoverRadius: 10, + borderColor: "rgb(52, 152, 219)", + fill: { + target: "origin", + above: "rgba(52, 152, 219, 0.05)", + }, + }, + ], + }); + + /* useEffect(() => { + setChartData({ + labels: labels, + datasets: { + label: label, + backgroundColor: "rgb(242, 244, 250, 1)", + data: values, + tension: 0.3, + borderWidth: 5, + pointRadius: 7, + pointHoverRadius: 10, + borderColor: "rgb(52, 152, 219)", + fill: { + target: "origin", + above: "rgba(52, 152, 219, 0.05)", + }, + }, + }); + }, [values]); */ + + return ; +}; + +export default Chart; diff --git a/src/app/Components/InventoryItem.tsx b/src/app/Components/InventoryItem.tsx index e7e9a08..fda19b1 100644 --- a/src/app/Components/InventoryItem.tsx +++ b/src/app/Components/InventoryItem.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { IInventoryItem, IStake } from "typings"; import CardLayout from "../Layouts/CardLayout"; @@ -7,9 +7,18 @@ const InventoryItem = (props: { stakes: IStake[] | null; upgradeInventoryItem: (itemId: number) => void; }) => { - const getCurrentTier = (index: number) => { - return props.inventoryItem.storeItem.upgrades[index].tier; - }; + const [currentTierIndex, setCurrentTierIndex] = useState( + props.inventoryItem.currentTierIndex + ); + const [currentUpgrade, setCurrentUpgrade] = useState( + props.inventoryItem.storeItem.upgrades[currentTierIndex] + ); + + useEffect(() => { + const index = props.inventoryItem.currentTierIndex; + setCurrentTierIndex(index); + setCurrentUpgrade(props.inventoryItem.storeItem.upgrades[index]); + }, [props.inventoryItem]); const isInUse = () => { if (!props.stakes) return false; @@ -18,25 +27,49 @@ const InventoryItem = (props: { }); }; + const getNextUpgradePrice = () => { + if (currentTierIndex === 4) return "Maxed"; + return `$${ + props.inventoryItem.storeItem.upgrades[currentTierIndex + 1].price + }`; + }; return (

- {props.inventoryItem.storeItem.name}{" "} - - {getCurrentTier(props.inventoryItem.currentTierIndex)} - + {props.inventoryItem.storeItem.name} +
+ {props.inventoryItem.storeItem.upgrades.map((upgrade, id) => { + if (upgrade.tier <= currentUpgrade.tier) { + return ( + + ); + } else { + return ( + + ); + } + })} +

{props.inventoryItem.storeItem.description}

Yield

-
    - {getCurrentTier(props.inventoryItem.currentTierIndex)} -
+

+ {props.inventoryItem.storeItem.claimAmount} +{" "} + {currentUpgrade.claimBoost} +

+
    -
    -
    - {/* { Check if the item is in use } */} +
    +

    {getNextUpgradePrice()}

    +
    {isInUse() ? (
    ))} diff --git a/src/app/Components/StakingSourcesView.tsx b/src/app/Components/StakingSourcesView.tsx index 268878a..30b4dad 100644 --- a/src/app/Components/StakingSourcesView.tsx +++ b/src/app/Components/StakingSourcesView.tsx @@ -9,8 +9,6 @@ const StakingSourcesView = (props: { claimStake: (stakingEventId: number) => void; startStake: (inventoryItemId: number, wellId: number) => void; }) => { - console.log(props.inventoryItems); - console.log(props.stakingSources); return (

    Your Moons

    diff --git a/src/app/Components/StoreItem.tsx b/src/app/Components/StoreItem.tsx index ba0c04f..9d46e7c 100644 --- a/src/app/Components/StoreItem.tsx +++ b/src/app/Components/StoreItem.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { IStoreItem } from "typings"; import CommonCardLayout from "../Layouts/CommonCardLayout"; +import Chart from "./Chart"; const StoreItem = (props: { storeItem: IStoreItem; @@ -9,7 +10,7 @@ const StoreItem = (props: { }) => { return ( -
    +
    {props.storeItem.isOwned ? ( Owned @@ -18,42 +19,31 @@ const StoreItem = (props: { )}

    {props.storeItem.name}

    {props.storeItem.description}

    -

    $ {props.storeItem.price}

    -

    Tier Upgrades

    - - - - - - - {props.storeItem.upgrades.map((tier, id) => ( - - - - - ))} - -
    TierPrice
    - {tier.tier} - - ${tier.price} -
    +

    Base Yield

    +

    {props.storeItem.claimAmount}

    -
    +
    {props.storeItem.isOwned ? ( ) : ( - + <> +

    ${props.storeItem.price}

    + + )}
    +

    Upgrades

    +
    + +
    ); }; diff --git a/src/app/Components/StoreItemView.tsx b/src/app/Components/StoreItemView.tsx index 7542d12..6a836b1 100644 --- a/src/app/Components/StoreItemView.tsx +++ b/src/app/Components/StoreItemView.tsx @@ -10,16 +10,18 @@ const StoreItemView = (props: { return (

    Store

    - {props.storeItems && - props.storeItems - .sort((a, b) => (a.isOwned === b.isOwned ? 0 : a.isOwned ? 1 : -1)) - .map((storeItem, id) => ( - - ))} +
    + {props.storeItems && + props.storeItems + .sort((a, b) => (a.isOwned === b.isOwned ? 0 : a.isOwned ? 1 : -1)) + .map((storeItem, id) => ( + + ))} +
    ); }; diff --git a/src/app/Layouts/CommonCardLayout.tsx b/src/app/Layouts/CommonCardLayout.tsx index d04ff1d..8f8943c 100644 --- a/src/app/Layouts/CommonCardLayout.tsx +++ b/src/app/Layouts/CommonCardLayout.tsx @@ -4,10 +4,8 @@ export default function CommonCardLayout({ children: React.ReactNode; }) { return ( -
    +
    {children}
    ); } - -// rounded-lg border border-black/25 bg-gradient-to-br from-slate-700 via-slate-600 to-slate-800 shadow-xl shadow-black/5 p-4 mb-4 text-slate-100 diff --git a/typings.d.ts b/typings.d.ts index 7a7fd7c..fa2261b 100644 --- a/typings.d.ts +++ b/typings.d.ts @@ -42,6 +42,12 @@ export interface IInventoryItem { currentTierIndex: number; } +export interface IUpgrade { + tier: number; + price: number; + claimBoost: number; +} + export interface IStoreItem { id: string; name: string; @@ -49,11 +55,7 @@ export interface IStoreItem { price: number; completionTimeInMins: number; claimAmount: number; - upgrades: { - tier: number; - price: number; - claimBoost: number; - }[]; + upgrades: IUpgrade[]; isOwned: boolean; } @@ -140,3 +142,9 @@ export interface ISelectDropdownProps { onChange?: (value: string) => void; isActive: boolean } + +export interface IChart { + label: string + labels: string[] + values: number[] +} \ No newline at end of file