From 6317f8d8511eb6c5936757d9f32c437b20834742 Mon Sep 17 00:00:00 2001
From: aymericdelab <aymericdelabrousse@gmail.com>
Date: Fri, 13 Dec 2024 14:11:02 +0100
Subject: [PATCH] [client] welcome message even if you've done quests Fixes
 #2479

---
 .../src/ui/modules/navigation/QuestMenu.tsx   | 172 +++++++++---------
 .../modules/navigation/TopLeftNavigation.tsx  |   8 +-
 2 files changed, 91 insertions(+), 89 deletions(-)

diff --git a/client/src/ui/modules/navigation/QuestMenu.tsx b/client/src/ui/modules/navigation/QuestMenu.tsx
index 7f069fcbe..6258e7f60 100644
--- a/client/src/ui/modules/navigation/QuestMenu.tsx
+++ b/client/src/ui/modules/navigation/QuestMenu.tsx
@@ -1,5 +1,5 @@
 import { useDojo } from "@/hooks/context/DojoContext";
-import { Prize, QuestStatus, useQuests } from "@/hooks/helpers/useQuests";
+import { Prize, QuestStatus, useQuests, useUnclaimedQuestsCount } from "@/hooks/helpers/useQuests";
 import { useRealm } from "@/hooks/helpers/useRealm";
 import useUIStore from "@/hooks/store/useUIStore";
 import { useWorldStore } from "@/hooks/store/useWorldLoading";
@@ -11,7 +11,7 @@ import { QuestType } from "@bibliothecadao/eternum";
 import clsx from "clsx";
 import { useState } from "react";
 
