JosephFerano/MoonMiners
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix some legacy issues in the resourceStore

Browse Source
This commit is contained in:
Emil Nielsen 2023-03-19 09:23:59 +07:00 committed by Joseph Ferano
parent e820f1c45b
commit 7098346b51
7 changed files with 102 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
database.db
View File

Binary file not shown.

4
src/app/Components/BankAccountsView.tsx
View File

@ -9,8 +9,8 @@ const BankAccountsView = (props: {
}) => {
return (
<div className="p-4">
<div className="grid grid-cols-5 gap-8">
<div className="bg-green-800 rounded-lg p-3">
<div className="flex gap-8">
<div className="flex-1 bg-green-800 rounded-lg p-3">
<div className="text-white">
<span className="text-green-400">Moonbucks</span>
<h3 className="text-2xl font-bold">$5,342.23</h3>

32
src/app/Components/ResourceAccount.tsx Normal file
View File

@ -0,0 +1,32 @@
"use client";
import React from "react";
import { IResourceAccount } from "typings";
import { resourceToBg, resourceToFc } from "../../utils/helpers";
const ResourceAccount = (props: { account: IResourceAccount }) => {
return (
<div
className={
resourceToBg(props.account.resourceType) +
" bg-gradient-to-br hover:bg-gradient-to-tr rounded-lg p-3 flex-1"
}
>
<div className="text-white">
<span
className={resourceToFc(props.account.resourceType) + " font-bold"}
>
{props.account.resourceType}
</span>
<h3 className="text-2xl font-bold">
{props.account.balance.toLocaleString("en-US", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}{" "}
kg
</h3>
</div>
</div>
);
};
export default ResourceAccount;

72
src/app/Components/ResourceStore.tsx
View File

@ -1,61 +1,57 @@
import React, { useState, useEffect } from "react";
import ResourceItem from "./ResourceItem";
import ResourceStoreItem from "./ResourceStoreItem";
import { sumValues } from "../../utils/helpers";
import {
IBankAccount,
IConversionPair,
IClaimableResource,
IResourceType,
} from "typings";
import { IBankAccount, IConversionPair } from "typings";
const ResourceStore = (props: {
bankAccounts: IBankAccount[];
bankAccount: IBankAccount | undefined;
setLightBoxIsActive: () => void;
}) => {
const [conversionRate, setConversionRate] = useState<Number>(0.1);
const [amount, setAmount] = useState<IClaimableResource[]>([]);
const [conversionPairs, setConversionPairs] = useState<
IConversionPair[] | null
>(null);
useEffect(() => {
const pairs = amount.map((n) => ({
resourceType: n.resourceType,
resourceAmount: n.balance,
moneyAmount: n.balance * conversionRate.valueOf(),
if (props.bankAccount) {
const pairs = props.bankAccount.resourceAccounts.map((resource) => ({
resourceType: resource.resourceType,
resourceAmount: 0,
moneyAmount: 0,
}));
setConversionPairs(pairs);
}, [amount]);
}
}, []);
const handleAmountChange = (
e: React.ChangeEvent<HTMLInputElement>,
resourceType: IResourceType
resourceType: string
) => {
const existingObj = amount.find(
(obj) => obj.resourceType.name === resourceType.name
if (!conversionPairs) return;
const existingObj = conversionPairs.find(
(obj) => obj.resourceType === resourceType
);
if (existingObj) {
setAmount(
amount.map((obj) =>
obj.resourceType.name === resourceType.name
? { resourceType: resourceType, balance: Number(e.target.value) }
: obj
)
);
const updatedPairs = conversionPairs.map((pair) => {
if (pair.resourceType === existingObj?.resourceType) {
return {
...pair,
resourceAmount: Number(e.target.value),
moneyAmount: Number(e.target.value) * conversionRate.valueOf(),
};
} else {
setAmount([
...amount,
{ resourceType: resourceType, balance: Number(e.target.value) },
]);
return pair;
}
});
setConversionPairs(updatedPairs);
};
const getConversionPair = (name: string) => {
return conversionPairs?.find((obj) => obj.resourceType.name === name);
const getConversionPair = (resourceType: string) => {
return conversionPairs?.find((obj) => obj.resourceType === resourceType);
};
console.log(conversionPairs);
return (
<div className="p-4 max-w-5xl">
<h1 className="text-white text-4xl font-extrabold">
@ -63,13 +59,14 @@ const ResourceStore = (props: {
</h1>
<div className="flex gap-4 mt-4">
<div className="flex-1">
{props.bankAccounts.map((bankAccount) => (
{props.bankAccount &&
props.bankAccount.resourceAccounts.map((resourceAccount) => (
<div className="flex mb-4 gap-4">
<div className="flex-1">
<ResourceStoreItem
bankAccount={bankAccount}
resourceAccount={resourceAccount}
conversionPair={getConversionPair(
bankAccount.resourceType.name
resourceAccount.resourceType
)}
handleAmountChange={handleAmountChange}
/>
@ -92,13 +89,6 @@ const ResourceStore = (props: {
}
)}
</p>
{/* <ResourceItem
name="MoonBucks"
bgColor="bg-green-800"
fontColor="text-green-400"
amount={sumValues(conversionPairs, "moneyAmount")}
unit="$"
/> */}
<button className="bg-slate-100 py-2 text-slate-900 rounded-lg font-bold w-28 text-center">
Sell Now
</button>

24
src/app/Components/ResourceStoreItem.tsx
View File

@ -1,33 +1,33 @@
"use client";
import React, { useEffect, useState } from "react";
import { IBankAccount, IConversionPair } from "typings";
import { IResourceType } from "typings";
import { IResourceAccount, IConversionPair } from "typings";
import { resourceToBg, resourceToFc } from "../../utils/helpers";
const ResourceStoreItem = (props: {
bankAccount: IBankAccount;
resourceAccount: IResourceAccount;
conversionPair: IConversionPair | undefined;
handleAmountChange: (
e: React.ChangeEvent<HTMLInputElement>,
resourceType: IResourceType
resourceType: string
) => void;
}) => {
return (
<div
className={
props.bankAccount.resourceType.bgColorClass +
resourceToBg(props.resourceAccount.resourceType) +
" bg-gradient-to-br hover:bg-gradient-to-tr rounded-lg p-3 flex flex-row"
}
>
<div className="text-white mr-4 flex-none">
<span
className={
props.bankAccount.resourceType.fontColorClass + " font-bold"
resourceToFc(props.resourceAccount.resourceType) + " font-bold"
}
>
{props.bankAccount.resourceType.name}
{props.resourceAccount.resourceType}
</span>
<h3 className="text-2xl font-bold">
{props.bankAccount.balance.toLocaleString("en-US", {
{props.resourceAccount.balance.toLocaleString("en-US", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})}{" "}
@ -40,11 +40,11 @@ const ResourceStoreItem = (props: {
<span>
<span
className={
props.conversionPair.resourceType.fontColorClass +
resourceToFc(props.resourceAccount.resourceType) +
" font-bold"
}
>
{props.conversionPair.resourceType.name}
{props.conversionPair.resourceType}
</span>
<h3 className="text-2xl font-bold">
{props.conversionPair.resourceAmount.toLocaleString("en-US", {
@ -72,7 +72,7 @@ const ResourceStoreItem = (props: {
<span>
<span
className={
props.conversionPair.resourceType.fontColorClass +
resourceToFc(props.resourceAccount.resourceType) +
" font-bold"
}
>
@ -96,7 +96,7 @@ const ResourceStoreItem = (props: {
className="bg-white px-4 py-2 mr-4 rounded-lg flex-none"
placeholder="0"
onChange={(e) =>
props.handleAmountChange(e, props.bankAccount.resourceType)
props.handleAmountChange(e, props.resourceAccount.resourceType)
}
/>
</div>

8
src/app/page.tsx
View File

@ -198,6 +198,12 @@ export default function Home() {
setLightBoxIsActive(!lightBoxIsActive);
};
const handleCloseError = () => {
setError(null);
};
if (!userId) return <p>Please login</p>;
return (
<>
<BankAccountsView
@ -206,7 +212,7 @@ export default function Home() {
/>
{lightBoxIsActive && (
<ResourceStore
bankAccounts={bankAccounts}
bankAccount={bankAccount}
setLightBoxIsActive={handleSetLightBox}
/>
)}

11
typings.d.ts vendored
View File

@ -3,11 +3,10 @@ export type User = {
inventoryItems: IInventoryItem[];
};
export interface IResourceType {
id: number;
name: string;
fontColorClass: string;
bgColorClass: string;
export interface TimeDuration {
hours: number;
minutes: number;
seconds: number;
}
export interface IResourceWell {
@ -54,7 +53,7 @@ export interface IClaimableResource {
}
export interface IConversionPair {
resourceType: IResourceType;
resourceType: string;
resourceAmount: number;
moneyAmount: number
}