Fix and optimize chat + various small fixes

client/src/dojo/modelManager/BattleManager.ts

@@ -482,10 +482,7 @@ export class BattleManager {
     durationPassed: number,
   ) {
     const damagesDone = this.damagesDone(delta, durationPassed);
-    const currentHealthAfterDamage = BigInt(
-      Math.min(Number(health.current), Number(this.getCurrentHealthAfterDamage(health, damagesDone))),
-    );
-    return currentHealthAfterDamage;
+    return this.getCurrentHealthAfterDamage(health, damagesDone);
   }
 
   private attackingDelta(battle: ComponentValue<Components["Battle"]["schema"]>) {

client/src/hooks/helpers/useEntities.tsx

@@ -73,8 +73,8 @@ export const useEntities = () => {
           const name = realm
             ? getRealmNameById(realm.realm_id)
             : structureName
-              ? `${structure?.category} ${structureName}`
-              : structure.category || "";
+            ? `${structure?.category} ${structureName}`
+            : structure.category || "";
           return { ...structure, position: position!, name };
         })
         .filter((structure): structure is PlayerStructure => structure !== undefined)
@@ -180,11 +180,10 @@ export const getEntitiesUtils = () => {
   const getEntityName = (entityId: ID) => {
     const entityName = getComponentValue(EntityName, getEntityIdFromKeys([BigInt(entityId)]));
     const realm = getComponentValue(Realm, getEntityIdFromKeys([BigInt(entityId)]));
-    return entityName
-      ? shortString.decodeShortString(entityName.name.toString())
-      : realm
-        ? getRealmNameById(realm.realm_id)
-        : entityId.toString();
+
+    const structure = getComponentValue(Structure, getEntityIdFromKeys([BigInt(entityId)]));
+    const name = getStructureName(entityName, structure, realm);
+    return name;
   };
 
   const getAddressNameFromEntity = (entityId: ID) => {
@@ -267,10 +266,27 @@ const formatStructures = (
       const name = realm
         ? getRealmNameById(realm.realm_id)
         : structureName
-          ? `${structure?.category} ${structureName}`
-          : structure.category || "";
+        ? `${structure?.category} ${structureName}`
+        : structure.category || "";
       return { ...structure, position: position!, name };
     })
     .filter((structure): structure is PlayerStructure => structure !== undefined)
     .sort((a, b) => (b.category || "").localeCompare(a.category || ""));
 };
+
+export const getStructureName = (
+  entityName: ComponentValue<ClientComponents["EntityName"]["schema"]> | undefined,
+  structure: ComponentValue<ClientComponents["Structure"]["schema"]> | undefined,
+  realm: ComponentValue<ClientComponents["Realm"]["schema"]> | undefined,
+) => {
+  if (!structure) return "Unknown";
+
+  const name =
+    structure.category === StructureType[StructureType.Realm]
+      ? getRealmNameById(realm!.realm_id)
+      : entityName
+      ? shortString.decodeShortString(entityName.name.toString())
+      : `${structure.category} ${structure.entity_id}` || "";
+
+  return name;
+};

client/src/ui/components/bank/ResourceBar.tsx

@@ -1,7 +1,7 @@
 import { getResourceBalance } from "@/hooks/helpers/useResources";
+import { NumberInput } from "@/ui/elements/NumberInput";
 import { ResourceCost } from "@/ui/elements/ResourceCost";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/elements/Select";
-import TextInput from "@/ui/elements/TextInput";
 import { divideByPrecision, formatNumber } from "@/ui/utils/utils";
 import { ID, Resources, ResourcesIds, findResourceById, findResourceIdByTrait } from "@bibliothecadao/eternum";
 import { useEffect, useState } from "react";
