refactor stakingSourceView, add vertical navigation, other styling stuff
This commit is contained in:
Emil Nielsen
parent
9b753cf103
commit
595bd18b14
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1016 KiB |
BIN
public/assets/moon_2.png
Normal file
BIN
public/assets/moon_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1008 KiB |
BIN
public/assets/moon_3.png
Normal file
BIN
public/assets/moon_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
public/assets/moon_4.png
Normal file
BIN
public/assets/moon_4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 772 KiB |
BIN
public/assets/moon_5.png
Normal file
BIN
public/assets/moon_5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
@ -1,24 +0,0 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { IBankAccount } from "typings";
|
||||
|
||||
const BankAccount = (props: { account: IBankAccount }) => {
|
||||
return (
|
||||
<div
|
||||
className={" bg-gradient-to-br hover:bg-gradient-to-tr rounded-lg p-3"}
|
||||
>
|
||||
<div className="text-white">
|
||||
<span className={" font-bold"}>MoonBucks</span>
|
||||
<h3 className="text-2xl font-bold">
|
||||
{props.account.primaryBalance.toLocaleString("en-US", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}{" "}
|
||||
kg
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BankAccount;
|
||||
@ -1,31 +1,33 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { IBankAccount } from "typings";
|
||||
import BankAccount from "./BankAccount";
|
||||
import ResourceAccount from "./ResourceAccount";
|
||||
import { BiLoaderAlt } from "react-icons/bi";
|
||||
|
||||
const BankAccountsView = (props: {
|
||||
bankAccount: IBankAccount | undefined;
|
||||
setLightBoxIsActive: () => void;
|
||||
}) => {
|
||||
if (props.bankAccount === undefined) {
|
||||
return <p>No bankaccount</p>;
|
||||
return (
|
||||
<div className="m-4 rounded-lg bg-slate-700 h-20 flex items-center">
|
||||
<BiLoaderAlt className="text-white animate-spin w-28 m-auto" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="p-4">
|
||||
<div className="flex gap-8">
|
||||
<div className="flex-1 bg-green-800 rounded-lg p-3">
|
||||
<div className="flex items-center gap-8">
|
||||
<div className="flex-1 border-2 border-white rounded-lg px-8 py-4">
|
||||
<div className="text-white">
|
||||
<span className="text-green-400">Moonbucks</span>
|
||||
<span className="text-green-600 font-bold">Moonbucks</span>
|
||||
<h3 className="text-2xl font-bold">
|
||||
${props.bankAccount?.primaryBalance}
|
||||
$
|
||||
{props.bankAccount?.primaryBalance.toLocaleString("en-US", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})}
|
||||
</h3>
|
||||
<button
|
||||
onClick={() => props.setLightBoxIsActive()}
|
||||
className="px-2 text-sm mt-1 rounded-lg font-bold bg-green-400 text-green-800"
|
||||
>
|
||||
Sell Resources
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{props.bankAccount &&
|
||||
|
||||
@ -37,38 +37,31 @@ const InventoryItem = (props: {
|
||||
<CardLayout>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold mb-2">
|
||||
<h3 className="text-2xl font-bold mb-2">
|
||||
{props.inventoryItem.storeItem.name}
|
||||
</h3>
|
||||
<p className="text-sm mb-3">
|
||||
{props.inventoryItem.storeItem.description}
|
||||
</p>
|
||||
<div className="flex">
|
||||
<p className="font-bold mt-4">Base Yield</p>
|
||||
<p>{props.inventoryItem.storeItem.claimAmount}</p>
|
||||
<p className="font-bold mb-1 mt-4">Tier</p>
|
||||
<div className="flex items-center">
|
||||
{props.inventoryItem.storeItem.upgrades.map((upgrade, id) => {
|
||||
if (upgrade.tier <= currentUpgrade.tier) {
|
||||
return (
|
||||
<span
|
||||
key={id}
|
||||
className="bg-green-600 px-2 py-2 border border-black"
|
||||
></span>
|
||||
<span key={id} className="bg-green-600 px-4 py-2"></span>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<span
|
||||
key={id}
|
||||
className="bg-slate-200 px-2 py-2 border border-black"
|
||||
></span>
|
||||
<span key={id} className="bg-slate-200 px-4 py-2"></span>
|
||||
);
|
||||
}
|
||||
})}
|
||||
<p className="font-bold ml-1">(+{currentUpgrade.claimBoost})</p>
|
||||
</div>
|
||||
<p className="font-bold mt-4">Yield</p>
|
||||
<p>
|
||||
{props.inventoryItem.storeItem.claimAmount} +{" "}
|
||||
{currentUpgrade.claimBoost}
|
||||
</p>
|
||||
<div className="">
|
||||
<div className="py-4 my-2">
|
||||
<p className="font-bold mb-1 mt-4">Upgrade</p>
|
||||
<div className="flex items-center">
|
||||
{isInUse() ? (
|
||||
<button className="bg-slate-400 text-slate-600 px-4 py-2 rounded-lg font-bold text-center cursor-not-allowed">
|
||||
In Use
|
||||
@ -81,12 +74,25 @@ const InventoryItem = (props: {
|
||||
props.inventoryItem.storeItem.id
|
||||
)
|
||||
}
|
||||
className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold text-center"
|
||||
className="bg-green-600 rounded-full p-1"
|
||||
>
|
||||
Upgrade | {getNextUpgradePrice()}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<span className="ml-1">({getNextUpgradePrice()})</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative object-contain w-48 h-48">
|
||||
|
||||
@ -8,8 +8,9 @@ const InventoryItemView = (props: {
|
||||
upgradeInventoryItem: (inventoryItemId: number, storeItemId: string) => void;
|
||||
}) => {
|
||||
return (
|
||||
<div className="bg-slate-800 text-white p-4 rounded-lg">
|
||||
<h2 className="text-2xl font-bold mb-4">Your Inventory</h2>
|
||||
<div className="border-2 border-white text-white p-8 rounded-lg col-span-5">
|
||||
<h2 className="text-3xl font-bold mb-4">Your Inventory</h2>
|
||||
<div className="grid grid-cols-3 gap-8">
|
||||
{props.inventoryItems &&
|
||||
props.inventoryItems.length > 0 &&
|
||||
props.inventoryItems.map((inventoryItem, id) => (
|
||||
@ -21,6 +22,7 @@ const InventoryItemView = (props: {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
47
src/app/Components/NavbarVertical.tsx
Normal file
47
src/app/Components/NavbarVertical.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import React from "react";
|
||||
|
||||
interface MenuItem {
|
||||
name: string;
|
||||
componentKey: string;
|
||||
}
|
||||
|
||||
const menuItems: MenuItem[] = [
|
||||
{ name: "Moons", componentKey: "stakingsourcesview" },
|
||||
{ name: "Inventory", componentKey: "inventoryitemview" },
|
||||
{ name: "Buy Items", componentKey: "storeitemview" },
|
||||
{ name: "Sell Resources", componentKey: "resourcestore" },
|
||||
];
|
||||
|
||||
interface NavbarProps {
|
||||
onMenuItemClick: (componentKey: string) => void;
|
||||
activeItem: string;
|
||||
}
|
||||
|
||||
const NavbarVertical: React.FC<NavbarProps> = ({
|
||||
onMenuItemClick,
|
||||
activeItem,
|
||||
}) => {
|
||||
return (
|
||||
<div className="">
|
||||
<nav className="border-2 border-white rounded-lg p-8 h-auto">
|
||||
<ul className="">
|
||||
{menuItems.map((item) => (
|
||||
<li
|
||||
key={item.componentKey}
|
||||
className={`text-white cursor-pointer mb-1 ${
|
||||
item.componentKey === activeItem
|
||||
? "text-3xl font-bold"
|
||||
: "text-2xl"
|
||||
}`}
|
||||
onClick={() => onMenuItemClick(item.componentKey)}
|
||||
>
|
||||
{item.name}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavbarVertical;
|
||||
@ -5,12 +5,7 @@ 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={"flex-1 border-2 border-white rounded-lg px-8 py-4"}>
|
||||
<div className="text-white">
|
||||
<span
|
||||
className={resourceToFc(props.account.resourceType) + " font-bold"}
|
||||
|
||||
@ -3,10 +3,7 @@ import ResourceStoreItem from "./ResourceStoreItem";
|
||||
import { sumValues } from "../../utils/helpers";
|
||||
import { IBankAccount, IConversionPair } from "typings";
|
||||
|
||||
const ResourceStore = (props: {
|
||||
bankAccount: IBankAccount | undefined;
|
||||
setLightBoxIsActive: () => void;
|
||||
}) => {
|
||||
const ResourceStore = (props: { bankAccount: IBankAccount | undefined }) => {
|
||||
const [conversionRate, setConversionRate] = useState<Number>(0.1);
|
||||
const [conversionPairs, setConversionPairs] = useState<
|
||||
IConversionPair[] | null
|
||||
@ -54,10 +51,8 @@ const ResourceStore = (props: {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-5xl">
|
||||
<h1 className="text-white text-4xl font-extrabold">
|
||||
Sell Your Resources
|
||||
</h1>
|
||||
<div className="bg-slate-800 rounded-lg p-4 col-span-2">
|
||||
<h1 className="text-white text-3xl font-bold">Sell Resources</h1>
|
||||
<div className="flex gap-4 mt-4">
|
||||
<div className="flex-1">
|
||||
{props.bankAccount &&
|
||||
|
||||
@ -6,6 +6,7 @@ import {
|
||||
getObjectFromArray,
|
||||
} from "../../utils/helpers";
|
||||
import SelectDropdown from "./SelectDropdown";
|
||||
import Image from "next/image";
|
||||
|
||||
const StakingSource = (props: {
|
||||
stakingSource: IStakingSource;
|
||||
@ -115,8 +116,19 @@ const StakingSource = (props: {
|
||||
};
|
||||
|
||||
return (
|
||||
<CardLayout>
|
||||
<h3 className="text-xl font-bold mb-2">{props.stakingSource.name}</h3>
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="relative group">
|
||||
<Image
|
||||
src="/assets/moon_1.png"
|
||||
alt="Moon"
|
||||
width={props.stakingSource.size}
|
||||
height={props.stakingSource.size}
|
||||
/>
|
||||
<div className="absolute -right-0 top-1/2 transform -translate-y-1/2 opacity-0 w-0 group-hover:w-96 group-hover:opacity-100 transition-all duration-200 hover:ease-in-out">
|
||||
<div className="bg-slate-900 border-2 border-white rounded-xl p-4 text-white">
|
||||
<h3 className="text-xl font-bold mb-2">
|
||||
{props.stakingSource.name}
|
||||
</h3>
|
||||
<p className="text-sm">{props.stakingSource.description}</p>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex-1">
|
||||
@ -125,7 +137,7 @@ const StakingSource = (props: {
|
||||
activeStakes.map((stake, id) => (
|
||||
<div
|
||||
key={id}
|
||||
className="border border-white/20 rounded-xl p-3 mb-2 bg-black/20"
|
||||
className="border border-white rounded-xl p-3 mb-2 bg-black/20"
|
||||
>
|
||||
<p>
|
||||
<span className="font-bold">Drill: </span>
|
||||
@ -156,7 +168,7 @@ const StakingSource = (props: {
|
||||
!isActive(item) && (
|
||||
<div
|
||||
key={id}
|
||||
className="border border-white/20 rounded-xl p-3 mb-2 bg-black/20"
|
||||
className="border border-white rounded-xl p-3 mb-2 bg-black/20"
|
||||
>
|
||||
<p className="font-bold">{item.storeItem.name}</p>
|
||||
<p className="mt-2">Select Resource</p>
|
||||
@ -169,7 +181,11 @@ const StakingSource = (props: {
|
||||
})
|
||||
)}
|
||||
onChange={(value) =>
|
||||
handleSelectChange(value, item.id, item.storeItem.id)
|
||||
handleSelectChange(
|
||||
value,
|
||||
item.id,
|
||||
item.storeItem.id
|
||||
)
|
||||
}
|
||||
isActive={selectedItemId === item.id}
|
||||
/>
|
||||
@ -189,7 +205,10 @@ const StakingSource = (props: {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -3,6 +3,79 @@ import React from "react";
|
||||
import { IInventoryItem, IStakingSource } from "typings";
|
||||
import StakingSource from "./StakingSource";
|
||||
|
||||
const moons = [
|
||||
{
|
||||
name: "Caelusium",
|
||||
description:
|
||||
"Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
|
||||
image: "/assets/moon_1.png",
|
||||
price: 100,
|
||||
},
|
||||
{
|
||||
name: "Caelusium",
|
||||
description:
|
||||
"Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
|
||||
image: "/assets/moon_2.png",
|
||||
price: 100,
|
||||
},
|
||||
{
|
||||
name: "Caelusium",
|
||||
description:
|
||||
"Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
|
||||
image: "/assets/moon_3.png",
|
||||
price: 100,
|
||||
},
|
||||
{
|
||||
name: "Caelusium",
|
||||
description:
|
||||
"Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
|
||||
image: "/assets/moon_4.png",
|
||||
price: 100,
|
||||
},
|
||||
{
|
||||
name: "Caelusium",
|
||||
description:
|
||||
"Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
|
||||
image: "/assets/moon_5.png",
|
||||
price: 100,
|
||||
},
|
||||
];
|
||||
|
||||
interface RowProps {
|
||||
stakingSources: IStakingSource[];
|
||||
inventoryItems: IInventoryItem[];
|
||||
claimStake: (stakingEventId: number) => void;
|
||||
startStake: (
|
||||
inventoryItemId: number,
|
||||
storeItemId: string,
|
||||
wellId: number
|
||||
) => void;
|
||||
}
|
||||
|
||||
const Row: React.FC<RowProps> = ({
|
||||
stakingSources,
|
||||
inventoryItems,
|
||||
claimStake,
|
||||
startStake,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex justify-between items-center w-full mb-8 mt-8">
|
||||
{stakingSources.map((stakingSource, index) => (
|
||||
<div key={index} className="w-full">
|
||||
<StakingSource
|
||||
stakingSource={stakingSource}
|
||||
inventoryItems={inventoryItems}
|
||||
claimStake={claimStake}
|
||||
startStake={startStake}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const moonSizes = [250, 375, 300, 225, 175, 300, 200, 150, 300, 225];
|
||||
|
||||
const StakingSourcesView = (props: {
|
||||
stakingSources: IStakingSource[] | null;
|
||||
inventoryItems: IInventoryItem[] | null | undefined;
|
||||
@ -14,10 +87,38 @@ const StakingSourcesView = (props: {
|
||||
) => void;
|
||||
createStakingSource: () => void;
|
||||
}) => {
|
||||
// Generate rows of stakingSources
|
||||
const handleRows = () => {
|
||||
let rows = [];
|
||||
let currentRow = [];
|
||||
let rowSize = 3;
|
||||
if (props.stakingSources) {
|
||||
props.stakingSources.forEach((stakingSource, index) => {
|
||||
currentRow.push({ ...stakingSource, size: moonSizes[index] });
|
||||
|
||||
if (currentRow.length === rowSize) {
|
||||
rows.push(currentRow);
|
||||
currentRow = [];
|
||||
rowSize = rowSize === 3 ? 4 : 3;
|
||||
}
|
||||
});
|
||||
|
||||
if (currentRow.length) {
|
||||
rows.push(currentRow);
|
||||
}
|
||||
|
||||
return rows;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const rows = handleRows();
|
||||
|
||||
return (
|
||||
<div className="bg-slate-800 p-4 rounded-lg text-white">
|
||||
<div className="border-2 border-white p-8 rounded-xl col-span-5">
|
||||
<div className="flex items-center mb-4">
|
||||
<h2 className="text-2xl font-bold">Your Moons</h2>
|
||||
<h2 className="text-3xl text-white font-bold">Your Moons</h2>
|
||||
<button
|
||||
className="bg-green-600 rounded-full ml-2 p-1 inline"
|
||||
onClick={() => props.createStakingSource()}
|
||||
@ -38,12 +139,10 @@ const StakingSourcesView = (props: {
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{props.stakingSources &&
|
||||
props.stakingSources.length > 0 &&
|
||||
props.stakingSources.map((stakingSource, id) => (
|
||||
<StakingSource
|
||||
key={id}
|
||||
stakingSource={stakingSource}
|
||||
{rows.map((stakingSources, index) => (
|
||||
<Row
|
||||
key={index}
|
||||
stakingSources={stakingSources}
|
||||
inventoryItems={props.inventoryItems}
|
||||
claimStake={props.claimStake}
|
||||
startStake={props.startStake}
|
||||
|
||||
58
src/app/Components/StakingSourcesViewBackup.tsx
Normal file
58
src/app/Components/StakingSourcesViewBackup.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { IInventoryItem, IStakingSource } from "typings";
|
||||
import StakingSource from "./StakingSource";
|
||||
|
||||
const StakingSourcesView = (props: {
|
||||
stakingSources: IStakingSource[] | null;
|
||||
inventoryItems: IInventoryItem[] | null | undefined;
|
||||
claimStake: (stakingEventId: number) => void;
|
||||
startStake: (
|
||||
inventoryItemId: number,
|
||||
storeItemId: string,
|
||||
wellId: number
|
||||
) => void;
|
||||
createStakingSource: () => void;
|
||||
}) => {
|
||||
return (
|
||||
<div className="bg-slate-800 p-4 rounded-lg text-white col-span-5">
|
||||
<div className="flex items-center mb-4">
|
||||
<h2 className="text-3xl font-bold">Your Moons</h2>
|
||||
<button
|
||||
className="bg-green-600 rounded-full ml-2 p-1 inline"
|
||||
onClick={() => props.createStakingSource()}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 4.5v15m7.5-7.5h-15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{props.stakingSources &&
|
||||
props.stakingSources.length > 0 &&
|
||||
props.stakingSources.map((stakingSource, id) => (
|
||||
<StakingSource
|
||||
key={id}
|
||||
stakingSource={stakingSource}
|
||||
inventoryItems={props.inventoryItems}
|
||||
claimStake={props.claimStake}
|
||||
startStake={props.startStake}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StakingSourcesView;
|
||||
@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import { IStoreItem } from "typings";
|
||||
import CommonCardLayout from "../Layouts/CommonCardLayout";
|
||||
import CardLayout from "../Layouts/CardLayout";
|
||||
import Image from "next/image";
|
||||
|
||||
const StoreItem = (props: {
|
||||
@ -9,7 +9,7 @@ const StoreItem = (props: {
|
||||
buyStoreItem: (itemId: string) => void;
|
||||
}) => {
|
||||
return (
|
||||
<CommonCardLayout>
|
||||
<CardLayout>
|
||||
<div className="flex ">
|
||||
<div className="flex-1 pr-4 mr-4">
|
||||
<h3 className="text-2xl font-bold mb-2">{props.storeItem.name}</h3>
|
||||
@ -17,7 +17,7 @@ const StoreItem = (props: {
|
||||
<div className="py-4 my-2">
|
||||
<button
|
||||
onClick={() => props.buyStoreItem(props.storeItem.id)}
|
||||
className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center"
|
||||
className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-auto text-center"
|
||||
>
|
||||
Buy | ${props.storeItem.price}
|
||||
</button>
|
||||
@ -46,7 +46,7 @@ const StoreItem = (props: {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CommonCardLayout>
|
||||
</CardLayout>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -8,9 +8,9 @@ const StoreItemView = (props: {
|
||||
buyStoreItem: (itemId: string) => void;
|
||||
}) => {
|
||||
return (
|
||||
<div className="bg-slate-800 p-4 rounded-lg">
|
||||
<h2 className="text-2xl font-bold mb-4 text-white">Store</h2>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<div className="border-2 border-white p-8 rounded-lg col-span-5">
|
||||
<h2 className="text-3xl font-bold mb-4 text-white">Store</h2>
|
||||
<div className="grid grid-cols-3 gap-8">
|
||||
{props.storeItems &&
|
||||
props.storeItems.length > 0 &&
|
||||
props.storeItems
|
||||
|
||||
@ -4,7 +4,7 @@ export default function CardLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-lg border border-black/25 bg-slate-700 shadow-xl shadow-black/5 p-4 mb-4 text-slate-100">
|
||||
<div className="rounded-lg border-2 border-black bg-slate-700 shadow-xl shadow-black/5 p-8 mb-4 text-slate-100">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -9,13 +9,13 @@ import NotificationPopover from "./Components/NotificationPopover";
|
||||
import { gameConfig } from "@/utils/gameLogic";
|
||||
import {
|
||||
IInventoryItem,
|
||||
IStoreStakingSource,
|
||||
IStakingSource,
|
||||
IBankAccount,
|
||||
IStake,
|
||||
Notification,
|
||||
} from "typings";
|
||||
import Navbar from "./Components/Navbar";
|
||||
import NavbarVertical from "./Components/NavbarVertical";
|
||||
|
||||
export default function Home() {
|
||||
const [inventoryItems, setInventoryItems] = useState<
|
||||
@ -32,6 +32,7 @@ export default function Home() {
|
||||
const [notificationTime, setNotificationTime] = useState(30);
|
||||
const [storeItems, setStoreItems] = useState(gameConfig.store);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [activeComponent, setActiveComponent] = useState("stakingsourcesview");
|
||||
|
||||
const isOwned = (storeItemId: string) => {
|
||||
if (inventoryItems && inventoryItems?.length > 0) {
|
||||
@ -298,6 +299,10 @@ export default function Home() {
|
||||
setNotification(null);
|
||||
};
|
||||
|
||||
const handleMenuItemClick = (componentKey: string) => {
|
||||
setActiveComponent(componentKey);
|
||||
};
|
||||
|
||||
if (!userId)
|
||||
return (
|
||||
<>
|
||||
@ -310,7 +315,7 @@ export default function Home() {
|
||||
return <p>Loading...</p>;
|
||||
}
|
||||
|
||||
console.log(stakingSources);
|
||||
//console.log(stakingSources);
|
||||
return (
|
||||
<>
|
||||
<Navbar setUserId={setUserId} />
|
||||
@ -324,13 +329,12 @@ export default function Home() {
|
||||
bankAccount={bankAccount}
|
||||
setLightBoxIsActive={handleSetLightBox}
|
||||
/>
|
||||
{lightBoxIsActive && (
|
||||
<ResourceStore
|
||||
bankAccount={bankAccount}
|
||||
setLightBoxIsActive={handleSetLightBox}
|
||||
<div className="grid grid-cols-6 p-4 gap-8">
|
||||
<NavbarVertical
|
||||
onMenuItemClick={handleMenuItemClick}
|
||||
activeItem={activeComponent}
|
||||
/>
|
||||
)}
|
||||
<div className="grid grid-cols-3 gap-8 p-4">
|
||||
{activeComponent === "stakingsourcesview" && (
|
||||
<StakingSourcesView
|
||||
stakingSources={stakingSources}
|
||||
inventoryItems={inventoryItems}
|
||||
@ -338,16 +342,24 @@ export default function Home() {
|
||||
startStake={startStake}
|
||||
createStakingSource={createStakingSource}
|
||||
/>
|
||||
)}
|
||||
{activeComponent === "inventoryitemview" && (
|
||||
<InventoryItemView
|
||||
stakes={userStakes}
|
||||
inventoryItems={inventoryItems}
|
||||
upgradeInventoryItem={upgradeInventoryItem}
|
||||
/>
|
||||
)}
|
||||
{activeComponent === "storeitemview" && (
|
||||
<StoreItemView
|
||||
inventoryItems={inventoryItems}
|
||||
storeItems={storeItems}
|
||||
buyStoreItem={buyStoreItem}
|
||||
/>
|
||||
)}
|
||||
{activeComponent === "resourcestore" && (
|
||||
<ResourceStore bankAccount={bankAccount} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -34,11 +34,11 @@ export function resourceToBg(resourceName: string): string {
|
||||
export function resourceToFc(resourceName: string): string {
|
||||
|
||||
const mapping: IMapping = {
|
||||
"Sollux": "text-teal-400",
|
||||
"Shadowstone": "text-cyan-400",
|
||||
"Azurium": "text-purple-300",
|
||||
"Novafor": "text-rose-300",
|
||||
"Nebulance": "text-rose-300"
|
||||
"Sollux": "text-teal-600",
|
||||
"Shadowstone": "text-cyan-600",
|
||||
"Azurium": "text-purple-500",
|
||||
"Novafor": "text-rose-500",
|
||||
"Nebulance": "text-rose-500"
|
||||
}
|
||||
|
||||
return mapping[resourceName]
|
||||
|
||||
18
typings.d.ts
vendored
18
typings.d.ts
vendored
@ -34,18 +34,12 @@ export interface IStakingSource {
|
||||
description: string;
|
||||
resourceWells: IResourceWell[];
|
||||
activeStakes: IStake[];
|
||||
}
|
||||
|
||||
export interface IStoreStakingSource {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
image: string
|
||||
price: number
|
||||
resourceChance: number
|
||||
resourceMinStartAmount: number
|
||||
resourceMaxStartAmount: number
|
||||
|
||||
image: string | null
|
||||
price: number | null
|
||||
resourceChance: number | null
|
||||
resourceMinStartAmount: number | null
|
||||
resourceMaxStartAmount: number | null
|
||||
size: number | null
|
||||
}
|
||||
|
||||
export interface IInventoryItem {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user