add tutorial modal and button in Desktop and mobile header

client/src/ui/components/DesktopHeader.tsx

@@ -11,12 +11,27 @@ import LevelIndicator from "./LevelIndicator";
 import SettingsDropDown from "./SettingsDropDown";
 import { useNavigate } from "react-router-dom";
 import { Controller } from "./Controller";
+import TutorialModal from "./TutorialModal";
 
-const DesktopHeader = () => {
+interface DesktopHeaderProps {
+  onStartTutorial: () => void;
+}
+
+const DesktopHeader = ({ onStartTutorial }: DesktopHeaderProps) => {
   const { account } = useAccountCustom();
   const { player } = usePlayer({ playerId: account?.address });
 
   const [isOpen, setIsOpen] = useState(false);
+  const [isTutorialOpen, setIsTutorialOpen] = useState(false);
+
+  const changeTutorialOpen = () => {
+    setIsTutorialOpen(!isTutorialOpen);
+  };
+
+  const handleStartTutorial = () => {
+    changeTutorialOpen();
+    onStartTutorial();
+  };
 
   const onClose = () => {
     setIsOpen(false);
@@ -41,6 +56,20 @@ const DesktopHeader = () => {
           Collective Chests
         </Button>
         <CollectiveTreasureChest isOpen={isOpen} onClose={onClose} />
+        <Button
+          variant="outline"
+          onClick={(e) => {
+            e.stopPropagation();
+            changeTutorialOpen();
+          }}
+        >
+          Tutorial
+        </Button>
+        <TutorialModal
+          isOpen={isTutorialOpen}
+          onClose={changeTutorialOpen}
+          onStartTutorial={handleStartTutorial}
+        />
       </div>
       <div className="flex flex-col gap-4 items-center md:flex-row">
         {!!player && (

client/src/ui/components/MobileHeader.tsx

@@ -1,4 +1,4 @@
-import { faBars, faCoins, faWallet } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faCoins } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   Drawer,
@@ -28,23 +28,42 @@ import CollectiveTreasureChest from "./TreasureChest";
 import { useState } from "react";
 import { Surrender } from "../actions/Surrender";
 import LevelIndicator from "./LevelIndicator";
-import HeaderNftBalance from "./HeaderNftBalance";
-import { useMediaQuery } from "react-responsive";
 import { Controller } from "./Controller";
+import TutorialModal from "./TutorialModal";
 
-const MobileHeader = () => {
+interface MobileHeaderProps {
+  onStartTutorial: () => void;
+}
+
+const MobileHeader = ({ onStartTutorial }: MobileHeaderProps) => {
   const { account } = useAccountCustom();
   const { player } = usePlayer({ playerId: account?.address });
 
   const [isOpen, setIsOpen] = useState(false);
+  const [isTutorialOpen, setIsTutorialOpen] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 
   const onClose = () => {
     setIsOpen(false);
   };
 
+  const changeTutorialOpen = () => {
+    setIsTutorialOpen(!isTutorialOpen);
+    setIsDrawerOpen(false); // Close drawer when opening tutorial
+  };
+
+  const handleStartTutorial = () => {
+    changeTutorialOpen();
+    onStartTutorial();
+  };
+
   return (
     <div className="px-3 py-2 flex gap-3">
-      <Drawer direction="left">
+      <Drawer
+        direction="left"
+        open={isDrawerOpen}
+        onOpenChange={setIsDrawerOpen}
+      >
         <DrawerTrigger>
           <FontAwesomeIcon icon={faBars} size="xl" />
         </DrawerTrigger>
@@ -53,19 +72,12 @@ const MobileHeader = () => {
             <DrawerTitle className="text-2xl">zKube</DrawerTitle>
           </DrawerHeader>
           <div className="flex flex-col gap-5 p-4 font-semibold md:font-normal">
-            {/* <div className="flex flex-col gap-2 items-center">
-              <p className="self-start">Theme</p> <ModeToggle />
-            </div> */}
-            {/* <div className="flex flex-col gap-2 items-center">
-              <p className="self-start">Sound</p> <MusicPlayer />
-            </div> */}
             <div className="flex flex-col gap-2 items-center">
               <p className="self-start">Account</p>
               <AccountDetails />
             </div>
             <div className="flex flex-col gap-2 items-center">
               <p className="self-start">Menu</p>
-
               <Surrender red variant="outline" className="w-full text-sm" />
               <Leaderboard buttonType="outline" textSize="sm" inMenu={true} />
               <Button
@@ -75,13 +87,20 @@ const MobileHeader = () => {
               >
                 Collective Chests
               </Button>
+              <Button
+                variant="outline"
+                onClick={() => setIsTutorialOpen(true)}
+                className="w-full"
+              >
+                Tutorial
+              </Button>
+              <TutorialModal
+                isOpen={isTutorialOpen}
+                onClose={changeTutorialOpen}
+                onStartTutorial={handleStartTutorial}
+              />
               <CollectiveTreasureChest isOpen={isOpen} onClose={onClose} />
             </div>
-
-            {/*<div className="flex flex-col gap-2 items-center">
-              <p className="self-start">Extras</p>
-              <ContentTabs />
-            </div>*/}
             <div className="flex flex-col gap-2 items-center">
               <p className="self-start">Profile</p>
               <ProfilePage wfit={false} />
@@ -90,7 +109,6 @@ const MobileHeader = () => {
         </DrawerContent>
       </Drawer>
       <div className="w-full flex justify-between items-center">
-        {/*<p className="text-2xl font-bold">zKube</p>*/}
         <div className="flex w-full gap-2 justify-end">
           {!!player && account ? (
             <div className="flex gap-3 items-center">

client/src/ui/components/TutorialModal.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Dialog, DialogContent, DialogTitle } from "../elements/dialog";
+import { Button } from "../elements/button";
+import ImageAssets from "@/ui/theme/ImageAssets";
+import { useTheme } from "../elements/theme-provider/hooks";
+import { X } from "lucide-react";
+interface TutorialModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onStartTutorial: () => void;
+}
+const TutorialModal = ({
+  isOpen,
+  onClose,
+  onStartTutorial,
+}: TutorialModalProps) => {
+  const { themeTemplate } = useTheme();
+  const imgAssets = ImageAssets(themeTemplate);
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent
+        className="sm:max-w-[700px] w-[95%] flex flex-col mx-auto justify-start"
+        aria-describedby="tutorial-description"
+      >
+        <DialogTitle className="text-center">Tutorial</DialogTitle>
+        <button
+          onClick={onClose}
+          className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+          aria-label="Close tutorial"
+        >
+          <X className="h-4 w-4" />
+        </button>
+        <div className="flex justify-center items-center w-full h-10">
+          <img src={imgAssets.logo} alt="logo" className={`h-28 md:h-32 `} />
+        </div>
+        <div
+          id="tutorial-description"
+          className="flex-1 flex flex-col items-center justify-center min-h-[300px] text-center p-6"
+        >
+          <h2 className="text-2xl font-semibold mb-6">
+            Welcome to ZKube Tutorial
+          </h2>
+          <p className="mb-8 text-lg text-white">
+            Get started with our interactive tutorial to learn all the features.
+          </p>
+          <Button onClick={onStartTutorial} className="px-6 py-2 text-lg">
+            Click Here to Start
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TutorialModal;