feat: interactive guide

packages/client/src/store.ts

@@ -28,6 +28,8 @@ export enum ShowItem {
     Setting,
     GameOverDialog,
     GuidePage,
+    GeneralGuide,
+    InterActiveGuide,
 }
 
 export type Volume = {

packages/client/src/ui/Main.tsx

@@ -31,8 +31,9 @@ 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 { GeneralGuide } from "./features/guide/GeneralGuide";
 import { GuidePage } from "./features/guide/GuidePage";
+import { InterActiveGuide } from "./features/guide/InteractiveGuide";
 
 export function Main() {
     const {
@@ -85,7 +86,8 @@ export function Main() {
             <OptionMenu />
             <Setting />
             <GameOverDialog />
-            <Guide />
+            <GeneralGuide />
+            <InterActiveGuide />
         </div>
     );
 }

packages/client/src/ui/components/CommitButton.tsx

@@ -1,22 +1,19 @@
 import { useComponentValue } from "@dojoengine/react";
 import { useDojo } from "../hooks/useDojo";
 import { zeroEntity } from "../../utils";
-import { ShowItem, UIStore, useUIStore } from "../../store";
+import { ShowItem, useUIStore } from "../../store";
 import { useCallback } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { SoundType, usePlaySoundSegment } from "../hooks/usePlaySoundSegment";
 
 export function CommitButton() {
     const {
-        systemCalls: { commitPreparation, nextRound },
-        account: {
-            account,
-            account: { address },
-        },
-        clientComponents: { GameStatus, BattleLogs },
+        systemCalls: { commitPreparation },
+        account: { account },
+        clientComponents: { GameStatus },
     } = useDojo();
 
-    const setShopShow = useUIStore((state: UIStore) => state.setShow);
+    const { setShow, guideIndex, guideRun, setField } = useUIStore();
 
     const status = useComponentValue(GameStatus, zeroEntity);
 
@@ -25,8 +22,21 @@ export function CommitButton() {
     const commitPreparationFn = useCallback(() => {
         play();
         commitPreparation(account);
-        setShopShow(ShowItem.Shop, false);
-    }, [account, commitPreparation, setShopShow, play]);
+        setShow(ShowItem.Shop, false);
+
+        if (guideRun && guideIndex === 3) {
+            setField("guideIndex", guideIndex + 1);
+            setField("guideRun", false);
+        }
+    }, [
+        account,
+        commitPreparation,
+        setShow,
+        play,
+        guideIndex,
+        guideRun,
+        setField,
+    ]);
 
     useHotkeys("enter", () => {
         if (status?.status === 1) {
@@ -46,27 +56,6 @@ export function CommitButton() {
     } else {
         return <div></div>;
     }
-
-    // if (status?.status === 3) {
-    //     let winText = "";
-    //     // get battle result
-
-    //     if (battleResult?.winner === BigInt(address)) {
-    //         winText = "You Win.";
-    //     } else {
-    //         winText = `You Lose  ${battleResult?.healthDecrease} Health. `;
-    //     }
-    //     return (
-    //         <OperationButton
-    //             onClick={() => {
-    //                 nextRound(account);
-    //             }}
-    //             text={`${winText} Next Round`}
-    //         />
-    //     );
-    // } else {
-    //     return <OperationButton visible={"invisible"} />;
-    // }
 }
 
 export function CommitOperationButton({

packages/client/src/ui/features/debug/Debugger.tsx

@@ -46,8 +46,7 @@ export function Debugger() {
         setDebugShow(!debugShow);
     });
 
-    const setShow = useUIStore((state) => state.setShow);
-    const getShow = useUIStore((state) => state.getShow);
+    const { getShow, setShow, setField } = useUIStore();
 
     const userOp = useComponentValue(UserOperation, zeroEntity);
 
@@ -115,6 +114,16 @@ export function Debugger() {
             >
                 Skip Make Choice
             </Button>
+            <Button
+                onClick={() => {
+                    setField("guideRun", true);
+                    setField("guideIndex", 0);
+                    setShow(ShowItem.GuidePage, false);
+                    setShow(ShowItem.InterActiveGuide, true);
+                }}
+            >
+                Start InterActive Guide
+            </Button>
             <Button
                 onClick={async () => {
                     updateComponent(UserOperation, zeroEntity, {

packages/client/src/ui/features/exp/ExpButton.tsx

@@ -1,6 +1,4 @@
 import { useDojo } from "../../hooks/useDojo";
-import { useComponentValue } from "@dojoengine/react";
-import { getEntityIdFromKeys } from "@dojoengine/utils";
 import { ProgressBar } from "../../components/ProgressBar";
 import { useCallback, useState } from "react";
 import {
@@ -10,6 +8,7 @@ import {
 import { cn } from "../../lib/utils";
 import { usePlayerExpProgress } from "../../hooks/usePlayerExpProgress";
 import CountUp from "react-countup";
+import { useUIStore } from "../../../store";
 
 export function ExpButton() {
     const {
@@ -18,6 +17,7 @@ export function ExpButton() {
     } = useDojo();
 
     const [loading, setLoading] = useState(false);
+    const { guideRun, guideIndex, setField } = useUIStore();
 
     const { play } = usePlaySoundSegment(SoundType.Click);
 
@@ -29,8 +29,12 @@ export function ExpButton() {
         setLoading(true);
         buyExp(account).finally(() => {
             setLoading(false);
+
+            if (guideRun && guideIndex === 4) {
+                setField("guideIndex", guideIndex + 1);
+            }
         });
-    }, [buyExp, account, play, loading]);
+    }, [buyExp, account, play, loading, guideIndex, guideRun, setField]);
 
     const { percentage, exp, level, expForNext } = usePlayerExpProgress();
 

packages/client/src/ui/features/guide/Guide.tsx → packages/client/src/ui/features/guide/GeneralGuide.tsx

@@ -1,18 +1,21 @@
 import Joyride, { Step } from "react-joyride";
-import { useUIStore } from "../../../store";
+import { ShowItem, useUIStore } from "../../../store";
 import { logDebug } from "../../lib/utils";
 import { getComponentValueStrict, updateComponent } from "@dojoengine/recs";
 import { useDojo } from "../../hooks/useDojo";
 import { zeroEntity } from "../../../utils";
 import { useState } from "react";
 
-export function Guide() {
+export function GeneralGuide() {
     const { setField, guideIndex, guideRun } = useUIStore();
     const {
         clientComponents: { GameStatus },
     } = useDojo();
     const [rightRound, setRightRound] = useState(1);
     const [rightDanger, setRightDanger] = useState(false);
+    const { setShow } = useUIStore();
+    const show = useUIStore((state) => state.getShow(ShowItem.GeneralGuide));
+
     const steps: Step[] = [
         {
             target: ".guide-step-1",
@@ -22,26 +25,22 @@ export function Guide() {
                 </div>
             ),
             disableBeacon: true,
-            // hideFooter: true,
             disableOverlayClose: true,
-            spotlightClicks: true,
-            hideFooter: true,
-
-            styles: { buttonNext: { visibility: "hidden" } },
+            hideFooter: false,
+            styles: {},
         },
         {
             target: ".guide-step-2",
             content: (
                 <div className="text-sm">
                     The "Traits" of the chess piece are displayed on it. Buy
                     chess pieces with the same "Traits" to unleash their more
-                    powerful abilities. Click to buy.se a chess piece.
+                    powerful abilities. Click to buy a chess piece.
                 </div>
             ),
             disableBeacon: true,
             hideFooter: false,
             disableOverlayClose: true,
-            spotlightClicks: true,
             spotlightPadding: 10,
             styles: {},
         },
@@ -57,7 +56,6 @@ export function Guide() {
             hideFooter: false,
             hideBackButton: true,
             disableOverlayClose: true,
-            spotlightClicks: true,
             spotlightPadding: 10,
         },
         {
@@ -68,7 +66,6 @@ export function Guide() {
             hideBackButton: true,
 
             disableOverlayClose: true,
-            spotlightClicks: true,
             spotlightPadding: 10,
         },
         {
@@ -82,7 +79,6 @@ export function Guide() {
             disableBeacon: true,
             hideFooter: false,
             disableOverlayClose: true,
-            spotlightClicks: true,
             spotlightPadding: 10,
         },
         {
@@ -96,10 +92,8 @@ export function Guide() {
             disableBeacon: true,
             hideFooter: false,
             disableOverlayClose: true,
-            spotlightClicks: true,
             spotlightPadding: 10,
         },
-
         {
             target: ".guide-step-7",
             content: (
@@ -114,10 +108,8 @@ export function Guide() {
             disableBeacon: true,
             hideFooter: false,
             disableOverlayClose: true,
-            spotlightClicks: true,
             spotlightPadding: 10,
         },
-
         {
             target: ".guide-step-8",
             content: (
@@ -131,10 +123,8 @@ export function Guide() {
             disableBeacon: true,
             hideFooter: false,
             disableOverlayClose: true,
-            spotlightClicks: true,
             spotlightPadding: 10,
         },
-
         {
             target: ".guide-step-9",
             content: (
@@ -145,18 +135,25 @@ export function Guide() {
             disableBeacon: true,
             hideFooter: false,
             disableOverlayClose: true,
-            spotlightClicks: true,
             spotlightPadding: 10,
         },
     ];
 
+    if (!show) {
+        return null;
+    }
+
     return (
         <div>
             <Joyride
                 run={guideRun}
                 callback={(data) => {
                     const { lifecycle, index } = data;
 
+                    if (index === 0 && lifecycle === "complete") {
+                        setShow(ShowItem.Shop, true);
+                    }
+
                     if (index === 5 && lifecycle === "complete") {
                         const s = getComponentValueStrict(
                             GameStatus,
@@ -182,10 +179,15 @@ export function Guide() {
                     }
 
                     if (
-                        [1, 2, 3, 4, 5, 6, 7].indexOf(index) !== -1 &&
+                        [0, 1, 2, 3, 4, 5, 6, 7].indexOf(index) !== -1 &&
                         lifecycle === "complete"
                     ) {
-                        setField("guideIndex", guideIndex + 1);
+                        setTimeout(
+                            () => {
+                                setField("guideIndex", guideIndex + 1);
+                            },
+                            index === 0 ? 600 : 0
+                        );
                     }
                     if (index === steps.length - 1 && lifecycle == "complete") {
                         logDebug("Guide ended");
@@ -194,12 +196,13 @@ export function Guide() {
                             currentRound: rightRound,
                             dangerous: rightDanger,
                         });
+                        setShow(ShowItem.GeneralGuide, false);
                     }
                 }}
                 continuous
                 disableCloseOnEsc={true}
                 disableOverlayClose={true}
-                spotlightClicks={true}
+                spotlightClicks={false}
                 hideCloseButton={true}
                 showProgress
                 steps={steps}