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

UI changes moons and items

Browse Source
This commit is contained in:
Emil Nielsen 2023-04-27 13:35:13 +07:00
parent 87ac3c373b
commit a7e7c4dbe9
8 changed files with 148 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
src/app/Components/Inventory/InventoryItem.tsx
View File

@ -19,19 +19,57 @@ const InventoryItem = (props: {
setCurrentUpgrade(currentUpdade);
}, [props.inventoryItem]);
const isInUse = () => {
if (!props.stakes) return false;
return props.stakes.some((stake) => {
stake.inventoryItemId === props.inventoryItem.id;
});
const renderUpgradeButton = () => {
// If no staking source
if (!props.stakes) return "No staking source";
// If item is in use
if (
props.stakes.some((stake) => {
stake.inventoryItemId === props.inventoryItem.id;
})
)
return "In use";
// If item is maxxed
if (currentTierIndex === 4) return "Maxed";
// Show price
return (
<>
<button
onClick={() =>
props.upgradeInventoryItem(
props.inventoryItem.id,
props.inventoryItem.storeItem.id
)
}
className="bg-orange-600 rounded-full p-1"
>
<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>
<span className="ml-1">
{`$${
props.inventoryItem.storeItem.upgrades[currentTierIndex + 1].price
}`}
</span>
</>
);
};
const getNextUpgradePrice = () => {
if (currentTierIndex === 4) return "Maxed";
return `$${
props.inventoryItem.storeItem.upgrades[currentTierIndex + 1].price
}`;
};
return (
<CardLayout>
<div className="md:flex gap-4">
@ -42,59 +80,42 @@ const InventoryItem = (props: {
<p className="text-sm mb-3">
{props.inventoryItem.storeItem.description}
</p>
<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">
{currentUpgrade &&
props.inventoryItem.storeItem.upgrades.map((upgrade, id) => {
if (upgrade.tier <= currentUpgrade.tier) {
return (
<span key={id} className="bg-green-600 px-4 py-2"></span>
);
} else {
return (
<span key={id} className="bg-slate-200 px-4 py-2"></span>
);
}
})}
<p className="font-bold ml-1">
(+{currentUpgrade && currentUpgrade.claimBoost})
</p>
</div>
<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
</button>
) : (
<button
onClick={() =>
props.upgradeInventoryItem(
props.inventoryItem.id,
props.inventoryItem.storeItem.id
)
}
className="bg-green-600 rounded-full p-1"
>
<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>
)}
<span className="ml-1">({getNextUpgradePrice()})</span>
<div className="grid grid-cols-4 gap-4">
<div className="col-span-1">
<p className="font-bold mt-4">Yield</p>
<p>
{props.inventoryItem.storeItem.claimAmount} (+
{currentUpgrade && currentUpgrade.claimBoost})
</p>
</div>
<div className="col-span-3">
<p className="font-bold mb-1 mt-4">Tier</p>
<div className="flex">
<div className="flex items-center mr-2">
{currentUpgrade &&
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>
);
} else {
return (
<span
key={id}
className="bg-slate-200 px-2 py-2 border border-black"
></span>
);
}
}
)}
</div>
<div className="flex items-center">{renderUpgradeButton()}</div>
</div>
</div>
</div>
</div>
<div className="relative object-contain w-48 h-48 mt-4 md:mt-0">

5
src/app/Components/SelectDropdown.tsx
View File

