UI: Tabs, full color resources, omit modals
This commit is contained in:
Emil Nielsen
parent
01cc1d78ef
commit
87ac3c373b
@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { IResourceAccount, IConversionPair, IGameConfig } from "typings";
|
||||
import { resourceToFc } from "../../../utils/helpers";
|
||||
import { resourceToFc, resourceToBg } from "../../../utils/helpers";
|
||||
import ResourceModal from "./ResourceModal";
|
||||
|
||||
const ResourceAccount = (props: {
|
||||
@ -101,8 +101,14 @@ const ResourceAccount = (props: {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 md:mb-0 mb-2 bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl">
|
||||
<div className="relative bg-slate-900 text-white px-8 py-4 rounded-xl">
|
||||
<div className="flex-1 md:mb-0 mb-2 h-auto p-1 rounded-xl">
|
||||
<div
|
||||
className={
|
||||
"bg-gradient-to-br hover:bg-gradient-to-tr " +
|
||||
resourceToBg(props.account.resourceType) +
|
||||
" relative text-white px-8 py-4 rounded-xl"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className={resourceToFc(props.account.resourceType) + " font-bold"}
|
||||
>
|
||||
@ -115,23 +121,30 @@ const ResourceAccount = (props: {
|
||||
})}{" "}
|
||||
kg
|
||||
</h3>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6 absolute right-0 top-0 mt-4 mr-4 hover:cursor-pointer"
|
||||
onClick={() => {
|
||||
setShowModal(!showModal);
|
||||
}}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute right-0 top-0 mt-4 mr-4 hover:cursor-pointer">
|
||||
<div
|
||||
className="flex"
|
||||
onClick={() => {
|
||||
setShowModal(!showModal);
|
||||
}}
|
||||
>
|
||||
<span className="mr-2">Sell</span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -23,14 +23,14 @@ const NavbarVertical: React.FC<NavbarProps> = ({
|
||||
return (
|
||||
<div className="w-full col-span-5 md:col-span-1">
|
||||
<nav className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl">
|
||||
<ul className="bg-slate-900 p-8 rounded-xl">
|
||||
<ul className="bg-slate-900 rounded-xl p-2">
|
||||
{menuItems.map((item) => (
|
||||
<li
|
||||
key={item.componentKey}
|
||||
className={`text-white cursor-pointer mb-1 ${
|
||||
className={`cursor-pointer mb-1 px-4 ${
|
||||
item.componentKey === activeItem
|
||||
? "text-3xl font-bold"
|
||||
: "text-2xl"
|
||||
? "text-white bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 text-3xl font-bold rounded-xl py-2 "
|
||||
: "text-white text-2xl"
|
||||
}`}
|
||||
onClick={() => onMenuItemClick(item.componentKey)}
|
||||
>
|
||||
|
||||
@ -119,122 +119,101 @@ const StakingSource = (props: {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="relative group">
|
||||
<Image
|
||||
src={"/assets/moons/" + props.stakingSource.image}
|
||||
alt="Moon"
|
||||
width={props.stakingSource.size}
|
||||
height={props.stakingSource.size}
|
||||
onClick={() => setShowInfo(!showInfo)}
|
||||
className="hover:cursor-pointer"
|
||||
/>
|
||||
{showInfo && (
|
||||
<div className="z-10 fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
|
||||
<div className="w-full h-full md:h-auto max-w-md max-h-full overflow-y-auto">
|
||||
<div className="relative h-full md:h-auto text-white bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto md:rounded-xl h-auto p-1">
|
||||
<div className="h-full md:h-auto bg-slate-900 md:rounded-xl p-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowInfo(!showInfo);
|
||||
}}
|
||||
className="text-white absolute -right-0 mr-4"
|
||||
>
|
||||
<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="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h3 className="text-3xl font-bold mb-2">
|
||||
{props.stakingSource.name}
|
||||
</h3>
|
||||
<p className="text-sm">{props.stakingSource.description}</p>
|
||||
<div className="flex-1">
|
||||
<p className="font-bold mt-4 mb-2">Active Drills</p>
|
||||
{activeStakes &&
|
||||
activeStakes.map((stake, id) => (
|
||||
<div
|
||||
key={id}
|
||||
className="border border-white rounded-xl p-3 mb-2 bg-black/20"
|
||||
>
|
||||
<p>
|
||||
<span className="font-bold">Drill: </span>
|
||||
{props.inventoryItems &&
|
||||
getObjectFromArray(
|
||||
props.inventoryItems,
|
||||
"id",
|
||||
stake.inventoryItemId
|
||||
)?.storeItem.name}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">Resource: </span>
|
||||
{stake.resourceType}
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
<span className="font-bold">Yield: </span>
|
||||
{stake.stakeAmount}
|
||||
</p>
|
||||
<RenderButtonOrCountdown stake={stake} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="font-bold mt-4 mb-2">Inactive Drills</p>
|
||||
{props.inventoryItems &&
|
||||
props.inventoryItems.map(
|
||||
(item, id) =>
|
||||
!isActive(item) && (
|
||||
<div
|
||||
key={id}
|
||||
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>
|
||||
<div className="flex">
|
||||
<SelectDropdown
|
||||
options={props.stakingSource.resourceWells.map(
|
||||
(well): IOption => ({
|
||||
value: well.id,
|
||||
label: well.resourceType,
|
||||
})
|
||||
)}
|
||||
onChange={(value) =>
|
||||
handleSelectChange(
|
||||
value,
|
||||
item.id,
|
||||
item.storeItem.id
|
||||
)
|
||||
}
|
||||
isActive={selectedInventoryItemId === item.id}
|
||||
/>
|
||||
{selectedInventoryItemId === item.id ? (
|
||||
<button
|
||||
onClick={handleStartMining}
|
||||
className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center ml-2"
|
||||
>
|
||||
Activate
|
||||
</button>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<Image
|
||||
src={"/assets/moons/" + props.stakingSource.image}
|
||||
alt="Moon"
|
||||
width={300}
|
||||
height={300}
|
||||
style={{ objectFit: "contain" }}
|
||||
className="mr-4"
|
||||
/>
|
||||
<div className="max-w-md text-white bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 md:rounded-xl p-1">
|
||||
<div className="bg-slate-900 md:rounded-xl p-4">
|
||||
<div className="">
|
||||
<h3 className="text-3xl font-bold mb-2">
|
||||
{props.stakingSource.name}
|
||||
</h3>
|
||||
<p className="text-sm">{props.stakingSource.description}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex">
|
||||
{activeStakes.length > 0 && (
|
||||
<div className="">
|
||||
<p className="font-bold mt-4 mb-2">Active Drills</p>
|
||||
{activeStakes.map((stake, id) => (
|
||||
<div
|
||||
key={id}
|
||||
className="border border-white rounded-xl p-3 mb-2 bg-black/20"
|
||||
>
|
||||
<p>
|
||||
<span className="font-bold">Drill: </span>
|
||||
{props.inventoryItems &&
|
||||
getObjectFromArray(
|
||||
props.inventoryItems,
|
||||
"id",
|
||||
stake.inventoryItemId
|
||||
)?.storeItem.name}
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold">Resource: </span>
|
||||
{stake.resourceType}
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
<span className="font-bold">Yield: </span>
|
||||
{stake.stakeAmount}
|
||||
</p>
|
||||
<RenderButtonOrCountdown stake={stake} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{props.inventoryItems && (
|
||||
<div className="">
|
||||
<p className="font-bold mt-4 mb-2">Inactive Drills</p>
|
||||
{props.inventoryItems.map(
|
||||
(item, id) =>
|
||||
!isActive(item) && (
|
||||
<div
|
||||
key={id}
|
||||
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>
|
||||
<div className="flex">
|
||||
<SelectDropdown
|
||||
options={props.stakingSource.resourceWells.map(
|
||||
(well): IOption => ({
|
||||
value: well.id,
|
||||
label: well.resourceType,
|
||||
})
|
||||
)}
|
||||
onChange={(value) =>
|
||||
handleSelectChange(
|
||||
value,
|
||||
item.id,
|
||||
item.storeItem.id
|
||||
)
|
||||
}
|
||||
isActive={selectedInventoryItemId === item.id}
|
||||
/>
|
||||
{selectedInventoryItemId === item.id ? (
|
||||
<button
|
||||
onClick={handleStartMining}
|
||||
className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center ml-2"
|
||||
>
|
||||
Activate
|
||||
</button>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -3,41 +3,6 @@ import React from "react";
|
||||
import { IInventoryItem, IStakingSource } from "typings";
|
||||
import StakingSource from "./StakingSource";
|
||||
|
||||
interface RowProps {
|
||||
stakingSources: IStakingSource[];
|
||||
inventoryItems: IInventoryItem[] | undefined | null;
|
||||
claimStake: (stakingEventId: number) => void;
|
||||
startStake: (
|
||||
inventoryItemId: string,
|
||||
storeItemId: number,
|
||||
wellId: string
|
||||
) => void;
|
||||
}
|
||||
|
||||
const Row: React.FC<RowProps> = ({
|
||||
stakingSources,
|
||||
inventoryItems,
|
||||
claimStake,
|
||||
startStake,
|
||||
}) => {
|
||||
return (
|
||||
<div className="md:flex md:justify-between md: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;
|
||||
@ -49,34 +14,6 @@ const StakingSourcesView = (props: {
|
||||
) => void;
|
||||
createStakingSource: () => void;
|
||||
}) => {
|
||||
// Generate rows of stakingSources
|
||||
const handleRows = () => {
|
||||
let rows = [];
|
||||
let currentRow: IStakingSource[] = [];
|
||||
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-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl h-auto p-1 rounded-xl col-span-5">
|
||||
<div className="bg-slate-900 p-8 rounded-xl h-full">
|
||||
@ -102,19 +39,22 @@ const StakingSourcesView = (props: {
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{rows.length > 0 ? (
|
||||
rows.map((stakingSources, index) => (
|
||||
<Row
|
||||
key={index}
|
||||
stakingSources={stakingSources}
|
||||
inventoryItems={props.inventoryItems}
|
||||
claimStake={props.claimStake}
|
||||
startStake={props.startStake}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<p className="text-white text-2xl">You don't have any moons</p>
|
||||
)}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{props.stakingSources ? (
|
||||
props.stakingSources.map((stakingSource, index) => (
|
||||
<div key={index} className="mb-4">
|
||||
<StakingSource
|
||||
stakingSource={stakingSource}
|
||||
inventoryItems={props.inventoryItems}
|
||||
claimStake={props.claimStake}
|
||||
startStake={props.startStake}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-white text-2xl">You don't have any moons</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user