From f74ec8fa5b5ee126b645836f2fad0aa378ca6525 Mon Sep 17 00:00:00 2001
From: Bob <wastchenko.constantin@gmail.com>
Date: Wed, 11 Dec 2024 17:20:01 +0100
Subject: [PATCH] Add confirmation step to destroy building

---
 .../entity-details/BuildingEntityDetails.tsx        | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/ui/modules/entity-details/BuildingEntityDetails.tsx b/client/src/ui/modules/entity-details/BuildingEntityDetails.tsx
index 03eb5c976..66ed2a163 100644
--- a/client/src/ui/modules/entity-details/BuildingEntityDetails.tsx
+++ b/client/src/ui/modules/entity-details/BuildingEntityDetails.tsx
@@ -8,7 +8,7 @@ import { BUILDINGS_CENTER } from "@/three/scenes/constants";
 import { ResourceMiningTypes } from "@/types";
 import { BuildingInfo, ResourceInfo } from "@/ui/components/construction/SelectPreviewBuilding";
 import Button from "@/ui/elements/Button";
-import { getEntityIdFromKeys, ResourceIdToMiningType } from "@/ui/utils/utils";
+import { ResourceIdToMiningType, getEntityIdFromKeys } from "@/ui/utils/utils";
 import { BuildingType, ID, ResourcesIds, StructureType } from "@bibliothecadao/eternum";
 import { useComponentValue } from "@dojoengine/react";
 import { getComponentValue } from "@dojoengine/recs";
@@ -31,6 +31,7 @@ export const BuildingEntityDetails = () => {
   });
   const [isPaused, setIsPaused] = useState<boolean>(false);
   const [isOwnedByPlayer, setIsOwnedByPlayer] = useState<boolean>(false);
+  const [showDestroyConfirm, setShowDestroyConfirm] = useState(false);
 
   const { getEntityInfo } = useEntitiesUtils();
 
@@ -92,6 +93,11 @@ export const BuildingEntityDetails = () => {
   }, [selectedBuildingHex, isPaused]);
 
   const handleDestroyBuilding = useCallback(() => {
+    if (!showDestroyConfirm) {
+      setShowDestroyConfirm(true);
+      return;
+    }
+
     const tileManager = new TileManager(dojo.setup, {
       col: selectedBuildingHex.outerCol,
       row: selectedBuildingHex.outerRow,
@@ -106,8 +112,9 @@ export const BuildingEntityDetails = () => {
     } else {
       playDestroyWooden();
     }
+    setShowDestroyConfirm(false);
     setLeftNavigationView(LeftView.None);
-  }, [selectedBuildingHex, buildingState]);
+  }, [selectedBuildingHex, buildingState, showDestroyConfirm]);
 
   const canDestroyBuilding = useMemo(() => {
     if (buildingState.buildingType !== BuildingType.WorkersHut) return true;
@@ -170,7 +177,7 @@ export const BuildingEntityDetails = () => {
                 variant="danger"
                 withoutSound
               >
-                Destroy
+                {showDestroyConfirm ? "Confirm Destroy" : "Destroy"}
               </Button>
             </div>
           )}