Merge branch 'next' into fix/wonders-lords-cost

BibliothecaDAO · Dec 10, 2024 · c5f86fd · c5f86fd
2 parents 43654f7 + fcedbb3
commit c5f86fd
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 74 deletions.
diff --git a/client/package.json b/client/package.json
@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "@bibliothecadao/eternum": "workspace:^",
-    "@cartridge/connector": "0.5.3",
-    "@cartridge/controller": "0.5.3",
+    "@cartridge/connector": "0.5.4",
+    "@cartridge/controller": "0.5.4",
     "@dojoengine/core": "1.0.1",
     "@dojoengine/create-burner": "1.0.1",
     "@dojoengine/react": "1.0.1",

diff --git a/client/src/hooks/context/DojoContext.tsx b/client/src/hooks/context/DojoContext.tsx
@@ -3,7 +3,7 @@ import { SetupNetworkResult } from "@/dojo/setupNetwork";
 import { Position } from "@/types/Position";
 import { OnboardingContainer, StepContainer } from "@/ui/layouts/Onboarding";
 import { OnboardingButton } from "@/ui/layouts/OnboardingButton";
-import { LoadingScreen } from "@/ui/modules/LoadingScreen";
+import { CountdownTimer, LoadingScreen } from "@/ui/modules/LoadingScreen";
 import { ACCOUNT_CHANGE_EVENT, SpectateButton } from "@/ui/modules/onboarding/Steps";
 import { ContractAddress } from "@bibliothecadao/eternum";
 import ControllerConnector from "@cartridge/connector/controller";
@@ -15,7 +15,7 @@ import { ReactNode, createContext, useContext, useEffect, useMemo, useState } fr
 import { Account, AccountInterface, RpcProvider } from "starknet";
 import { Env, env } from "../../../env";
 import { SetupResult } from "../../dojo/setup";
-import { displayAddress, getRandomBackgroundImage } from "../../ui/utils/utils";
+import { displayAddress } from "../../ui/utils/utils";
 import { useQuery } from "../helpers/useQuery";
 import { useAddressStore } from "../store/useAddressStore";
 import useUIStore from "../store/useUIStore";
