From bc2104b0784ce1a25db920f0992a6d51c50df6b9 Mon Sep 17 00:00:00 2001 From: aymericdelab Date: Tue, 28 Jan 2025 09:21:25 +0100 Subject: [PATCH 01/14] start new onboarding --- client/apps/game/src/assets/icons/home.svg | 3 + .../game/src/hooks/context/dojo-context.tsx | 61 ++++++++++++++++--- .../hooks/helpers/use-structure-entity-id.ts | 22 +++++-- .../apps/game/src/hooks/store/use-ui-store.ts | 4 ++ .../game/src/ui/components/home-button.tsx | 21 +++++++ client/apps/game/src/ui/layouts/world.tsx | 9 ++- client/apps/game/src/utils/realms.ts | 17 ++++++ .../src/hooks/context/dojo-context.tsx | 10 +-- 8 files changed, 121 insertions(+), 26 deletions(-) create mode 100644 client/apps/game/src/assets/icons/home.svg create mode 100644 client/apps/game/src/ui/components/home-button.tsx create mode 100644 client/apps/game/src/utils/realms.ts diff --git a/client/apps/game/src/assets/icons/home.svg b/client/apps/game/src/assets/icons/home.svg new file mode 100644 index 000000000..de6bdc41a --- /dev/null +++ b/client/apps/game/src/assets/icons/home.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/client/apps/game/src/hooks/context/dojo-context.tsx b/client/apps/game/src/hooks/context/dojo-context.tsx index f768c2fac..7f1b75afe 100644 --- a/client/apps/game/src/hooks/context/dojo-context.tsx +++ b/client/apps/game/src/hooks/context/dojo-context.tsx @@ -6,12 +6,13 @@ import { Position } from "@/types/position"; import { OnboardingContainer, StepContainer } from "@/ui/layouts/onboarding"; import { OnboardingButton } from "@/ui/layouts/onboarding-button"; import { CountdownTimer, LoadingScreen } from "@/ui/modules/loading-screen"; -import { ACCOUNT_CHANGE_EVENT, SpectateButton } from "@/ui/modules/onboarding/steps"; +import { SpectateButton } from "@/ui/modules/onboarding/steps"; import { displayAddress } from "@/ui/utils/utils"; +import { getRandomRealmEntity } from "@/utils/realms"; import { ContractAddress, SetupResult } from "@bibliothecadao/eternum"; import { DojoContext, useQuery } from "@bibliothecadao/react"; import ControllerConnector from "@cartridge/connector/controller"; -import { HasValue, runQuery } from "@dojoengine/recs"; +import { getComponentValue, HasValue, runQuery } from "@dojoengine/recs"; import { cairoShortStringToFelt } from "@dojoengine/torii-client"; import { useAccount, useConnect } from "@starknet-react/core"; import { ReactNode, useContext, useEffect, useMemo, useState } from "react"; @@ -81,7 +82,7 @@ export const DojoProvider = ({ children, value, backgroundImage }: DojoProviderP {children} @@ -102,8 +103,9 @@ const DojoContextProvider = ({ }) => { const setSpectatorMode = useUIStore((state) => state.setSpectatorMode); const isSpectatorMode = useUIStore((state) => state.isSpectatorMode); - const showBlankOverlay = useUIStore((state) => state.setShowBlankOverlay); const setAddressName = useAddressStore((state) => state.setAddressName); + const showHomeScreen = useUIStore((state) => state.showHomeScreen); + const setShowHomeScreen = useUIStore((state) => state.setShowHomeScreen); const { handleUrlChange } = useQuery(); @@ -117,6 +119,17 @@ const DojoContextProvider = ({ const [retries, setRetries] = useState(0); + useEffect(() => { + setSpectatorMode(true); + const randomRealmEntity = getRandomRealmEntity(value.components); + const position = randomRealmEntity ? getComponentValue(value.components.Position, randomRealmEntity) : undefined; + handleUrlChange( + new Position({ x: randomRealmPosition?.x || 0, y: randomRealmPosition?.y || 0 }).toHexLocationUrl(), + ); + window.dispatchEvent(new Event(ACCOUNT_CHANGE_EVENT)); + showBlankOverlay(false); + }, []); + const connectWallet = async () => { try { console.log("Attempting to connect wallet..."); @@ -128,13 +141,37 @@ const DojoContextProvider = ({ }; const onSpectatorModeClick = () => { - setSpectatorMode(true); - handleUrlChange(new Position({ x: 0, y: 0 }).toMapLocationUrl()); - window.dispatchEvent(new Event(ACCOUNT_CHANGE_EVENT)); - showBlankOverlay(false); + // setShowHomeScreen(false); + // setSpectatorMode(true); + // handleUrlChange(new Position({ x: 0, y: 0 }).toMapLocationUrl()); + // window.dispatchEvent(new Event(ACCOUNT_CHANGE_EVENT)); + // showBlankOverlay(false); }; - const accountToUse = isSpectatorMode ? new Account(value.network.provider.provider, "0x0", "0x0") : controllerAccount; + const [accountToUse, setAccountToUse] = useState( + new Account(value.network.provider.provider, "0x0", "0x0"), + ); + + useEffect(() => { + if (isSpectatorMode || !controllerAccount) { + setAccountToUse(new Account(value.network.provider.provider, "0x0", "0x0")); + } else { + setAccountToUse(controllerAccount); + } + }, [isSpectatorMode, controllerAccount]); + + // useEffect(() => { + // if (isConnected) { + // console.log("isConnected so showing home screen", isConnected); + // setShowHomeScreen(false); + // } else { + // const randomRealmPosition = getRandomRealmPosition(value.components); + // handleUrlChange( + // new Position({ x: randomRealmPosition?.x || 0, y: randomRealmPosition?.y || 0 }).toHexLocationUrl(), + // ); + // window.dispatchEvent(new Event(ACCOUNT_CHANGE_EVENT)); + // } + // }, [isConnected]); useEffect(() => { const setUserName = async () => { @@ -188,7 +225,9 @@ const DojoContextProvider = ({ ); } - if (!isConnected && !isConnecting && !controllerAccount && !isSpectatorMode) { + console.log("showHomeScreen", showHomeScreen); + + if (showHomeScreen) { return ( <> @@ -219,6 +258,8 @@ const DojoContextProvider = ({ return ; } + console.log("go to game"); + // Once account is set, render the children return ( { const { setup: { + components, components: { Structure, Position, Owner }, }, account: { account }, @@ -16,17 +18,27 @@ export const useStructureEntityId = () => { const { hexPosition, isMapView } = useQuery(); const setStructureEntityId = useUIStore((state) => state.setStructureEntityId); - const isSpectatorMode = useUIStore((state) => state.isSpectatorMode); const structureEntityId = useUIStore((state) => state.structureEntityId); - const address = isSpectatorMode ? ContractAddress("0x0") : ContractAddress(account.address); + console.log("im am in the use structure entity id hook"); const structures = usePlayerStructures(ContractAddress(account.address)); + console.log({ account: account.address }); + + // don't to that here, find where const defaultPlayerStructure = useMemo(() => { + if (!structures.length) { + const randomRealm = getRandomRealmEntity(components); + console.log({ randomRealm }); + return getStructure(randomRealm!, ContractAddress(account.address), components); + } return structures[0]; + // todo: pay attention to this, lots of rerenders }, [structureEntityId, structures]); + console.log({ defaultPlayerStructure }); + useEffect(() => { const { x, y } = new PositionInterface({ x: hexPosition.col, @@ -40,7 +52,7 @@ export const useStructureEntityId = () => { const structure = getComponentValue(Structure, structureEntity ?? ("0" as Entity)); const structureOwner = getComponentValue(Owner, structureEntity ?? ("0" as Entity)); - const isOwner = structureOwner?.address === BigInt(address); + const isOwner = structureOwner?.address === ContractAddress(account.address); if (isMapView) { setStructureEntityId( @@ -49,5 +61,5 @@ export const useStructureEntityId = () => { } else { setStructureEntityId(structure?.entity_id || UNDEFINED_STRUCTURE_ENTITY_ID); } - }, [defaultPlayerStructure, isMapView, hexPosition, address]); + }, [defaultPlayerStructure, isMapView, hexPosition, account.address]); }; diff --git a/client/apps/game/src/hooks/store/use-ui-store.ts b/client/apps/game/src/hooks/store/use-ui-store.ts index e9ccbb963..b6806c9e0 100644 --- a/client/apps/game/src/hooks/store/use-ui-store.ts +++ b/client/apps/game/src/hooks/store/use-ui-store.ts @@ -50,6 +50,8 @@ interface UIStore { modalContent: React.ReactNode; toggleModal: (content: React.ReactNode) => void; showModal: boolean; + showHomeScreen: boolean; + setShowHomeScreen: (show: boolean) => void; battleView: BattleViewInfo | null; setBattleView: (participants: BattleViewInfo | null) => void; leftNavigationView: LeftView; @@ -134,6 +136,8 @@ export const useUIStore = create( }, showToS: false, setShowToS: (show: boolean) => set({ showToS: show }), + showHomeScreen: false, + setShowHomeScreen: (show: boolean) => set({ showHomeScreen: show }), ...createPopupsSlice(set, get), ...createThreeStoreSlice(set, get), ...createBuildModeStoreSlice(set), diff --git a/client/apps/game/src/ui/components/home-button.tsx b/client/apps/game/src/ui/components/home-button.tsx new file mode 100644 index 000000000..f556bdac0 --- /dev/null +++ b/client/apps/game/src/ui/components/home-button.tsx @@ -0,0 +1,21 @@ +import { ReactComponent as HomeIcon } from "@/assets/icons/home.svg"; +import Button from "@/ui/elements/button"; +import { useNavigate } from "react-router-dom"; + +export const HomeButton = () => { + const navigate = useNavigate(); + + const handleHomeClick = () => { + navigate("/"); + }; + + return ( + + ); +}; diff --git a/client/apps/game/src/ui/layouts/world.tsx b/client/apps/game/src/ui/layouts/world.tsx index b94a9ffdc..4e26e2d3a 100644 --- a/client/apps/game/src/ui/layouts/world.tsx +++ b/client/apps/game/src/ui/layouts/world.tsx @@ -98,6 +98,7 @@ export const World = ({ backgroundImage }: { backgroundImage: string }) => { const showBlankOverlay = useUIStore((state) => state.showBlankOverlay); const isLoadingScreenEnabled = useUIStore((state) => state.isLoadingScreenEnabled); const showModal = useUIStore((state) => state.showModal); + const showHomeScreen = useUIStore((state) => state.showHomeScreen); const modalContent = useUIStore((state) => state.modalContent); const battleView = useUIStore((state) => state.battleView); @@ -295,9 +296,11 @@ export const World = ({ backgroundImage }: { backgroundImage: string }) => { {IS_MOBILE && } {modalContent} - - - + {showHomeScreen && ( + + + + )} {!IS_MOBILE && ( <> diff --git a/client/apps/game/src/utils/realms.ts b/client/apps/game/src/utils/realms.ts new file mode 100644 index 000000000..a80f0e75c --- /dev/null +++ b/client/apps/game/src/utils/realms.ts @@ -0,0 +1,17 @@ +import { ClientComponents } from "@bibliothecadao/eternum"; +import { Has, runQuery } from "@dojoengine/recs"; + +export const getRandomRealmEntity = (components: ClientComponents) => { + const realms = runQuery([Has(components.Realm)]); + + if (realms.size === 0) { + return undefined; + } + + // Get a random realm entity from the set + const realmEntities = Array.from(realms); + const randomIndex = Math.floor(Math.random() * realmEntities.length); + const randomRealmEntity = realmEntities[randomIndex]; + + return randomRealmEntity; +}; diff --git a/client/apps/landing/src/hooks/context/dojo-context.tsx b/client/apps/landing/src/hooks/context/dojo-context.tsx index a494b8afe..762b63b8e 100644 --- a/client/apps/landing/src/hooks/context/dojo-context.tsx +++ b/client/apps/landing/src/hooks/context/dojo-context.tsx @@ -1,5 +1,6 @@ import { displayAddress } from "@/lib/utils"; -import { SetupNetworkResult, SetupResult } from "@bibliothecadao/eternum"; +import { SetupResult } from "@bibliothecadao/eternum"; +import { DojoResult } from "@bibliothecadao/react"; import { useAccount } from "@starknet-react/core"; import { ReactNode, createContext, useContext, useMemo } from "react"; import { Account, AccountInterface, RpcProvider } from "starknet"; @@ -14,13 +15,6 @@ interface DojoContextType extends SetupResult { account: DojoAccount; } -interface DojoResult { - setup: DojoContextType; - account: DojoAccount; - network: SetupNetworkResult; - masterAccount: Account | AccountInterface; -} - const DojoContext = createContext(null); const requiredEnvs: (keyof typeof env)[] = [ From 9a065139958fbecb95a84da5d7365ca5469c67bd Mon Sep 17 00:00:00 2001 From: aymericdelab Date: Tue, 28 Jan 2025 17:27:21 +0100 Subject: [PATCH 02/14] show random realm hex view if not connected --- .../game/src/hooks/context/dojo-context.tsx | 59 ++++--------------- .../use-navigate-to-realm-view-by-account.ts | 24 ++++++++ .../game/src/hooks/helpers/use-navigate.ts | 21 +++++++ .../hooks/helpers/use-structure-entity-id.ts | 52 ++++------------ .../apps/game/src/hooks/store/use-ui-store.ts | 9 ++- .../src/three/helpers/location-manager.ts | 5 -- .../game/src/ui/components/home-button.tsx | 8 +-- .../ui/containers/blank-overlay-container.tsx | 2 + .../apps/game/src/ui/layouts/onboarding.tsx | 1 + client/apps/game/src/ui/layouts/world.tsx | 18 +++--- .../src/ui/modules/controller/controller.tsx | 20 ++++--- .../navigation/secondary-menu-items.tsx | 2 + .../navigation/top-left-navigation.tsx | 7 +-- .../game/src/ui/modules/onboarding/steps.tsx | 15 ++--- client/apps/game/src/utils/realms.ts | 16 ++++- .../game/src => public}/assets/icons/home.svg | 0 packages/react/src/hooks/helpers/use-query.ts | 1 + 17 files changed, 120 insertions(+), 140 deletions(-) create mode 100644 client/apps/game/src/hooks/helpers/use-navigate-to-realm-view-by-account.ts create mode 100644 client/apps/game/src/hooks/helpers/use-navigate.ts rename client/{apps/game/src => public}/assets/icons/home.svg (100%) diff --git a/client/apps/game/src/hooks/context/dojo-context.tsx b/client/apps/game/src/hooks/context/dojo-context.tsx index 7f1b75afe..101646b3d 100644 --- a/client/apps/game/src/hooks/context/dojo-context.tsx +++ b/client/apps/game/src/hooks/context/dojo-context.tsx @@ -2,22 +2,21 @@ import { ReactComponent as CartridgeSmall } from "@/assets/icons/cartridge-small import { useAccountStore } from "@/hooks/store/use-account-store"; import { useAddressStore } from "@/hooks/store/use-address-store"; import { useUIStore } from "@/hooks/store/use-ui-store"; -import { Position } from "@/types/position"; import { OnboardingContainer, StepContainer } from "@/ui/layouts/onboarding"; import { OnboardingButton } from "@/ui/layouts/onboarding-button"; import { CountdownTimer, LoadingScreen } from "@/ui/modules/loading-screen"; import { SpectateButton } from "@/ui/modules/onboarding/steps"; import { displayAddress } from "@/ui/utils/utils"; -import { getRandomRealmEntity } from "@/utils/realms"; import { ContractAddress, SetupResult } from "@bibliothecadao/eternum"; -import { DojoContext, useQuery } from "@bibliothecadao/react"; +import { DojoContext } from "@bibliothecadao/react"; import ControllerConnector from "@cartridge/connector/controller"; -import { getComponentValue, HasValue, runQuery } from "@dojoengine/recs"; +import { HasValue, runQuery } from "@dojoengine/recs"; import { cairoShortStringToFelt } from "@dojoengine/torii-client"; import { useAccount, useConnect } from "@starknet-react/core"; import { ReactNode, useContext, useEffect, useMemo, useState } from "react"; import { Account, AccountInterface, RpcProvider } from "starknet"; import { Env, env } from "../../../env"; +import { useNavigateToRealmViewByAccount } from "../helpers/use-navigate-to-realm-view-by-account"; const requiredEnvs: (keyof Env)[] = [ "VITE_PUBLIC_MASTER_ADDRESS", @@ -101,13 +100,11 @@ const DojoContextProvider = ({ controllerAccount: AccountInterface | null; backgroundImage: string; }) => { - const setSpectatorMode = useUIStore((state) => state.setSpectatorMode); + useNavigateToRealmViewByAccount(value.components); + + const showBlankOverlay = useUIStore((state) => state.showBlankOverlay); const isSpectatorMode = useUIStore((state) => state.isSpectatorMode); const setAddressName = useAddressStore((state) => state.setAddressName); - const showHomeScreen = useUIStore((state) => state.showHomeScreen); - const setShowHomeScreen = useUIStore((state) => state.setShowHomeScreen); - - const { handleUrlChange } = useQuery(); const currentValue = useContext(DojoContext); if (currentValue) throw new Error("DojoProvider can only be used once"); @@ -119,17 +116,6 @@ const DojoContextProvider = ({ const [retries, setRetries] = useState(0); - useEffect(() => { - setSpectatorMode(true); - const randomRealmEntity = getRandomRealmEntity(value.components); - const position = randomRealmEntity ? getComponentValue(value.components.Position, randomRealmEntity) : undefined; - handleUrlChange( - new Position({ x: randomRealmPosition?.x || 0, y: randomRealmPosition?.y || 0 }).toHexLocationUrl(), - ); - window.dispatchEvent(new Event(ACCOUNT_CHANGE_EVENT)); - showBlankOverlay(false); - }, []); - const connectWallet = async () => { try { console.log("Attempting to connect wallet..."); @@ -140,39 +126,16 @@ const DojoContextProvider = ({ } }; - const onSpectatorModeClick = () => { - // setShowHomeScreen(false); - // setSpectatorMode(true); - // handleUrlChange(new Position({ x: 0, y: 0 }).toMapLocationUrl()); - // window.dispatchEvent(new Event(ACCOUNT_CHANGE_EVENT)); - // showBlankOverlay(false); - }; - - const [accountToUse, setAccountToUse] = useState( - new Account(value.network.provider.provider, "0x0", "0x0"), - ); + const [accountToUse, setAccountToUse] = useState(); useEffect(() => { - if (isSpectatorMode || !controllerAccount) { + if (isSpectatorMode) { setAccountToUse(new Account(value.network.provider.provider, "0x0", "0x0")); } else { setAccountToUse(controllerAccount); } }, [isSpectatorMode, controllerAccount]); - // useEffect(() => { - // if (isConnected) { - // console.log("isConnected so showing home screen", isConnected); - // setShowHomeScreen(false); - // } else { - // const randomRealmPosition = getRandomRealmPosition(value.components); - // handleUrlChange( - // new Position({ x: randomRealmPosition?.x || 0, y: randomRealmPosition?.y || 0 }).toHexLocationUrl(), - // ); - // window.dispatchEvent(new Event(ACCOUNT_CHANGE_EVENT)); - // } - // }, [isConnected]); - useEffect(() => { const setUserName = async () => { const username = await (connector as ControllerConnector)?.username(); @@ -225,9 +188,7 @@ const DojoContextProvider = ({ ); } - console.log("showHomeScreen", showHomeScreen); - - if (showHomeScreen) { + if (!isConnected && !isConnecting && showBlankOverlay) { return ( <> @@ -236,7 +197,7 @@ const DojoContextProvider = ({
{!isConnected && ( <> - + {}} /> { + const navigateToHexView = useNavigateToHexView(); + const { account } = useAccount(); + + // navigate to random hex view if not connected or to player's first realm if connected + useEffect(() => { + if (!account) { + const randomRealmEntity = getRandomRealmEntity(components); + const position = randomRealmEntity ? getComponentValue(components.Position, randomRealmEntity) : undefined; + position && navigateToHexView(position); + } else { + const playerRealm = getPlayerFirstRealm(components, ContractAddress(account?.address || "0x0")); + const position = playerRealm ? getComponentValue(components.Position, playerRealm) : undefined; + position && navigateToHexView(position); + } + }, [account?.address]); +}; diff --git a/client/apps/game/src/hooks/helpers/use-navigate.ts b/client/apps/game/src/hooks/helpers/use-navigate.ts new file mode 100644 index 000000000..30e9181d3 --- /dev/null +++ b/client/apps/game/src/hooks/helpers/use-navigate.ts @@ -0,0 +1,21 @@ +import { Position } from "@/types/position"; +import { ACCOUNT_CHANGE_EVENT } from "@/ui/modules/onboarding/steps"; +import { type Position as PositionType } from "@bibliothecadao/eternum"; +import { useQuery } from "@bibliothecadao/react"; +import { useUIStore } from "../store/use-ui-store"; + +export const useNavigateToHexView = () => { + const showBlankOverlay = useUIStore((state) => state.setShowBlankOverlay); + const setIsLoadingScreenEnabled = useUIStore((state) => state.setIsLoadingScreenEnabled); + + const { handleUrlChange } = useQuery(); + + return (position: PositionType) => { + const url = new Position(position).toHexLocationUrl(); + + setIsLoadingScreenEnabled(true); + showBlankOverlay(false); + handleUrlChange(url); + window.dispatchEvent(new Event(ACCOUNT_CHANGE_EVENT)); + }; +}; diff --git a/client/apps/game/src/hooks/helpers/use-structure-entity-id.ts b/client/apps/game/src/hooks/helpers/use-structure-entity-id.ts index 4bc0f57cb..ad65fdd6a 100644 --- a/client/apps/game/src/hooks/helpers/use-structure-entity-id.ts +++ b/client/apps/game/src/hooks/helpers/use-structure-entity-id.ts @@ -1,65 +1,33 @@ import { useUIStore } from "@/hooks/store/use-ui-store"; import { Position as PositionInterface } from "@/types/position"; import { UNDEFINED_STRUCTURE_ENTITY_ID } from "@/ui/constants"; -import { getRandomRealmEntity } from "@/utils/realms"; -import { ContractAddress, getStructure } from "@bibliothecadao/eternum"; -import { useDojo, usePlayerStructures, useQuery } from "@bibliothecadao/react"; +import { useDojo, useQuery } from "@bibliothecadao/react"; import { Entity, Has, HasValue, getComponentValue, runQuery } from "@dojoengine/recs"; -import { useEffect, useMemo } from "react"; +import { useEffect } from "react"; export const useStructureEntityId = () => { const { setup: { - components, - components: { Structure, Position, Owner }, + components: { Structure, Position }, }, - account: { account }, } = useDojo(); - const { hexPosition, isMapView } = useQuery(); - const setStructureEntityId = useUIStore((state) => state.setStructureEntityId); - const structureEntityId = useUIStore((state) => state.structureEntityId); - - console.log("im am in the use structure entity id hook"); - - const structures = usePlayerStructures(ContractAddress(account.address)); - - console.log({ account: account.address }); - - // don't to that here, find where - const defaultPlayerStructure = useMemo(() => { - if (!structures.length) { - const randomRealm = getRandomRealmEntity(components); - console.log({ randomRealm }); - return getStructure(randomRealm!, ContractAddress(account.address), components); - } - return structures[0]; - // todo: pay attention to this, lots of rerenders - }, [structureEntityId, structures]); - - console.log({ defaultPlayerStructure }); + const { hexPosition } = useQuery(); + const { setStructureEntityId } = useUIStore(); useEffect(() => { - const { x, y } = new PositionInterface({ + const position = new PositionInterface({ x: hexPosition.col, y: hexPosition.row, }).getContract(); - const structureEntity = runQuery([Has(Structure), HasValue(Position, { x, y })]) + const structureEntity = runQuery([Has(Structure), HasValue(Position, { x: position.x, y: position.y })]) .values() .next().value; const structure = getComponentValue(Structure, structureEntity ?? ("0" as Entity)); - const structureOwner = getComponentValue(Owner, structureEntity ?? ("0" as Entity)); - - const isOwner = structureOwner?.address === ContractAddress(account.address); + const newStructureId = structure?.entity_id; - if (isMapView) { - setStructureEntityId( - isOwner ? structureOwner.entity_id : defaultPlayerStructure?.entity_id || UNDEFINED_STRUCTURE_ENTITY_ID, - ); - } else { - setStructureEntityId(structure?.entity_id || UNDEFINED_STRUCTURE_ENTITY_ID); - } - }, [defaultPlayerStructure, isMapView, hexPosition, account.address]); + setStructureEntityId(newStructureId || UNDEFINED_STRUCTURE_ENTITY_ID); + }, [hexPosition]); }; diff --git a/client/apps/game/src/hooks/store/use-ui-store.ts b/client/apps/game/src/hooks/store/use-ui-store.ts index b6806c9e0..8d913cc7c 100644 --- a/client/apps/game/src/hooks/store/use-ui-store.ts +++ b/client/apps/game/src/hooks/store/use-ui-store.ts @@ -50,8 +50,6 @@ interface UIStore { modalContent: React.ReactNode; toggleModal: (content: React.ReactNode) => void; showModal: boolean; - showHomeScreen: boolean; - setShowHomeScreen: (show: boolean) => void; battleView: BattleViewInfo | null; setBattleView: (participants: BattleViewInfo | null) => void; leftNavigationView: LeftView; @@ -81,7 +79,10 @@ export const useUIStore = create( showBlurOverlay: false, setShowBlurOverlay: (show) => set({ showBlurOverlay: show }), showBlankOverlay: true, - setShowBlankOverlay: (show) => set({ showBlankOverlay: show }), + setShowBlankOverlay: (show) => { + console.log("Setting showBlankOverlay:", show); + set({ showBlankOverlay: show }); + }, isSideMenuOpened: true, toggleSideMenu: () => set((state) => ({ isSideMenuOpened: !state.isSideMenuOpened })), isSoundOn: localStorage.getItem("soundEnabled") ? localStorage.getItem("soundEnabled") === "true" : true, @@ -136,8 +137,6 @@ export const useUIStore = create( }, showToS: false, setShowToS: (show: boolean) => set({ showToS: show }), - showHomeScreen: false, - setShowHomeScreen: (show: boolean) => set({ showHomeScreen: show }), ...createPopupsSlice(set, get), ...createThreeStoreSlice(set, get), ...createBuildModeStoreSlice(set), diff --git a/client/apps/game/src/three/helpers/location-manager.ts b/client/apps/game/src/three/helpers/location-manager.ts index 50a7c3124..4733d1bc1 100644 --- a/client/apps/game/src/three/helpers/location-manager.ts +++ b/client/apps/game/src/three/helpers/location-manager.ts @@ -24,9 +24,4 @@ export class LocationManager { this.updateUrlParams(); return this.urlParams.has("row") && this.urlParams.has("col"); } - - public static updateUrl(url: string) { - window.history.pushState({}, "", url); - window.dispatchEvent(new Event("urlChanged")); - } } diff --git a/client/apps/game/src/ui/components/home-button.tsx b/client/apps/game/src/ui/components/home-button.tsx index f556bdac0..c8aee3925 100644 --- a/client/apps/game/src/ui/components/home-button.tsx +++ b/client/apps/game/src/ui/components/home-button.tsx @@ -1,17 +1,17 @@ import { ReactComponent as HomeIcon } from "@/assets/icons/home.svg"; +import { useUIStore } from "@/hooks/store/use-ui-store"; import Button from "@/ui/elements/button"; -import { useNavigate } from "react-router-dom"; export const HomeButton = () => { - const navigate = useNavigate(); + const setShowBlankOverlay = useUIStore((state) => state.setShowBlankOverlay); const handleHomeClick = () => { - navigate("/"); + setShowBlankOverlay(true); }; return (
- + {/* todo: put this somewhere else maybe ? */} + {/* */}