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

Change id on wells, storeitems and inventory items. Modify UI a bit

Browse Source
This commit is contained in:
Emil Nielsen 2023-04-09 09:18:58 +07:00
parent 5ae726064c
commit 39df55b19c
10 changed files with 93 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/Components/Accounts/Account.tsx
View File

@ -32,7 +32,7 @@ const ResourceAccount = (props: {
onClick={() => {
setShowModal(!showModal);
}}
className="text-white absolute top-0"
className="text-white absolute top-0 hover:cursor-pointer"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@ -103,7 +103,7 @@ const ResourceAccount = (props: {
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6 absolute right-0 top-0 mt-4 mr-4"
className="w-6 h-6 absolute right-0 top-0 mt-4 mr-4 hover:cursor-pointer"
onClick={() => {
setShowModal(!showModal);
}}

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

@ -5,7 +5,7 @@ import Image from "next/image";
const InventoryItem = (props: {
inventoryItem: IInventoryItem;
stakes: IStake[] | null;
upgradeInventoryItem: (inventoryItemId: number, storeItemId: string) => void;
upgradeInventoryItem: (inventoryItemId: string, storeItemId: number) => void;
}) => {
const [currentTierIndex, setCurrentTierIndex] = useState(
props.inventoryItem.currentTierIndex

14
src/app/Components/Inventory/InventoryItemView.tsx
View File

@ -5,15 +5,14 @@ import InventoryItem from "./InventoryItem";
const InventoryItemView = (props: {
stakes: IStake[] | null;
inventoryItems: IInventoryItem[] | null | undefined;
upgradeInventoryItem: (inventoryItemId: number, storeItemId: string) => void;
upgradeInventoryItem: (inventoryItemId: string, storeItemId: number) => void;
}) => {
return (
<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">
<div className="bg-slate-900 text-white p-8 rounded-xl h-full">
<h2 className="text-3xl font-bold mb-4">Your Inventory</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{props.inventoryItems &&
props.inventoryItems.length > 0 &&
{props.inventoryItems && props.inventoryItems.length > 0 ? (
props.inventoryItems.map((inventoryItem, id) => (
<InventoryItem
key={id}
@ -21,7 +20,12 @@ const InventoryItemView = (props: {
upgradeInventoryItem={props.upgradeInventoryItem}
stakes={props.stakes}
/>
))}
))
) : (
<p className="text-white text-2xl">
Go to the <strong>Store</strong> to buy items
</p>
)}
</div>
</div>
</div>

2
src/app/Components/Navigation/NavbarVertical.tsx
View File

@ -8,7 +8,7 @@ interface MenuItem {
const menuItems: MenuItem[] = [
{ name: "Moons", componentKey: "stakingsourcesview" },
{ name: "Inventory", componentKey: "inventoryitemview" },
{ name: "Buy Items", componentKey: "storeitemview" },
{ name: "Store", componentKey: "storeitemview" },
];
interface NavbarProps {

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

@ -12,17 +12,19 @@ const StakingSource = (props: {
inventoryItems: IInventoryItem[] | null | undefined;
claimStake: (stakingEventId: number) => void;
startStake: (
inventoryItemId: number,
storeItemId: string,
wellId: number
inventoryItemId: string,
storeItemId: number,
wellId: string
) => void;
}) => {
const [activeStakes, setActiveStakes] = useState<IStake[]>([]);
const [selectedItemId, setSelectedItemId] = useState<number | null>(null);
const [selectedStoreItemId, setSelectedStoreItemId] = useState<string | null>(
const [selectedInventoryItemId, setSelectedInventoryItemId] = useState<
string | null
>(null);
const [selectedStoreItemId, setSelectedStoreItemId] = useState<number | null>(
null
);
const [selectedWellId, setSelectedWellId] = useState<number | null>(null);
const [selectedWellId, setSelectedWellId] = useState<string | null>(null);
const [showInfo, setShowInfo] = useState(false);
// Check if claimable every second
@ -53,8 +55,12 @@ const StakingSource = (props: {
});
const handleStartMining = () => {
if (selectedItemId && selectedWellId && selectedStoreItemId) {
props.startStake(selectedItemId, selectedStoreItemId, selectedWellId);
if (selectedInventoryItemId && selectedWellId && selectedStoreItemId) {
props.startStake(
selectedInventoryItemId,
selectedStoreItemId,
selectedWellId
);
}
};
@ -64,12 +70,12 @@ const StakingSource = (props: {
const handleSelectChange = (
wellId: string,
itemId: number,
storeitemId: string
inventoryItemId: string,
storeitemId: number
) => {
setSelectedWellId(Number(wellId));
setSelectedWellId(wellId);
setSelectedStoreItemId(storeitemId);
setSelectedItemId(itemId);
setSelectedInventoryItemId(inventoryItemId);
};
const Countdown = (props: { remainingTime: number }) => {
@ -208,9 +214,9 @@ const StakingSource = (props: {
item.storeItem.id
)
}
isActive={selectedItemId === item.id}
isActive={selectedInventoryItemId === item.id}
/>
{selectedItemId === 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"

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

@ -46,9 +46,9 @@ interface RowProps {
inventoryItems: IInventoryItem[] | undefined | null;
claimStake: (stakingEventId: number) => void;
startStake: (
inventoryItemId: number,
storeItemId: string,
wellId: number
inventoryItemId: string,
storeItemId: number,
wellId: string
) => void;
}
@ -81,16 +81,16 @@ const StakingSourcesView = (props: {
inventoryItems: IInventoryItem[] | null | undefined;
claimStake: (stakingEventId: number) => void;
startStake: (
inventoryItemId: number,
storeItemId: string,
wellId: number
inventoryItemId: string,
storeItemId: number,
wellId: string
) => void;
createStakingSource: () => void;
}) => {
// Generate rows of stakingSources
const handleRows = () => {
let rows = [];
let currentRow = [];
let currentRow: IStakingSource[] = [];
let rowSize = 3;
if (props.stakingSources) {
props.stakingSources.forEach((stakingSource, index) => {
@ -117,7 +117,7 @@ const StakingSourcesView = (props: {
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">
<div className="bg-slate-900 p-8 rounded-xl h-full">
<div className="flex items-center mb-4">
<h2 className="text-3xl text-white font-bold">Your Moons</h2>
<button
@ -140,15 +140,19 @@ const StakingSourcesView = (props: {
</svg>
</button>
</div>
{rows.map((stakingSources, index) => (
<Row
key={index}
stakingSources={stakingSources}
inventoryItems={props.inventoryItems}
claimStake={props.claimStake}
startStake={props.startStake}
/>
))}
{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>
</div>
);

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

@ -6,7 +6,7 @@ import Image from "next/image";
const StoreItem = (props: {
storeItem: IStoreItem;
buyStoreItem: (itemId: string) => void;
buyStoreItem: (storeItemId: number) => void;
}) => {
return (
<CardLayout>

33
src/app/Components/Store/StoreItemView.tsx
View File

@ -5,24 +5,31 @@ import StoreItem from "./StoreItem";
const StoreItemView = (props: {
inventoryItems: IInventoryItem[] | null | undefined;
storeItems: IStoreItem[];
buyStoreItem: (itemId: string) => void;
buyStoreItem: (storeItemId: number) => void;
}) => {
const availableItems = () => {
const items = props.storeItems.filter((item) => !item.isOwned);
if (items.length > 0) {
items.map((storeItem, id) => (
<StoreItem
key={id}
storeItem={storeItem}
buyStoreItem={props.buyStoreItem}
/>
));
} else {
return (
<p className="text-white text-2xl">No items.. Check back later!</p>
);
}
};
return (
<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">
<div className="bg-slate-900 text-white p-8 rounded-xl h-full">
<h2 className="text-3xl font-bold mb-4 text-white">Store</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{props.storeItems &&
props.storeItems.length > 0 &&
props.storeItems
.filter((item) => !item.isOwned)
.map((storeItem, id) => (
<StoreItem
key={id}
storeItem={storeItem}
buyStoreItem={props.buyStoreItem}
/>
))}
{availableItems()}
</div>
</div>
</div>

21
src/app/page.tsx
View File

@ -4,7 +4,6 @@ import InventoryItemView from "./Components/Inventory/InventoryItemView";
import StakingSourcesView from "./Components/Staking/StakingSourcesView";
import BankAccountsView from "./Components/Accounts/AccountsView";
import StoreItemView from "./Components/Store/StoreItemView";
import ResourceStore from "./Components/Accounts/Old/ResourceStore";
import NotificationPopover from "./Components/NotificationPopover";
import { gameConfig } from "@/utils/gameLogic";
import {
@ -35,7 +34,7 @@ export default function Home() {
const [isLoading, setIsLoading] = useState(true);
const [activeComponent, setActiveComponent] = useState("stakingsourcesview");
const isOwned = (storeItemId: string) => {
const isOwned = (storeItemId: number) => {
if (inventoryItems && inventoryItems?.length > 0) {
return inventoryItems?.some((item) => item.storeItem.id == storeItemId);
} else {
@ -53,6 +52,7 @@ export default function Home() {
);
}
// TODO Can you just return the array?
console.log(DBInventoryItems.inventoryItems);
setInventoryItems(DBInventoryItems.inventoryItems);
};
@ -143,9 +143,9 @@ export default function Home() {
};
const startStake = async (
inventoryItemId: number,
storeItemId: string,
wellId: number
inventoryItemId: string,
storeItemId: number,
wellId: string
) => {
const response = await fetch(`/api/user/${userId}/stakes/start`, {
method: "POST",
@ -184,14 +184,14 @@ export default function Home() {
return await response.json();
};
const buyStoreItem = async (itemId: string) => {
console.log(`Buying item with id ${itemId}`);
const buyStoreItem = async (storeItemId: number) => {
console.log(`Buying item with id ${storeItemId}`);
try {
const response = await fetch(`/api/user/${userId}/inventory-items`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
storeItemId: itemId,
storeItemId: storeItemId,
}),
});
@ -210,6 +210,7 @@ export default function Home() {
type: "Success",
});
fetchInventoryItems();
fetchBankAccount();
}
} catch (error) {
if (error instanceof Error) {
@ -221,8 +222,8 @@ export default function Home() {
};
const upgradeInventoryItem = async (
inventoryItemId: number,
storeItemId: string
inventoryItemId: string,
storeItemId: number
) => {
try {
const response = await fetch(`/api/user/${userId}/inventory-items`, {

13
typings.d.ts vendored
View File

@ -10,7 +10,7 @@ export interface TimeDuration {
}
export interface IResourceWell {
id: number;
id: string;
resourceType: string;
supply: number;
}
@ -20,7 +20,7 @@ export interface IStake {
resourceType: string;
stakingSourceId: number;
startTime: string;
inventoryItemId: number;
inventoryItemId: string;
stakeAmount: number;
durationInMins: number;
unclaimed: boolean | undefined;
@ -39,13 +39,14 @@ export interface IStakingSource {
resourceChance: number | null
resourceMinStartAmount: number | null
resourceMaxStartAmount: number | null
size: number | null
size: number | undefined
}
export interface IInventoryItem {
id: number;
storeItem: IStoreItem;
currentTierIndex: number;
id: string;
storeItem: IStoreItem;
storeItemId: number
}
export interface IUpgrade {
@ -140,7 +141,7 @@ type PhantomRequestMethod =
// Generic stuff
export interface IOption {
value: number,
value: string,
label: string
}