Skip to content

Commit

Permalink
memo the market
Browse files Browse the repository at this point in the history
  • Loading branch information
@ponderingdemocritus
ponderingdemocritus committed Dec 15, 2024
1 parent 2776a38 commit 6f2e1cc
Show file tree
Hide file tree
Showing 9 changed files with 1,003 additions and 941 deletions.
264 changes: 133 additions & 131 deletions client/src/ui/components/bank/ResourceBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,152 +5,154 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
import TextInput from "@/ui/elements/TextInput";
import { divideByPrecision, formatNumber } from "@/ui/utils/utils";
import { ID, Resources, ResourcesIds, findResourceById, findResourceIdByTrait } from "@bibliothecadao/eternum";
import { useEffect, useRef, useState } from "react";
import { memo, useEffect, useRef, useState } from "react";
import { HintSection } from "../hints/HintModal";

export const ResourceBar = ({
entityId,
lordsFee,
resources,
resourceId,
setResourceId,
amount,
setAmount,
disableInput = false,
onFocus,
onBlur,
max = Infinity,
}: {
entityId: ID;
lordsFee: number;
resources: Resources[];
resourceId: ResourcesIds;
setResourceId: (resourceId: ResourcesIds) => void;
amount: number;
setAmount: (amount: number) => void;
disableInput?: boolean;
onFocus?: () => void; // New prop
onBlur?: () => void; // New prop
max?: number;
}) => {
const { getBalance } = useResourceBalance();
export const ResourceBar = memo(
({
entityId,
lordsFee,
resources,
resourceId,
setResourceId,
amount,
setAmount,
disableInput = false,
onFocus,
onBlur,
max = Infinity,
}: {
entityId: ID;
lordsFee: number;
resources: Resources[];
resourceId: ResourcesIds;
setResourceId: (resourceId: ResourcesIds) => void;
amount: number;
setAmount: (amount: number) => void;
disableInput?: boolean;
onFocus?: () => void; // New prop
onBlur?: () => void; // New prop
max?: number;
}) => {
const { getBalance } = useResourceBalance();

const [selectedResourceBalance, setSelectedResourceBalance] = useState(0);
const [searchInput, setSearchInput] = useState("");
const [open, setOpen] = useState(false);
const [selectedResourceBalance, setSelectedResourceBalance] = useState(0);
const [searchInput, setSearchInput] = useState("");
const [open, setOpen] = useState(false);

const inputRef = useRef<HTMLInputElement>(null);
const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
setSelectedResourceBalance(divideByPrecision(getBalance(entityId, Number(resourceId)).balance));
}, [resourceId, getBalance, entityId]);
useEffect(() => {
setSelectedResourceBalance(divideByPrecision(getBalance(entityId, Number(resourceId)).balance));
}, [resourceId, getBalance, entityId]);

const handleResourceChange = (trait: string) => {
const newResourceId = findResourceIdByTrait(trait);
setResourceId(newResourceId);
};
const handleResourceChange = (trait: string) => {
const newResourceId = findResourceIdByTrait(trait);
setResourceId(newResourceId);
};

const handleAmountChange = (amount: number) => {
setAmount(amount);
};
const handleAmountChange = (amount: number) => {
setAmount(amount);
};

const hasLordsFees = lordsFee > 0 && resourceId === ResourcesIds.Lords;
const finalResourceBalance = hasLordsFees ? selectedResourceBalance - lordsFee : selectedResourceBalance;
const hasLordsFees = lordsFee > 0 && resourceId === ResourcesIds.Lords;
const finalResourceBalance = hasLordsFees ? selectedResourceBalance - lordsFee : selectedResourceBalance;

const filteredResources = resources.filter(
(resource) => resource.trait.toLowerCase().startsWith(searchInput.toLowerCase()) || resource.id === resourceId,
);
const filteredResources = resources.filter(
(resource) => resource.trait.toLowerCase().startsWith(searchInput.toLowerCase()) || resource.id === resourceId,
);

const handleOpenChange = (newOpen: boolean) => {
setOpen(newOpen);
if (newOpen && inputRef.current) {
setResourceId(ResourcesIds.Wood);
setSearchInput("");
setTimeout(() => {
inputRef.current?.focus();
}, 0);
}
};
const handleOpenChange = (newOpen: boolean) => {
setOpen(newOpen);
if (newOpen && inputRef.current) {
setResourceId(ResourcesIds.Wood);
setSearchInput("");
setTimeout(() => {
inputRef.current?.focus();
}, 0);
}
};

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
if (filteredResources.length > 0) {
const selectedResource = filteredResources.find((resource) => resource.id !== resourceId);
if (selectedResource) {
setResourceId(selectedResource.id);
setOpen(false);
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
if (filteredResources.length > 0) {
const selectedResource = filteredResources.find((resource) => resource.id !== resourceId);
if (selectedResource) {
setResourceId(selectedResource.id);
setOpen(false);
}
}
setSearchInput("");
} else {
e.stopPropagation();
}
setSearchInput("");
} else {
e.stopPropagation();
}
};
};

