diff --git a/packages/client/package.json b/packages/client/package.json index f3041d4..3891d16 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -57,6 +57,7 @@ "react-countup": "^6.5.3", "react-dom": "^18.2.0", "react-hotkeys-hook": "^4.5.0", + "react-joyride": "^2.9.2", "react-spinners": "^0.14.1", "rxjs": "^7.8.1", "simplex-noise": "^4.0.1", diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts index 13cba5e..c03fb33 100644 --- a/packages/client/src/store.ts +++ b/packages/client/src/store.ts @@ -3,8 +3,6 @@ import { createJSONStorage, persist } from "zustand/middleware"; import { createStore } from "zustand/vanilla"; import { NetworkLayer } from "./dojo/createNetworkLayer"; import { PhaserLayer } from "./phaser"; -import { num } from "starknet"; -import { battle } from "./phaser/systems/battle"; export type Store = { networkLayer: NetworkLayer | null; @@ -29,6 +27,7 @@ export enum ShowItem { SynergyDetail, Setting, GameOverDialog, + GuidePage, } export type Volume = { @@ -42,6 +41,9 @@ export type UIStore = { shows: Map; getShow: (i: ShowItem) => boolean; setShow: (i: ShowItem, shouldShow: boolean) => void; + guideIndex: number; + guideRun: boolean; + setField: (field: K, value: UIStore[K]) => void; }; export type PersistUIStore = { @@ -49,6 +51,8 @@ export type PersistUIStore = { setLoggedIn: (loggedIn: boolean) => void; agreeTerm: boolean; setAgreeTerm: (agreeTerm: boolean) => void; + skipGuide: boolean; + setSkipGuide: (skipGuide: boolean) => void; soundVolumes: Volume; setVolume: (v: Partial) => void; }; @@ -65,6 +69,8 @@ export const persistUIStore = createStore( setLoggedIn: (loggedIn: boolean) => set(() => ({ loggedIn })), agreeTerm: false, setAgreeTerm: (agreeTerm: boolean) => set(() => ({ agreeTerm })), + skipGuide: false, + setSkipGuide: (skipGuide: boolean) => set(() => ({ skipGuide })), soundVolumes: { music: 100, effect: 100 }, setVolume: (v: Partial) => set(({ soundVolumes }) => ({ @@ -95,4 +101,8 @@ export const useUIStore = create()((set, get) => ({ return { shows: newMap }; }); }, + guideRun: false, + guideIndex: 0, + setField: (field: K, value: UIStore[K]) => + set({ [field]: value }), })); diff --git a/packages/client/src/ui/Main.tsx b/packages/client/src/ui/Main.tsx index 89a3e4a..e8a9867 100644 --- a/packages/client/src/ui/Main.tsx +++ b/packages/client/src/ui/Main.tsx @@ -31,6 +31,8 @@ import { useCheckNetworkHealth } from "./hooks/useCheckNetworkHealth"; import { useEscCloseDialog } from "./hooks/useEscCloseDialog"; import { GameOverDialog } from "./features/gameover/GameOverDialog"; import { useControlGameEnd } from "./hooks/useControlGameEnd"; +import { Guide } from "./features/guide/Guide"; +import { GuidePage } from "./features/guide/GuidePage"; export function Main() { const { @@ -57,6 +59,7 @@ export function Main() { }} className="relative w-screen h-screen overflow-hidden select-none" > + @@ -82,6 +85,7 @@ export function Main() { + ); } diff --git a/packages/client/src/ui/components/CommitButton.tsx b/packages/client/src/ui/components/CommitButton.tsx index 57e3fe8..a61d733 100644 --- a/packages/client/src/ui/components/CommitButton.tsx +++ b/packages/client/src/ui/components/CommitButton.tsx @@ -80,7 +80,7 @@ export function CommitOperationButton({ }) { return (