Feat implement tutorials mode

client/src/dojo/game/models/game.ts

@@ -56,7 +56,7 @@ export class Game {
     this.over = game.over ? true : false;
     this.next_row = Packer.sized_unpack(
       BigInt(game.next_row),
-      BigInt(BLOCK_BIT_COUNT),
+      BigInt(BLOCK_BIT_COUNT), 
       DEFAULT_GRID_WIDTH,
     );
     this.hammer = game.hammer_bonus;
@@ -78,7 +78,6 @@ export class Game {
     this.combo_counter_in_tournament = game.combo_counter_in_tournament;
     this.max_combo_in_tournament = game.max_combo_in_tournament;
     this.tournament_id = game.tournament_id;
-
     // Destructure blocks and colors bitmaps in to Rows and Blocks
     this.blocksRaw = game.blocks;
     this.blocks = Packer.sized_unpack(
@@ -106,6 +105,8 @@ export class Game {
     });
   }
 
+
+
   public isOver(): boolean {
     return this.over;
   }

client/src/dojo/game/models/tournament.ts

@@ -159,7 +159,7 @@ export class Tournament {
       ids[modeType] = Math.floor(startOfPeriod / duration);
     }
 
-    return ids;
+    return ids; 
   };
 
   determineModeById = (id: number): ModeType => {

client/src/dojo/game/types/difficulty.ts

@@ -3,7 +3,7 @@ export enum DifficultyType {
   VeryEasy = "VeryEasy",
   Easy = "Easy",
   Medium = "Medium",
-  MediumHard = "MediumHard",
+  MediumHard = "MediumHard", 
   Hard = "Hard",
   VeryHard = "VeryHard",
   Expert = "Expert",

client/src/dojo/game/types/mode.ts

@@ -55,4 +55,5 @@ export class Mode {
         return BigInt(FREE_MODE_PRICE);
     }
   }
+
 }

client/src/enums/bonusEnum.ts

@@ -0,0 +1,6 @@
+export enum BonusName {
+  WAVE,
+  TIKI,
+  HAMMER,
+  NONE,
+}

client/src/hooks/useAccountCustom.tsx

@@ -5,7 +5,7 @@ import { Account } from "starknet";
 type AccountType = "burner" | "controller";
 
 // eslint-disable-next-line prefer-const
-export let ACCOUNT_CONNECTOR: AccountType = "controller";
+export let ACCOUNT_CONNECTOR: AccountType = "burner";
 
 const useAccountCustom = () => {
   const { account } = useAccount();

client/src/hooks/useGame.tsx

@@ -31,4 +31,4 @@ export const useGame = ({
   }, [component]);
 
   return { game, gameKey };
-};
+}; 

client/src/index.css

@@ -142,6 +142,18 @@ body {
   }
 }
 
+.highlight {
+  border: 3px solid #ffd700; /* gold border */
+  box-shadow: 0px 0px 10px 5px rgba(255, 215, 0, 0.7); /* glowing effect */
+  transition: all 0.3s ease-in-out;
+
+  /* Respect user preferences for reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+    box-shadow: 0px 0px 5px 2px rgba(255, 215, 0, 0.7);
+  }
+}
+
 .wiggle {
   animation: wiggle 0.2s ease-in-out infinite;
 }

client/src/ui/actions/Start.tsx

@@ -26,7 +26,12 @@ interface StartProps {
   handleGameMode: () => void;
 }
 
-export const Start: React.FC<StartProps> = ({ mode, handleGameMode }) => {
+export const Start: React.FC<StartProps> = ({
+  mode,
+  handleGameMode, 
+  potentialWinnings,
+  remainingTime,
+}) => {
   const {
     setup: {
       systemCalls: { start },

client/src/ui/components/ContentTabs.tsx

@@ -16,7 +16,7 @@ import { Button } from "@/ui/elements/button";
 const ContentTabs = () => {
   const [selectedTab, setSelectedTab] = useState("weekly-quests");
 
-  return (
+  return ( 
     <Dialog>
       <DialogTrigger asChild>
         <Button variant="outline">Extras</Button>

client/src/ui/components/DesktopHeader.tsx

@@ -10,18 +10,42 @@ import { useCallback, useState } from "react";
 import LevelIndicator from "./LevelIndicator";
 import SettingsDropDown from "./SettingsDropDown";
 import { useNavigate } from "react-router-dom";
+import TutorialModal from "./TutorialModal";
 import { Controller } from "./Controller";
 
-const DesktopHeader = () => {
+
+
+interface DesktopHeaderProps {
+  onStartTutorial: () => void;
+}
+const DesktopHeader: React.FC<DesktopHeaderProps> = ({ onStartTutorial }) =>  {
   const { account } = useAccountCustom();
   const { player } = usePlayer({ playerId: account?.address });
 
   const [isOpen, setIsOpen] = useState(false);
+  const [isTutorialOpen, setIsTutorialOpen] = useState(false);
+  const [showGrid, setShowGrid] = useState(false);
+  const [showTutorialText, setShowTutorialText] = useState(true);
+
+
+  const handleTutorialOpen = () => {
+    setIsTutorialOpen(true);
+  };
 
+  const handleTutorialClose = () => {
+    setIsTutorialOpen(false);
+  };
+
   const onClose = () => {
     setIsOpen(false);
   };
 
+  const handleStartTutorial = () => {
+   handleTutorialClose();
+   onStartTutorial();
+  };
+
+
   const navigate = useNavigate();
 
   const handleClick = useCallback(() => {
@@ -41,6 +65,16 @@ const DesktopHeader = () => {
           Collective Chests
         </Button>
         <CollectiveTreasureChest isOpen={isOpen} onClose={onClose} />
+        <Button
+            variant="outline"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleTutorialOpen();
+            }}
+          >
+            Tutorial
+          </Button>
+          <TutorialModal isOpen={isTutorialOpen} onClose={handleTutorialClose}  onStartTutorial={handleStartTutorial}/>
       </div>
       <div className="flex flex-col gap-4 items-center md:flex-row">
         {!!player && (

client/src/ui/components/GameBoard.tsx

@@ -11,7 +11,7 @@ import { GameBonus } from "../containers/GameBonus";
 import { useMediaQuery } from "react-responsive";
 import { Account } from "starknet";
 import Grid from "./Grid";
-import { transformDataContractIntoBlock } from "@/utils/gridUtils";
+import { transformDataContratIntoBlock } from "@/utils/gridUtils";
 import NextLine from "./NextLine";
 import { Block } from "@/types/types";
 import GameScores from "./GameScores";
@@ -197,11 +197,11 @@ const GameBoard: React.FC<GameBoardProps> = ({
   }, [initialGrid]);
 
   const memoizedInitialData = useMemo(() => {
-    return transformDataContractIntoBlock(initialGrid);
+    return transformDataContratIntoBlock(initialGrid);
   }, [initialGrid]);
 
   const memoizedNextLineData = useMemo(() => {
-    return transformDataContractIntoBlock([nextLine]);
+    return transformDataContratIntoBlock([nextLine]);
     // initialGrid on purpose
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialGrid]);