From 1df605022fd3c712ea6587ee3c5e6a03a2ab9ab7 Mon Sep 17 00:00:00 2001 From: aymericdelab Date: Wed, 11 Dec 2024 11:44:57 +0100 Subject: [PATCH] add back fragment mines and put HS access --- .../src/hooks/helpers/useHyperstructures.tsx | 6 +- .../hyperstructures/HyperstructurePanel.tsx | 33 ++--- client/src/ui/components/list/EntityList.tsx | 18 +-- .../world-structures/WorldStructuresMenu.tsx | 115 ++++++++++++++---- 4 files changed, 117 insertions(+), 55 deletions(-) diff --git a/client/src/hooks/helpers/useHyperstructures.tsx b/client/src/hooks/helpers/useHyperstructures.tsx index a14b2d44b..f6b210126 100644 --- a/client/src/hooks/helpers/useHyperstructures.tsx +++ b/client/src/hooks/helpers/useHyperstructures.tsx @@ -22,7 +22,7 @@ export const useHyperstructures = () => { const { account: { account }, setup: { - components: { Structure, Contribution, Position, Owner, EntityName }, + components: { Structure, Contribution, Position, Owner, EntityName, Hyperstructure }, }, } = useDojo(); @@ -30,7 +30,8 @@ export const useHyperstructures = () => { const hyperstructures = useEntityQuery([Has(Structure), HasValue(Structure, { category: "Hyperstructure" })]).map( (hyperstructureEntityId) => { - const hyperstructure = getComponentValue(Structure, hyperstructureEntityId); + const hyperstructure = getComponentValue(Hyperstructure, hyperstructureEntityId); + const structure = getComponentValue(Structure, hyperstructureEntityId); const position = getComponentValue(Position, hyperstructureEntityId); const contributions = getContributions(hyperstructure!.entity_id, Contribution); const ownerEntityIds = runQuery([Has(Owner), HasValue(Owner, { entity_id: hyperstructure!.entity_id })]) @@ -45,6 +46,7 @@ export const useHyperstructures = () => { return { ...hyperstructure, + ...structure, ...position, ...contributions, owner, diff --git a/client/src/ui/components/hyperstructures/HyperstructurePanel.tsx b/client/src/ui/components/hyperstructures/HyperstructurePanel.tsx index 31c6dc490..5f5f06605 100644 --- a/client/src/ui/components/hyperstructures/HyperstructurePanel.tsx +++ b/client/src/ui/components/hyperstructures/HyperstructurePanel.tsx @@ -23,7 +23,7 @@ import { ContributionSummary } from "./ContributionSummary"; import { HyperstructureDetails } from "./HyperstructureDetails"; import { HyperstructureResourceChip } from "./HyperstructureResourceChip"; -enum DisplayedAccess { +export enum DisplayedAccess { Public = "Public", Private = "Private", GuildOnly = "Tribe Only", @@ -156,11 +156,12 @@ export const HyperstructurePanel = ({ entity }: any) => { setNewContributions({}); setResetContributions(false); } - }; const [selectedAccess, setSelectedAccess] = useState<"Public" | "Private" | "GuildOnly">( - hyperstructure ? (DisplayedAccess[hyperstructure.access as keyof typeof DisplayedAccess] as "Public" | "Private" | "GuildOnly") : "Private" + hyperstructure + ? (DisplayedAccess[hyperstructure.access as keyof typeof DisplayedAccess] as "Public" | "Private" | "GuildOnly") + : "Private", ); return ( @@ -207,21 +208,19 @@ export const HyperstructurePanel = ({ entity }: any) => {
-

{entity.name}

- +
- -
{account.address === entity.owner && (
- {hyperstructure && entity.isOwner && isLoading !== Loading.SetPrivate ? ( - ) :
Loading...
} - -{account.address === entity.owner && ( - - )} + ) : ( +
Loading...
+ )} + + {account.address === entity.owner && ( + + )}
)}
diff --git a/client/src/ui/components/list/EntityList.tsx b/client/src/ui/components/list/EntityList.tsx index d3f511cc1..a17aaa8ec 100644 --- a/client/src/ui/components/list/EntityList.tsx +++ b/client/src/ui/components/list/EntityList.tsx @@ -1,11 +1,8 @@ -import { ReactComponent as ArrowRight } from "@/assets/icons/common/arrow-right.svg"; import { DUMMY_HYPERSTRUCTURE_ENTITY_ID } from "@/three/scenes/constants"; import Button from "@/ui/elements/Button"; import { ID } from "@bibliothecadao/eternum"; import clsx from "clsx"; import React, { useEffect, useState } from "react"; -import { NavigateToPositionIcon } from "../military/ArmyChip"; -import { ViewOnMapIcon } from "../military/ArmyManagementCard"; interface EntityListProps { title: string; @@ -18,6 +15,7 @@ interface EntityListProps { list: any[]; previous?: any[]; current?: ID; + entityHeader: (props: { id: any }) => React.ReactElement | null; entityContent?: (props: { id: any }) => React.ReactElement | null; questing?: boolean; className?: string; @@ -31,6 +29,7 @@ export const EntityList = ({ list, headerPanel, current, + entityHeader, entityContent, questing, className, @@ -40,6 +39,8 @@ export const EntityList = ({ const [selectedEntity, setSelectedEntity] = useState(null); const [searchTerm, setSearchTerm] = useState(""); + console.log({ list }); + useEffect(() => { const entity = list.find((entity) => entity.entity_id === current); if (entity) setSelectedEntity(entity || null); @@ -90,16 +91,7 @@ export const EntityList = ({ onClick={() => setSelectedEntity(entity)} >
-
-
-
{entity.name}
-
- {entity?.position && } - {entity?.position && } -
-
- -
+ {entityHeader(entity.id)} {entity.id !== Number(DUMMY_HYPERSTRUCTURE_ENTITY_ID) && (
diff --git a/client/src/ui/modules/world-structures/WorldStructuresMenu.tsx b/client/src/ui/modules/world-structures/WorldStructuresMenu.tsx index 872ad58de..32f147b3a 100644 --- a/client/src/ui/modules/world-structures/WorldStructuresMenu.tsx +++ b/client/src/ui/modules/world-structures/WorldStructuresMenu.tsx @@ -9,14 +9,17 @@ import { useHyperstructureProgress, useHyperstructures } from "@/hooks/helpers/u import { useResourceBalance } from "@/hooks/helpers/useResources"; import { FragmentMinePanel } from "@/ui/components/fragmentMines/FragmentMinePanel"; import { HintSection } from "@/ui/components/hints/HintModal"; -import { HyperstructurePanel } from "@/ui/components/hyperstructures/HyperstructurePanel"; +import { DisplayedAccess, HyperstructurePanel } from "@/ui/components/hyperstructures/HyperstructurePanel"; import { EntityList } from "@/ui/components/list/EntityList"; +import { NavigateToPositionIcon } from "@/ui/components/military/ArmyChip"; +import { ViewOnMapIcon } from "@/ui/components/military/ArmyManagementCard"; import { Checkbox } from "@/ui/elements/Checkbox"; import { HintModalButton } from "@/ui/elements/HintModalButton"; import { ResourceIcon } from "@/ui/elements/ResourceIcon"; import { currencyFormat, currencyIntlFormat, divideByPrecision } from "@/ui/utils/utils"; import { BattleSide, ContractAddress, findResourceById, ID, ResourcesIds } from "@bibliothecadao/eternum"; -import { useMemo, useState } from "react"; +import { ArrowRight } from "lucide-react"; +import { useCallback, useMemo, useState } from "react"; import { Tabs } from "../../elements/tab"; export const WorldStructuresMenu = ({ className }: { className?: string }) => { @@ -31,27 +34,51 @@ export const WorldStructuresMenu = ({ className }: { className?: string }) => { const { fragmentMines } = useFragmentMines(); const myHyperstructures = useGetHyperstructuresWithContributionsFromPlayer(); + const hyperstructureExtraContent = useCallback( + (entityId: any) => { + const hyperstructure = hyperstructures.find((hyperstructure) => hyperstructure.entity_id === entityId); + if (!hyperstructure) return null; + return ( + + ); + }, + [hyperstructures], + ); - const hyperstructureExtraContent = (entityId: any) => { - const hyperstructure = hyperstructures.find((hyperstructure) => hyperstructure.entity_id === entityId); - if (!hyperstructure) return null; - return ( - - ); - }; + const fragmentMineExtraContent = useCallback( + (entityId: any) => { + const fragmentMine = fragmentMines.find((fragmentMine) => fragmentMine.entity_id === entityId); + if (!fragmentMine) return null; - const fragmentMineExtraContent = (entityId: any) => { - const fragmentMine = fragmentMines.find((fragmentMine) => fragmentMine.entity_id === entityId); - if (!fragmentMine) return null; + return ; + }, + [fragmentMines], + ); - fragmentMine.production_rate; + const hyperstructureEntityHeader = useCallback( + (entityId: any) => { + const entity = hyperstructures.find((hyperstructure) => hyperstructure.entity_id === entityId); - return ; - }; + if (!entity) return null; + + return ; + }, + [hyperstructures], + ); + + const fragmentMineEntityHeader = useCallback( + (entityId: any) => { + const entity = fragmentMines.find((fragmentMine) => fragmentMine.entity_id === entityId); + if (!entity) return null; + + return ; + }, + [fragmentMines], + ); const tabs = useMemo( () => [ @@ -73,6 +100,7 @@ export const WorldStructuresMenu = ({ className }: { className?: string }) => { } + entityHeader={hyperstructureEntityHeader} entityContent={hyperstructureExtraContent} list={hyperstructures .filter((hyperstructure) => hyperstructure.created_at) @@ -105,6 +133,7 @@ export const WorldStructuresMenu = ({ className }: { className?: string }) => { } + entityHeader={fragmentMineEntityHeader} entityContent={fragmentMineExtraContent} list={fragmentMines .sort((a, b) => Number(a.entity_id) - Number(b.entity_id)) @@ -114,11 +143,13 @@ export const WorldStructuresMenu = ({ className }: { className?: string }) => { ...fragmentMine, }))} filterEntityIds={ - fragmentMines - .filter((mine) => { - mine.owner === account.address; - }) - .map((mine) => mine.entity_id) as ID[] + showOnlyMine + ? (fragmentMines + .filter((mine) => { + mine.owner === account.address; + }) + .map((mine) => mine.entity_id) as ID[]) + : undefined } /> @@ -297,3 +328,39 @@ const FragmentMineExtraContent = ({ x, y, entityId }: { x: number; y: number; en ); }; + +const EntityHeader = ({ entity }: { entity: any }) => { + const position = { x: entity.x, y: entity.y }; + + const access = entity?.access ? DisplayedAccess[entity.access as keyof typeof DisplayedAccess] : undefined; + + return ( +
+
+
+
{entity.name}
+ {access && ( + + {access} + + )} +
+ + +
+
+
+ +
+ ); +};