Merge pull request #165 from BibliothecaDAO/feat/hs-ui

BibliothecaDAO · Oct 11, 2023 · 491a948 · 491a948
2 parents 5180c8f + 65cf61f
commit 491a948
Show file tree

Hide file tree

Showing 15 changed files with 3,686 additions and 1,151 deletions.
diff --git a/client/src/components/cityview/realm/trade/CreateOffer.tsx b/client/src/components/cityview/realm/trade/CreateOffer.tsx
@@ -454,6 +454,10 @@ export const SelectCaravanPanel = ({
     }
   }, [realm]);
 
+  const canCarry = (caravan: CaravanInterface, resourceWeight: number) => {
+    return caravan.capacity ? divideByPrecision(caravan.capacity) >= resourceWeight : false;
+  };
+
   let myAvailableCaravans = useMemo(
     () =>
       realmCaravans
@@ -465,14 +469,13 @@ export const SelectCaravanPanel = ({
                 !caravan.blocked &&
                 (!caravan.arrivalTime || caravan.arrivalTime <= nextBlockTimestamp);
               // capacity in gr (1kg = 1000gr)
-              const canCarry = caravan.capacity ? caravan.capacity / 1000 >= resourceWeight : false;
-              if (isIdle && canCarry) {
+              if (isIdle && canCarry(caravan, resourceWeight)) {
                 return caravan;
               }
             })
             .filter(Boolean) as CaravanInterface[])
         : [],
-    [realmCaravans],
+    [realmCaravans, resourceWeight],
   );
 
   return (
@@ -549,7 +552,7 @@ export const SelectCaravanPanel = ({
                 />
                 <Donkey className="ml-2 w-5 h-5 min-w-[20px]" />
                 <div className="flex flex-col justify-center ml-2">
-                  <div className="text-xs font-bold text-white">{donkeysCount}</div>
+                  <div className="text-xs font-bold text-white">{donkeysLeft - donkeysCount}</div>
                   <div className="text-xs text-center text-white">Donkeys</div>
                 </div>
               </div>
@@ -567,12 +570,6 @@ export const SelectCaravanPanel = ({
               <div className="ml-1 uppercase text-danger">Increase the amount of units</div>
             </div>
           )}
-          {donkeysLeft && (
-            <div className="flex mb-1 text-xs text-center text-white">
-              Donkeys Left{" "}
-              <div className={`ml-1 text-${hasEnoughDonkeys ? "order-brilliance" : "danger"}`}>{donkeysLeft}</div>
-            </div>
-          )}
         </>
       )}
       {!isNewCaravan && (

diff --git a/client/src/components/worldmap/hyperstructures/FeedHyperstructure.tsx b/client/src/components/worldmap/hyperstructures/FeedHyperstructure.tsx
@@ -28,6 +28,7 @@ import { useGetPositionCaravans } from "../../../hooks/helpers/useCaravans";
 import { NumberInput } from "../../../elements/NumberInput";
 import { ReactComponent as ArrowSeparator } from "../../../assets/icons/common/arrow-separator.svg";
 import { WEIGHT_PER_DONKEY_KG } from "../../../constants/travel";
+import { ReactComponent as CloseIcon } from "../../../assets/icons/common/cross-circle.svg";
 
 type FeedHyperstructurePopupProps = {
   onClose: () => void;
@@ -63,7 +64,14 @@ export const FeedHyperstructurePopup = ({ onClose, order }: FeedHyperstructurePo
             </Tooltip>
           </div>
         ),
-        component: <BuildHyperstructurePanel order={order} onClose={onClose} hyperstructureData={hyperstructureData} />,
+        component: (
+          <BuildHyperstructurePanel
+            order={order}
+            onSendCaravan={() => setSelectedTab(1)}
+            onClose={onClose}
+            hyperstructureData={hyperstructureData}
+          />
+        ),
       },
       {
         key: "my",
@@ -92,6 +100,7 @@ export const FeedHyperstructurePopup = ({ onClose, order }: FeedHyperstructurePo
       <SecondaryPopup.Head>
         <div className="flex items-center space-x-1">
           <div className="mr-0.5 bg-gray">Manage Hyperstructure:</div>
+          <CloseIcon className="w-3 h-3 cursor-pointer fill-white" onClick={onClose} />
         </div>
       </SecondaryPopup.Head>
       <SecondaryPopup.Body width={"460px"}>
@@ -157,7 +166,8 @@ const SelectableRealm = ({ realm, selected = false, initialized = false, onClick
       <div className="text-gold ml-auto absolute right-2 top-2">24h:10m away</div>
       <div className="flex items-center mt-6 w-full">
         <div className="flex">
-          {realm.resources &&
+          {!initialized &&
+            realm.resources &&
             realm.resources.map((resource: any) => {
               return (
                 <ResourceCost
@@ -187,10 +197,12 @@ const SelectableRealm = ({ realm, selected = false, initialized = false, onClick
 const BuildHyperstructurePanel = ({
   order,
   onClose,
+  onSendCaravan,
   hyperstructureData,
 }: {
   order: number;
   onClose: () => void;
+  onSendCaravan: () => void;
   hyperstructureData: HyperStructureInterface | undefined;
 }) => {
   const [selectedCaravan, setSelectedCaravan] = useState<number>(0);
@@ -265,7 +277,7 @@ const BuildHyperstructurePanel = ({
         });
       }
     }
-    onClose();
+    onSendCaravan();
   };
 
   const {
@@ -480,7 +492,7 @@ const BuildHyperstructurePanel = ({
         <>
           {hyperstructureData?.initialized && (
             <>
-              <div className="grid grid-cols-9 gap-2">
+              <div className="grid relative grid-cols-9 gap-2 max-h-[350px] overflow-auto">
                 <div className={clsx("flex flex-col items-center  space-y-2 h-min", "col-span-4")}>
                   <Headline className="mb-2">You Give</Headline>
                   {Object.keys(resourcesLeftToComplete).map((_id) => {
@@ -490,7 +502,7 @@ const BuildHyperstructurePanel = ({
                       getEntityIdFromKeys([BigInt(realmEntityId), BigInt(id)]),
                     );
                     return (
-                      <div key={id} className="flex items-center w-full">
+                      <div key={id} className="flex items-center w-full h-8">
                         <NumberInput
                           max={resourcesLeftToComplete[id]}
                           min={1}
@@ -508,7 +520,7 @@ const BuildHyperstructurePanel = ({
                             onClick={() => {
                               setFeedResourcesGiveAmounts({
                                 ...feedResourcesGiveAmounts,
-                                [id]: resourcesLeftToComplete[id],
+                                [id]: Math.min(divideByPrecision(resource?.balance || 0), resourcesLeftToComplete[id]),
                               });
                             }}
                             resourceId={id}
@@ -520,7 +532,7 @@ const BuildHyperstructurePanel = ({
                   })}
                 </div>
                 <div className="flex items-center justify-center">
-                  <ArrowSeparator />
+                  <ArrowSeparator className="fixed top-1/2" />
                 </div>
                 <div className="flex flex-col col-span-4 space-y-2 h-min">
                   <Headline className="mb-2">Structure needs</Headline>

diff --git a/.../src/components/worldmap/hyperstructures/HyperStructureCaravans/HyperStructureCaravan.tsx b/.../src/components/worldmap/hyperstructures/HyperStructureCaravans/HyperStructureCaravan.tsx
@@ -16,7 +16,8 @@ import { getComponentValue } from "@latticexyz/recs";
 import { useDojo } from "../../../../DojoContext";
 import Button from "../../../../elements/Button";
 import { Resource } from "../../../../types";
-import { HyperStructureInterface } from "../../../../hooks/helpers/useHyperstructure";
+import { HyperStructureInterface, useHyperstructure } from "../../../../hooks/helpers/useHyperstructure";
+import useUIStore from "../../../../hooks/store/useUIStore";
 
 type CaravanProps = {
   caravan: CaravanInterface;
@@ -28,6 +29,9 @@ type CaravanProps = {
 export const HyperStructureCaravan = ({ caravan, hyperstructureData, ...props }: CaravanProps) => {
   const { isMine, owner, arrivalTime, capacity } = caravan;
   const nextBlockTimestamp = useBlockchainStore((state) => state.nextBlockTimestamp);
+  const hyperstructures = useUIStore((state) => state.hyperstructures);
+  const setHyperstructures = useUIStore((state) => state.setHyperstructures);
+  const { getHyperstructure } = useHyperstructure();
 
   const [isLoading, setIsLoading] = useState(false);
   const hasArrived = arrivalTime !== undefined && nextBlockTimestamp !== undefined && arrivalTime <= nextBlockTimestamp;
@@ -79,9 +83,16 @@ export const HyperStructureCaravan = ({ caravan, hyperstructureData, ...props }:
     });
   };
 
+  const updateHyperStructure = () => {
+    const newHyperstructure = getHyperstructure(hyperstructureData.orderId, hyperstructureData.uiPosition);
+    hyperstructures[hyperstructureData.orderId - 1] = newHyperstructure;
+    setHyperstructures([...hyperstructures]);
+  };
+
   const onClick = async () => {
     setIsLoading(true);
     await transferAndReturn();
+    updateHyperStructure();
     setIsLoading(false);
   };
 

diff --git a/client/src/components/worldmap/hyperstructures/HyperstructuresListComponent.tsx b/client/src/components/worldmap/hyperstructures/HyperstructuresListComponent.tsx
@@ -34,7 +34,7 @@ export const HyperstructuresListComponent = ({}: HyperstructuresListComponentPro
       {chosenOrder && showFeedPopup && (
         <FeedHyperstructurePopup onClose={() => setShowFeedPopup(false)} order={chosenOrder} />
       )}
-      {chosenOrder && (
+      {chosenOrder && hyperstructures && (
         <div className="space-y-2 px-2 mb-2">
           <div className="text-xs text-gold">Hyperstructure of your order: </div>
           <HyperstructuresListItem

diff --git a/client/src/components/worldmap/hyperstructures/models/HyperstructureHalf.tsx b/client/src/components/worldmap/hyperstructures/models/HyperstructureHalf.tsx
@@ -32,7 +32,7 @@ export default function HyperstructureHalfFinished(
         {props.hyperstructure?.initialized && (
           <Html position={[0, -1.1, 0]} distanceFactor={10}>
             <div className="p-2 text-white -translate-x-1/2 bg-black rounded-lg whitespace-nowrap">
-              Progress: {props.hyperstructure?.progress}%
+              Progress: {props.hyperstructure?.progress.toFixed(2)}%
             </div>
           </Html>
         )}

diff --git a/client/src/components/worldmap/hyperstructures/models/HyperstructureStarted.tsx b/client/src/components/worldmap/hyperstructures/models/HyperstructureStarted.tsx
@@ -54,7 +54,7 @@ export default function HyperstructureStarted(
         {hyperstructure?.initialized && (
           <Html position={[0, -1.1, 0]} distanceFactor={10}>
             <div className="p-2 text-white -translate-x-1/2 bg-black rounded-lg whitespace-nowrap">
-              Progress: {hyperstructure?.progress}%
+              Progress: {hyperstructure?.progress.toFixed(2)}%
             </div>
           </Html>
         )}