@@ -261,7 +261,6 @@ const DojoContextProvider = ({
     return <LoadingScreen backgroundImage={backgroundImage} />;
   }
 
-  // Handle Loading Screen
   if (isDev) {
     if (!burnerAccount) {
       return <LoadingScreen backgroundImage={backgroundImage} />;
@@ -272,24 +271,28 @@ const DojoContextProvider = ({
     }
     if (!isConnected && !isConnecting && !controllerAccount && !isSpectatorMode) {
       return (
-        <OnboardingContainer backgroundImage={backgroundImage}>
-          <StepContainer>
-            <div className="flex justify-center space-x-8 mt-2 md:mt-4">
-              {!isConnected && (
-                <>
-                  <SpectateButton onClick={onSpectatorModeClick} />
-                  <OnboardingButton
-                    onClick={connectWallet}
-                    className="!bg-[#FCB843] !text-black border-none hover:!bg-[#FCB843]/80"
-                  >
-                    <CartridgeSmall className="w-5 md:w-6 mr-1 md:mr-2 fill-black" />
-                    Log In
-                  </OnboardingButton>
-                </>
-              )}
-            </div>
-          </StepContainer>
-        </OnboardingContainer>
+        <>
+          <CountdownTimer />
+
+          <OnboardingContainer backgroundImage={backgroundImage}>
+            <StepContainer>
+              <div className="flex justify-center space-x-8 mt-2 md:mt-4">
+                {!isConnected && (
+                  <>
+                    <SpectateButton onClick={onSpectatorModeClick} />
+                    <OnboardingButton
+                      onClick={connectWallet}
+                      className="!bg-[#FCB843] !text-black border-none hover:!bg-[#FCB843]/80"
+                    >
+                      <CartridgeSmall className="w-5 md:w-6 mr-1 md:mr-2 fill-black" />
+                      Log In
+                    </OnboardingButton>
+                  </>
+                )}
+              </div>
+            </StepContainer>
+          </OnboardingContainer>
+        </>
       );
     }
 

diff --git a/client/src/hooks/useSeasonStart.tsx b/client/src/hooks/useSeasonStart.tsx
@@ -0,0 +1,23 @@
+import { configManager } from "@/dojo/setup";
+import { useEffect, useState } from "react";
+
+export const useSeasonStart = () => {
+  const seasonStart = BigInt(configManager.getSeasonConfig().startAt || 0);
+  const nextBlockTimestamp = BigInt(Math.floor(Date.now() / 1000));
+
+  const [countdown, setCountdown] = useState<bigint>(0n);
+  useEffect(() => {
+    if (nextBlockTimestamp === 0n || seasonStart === 0n) return;
+
+    const initialCountdown = seasonStart - nextBlockTimestamp;
+    setCountdown(initialCountdown);
+
+    const timer = setInterval(() => {
+      setCountdown((prev) => prev - 1n);
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [nextBlockTimestamp, seasonStart]);
+
+  return { seasonStart, countdown, nextBlockTimestamp };
+};
diff --git a/client/src/ui/layouts/Onboarding.tsx b/client/src/ui/layouts/Onboarding.tsx
@@ -148,7 +148,6 @@ export const OnboardingContainer = ({ children, backgroundImage, controller = tr
     />
     <div className="absolute z-10 w-screen h-screen flex justify-center flex-wrap self-center">
       <OnboardingOverlay controller={controller} />
-      <SeasonStartTimer />
       {children}
     </div>
   </div>
@@ -265,33 +264,3 @@ const SeasonPassButton = ({ setSettleRealm }: SeasonPassButtonProps) => {
   );
 };
 
-const SeasonStartTimer = () => {
-  const nextBlockTimestamp = BigInt(useUIStore.getState().nextBlockTimestamp || 0);
-  const seasonStart = BigInt(configManager.getSeasonConfig().startAt || 0);
-
-  const [countdown, setCountdown] = useState<bigint>(0n);
-  useEffect(() => {
-    if (nextBlockTimestamp === 0n || seasonStart === 0n) return;
-
-    const initialCountdown = seasonStart - nextBlockTimestamp;
-    setCountdown(initialCountdown);
-
-    const timer = setInterval(() => {
-      setCountdown((prev) => prev - 1n);
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [nextBlockTimestamp, seasonStart]);
-
-  if (countdown <= 0n) {
-    return null;
-  }
-
-  return (
-    <div className="fixed top-40 left-1/2 -translate-x-1/2 z-50">
-      <div className="text-2xl bg-black/20 border-[0.5px] border-gradient rounded-lg px-6 py-3 text-gold backdrop-filter backdrop-blur-[24px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] flex gap-2">
-        <p className="font-semibold">{formatTime(Number(countdown), undefined, false, true)}</p>
-      </div>
-    </div>
-  );
-};
diff --git a/client/src/ui/modules/LoadingScreen.tsx b/client/src/ui/modules/LoadingScreen.tsx
@@ -1,3 +1,4 @@
+import { useSeasonStart } from "@/hooks/useSeasonStart";
 import { useEffect, useState } from "react";
 import "../../index.css";
 import { OnboardingContainer, StepContainer } from "../layouts/Onboarding";
@@ -50,3 +51,44 @@ export const LoadingScreen = ({ backgroundImage }: { backgroundImage: string })
     </OnboardingContainer>
   );
 };
+
+export function CountdownTimer() {
+  const { seasonStart, countdown, nextBlockTimestamp } = useSeasonStart();
+
+  const days = Math.floor(Number(countdown) / (3600 * 24));
+  const hours = Math.floor((Number(countdown) % (3600 * 24)) / 3600);
+  const minutes = Math.floor((Number(countdown) % 3600) / 60);
+  const seconds = Number(countdown) % 60;
+
+  if (countdown < 0 || nextBlockTimestamp === 0n || seasonStart === 0n) return null;
+
+  return (
+    <div className="absolute inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/30 backdrop-blur-xl" />
+      <div className="relative flex flex-col items-center">
+        <img src="/images/eternumloader.png" className="w-32 sm:w-24 lg:w-24 xl:w-28 2xl:mt-2 mx-auto my-8" />
+        <h1 className="tracking-wider">Eternum is Launching in</h1>
+        <div className="flex gap-4 text-center mt-4 mx-auto">
+          <TimeUnit value={days} label="Days" />
+          <TimeUnit value={hours} label="Hours" />
+          <TimeUnit value={minutes} label="Minutes" />
+          <TimeUnit value={seconds} label="Seconds" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface TimeUnitProps {
+  value: number;
+  label: string;
+}
+
+function TimeUnit({ value, label }: TimeUnitProps) {
+  return (
+    <div className="flex flex-col">
+      <span className="text-4xl font-bold">{value.toString().padStart(2, "0")}</span>
+      <span className="text-sm text-gray-500">{label}</span>
+    </div>
+  );
+}
diff --git a/client/src/ui/utils/utils.tsx b/client/src/ui/utils/utils.tsx
@@ -247,10 +247,10 @@ export const formatTime = (
     const formattedSeconds = remainingSeconds.toString().padStart(2, "0");
     parts.push(`${formattedHours}:${formattedMinutes}:${formattedSeconds}`);
   } else {
-    if (hours > 0 && format & TimeFormat.H) parts.push(`${hours} ${abbreviate ? "h" : "hour(s)"}`);
-    if (minutes > 0 && format & TimeFormat.M) parts.push(`${minutes} ${abbreviate ? "m" : "minute(s)"}`);
+    if (hours > 0 && format & TimeFormat.H) parts.push(`${hours}${abbreviate ? "h" : " hour(s)"}`);
+    if (minutes > 0 && format & TimeFormat.M) parts.push(`${minutes}${abbreviate ? "m" : " minute(s)"}`);
     if (remainingSeconds > 0 && format & TimeFormat.S)
-      parts.push(`${remainingSeconds} ${abbreviate ? "s" : "second(s)"}`);
+      parts.push(`${remainingSeconds}${abbreviate ? "s" : " second(s)"}`);
   }
 
   return parts.join(" ");