@ -23,7 +23,10 @@ const SelectDropdown: React.FC<ISelectDropdownProps> = (props) => {
onChange={handleChange}
className="text-black flex-1 p-2 border border-gray-300 rounded-lg hover:cursor-pointer"
>
<option value="">Select</option>
<option value="" className="font-bold">
Select resource to mine
</option>
<hr />
{props.options.map((option, index) => (
<option key={index} value={option.value}>
{option.label}

27
src/app/Components/Staking/StakingSource.tsx
View File

@ -102,7 +102,7 @@ const StakingSource = (props: {
return (
<button
onClick={() => handleClaim(props.stake.id)}
className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold text-center"
className="bg-green-600 text-white px-4 py-2 rounded-lg font-bold text-center"
>
Claim
</button>
@ -132,21 +132,28 @@ const StakingSource = (props: {
<div className="bg-slate-900 md:rounded-xl p-4">
<div className="">
<h3 className="text-3xl font-bold mb-2">
{props.stakingSource.name}
{props.stakingSource.name}{" "}
<span>
(
{props.stakingSource.resourceWells.reduce(
(x, y) => x + y.supply,
0
)}
)
</span>
</h3>
<p className="text-sm">{props.stakingSource.description}</p>
</div>
<div className="flex">
<h3 className="mt-4 mb-2 text-2xl font-bold">Inventory</h3>
<div className="">
{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>
<p className="font-bold text-xl mb-2">
{props.inventoryItems &&
getObjectFromArray(
props.inventoryItems,
@ -169,7 +176,6 @@ const StakingSource = (props: {
)}
{props.inventoryItems && (
<div className="">
<p className="font-bold mt-4 mb-2">Inactive Drills</p>
{props.inventoryItems.map(
(item, id) =>
!isActive(item) && (
@ -177,14 +183,15 @@ const StakingSource = (props: {
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>
<p className="font-bold text-xl mb-2">
{item.storeItem.name}
</p>
<div className="flex">
<SelectDropdown
options={props.stakingSource.resourceWells.map(
(well): IOption => ({
value: well.id,
label: well.resourceType,
label: well.resourceType + ` (${well.supply})`,
})
)}
onChange={(value) =>

2
src/app/Components/Staking/StakingSourcesView.tsx
View File

@ -20,7 +20,7 @@ const StakingSourcesView = (props: {
<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"
className="bg-green-600 text-white rounded-full ml-2 p-1 inline"
onClick={() => props.createStakingSource()}
>
<svg

52
src/app/Components/Store/StoreItem.tsx
View File

@ -17,25 +17,11 @@ 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-auto text-center"
className="bg-green-600 text-white px-4 py-2 rounded-lg font-bold w-auto text-center"
>
Buy | ${props.storeItem.price}
</button>
</div>
<div className="flex">
<div className="mr-3">
<p className="font-bold">Base Yield</p>
<p className="">{props.storeItem.claimAmount}</p>
</div>
<div className="">
<p className="font-bold">Upgrades</p>
{props.storeItem.upgrades.map((upgrade, id) => (
<span key={id} className="mr-2">
{upgrade.claimBoost}
</span>
))}
</div>
</div>
</div>
<div className="relative object-contain w-48 h-48">
<Image
@ -46,6 +32,42 @@ const StoreItem = (props: {
/>
</div>
</div>
<div className="flex flex-grow mt-4">
<div className="mr-3 flex-grow">
<p className="font-bold">Yield</p>
<p className="">{props.storeItem.claimAmount}</p>
</div>
<div className="mr-3 flex-grow">
<p className="font-bold">Completion Time</p>
<p className="">{props.storeItem.completionTimeInMins} min</p>
</div>
<div className="mr-3 flex-grow">
<p className="font-bold">Yield / Hr.</p>
<p className="">
{(
(props.storeItem.claimAmount /
props.storeItem.completionTimeInMins) *
60
).toFixed(0)}
</p>
</div>
</div>
<p className="font-bold mt-4 ">Tiers</p>
<div className="mt-4 flex f-full">
{props.storeItem.upgrades.map((upgrade, id) => (
<table key={id} className="table-auto flex-grow">
<tr className="border">
<td colSpan={2} className="p-2 text-center">
{upgrade.tier}
</td>
</tr>
<tr>
<td className="p-2 border">${upgrade.price}</td>
<td className="p-2 border">+{upgrade.claimBoost}</td>
</tr>
</table>
))}
</div>
</CardLayout>
);
};

2
src/app/page.tsx
View File

@ -346,7 +346,7 @@ export default function Home() {
return <p>Loading...</p>;
}
console.log(bankAccount);
console.log(storeItems);
return (
<>
<Navbar setUserId={setUserId} />

4
src/app/utils/page.tsx
View File

@ -10,9 +10,11 @@ export default function Utils() {
const [userId, setUserId] = useState<string>("");
const clearUserData = async () => {
await fetch(`/api/user/${userId}/clear-data`, {
console.log("Clearing data..");
const response = await fetch(`/api/user/${userId}/clear-data`, {
method: "POST",
});
console.log(response);
};
const loadConfig = async () => {

1
typings.d.ts vendored
View File

@ -39,7 +39,6 @@ export interface IStakingSource {
resourceChance: number | null
resourceMinStartAmount: number | null
resourceMaxStartAmount: number | null
size: number | undefined
}
export interface IInventoryItem {