feat: Add user battles tab

client/src/hooks/helpers/battles/useBattles.tsx

@@ -9,12 +9,14 @@ import {
   Entity,
   Has,
   HasValue,
+  NotValue,
   getComponentValue,
   runQuery,
 } from "@dojoengine/recs";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { useMemo } from "react";
 import { useDojo } from "../../context/DojoContext";
+import { useEntities } from "../useEntities";
 
 export type BattleInfo = ComponentValue<ClientComponents["Battle"]["schema"]> & {
   isStructureBattle: boolean;
@@ -75,3 +77,33 @@ export const useBattlesByPosition = ({ x, y }: Position) => {
   const battleEntityIds = useEntityQuery([Has(Battle), HasValue(Position, { x, y })]);
   return getExtraBattleInformation(battleEntityIds, Battle, Position, Structure);
 };
+
+export const useUserBattles = () => {
+  const {
+    setup: {
+      components: { Army, Battle, EntityOwner, Position, Structure },
+    },
+  } = useDojo();
+
+  const { playerRealms } = useEntities();
+  const realms = playerRealms();
+
+  const battleEntityIds = realms
+    .map((realm) => {
+      const userArmiesInBattleEntityIds = runQuery([
+        Has(Army),
+        NotValue(Army, { battle_id: 0 }),
+        HasValue(EntityOwner, { entity_owner_id: realm.entity_id }),
+      ]);
+      const battleEntityIds = Array.from(userArmiesInBattleEntityIds)
+        .map((armyEntityId) => {
+          const army = getComponentValue(Army, armyEntityId);
+          if (!army) return;
+          return getEntityIdFromKeys([BigInt(army.battle_id)]);
+        })
+        .filter((battleEntityId): battleEntityId is Entity => Boolean(battleEntityId));
+      return battleEntityIds;
+    })
+    .flatMap((battleEntityIds) => Array.from(battleEntityIds));
+  return getExtraBattleInformation(battleEntityIds, Battle, Position, Structure);
+};

client/src/hooks/helpers/useEntities.tsx

@@ -157,7 +157,8 @@ export const useEntities = () => {
 
   const getPlayerStructures = (filterFn?: (structure: PlayerStructure) => boolean) => {
     return useMemo(() => {
-      return filterFn ? playerStructures.filter(filterFn) : playerStructures;
+      const structures = filterFn ? playerStructures.filter(filterFn) : playerStructures;
+      return structures.sort((a, b) => a.name.localeCompare(b.name));
     }, [otherRealms, filterFn]);
   };
 

client/src/ui/components/battles/BattleListItem.tsx

@@ -4,24 +4,24 @@ import { ReactComponent as Eye } from "@/assets/icons/common/eye.svg";
 import { BattleManager } from "@/dojo/modelManager/BattleManager";
 import { useDojo } from "@/hooks/context/DojoContext";
 import { BattleInfo } from "@/hooks/helpers/battles/useBattles";
-import { ArmyInfo, getUserArmyInBattle } from "@/hooks/helpers/useArmies";
+import { ArmyInfo } from "@/hooks/helpers/useArmies";
 import { useEntitiesUtils } from "@/hooks/helpers/useEntities";
 import useUIStore from "@/hooks/store/useUIStore";
 import { getComponentValue, HasValue, runQuery } from "@dojoengine/recs";
 import React, { useMemo, useState } from "react";
+import { ViewOnMapIcon } from "../military/ArmyManagementCard";
 import { TroopMenuRow } from "../military/TroopChip";
 import { InventoryResources } from "../resources/InventoryResources";
-import { StructureMergeTroopsPanel } from "../structures/worldmap/StructureCard";
 
 type BattleListItemProps = {
   battle: BattleInfo;
   ownArmySelected: ArmyInfo | undefined;
+  showCompass?: boolean;
 };
 
-export const BattleListItem = ({ battle, ownArmySelected }: BattleListItemProps) => {
+export const BattleListItem = ({ battle, ownArmySelected, showCompass = false }: BattleListItemProps) => {
   const dojo = useDojo();
 
-  const [showMergeTroopsPopup, setShowMergeTroopsPopup] = useState(false);
   const { getAddressNameFromEntity } = useEntitiesUtils();
 
   const nextBlockTimestamp = useUIStore((state) => state.nextBlockTimestamp);
@@ -31,8 +31,6 @@ export const BattleListItem = ({ battle, ownArmySelected }: BattleListItemProps)
   const setBattleView = useUIStore((state) => state.setBattleView);
   const setTooltip = useUIStore((state) => state.setTooltip);
 
-  const userArmyInBattle = getUserArmyInBattle(battle.entity_id);
-
   const battleManager = useMemo(() => new BattleManager(battle.entity_id, dojo), [battle]);
 
   const updatedBattle = useMemo(() => {
@@ -80,15 +78,7 @@ export const BattleListItem = ({ battle, ownArmySelected }: BattleListItemProps)
       />
     );
 
-    if (userArmyInBattle) {
-      if (isBattleOngoing && ownArmySelected) {
-        // check battle and join
-        return [swordButton];
-      } else {
-        // check battle to claim or leave (if battle is finished) or just check
-        return [eyeButton];
-      }
-    } else if (ownArmySelected && isBattleOngoing) {
+    if (ownArmySelected && isBattleOngoing) {
       // join battle
       return [swordButton];
     } else {
@@ -101,16 +91,13 @@ export const BattleListItem = ({ battle, ownArmySelected }: BattleListItemProps)
     !battleManager.isEmpty() && (
       <React.Fragment>
         <div className="flex flex-row justify-between mt-2">
-          <div
-            className={`flex flex-col w-[27rem] h-full justify-between  bg-red/20 ${
-              userArmyInBattle ? "animate-pulse" : ""
-            } rounded-md border-gold/20 p-2`}
-          >
+          <div className={`flex flex-col w-[27rem] h-full justify-between  bg-red/20 rounded-md border-gold/20 p-2`}>
             <div className="flex w-full justify-between">
               <div className="flex flex-col w-[40%]">
                 <TroopMenuRow troops={updatedBattle?.attack_army?.troops} />
               </div>
-              <div className="flex flex-col font-bold m-auto relative top-2">
+              <div className="flex flex-col font-bold m-auto relative">
+                {showCompass && <ViewOnMapIcon hideTooltip={true} position={battle?.position} />}
                 <div
                   className="font-bold m-auto animate-pulse"
                   onMouseEnter={() =>
@@ -145,17 +132,6 @@ export const BattleListItem = ({ battle, ownArmySelected }: BattleListItemProps)
           </div>
           {buttons}
         </div>
-        {showMergeTroopsPopup && (
-          <div className="flex flex-col w-[100%]">
-            {ownArmySelected && (
-              <StructureMergeTroopsPanel
-                giverArmy={ownArmySelected}
-                takerArmy={userArmyInBattle}
-                setShowMergeTroopsPopup={setShowMergeTroopsPopup}
-              />
-            )}
-          </div>
-        )}
       </React.Fragment>
     )
   );

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

@@ -0,0 +1,19 @@
+import { useUserBattles } from "@/hooks/helpers/battles/useBattles";
+import { BattleListItem } from "../battles/BattleListItem";
+
+export const UserBattles = () => {
+  const battles = useUserBattles();
+
+  return (
+    <div className="w-[31rem] py-2 pl-2">
+      {battles.length > 0 && (
+        <>
+          <h5>Your battles</h5>
+          {battles.map((battle) => (
+            <BattleListItem key={battle.entity_id} battle={battle} ownArmySelected={undefined} showCompass />
+          ))}
+        </>
+      )}
+    </div>
+  );
+};

client/src/ui/components/structures/worldmap/StructureCard.tsx

@@ -123,7 +123,7 @@ type MergeTroopsPanelProps = {
   structureEntityId?: ID;
 };
 
-export const StructureMergeTroopsPanel = ({
+const StructureMergeTroopsPanel = ({
   giverArmy,
   setShowMergeTroopsPopup,
   structureEntityId,

client/src/ui/elements/Checkbox.tsx

@@ -1,16 +1,26 @@
-import clsx from "clsx";
 import { ReactComponent as Checkmark } from "@/assets/icons/common/checkmark.svg";
+import clsx from "clsx";
 type CheckboxProps = {
   enabled: boolean;
+  onClick?: () => void;
+  text?: string;
 };
 
-export const Checkbox = ({ enabled }: CheckboxProps) => (
-  <div
-    className={clsx(
-      "w-3 h-3 flex items-center justify-center rounded-[3px] bg-dark-green-accent border transition-all duration-300 ease-in-out hover:border-white",
-      enabled ? "border-grey" : "border-gold",
+export const Checkbox = ({ enabled, onClick, text }: CheckboxProps) => (
+  <div className="flex flex-row justify-center items-center text-center space-x-2">
+    <div
+      onClick={onClick}
+      className={clsx(
+        "w-3 h-3 flex items-center justify-center rounded-[3px] bg-dark-green-accent border transition-all duration-300 ease-in-out hover:border-white",
+        enabled ? "border-grey" : "border-gold",
+      )}
+    >
+      {enabled && <Checkmark className="fill-gold" />}
+    </div>
+    {text && (
+      <div onClick={onClick} className="text-sm text-gray-300 hover:text-white transition-colors duration-200">
+        {text}
+      </div>
     )}
-  >
-    {enabled && <Checkmark className="fill-gold" />}
   </div>
 );

client/src/ui/modules/entity-details/Battles.tsx

@@ -4,7 +4,7 @@ import { BattleListItem } from "@/ui/components/battles/BattleListItem";
 
 export const Battles = ({ ownArmy, battles }: { ownArmy: ArmyInfo | undefined; battles: BattleInfo[] }) => {
   return (
-    <div className="px-2 w-[31rem] py-2">
+    <div className="w-[31rem] py-2 pl-2">
       {battles.length > 0 && (
         <>
           <h5>Battles</h5>

client/src/ui/modules/entity-details/CombatEntityDetails.tsx

@@ -11,8 +11,7 @@ import { HintModalButton } from "@/ui/elements/HintModalButton";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/elements/Select";
 import { Tabs } from "@/ui/elements/tab";
 import { ID } from "@bibliothecadao/eternum";
-import { useEffect, useMemo, useState } from "react";
-import { Battles } from "./Battles";
+import { useMemo, useState } from "react";
 import { Entities } from "./Entities";
 
 export const CombatEntityDetails = () => {
@@ -53,16 +52,7 @@ export const CombatEntityDetails = () => {
             <div>Entities</div>
           </div>
         ),
-        component: selectedHex && <Entities position={hexPosition} ownArmy={ownArmy} />,
-      },
-      {
-        key: "battles",
-        label: (
-          <div className="flex relative group flex-col items-center">
-            <div>Battles</div>
-          </div>
-        ),
-        component: <Battles ownArmy={ownArmy} battles={battles} />,
+        component: selectedHex && <Entities position={hexPosition} ownArmy={ownArmy} battles={battles} />,
       },
       ...(structure
         ? [
@@ -83,12 +73,6 @@ export const CombatEntityDetails = () => {
 
   const [selectedTab, setSelectedTab] = useState(0);
 
-  useEffect(() => {
-    if (battles.length > 0) {
-      setSelectedTab(1);
-    }
-  }, []);
-
   return (
     hexPosition && (
       <div className="px-2 h-full">

client/src/ui/modules/entity-details/EnemyArmies.tsx

@@ -104,11 +104,14 @@ export const EnemyArmies = ({
   return (
     <div className="flex flex-col mt-2 w-[31rem]">
       {armies.length !== 0 && (
-        <React.Fragment>
-          <div className="grid grid-cols-1 gap-2 p-2">
-            {armies.length > 0 && armies.map((army: ArmyInfo, index) => getArmyChip(army, index)).filter(Boolean)}
-          </div>
-        </React.Fragment>
+        <>
+          <h5 className="pl-2 ">Enemy armies</h5>
+          <React.Fragment>
+            <div className="grid grid-cols-1 gap-2 p-2">
+              {armies.length > 0 && armies.map((army: ArmyInfo, index) => getArmyChip(army, index)).filter(Boolean)}
+            </div>
+          </React.Fragment>
+        </>
       )}
     </div>
   );

client/src/ui/modules/entity-details/Entities.tsx

@@ -1,10 +1,25 @@
+import { BattleInfo } from "@/hooks/helpers/battles/useBattles";
 import { ArmyInfo, useEnemyArmiesByPosition } from "@/hooks/helpers/useArmies";
 import { useEntities } from "@/hooks/helpers/useEntities";
 import { Position } from "@/types/Position";
 import { StructureCard } from "@/ui/components/structures/worldmap/StructureCard";
+import { Checkbox } from "@/ui/elements/Checkbox";
+import { useState } from "react";
+import { Battles } from "./Battles";
 import { EnemyArmies } from "./EnemyArmies";
 
-export const Entities = ({ position, ownArmy }: { position: Position; ownArmy: ArmyInfo | undefined }) => {
+export const Entities = ({
+  position,
+  ownArmy,
+  battles,
+}: {
+  position: Position;
+  ownArmy: ArmyInfo | undefined;
+  battles: BattleInfo[];
+}) => {
+  const [showStructure, setShowStructure] = useState(true);
+  const [showBattles, setShowBattles] = useState(true);
+  const [showArmies, setShowArmies] = useState(true);
   const { playerStructures } = useEntities();
 
   const enemyArmies = useEnemyArmiesByPosition({
@@ -13,10 +28,17 @@ export const Entities = ({ position, ownArmy }: { position: Position; ownArmy: A
   });
 
   return (
-    <div className="py-2">
-      <StructureCard position={position} ownArmySelected={ownArmy} />
-
-      {enemyArmies.length > 0 && <EnemyArmies armies={enemyArmies} ownArmySelected={ownArmy} position={position} />}
+    <div className="pb-2">
+      <div className="w-full grid grid-cols-3">
+        <Checkbox enabled={showStructure} onClick={() => setShowStructure((prev) => !prev)} text="Show structure" />
+        <Checkbox enabled={showBattles} onClick={() => setShowBattles((prev) => !prev)} text="Show battles" />
+        <Checkbox enabled={showArmies} onClick={() => setShowArmies((prev) => !prev)} text="Show armies" />
+      </div>
+      {showStructure && <StructureCard position={position} ownArmySelected={ownArmy} />}
+      {showBattles && <Battles ownArmy={ownArmy} battles={battles} />}
+      {showArmies && enemyArmies.length > 0 && (
+        <EnemyArmies armies={enemyArmies} ownArmySelected={ownArmy} position={position} />
+      )}
     </div>
   );
 };

client/src/ui/modules/military/Military.tsx

@@ -2,18 +2,51 @@ import { useEntities } from "@/hooks/helpers/useEntities";
 import { useQuery } from "@/hooks/helpers/useQuery";
 import { EntityArmyList } from "@/ui/components/military/ArmyList";
 import { EntitiesArmyTable } from "@/ui/components/military/EntitiesArmyTable";
+import { UserBattles } from "@/ui/components/military/UserBattles";
+import { Tabs } from "@/ui/elements/tab";
 import { ID } from "@bibliothecadao/eternum";
+import { useState } from "react";
 
 export const Military = ({ entityId, className }: { entityId: ID | undefined; className?: string }) => {
   const { isMapView } = useQuery();
-
   const { playerStructures } = useEntities();
-
   const selectedStructure = playerStructures().find((structure) => structure.entity_id === entityId);
 
+  const [selectedTab, setSelectedTab] = useState(0);
+
+  const tabs = [
+    {
+      label: "Army",
+      component: isMapView ? (
+        <EntitiesArmyTable />
+      ) : (
+        selectedStructure && <EntityArmyList structure={selectedStructure} />
+      ),
+    },
+    { label: "Battles", component: <UserBattles /> },
+  ];
+
   return (
     <div className={`relative ${className}`}>
-      {isMapView ? <EntitiesArmyTable /> : selectedStructure && <EntityArmyList structure={selectedStructure} />}
+      <Tabs
+        selectedIndex={selectedTab}
+        onChange={(index: any) => {
+          setSelectedTab(index);
+        }}
+        className="h-full"
+      >
+        <Tabs.List>
+          {tabs.map((tab, index) => (
+            <Tabs.Tab key={index}>{tab.label}</Tabs.Tab>
+          ))}
+        </Tabs.List>
+
+        <Tabs.Panels className="overflow-hidden">
+          {tabs.map((tab, index) => (
+            <Tabs.Panel key={index}>{tab.component}</Tabs.Panel>
+          ))}
+        </Tabs.Panels>
+      </Tabs>
     </div>
   );
 };