return (
<div className="resource-bar-selector w-full bg-gold/10 rounded-xl p-3 flex justify-between h-28 flex-wrap">
<div className="self-center">
<NumberInput
className="text-2xl border-transparent"
value={amount}
onChange={handleAmountChange}
max={max}
arrows={false}
allowDecimals
onFocus={onFocus}
onBlur={onBlur}
/>

return (
<div className="resource-bar-selector w-full bg-gold/10 rounded-xl p-3 flex justify-between h-28 flex-wrap">
<div className="self-center">
<NumberInput
className="text-2xl border-transparent"
value={amount}
onChange={handleAmountChange}
max={max}
arrows={false}
allowDecimals
onFocus={onFocus}
onBlur={onBlur}
/>
{!disableInput && (
<div
className="flex text-xs text-gold/70 mt-1 justify-center items-center relative text-center self-center mx-auto w-full cursor-pointer"
onClick={() => handleAmountChange(finalResourceBalance)}
>
Max: {isNaN(selectedResourceBalance) ? "0" : selectedResourceBalance.toLocaleString()}
{hasLordsFees && (
<div className="text-danger ml-2">
<div>{`[+${isNaN(lordsFee) ? "0" : formatNumber(lordsFee, 2)}]`}</div>
</div>
)}
</div>
)}
</div>

{!disableInput && (
<div
className="flex text-xs text-gold/70 mt-1 justify-center items-center relative text-center self-center mx-auto w-full cursor-pointer"
onClick={() => handleAmountChange(finalResourceBalance)}
>
Max: {isNaN(selectedResourceBalance) ? "0" : selectedResourceBalance.toLocaleString()}
{hasLordsFees && (
<div className="text-danger ml-2">
<div>{`[+${isNaN(lordsFee) ? "0" : formatNumber(lordsFee, 2)}]`}</div>
<Select
open={open}
onOpenChange={handleOpenChange}
value={findResourceById(Number(resourceId))?.trait || ""}
onValueChange={(trait) => {
handleResourceChange(trait);
setOpen(false);
setSearchInput("");
}}
>
<SelectTrigger className="w-[140px]">
<SelectValue placeholder={HintSection.Resources} />
</SelectTrigger>
<SelectContent>
{resources.length > 1 && (
<div className="p-2">
<TextInput
ref={inputRef}
onChange={setSearchInput}
placeholder="Filter resources..."
onKeyDown={handleKeyDown}
/>
</div>
)}
</div>
)}
{filteredResources.map((resource) => (
<SelectItem key={resource.id} value={resource.trait} disabled={resource.id === resourceId}>
<ResourceCost
resourceId={resource.id}
amount={divideByPrecision(getBalance(entityId, resource.id).balance)}
className="border-0 bg-transparent"
/>
</SelectItem>
))}
</SelectContent>
</Select>
</div>

<Select
open={open}
onOpenChange={handleOpenChange}
value={findResourceById(Number(resourceId))?.trait || ""}
onValueChange={(trait) => {
handleResourceChange(trait);
setOpen(false);
setSearchInput("");
}}
>
<SelectTrigger className="w-[140px]">
<SelectValue placeholder={HintSection.Resources} />
</SelectTrigger>
<SelectContent>
{resources.length > 1 && (
<div className="p-2">
<TextInput
ref={inputRef}
onChange={setSearchInput}
placeholder="Filter resources..."
onKeyDown={handleKeyDown}
/>
</div>
)}
{filteredResources.map((resource) => (
<SelectItem key={resource.id} value={resource.trait} disabled={resource.id === resourceId}>
<ResourceCost
resourceId={resource.id}
amount={divideByPrecision(getBalance(entityId, resource.id).balance)}
className="border-0 bg-transparent"
/>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
};
);
},
);
Loading

0 comments on commit 6f2e1cc

Please sign in to comment.