-export const QuestsMenu = ({ unclaimedQuestsCount }: { unclaimedQuestsCount: number }) => {
+export const QuestsMenu = () => {
   const {
     account: { account },
     setup: {
@@ -34,6 +34,9 @@ export const QuestsMenu = ({ unclaimedQuestsCount }: { unclaimedQuestsCount: num
 
   const { handleStart } = useTutorial(questSteps.get(currentQuest?.id || QuestType.Settle));
 
+  const isWorldLoading = useWorldStore((state) => state.isWorldLoading);
+  const { unclaimedQuestsCount } = useUnclaimedQuestsCount();
+
   const [isLoading, setIsLoading] = useState(false);
   const [skipQuest, setSkipQuest] = useState(false);
 
@@ -102,96 +105,101 @@ export const QuestsMenu = ({ unclaimedQuestsCount }: { unclaimedQuestsCount: num
   };
 
   return (
-    <div
-      className={clsx("flex gap-2 bg-brown/90 border border-gold/30 rounded-full px-4 h-10 md:h-12 py-2", {
-        "opacity-50 pointer-events-none": worldLoading,
-      })}
-    >
-      <Button
-        variant="outline"
-        isLoading={isLoading}
-        className={clsx("claim-selector text-sm !font-bold capitalize", {
-          "!border-gold/70 !text-brown !bg-gold hover:!bg-gold/70 animate-pulse hover:animate-none":
-            currentQuest?.status === QuestStatus.Completed && !worldLoading,
-        })}
-        onClick={handleClaimQuest}
-        onMouseEnter={handleClaimMouseEnter}
-        onMouseLeave={() => !worldLoading && setTooltip(null)}
-        disabled={currentQuest?.status !== QuestStatus.Completed || worldLoading}
-      >
-        {worldLoading ? "Loading..." : "Claim"}
-      </Button>
-
-      <div className="h-full flex items-center">
-        <div className="h-[80%] w-px bg-gold/30 mx-2" />
-      </div>
-
-      <Button
-        onClick={() => handleStart()}
-        variant="outline"
-        disabled={
-          (currentQuest?.status === QuestStatus.Completed && currentQuest.id !== QuestType.Settle) || worldLoading
-        }
-        className={clsx("tutorial-selector relative text-sm capitalize", {
-          "!border-gold/70 !text-brown !bg-gold hover:!bg-gold/70 animate-pulse hover:animate-none":
-            currentQuest?.status !== QuestStatus.Completed && !worldLoading,
-        })}
-      >
-        <span className="font-semibold">{worldLoading ? "Loading..." : currentQuest?.name}</span>
+    unclaimedQuestsCount > 0 &&
+    !isWorldLoading && (
+      <div className="absolute right-0 px-4 top-full mt-2">
         <div
-          className={clsx(
-            "absolute rounded-full border border-green/30 bg-green/90 text-brown px-1.5 md:px-2 text-[0.6rem] md:text-xxs z-[100] font-bold -top-1 -right-1",
-            {
-              "animate-bounce": !worldLoading,
-            },
-          )}
+          className={clsx("flex gap-2 bg-brown/90 border border-gold/30 rounded-full px-4 h-10 md:h-12 py-2", {
+            "opacity-50 pointer-events-none": worldLoading,
+          })}
         >
-          {unclaimedQuestsCount}
-        </div>
-      </Button>
-
-      <div className="h-full flex items-center">
-        <div className="h-[70%] w-px bg-gold/30 mx-2" />
-      </div>
-
-      {skipQuest ? (
-        <div className="flex flex-row gap-4">
-          <Button
-            className="text-sm font-semibold capitalize"
-            onClick={handleClaimAllQuests}
-            variant="red"
-            disabled={worldLoading}
-          >
-            {worldLoading ? "Loading..." : "Skip All Quests"}
-          </Button>
           <Button
-            className="text-sm font-semibold capitalize"
+            variant="outline"
+            isLoading={isLoading}
+            className={clsx("claim-selector text-sm !font-bold capitalize", {
+              "!border-gold/70 !text-brown !bg-gold hover:!bg-gold/70 animate-pulse hover:animate-none":
+                currentQuest?.status === QuestStatus.Completed && !worldLoading,
+            })}
             onClick={handleClaimQuest}
-            variant="red"
-            disabled={worldLoading}
+            onMouseEnter={handleClaimMouseEnter}
+            onMouseLeave={() => !worldLoading && setTooltip(null)}
+            disabled={currentQuest?.status !== QuestStatus.Completed || worldLoading}
           >
-            {worldLoading ? "Loading..." : "Confirm"}
+            {worldLoading ? "Loading..." : "Claim"}
           </Button>
+
+          <div className="h-full flex items-center">
+            <div className="h-[80%] w-px bg-gold/30 mx-2" />
+          </div>
+
           <Button
-            variant="primary"
-            className="text-sm font-semibold capitalize"
-            onClick={() => setSkipQuest(false)}
-            disabled={worldLoading}
+            onClick={() => handleStart()}
+            variant="outline"
+            disabled={
+              (currentQuest?.status === QuestStatus.Completed && currentQuest.id !== QuestType.Settle) || worldLoading
+            }
+            className={clsx("tutorial-selector relative text-sm capitalize", {
+              "!border-gold/70 !text-brown !bg-gold hover:!bg-gold/70 animate-pulse hover:animate-none":
+                currentQuest?.status !== QuestStatus.Completed && !worldLoading,
+            })}
           >
-            {worldLoading ? "Loading..." : "Cancel"}
+            <span className="font-semibold">{worldLoading ? "Loading..." : currentQuest?.name}</span>
+            <div
+              className={clsx(
+                "absolute rounded-full border border-green/30 bg-green/90 text-brown px-1.5 md:px-2 text-[0.6rem] md:text-xxs z-[100] font-bold -top-1 -right-1",
+                {
+                  "animate-bounce": !worldLoading,
+                },
+              )}
+            >
+              {unclaimedQuestsCount}
+            </div>
           </Button>
+
+          <div className="h-full flex items-center">
+            <div className="h-[70%] w-px bg-gold/30 mx-2" />
+          </div>
+
+          {skipQuest ? (
+            <div className="flex flex-row gap-4">
+              <Button
+                className="text-sm font-semibold capitalize"
+                onClick={handleClaimAllQuests}
+                variant="red"
+                disabled={worldLoading}
+              >
+                {worldLoading ? "Loading..." : "Skip All Quests"}
+              </Button>
+              <Button
+                className="text-sm font-semibold capitalize"
+                onClick={handleClaimQuest}
+                variant="red"
+                disabled={worldLoading}
+              >
+                {worldLoading ? "Loading..." : "Confirm"}
+              </Button>
+              <Button
+                variant="primary"
+                className="text-sm font-semibold capitalize"
+                onClick={() => setSkipQuest(false)}
+                disabled={worldLoading}
+              >
+                {worldLoading ? "Loading..." : "Cancel"}
+              </Button>
+            </div>
+          ) : (
+            <Button
+              variant="primary"
+              className="text-sm font-semibold capitalize w-6"
+              onClick={() => setSkipQuest(true)}
+              disabled={worldLoading}
+            >
+              {worldLoading ? "..." : "Skip"}
+            </Button>
+          )}
         </div>
-      ) : (
-        <Button
-          variant="primary"
-          className="text-sm font-semibold capitalize w-6"
-          onClick={() => setSkipQuest(true)}
-          disabled={worldLoading}
-        >
-          {worldLoading ? "..." : "Skip"}
-        </Button>
-      )}
-    </div>
+      </div>
+    )
   );
 };
 
diff --git a/client/src/ui/modules/navigation/TopLeftNavigation.tsx b/client/src/ui/modules/navigation/TopLeftNavigation.tsx
index c6bccb01a..fc70dab97 100644
--- a/client/src/ui/modules/navigation/TopLeftNavigation.tsx
+++ b/client/src/ui/modules/navigation/TopLeftNavigation.tsx
@@ -2,7 +2,6 @@ import { configManager } from "@/dojo/setup";
 import { useDojo } from "@/hooks/context/DojoContext";
 import { useEntities, useEntitiesUtils } from "@/hooks/helpers/useEntities";
 import { useQuery } from "@/hooks/helpers/useQuery";
-import { useUnclaimedQuestsCount } from "@/hooks/helpers/useQuests";
 import useUIStore from "@/hooks/store/useUIStore";
 import useNextBlockTimestamp from "@/hooks/useNextBlockTimestamp";
 import { soundSelector, useUiSounds } from "@/hooks/useUISound";
@@ -96,7 +95,6 @@ const WorkersHutTooltipContent = () => {
 export const TopLeftNavigation = memo(() => {
   const { setup } = useDojo();
 
-  const { unclaimedQuestsCount } = useUnclaimedQuestsCount();
   const { isMapView, handleUrlChange, hexPosition } = useQuery();
   const { playerStructures } = useEntities();
   const { getEntityInfo } = useEntitiesUtils();
@@ -321,11 +319,7 @@ export const TopLeftNavigation = memo(() => {
       </motion.div>
       <div className="relative">
         <SecondaryMenuItems />
-        {unclaimedQuestsCount > 0 && (
-          <div className="absolute right-0 px-4 top-full mt-2">
-            <QuestsMenu unclaimedQuestsCount={unclaimedQuestsCount} />
-          </div>
-        )}
+        <QuestsMenu />
       </div>
     </div>
   );