@@ -28,7 +28,6 @@ export const ResourceBar = ({
   setAmount,
   disableInput = false,
 }: ResourceBarProps) => {
-  console.log({ resourceId });
   const { getBalance } = getResourceBalance();
 
   const [selectedResourceBalance, setSelectedResourceBalance] = useState(0);
@@ -42,8 +41,8 @@ export const ResourceBar = ({
     setResourceId && setResourceId(resourceId);
   };
 
-  const handleAmountChange = (amount: string) => {
-    !disableInput && setAmount && setAmount(parseInt(amount.replaceAll(" ", "")) || 0);
+  const handleAmountChange = (amount: number) => {
+    !disableInput && setAmount && setAmount(amount);
   };
 
   const hasLordsFees = lordsFee > 0 && resourceId === ResourcesIds.Lords;
@@ -52,16 +51,19 @@ export const ResourceBar = ({
   return (
     <div className="w-full bg-gold/10 rounded p-3 flex justify-between h-28 flex-wrap ">
       <div className="self-center">
-        <TextInput
-          className="text-2xl border-transparent"
-          value={isNaN(amount) ? "0" : amount.toLocaleString()}
+        <NumberInput
+          className="text-2xl border-transparent "
+          value={amount}
           onChange={(amount) => handleAmountChange(amount)}
+          max={Infinity}
+          arrows={false}
+          allowDecimals
         />
 
         {!disableInput && (
           <div
-            className="flex text-xs text-gold/70 mt-1 ml-2"
-            onClick={() => handleAmountChange(finalResourceBalance.toString())}
+            className="flex text-xs text-gold/70 mt-1 justify-center items-center relative text-center self-center mx-auto w-full"
+            onClick={() => handleAmountChange(finalResourceBalance)}
           >
             Max: {isNaN(selectedResourceBalance) ? "0" : selectedResourceBalance.toLocaleString()}
             {hasLordsFees && (

client/src/ui/components/bank/Swap.tsx

@@ -139,7 +139,7 @@ export const ResourceSwap = ({ bankEntityId, entityId }: { bankEntityId: ID; ent
               <ResourceIcon resource={positiveResource} size="md" />
             </div>
           </div>
-          <div className="bg-gold/10 p-2 m-2  h-auto">
+          <div className="bg-gold/10 p-2 h-auto">
             <div className="flex flex-col p-2 items-center">
               <TravelInfo
                 entityId={entityId}

client/src/ui/components/entities/SelectLocationPanel.tsx

@@ -115,7 +115,6 @@ export const SelectLocationPanel = ({
         <TextInput
           className="border border-gold mx-1 !w-auto !text-light-pink"
           placeholder="Search by ID or name"
-          value={nameFilter}
           onChange={setNameFilter}
         />
         <SortPanel className="px-2 py-2 border-b-0">

client/src/ui/components/hyperstructures/HyperstructurePanel.tsx

@@ -117,7 +117,6 @@ export const HyperstructurePanel = ({ entity }: any) => {
               <TextInput
                 placeholder="Type Name"
                 className="h-full flex-grow"
-                value={naming}
                 onChange={(name) => setNaming(name)}
                 maxLength={MAX_NAME_LENGTH}
               />

client/src/ui/components/military/ArmyManagementCard.tsx

@@ -81,9 +81,9 @@ export const ArmyManagementCard = ({ owner_entity, army, setSelectedEntity }: Ar
   const [naming, setNaming] = useState("");
 
   const [troopCounts, setTroopCounts] = useState<{ [key: number]: number }>({
-    [ResourcesIds.Knight]: 1000,
-    [ResourcesIds.Crossbowman]: 1000,
-    [ResourcesIds.Paladin]: 1000,
+    [ResourcesIds.Knight]: 0,
+    [ResourcesIds.Crossbowman]: 0,
+    [ResourcesIds.Paladin]: 0,
   });
 
   const remainingTroops = useMemo(() => {
@@ -242,7 +242,6 @@ export const ArmyManagementCard = ({ owner_entity, army, setSelectedEntity }: Ar
                 <TextInput
                   placeholder="Type Name"
                   className="h-full"
-                  value={naming}
                   onChange={(name) => setNaming(name)}
                 />
                 <Button

client/src/ui/components/shardMines/ShardMinePanel.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import Button from "@/ui/elements/Button";
 import { useDojo } from "@/hooks/context/DojoContext";
-import { displayAddress } from "@/ui/utils/utils";
 import TextInput from "@/ui/elements/TextInput";
 import { MAX_NAME_LENGTH } from "@bibliothecadao/eternum";
 import { getEntitiesUtils } from "@/hooks/helpers/useEntities";
@@ -28,7 +27,6 @@ export const ShardMinePanel = ({ entity }: any) => {
               <TextInput
                 placeholder="Type Name"
                 className="h-full"
-                value={naming}
                 onChange={(name) => setNaming(name)}
                 maxLength={MAX_NAME_LENGTH}
               />

client/src/ui/components/trading/TransferBetweenEntities.tsx

@@ -158,7 +158,6 @@ export const TransferBetweenEntities = ({ entitiesList }: { entitiesList: { enti
               <Headline>From</Headline>
               <TextInput
                 placeholder="Search Structures..."
-                value={fromSearchTerm}
                 onChange={(fromSearchTerm) => setFromSearchTerm(fromSearchTerm)}
                 className="my-2"
               />
@@ -186,7 +185,6 @@ export const TransferBetweenEntities = ({ entitiesList }: { entitiesList: { enti
               <Headline>To</Headline>
               <TextInput
                 placeholder="Search entities..."
-                value={toSearchTerm}
                 onChange={(toSearchTerm) => setToSearchTerm(toSearchTerm)}
                 className="my-2"
               />

client/src/ui/components/worldmap/guilds/Guilds.tsx

@@ -45,7 +45,6 @@ export const Guilds = () => {
 
   const sortingParams: SortingParamGuildAndName[] = useMemo(() => {
     return [
-      { label: "Rank", sortKey: "rank", className: "col-span-1" },
       { label: "Guild Name", sortKey: "name", className: "col-span-1" },
       { label: "Access", sortKey: "is_public", className: "col-span-1" },
       { label: "Members", sortKey: "member_count", className: "col-span-1" },
@@ -117,7 +116,6 @@ export const Guilds = () => {
                     guild.guild.entity_id === guildDisplayed?.guildEntityId ? "bg-green/20" : ""
                   } `}
                 >
-                  <p className="col-span-1">{`#${index + 1}`} </p>
                   <p
                     className="col-span-1 hover:text-white truncate"
                     onClick={() => setSelectedGuild({ guildEntityId: guild.guild.entity_id, name: guild.name })}

client/src/ui/components/worldmap/guilds/GuildsPanel.tsx

@@ -34,7 +34,7 @@ export const GuildsPanel = () => {
         selectedIndex={selectedTab}
         onChange={(index: number) => setSelectedTab(index)}
         variant="default"
-        className="h-full"
+        className="h-full border-t"
       >
         <Tabs.List>
           {tabs.map((tab, index) => (

client/src/ui/components/worldmap/guilds/MyGuild.tsx

@@ -103,7 +103,6 @@ export const MyGuild = () => {
                   <TextInput
                     placeholder="Type Name"
                     className=""
-                    value={naming}
                     onChange={(name) => setNaming(name)}
                     maxLength={MAX_NAME_LENGTH}
                   />
@@ -187,7 +186,6 @@ export const MyGuild = () => {
                       <TextInput
                         placeholder="Player address"
                         className="border border-gold  !w-1/2 !flex-grow-0 !text-light-pink text-xs mx-5"
-                        value={playerAddress}
                         onChange={(playerAddress) => setPlayerAddress(playerAddress)}
                       />
                       <Button
@@ -237,11 +235,7 @@ export const MyGuild = () => {
             <div className="flex  justify-between items-baseline gap-4 p-4">
               <div className="w-full text-xl">Guild Name</div>
 
-              <TextInput
-                value={newGuildName}
-                onChange={(newGuildName) => setNewGuildName(newGuildName)}
-                maxLength={MAX_NAME_LENGTH}
-              />
+              <TextInput onChange={(newGuildName) => setNewGuildName(newGuildName)} maxLength={MAX_NAME_LENGTH} />
               <div className="flex justify-center gap-2">
                 <SelectBox selected={isPublic} onClick={() => setIsPublic(!isPublic)}>
                   Public

client/src/ui/components/worldmap/guilds/Whitelist.tsx

@@ -83,7 +83,6 @@ export const Whitelist = ({ guildEntityId, isOwner }: WhitelistProps) => {
           <TextInput
             placeholder="Search by name or address"
             className="border border-gold !text-light-pink text-xs my-2 w-1/4!"
-            value={searchQuery}
             onChange={(query) => setSearchQuery(query)}
           />
           <SortPanel className="px-3 py-2 grid grid-cols-3 gap-4">

client/src/ui/elements/NumberInput.tsx

@@ -1,6 +1,7 @@
 import { ReactComponent as ArrowLeft } from "@/assets/icons/common/arrow-left.svg";
 import { ReactComponent as ArrowRight } from "@/assets/icons/common/arrow-right.svg";
 import clsx from "clsx";
+import { useEffect, useState } from "react";
 import { soundSelector, useUiSounds } from "../../hooks/useUISound";
 
 type NumberInputProps = {
@@ -10,51 +11,67 @@ type NumberInputProps = {
   className?: string;
   min?: number;
   max: number;
+  arrows?: boolean;
+  allowDecimals?: boolean;
 };
 
-export const NumberInput = ({ value, onChange, className, step = 1, max = 0, min = 0 }: NumberInputProps) => {
+export const NumberInput = ({
+  value,
+  onChange,
+  className,
+  step = 1,
+  max = 0,
+  min = 0,
+  arrows = true,
+  allowDecimals = false,
+}: NumberInputProps) => {
   const { play: playClick } = useUiSounds(soundSelector.click);
+  const [displayValue, setDisplayValue] = useState(value.toString());
 
-  return (
-    <div className={clsx("flex items-center h-10 text-lg bg-gold/20  w-full", className)}>
-      <div
-        className="flex items-center justify-center h-full px-1 border-r cursor-pointer border-gold/10 hover:bg-gold/30 "
-        onClick={() => {
-          onChange(Math.max(value - step, min));
-          playClick();
-        }}
-      >
-        <ArrowLeft className="fill-gold " width={"6px"} height={"8px"} />
-      </div>
+  useEffect(() => {
+    setDisplayValue(value.toString());
+  }, [value]);
 
+  return (
+    <div className={clsx("flex items-center h-10 text-lg bg-gold/20 w-full", className)}>
+      {arrows && (
+        <div
+          className="flex items-center justify-center h-full px-1 border-r cursor-pointer border-gold/10 hover:bg-gold/30 "
+          onClick={() => {
+            onChange(Math.max(value - step, min));
+            playClick();
+          }}
+        >
+          <ArrowLeft className="fill-gold " width={"6px"} height={"8px"} />
+        </div>
+      )}
       <input
         min={min}
         className="w-full appearance-none !outline-none h-full text-center bg-transparent text-gold flex-grow"
-        value={value}
+        value={displayValue}
         onChange={(e) => {
-          if (isNaN(parseInt(e.target.value))) {
-            onChange(min);
-            return;
-          }
-          if (parseInt(e.target.value) > max) {
-            onChange(max);
-          } else if (parseInt(e.target.value) < min) {
-            onChange(min);
+          if (allowDecimals) {
+            console.log("heyyyy");
+            setDisplayValue(e.target.value.match(/[+-]?([0-9]+([.][0-9]*)?|[.][0-9]+)/)?.[0] ?? min.toString());
+            onChange(parseFloat(e.target.value.match(/[+-]?([0-9]+([.][0-9]*)?|[.][0-9]+)/)?.[0] ?? min.toString()));
           } else {
-            onChange(parseInt(e.target.value));
+            setDisplayValue(e.target.value.match(/[+-]?([0-9]+)/)?.[0] ?? min.toString());
+            onChange(parseInt(e.target.value.match(/[+-]?([0-9]+)/)?.[0] ?? min.toString()));
           }
         }}
       />
 
-      <div
-        className="flex items-center justify-center h-full px-1 border-l cursor-pointer border-gold/10 hover:bg-gold/30"
-        onClick={() => {
-          onChange(Math.min(value + step, max));
-          playClick();
-        }}
-      >
-        <ArrowRight className="fill-gold" width={"6px"} height={"8px"} />
-      </div>
+      {arrows && (
+        <div
+          className="flex items-center justify-center h-full px-1 border-l cursor-pointer border-gold/10 hover:bg-gold/30"
+          onClick={() => {
+            onChange(Math.min(value + step, max));
+            playClick();
+          }}
+        >
+          {arrows && <ArrowRight className="fill-gold" width={"6px"} height={"8px"} />}
+        </div>
+      )}
     </div>
   );
 };