Cleanup some UI stuff
This commit is contained in:
Emil Nielsen
parent
595bd18b14
commit
b84b8eadb5
@ -18,8 +18,8 @@ const BankAccountsView = (props: {
|
||||
return (
|
||||
<div className="p-4">
|
||||
<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">
|
||||
<div className="flex-1 bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl">
|
||||
<div className="text-white bg-slate-900 px-8 py-4 rounded-xl">
|
||||
<span className="text-green-600 font-bold">Moonbucks</span>
|
||||
<h3 className="text-2xl font-bold">
|
||||
$
|
||||
|
||||
@ -8,19 +8,21 @@ const InventoryItemView = (props: {
|
||||
upgradeInventoryItem: (inventoryItemId: number, storeItemId: string) => void;
|
||||
}) => {
|
||||
return (
|
||||
<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) => (
|
||||
<InventoryItem
|
||||
key={id}
|
||||
inventoryItem={inventoryItem}
|
||||
upgradeInventoryItem={props.upgradeInventoryItem}
|
||||
stakes={props.stakes}
|
||||
/>
|
||||
))}
|
||||
<div className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl rounded-xl col-span-5">
|
||||
<div className="bg-slate-900 text-white p-8 rounded-xl">
|
||||
<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) => (
|
||||
<InventoryItem
|
||||
key={id}
|
||||
inventoryItem={inventoryItem}
|
||||
upgradeInventoryItem={props.upgradeInventoryItem}
|
||||
stakes={props.stakes}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -23,8 +23,8 @@ const NavbarVertical: React.FC<NavbarProps> = ({
|
||||
}) => {
|
||||
return (
|
||||
<div className="">
|
||||
<nav className="border-2 border-white rounded-lg p-8 h-auto">
|
||||
<ul className="">
|
||||
<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">
|
||||
{menuItems.map((item) => (
|
||||
<li
|
||||
key={item.componentKey}
|
||||
|
||||
@ -5,8 +5,8 @@ import { resourceToBg, resourceToFc } from "../../utils/helpers";
|
||||
|
||||
const ResourceAccount = (props: { account: IResourceAccount }) => {
|
||||
return (
|
||||
<div className={"flex-1 border-2 border-white rounded-lg px-8 py-4"}>
|
||||
<div className="text-white">
|
||||
<div className="flex-1 bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl">
|
||||
<div className="bg-slate-900 text-white px-8 py-4 rounded-xl">
|
||||
<span
|
||||
className={resourceToFc(props.account.resourceType) + " font-bold"}
|
||||
>
|
||||
|
||||
@ -21,7 +21,7 @@ const SelectDropdown: React.FC<ISelectDropdownProps> = (props) => {
|
||||
<select
|
||||
value={selectedValue}
|
||||
onChange={handleChange}
|
||||
className="text-black flex-1 p-2 border border-gray-300 rounded-lg"
|
||||
className="text-black flex-1 p-2 border border-gray-300 rounded-lg hover:cursor-pointer"
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{props.options.map((option, index) => (
|
||||
|
||||
@ -24,6 +24,7 @@ const StakingSource = (props: {
|
||||
null
|
||||
);
|
||||
const [selectedWellId, setSelectedWellId] = useState<number | null>(null);
|
||||
const [showInfo, setShowInfo] = useState(false);
|
||||
|
||||
// Check if claimable every second
|
||||
useEffect(() => {
|
||||
@ -123,14 +124,37 @@ const StakingSource = (props: {
|
||||
alt="Moon"
|
||||
width={props.stakingSource.size}
|
||||
height={props.stakingSource.size}
|
||||
onClick={() => setShowInfo(!showInfo)}
|
||||
className="hover:cursor-pointer"
|
||||
/>
|
||||
<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">
|
||||
{showInfo && (
|
||||
<div className="absolute -right-0 top-1/2 transform -translate-y-1/2 w-96">
|
||||
<div className="bg-slate-500 border-2 border-white rounded-xl p-4 text-white">
|
||||
<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-xl 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 &&
|
||||
@ -160,53 +184,51 @@ const StakingSource = (props: {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<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={selectedItemId === item.id}
|
||||
/>
|
||||
{selectedItemId === 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>
|
||||
) : (
|
||||
<></>
|
||||
<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,
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
onChange={(value) =>
|
||||
handleSelectChange(
|
||||
value,
|
||||
item.id,
|
||||
item.storeItem.id
|
||||
)
|
||||
}
|
||||
isActive={selectedItemId === item.id}
|
||||
/>
|
||||
{selectedItemId === 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>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -116,38 +116,40 @@ const StakingSourcesView = (props: {
|
||||
const rows = handleRows();
|
||||
|
||||
return (
|
||||
<div className="border-2 border-white p-8 rounded-xl col-span-5">
|
||||
<div className="flex items-center mb-4">
|
||||
<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()}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={2}
|
||||
stroke="currentColor"
|
||||
className="w-6 h-6"
|
||||
<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">
|
||||
<div className="flex items-center mb-4">
|
||||
<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()}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M12 4.5v15m7.5-7.5h-15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<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>
|
||||
{rows.map((stakingSources, index) => (
|
||||
<Row
|
||||
key={index}
|
||||
stakingSources={stakingSources}
|
||||
inventoryItems={props.inventoryItems}
|
||||
claimStake={props.claimStake}
|
||||
startStake={props.startStake}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{rows.map((stakingSources, index) => (
|
||||
<Row
|
||||
key={index}
|
||||
stakingSources={stakingSources}
|
||||
inventoryItems={props.inventoryItems}
|
||||
claimStake={props.claimStake}
|
||||
startStake={props.startStake}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user