From c8d2357fb86152ac47b3700fb14dc4f057867bfb Mon Sep 17 00:00:00 2001
From: Gift-Naomi <emmanuelgiftnaomi@gmail.com>
Date: Thu, 5 Sep 2024 22:45:39 +0100
Subject: [PATCH] implement new game mode option for Tutoria

---
 client/src/dojo/game/types/mode.ts |  1 +
 client/src/ui/actions/Start.tsx    | 15 ++++++--
 client/src/ui/screens/Home.tsx     | 58 +++++++++++++++++-------------
 3 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/client/src/dojo/game/types/mode.ts b/client/src/dojo/game/types/mode.ts
index acf16466..7c90f9fd 100644
--- a/client/src/dojo/game/types/mode.ts
+++ b/client/src/dojo/game/types/mode.ts
@@ -2,6 +2,7 @@ export enum ModeType {
   None = "None",
   Normal = "Normal",
   Daily = "Daily",
+  Tutorial = "Totorial",
 }
 
 export class Mode {
diff --git a/client/src/ui/actions/Start.tsx b/client/src/ui/actions/Start.tsx
index 1fb5d914..ac081495 100644
--- a/client/src/ui/actions/Start.tsx
+++ b/client/src/ui/actions/Start.tsx
@@ -62,7 +62,7 @@ export const Start: React.FC<StartProps> = ({
         sqrt_ratio_hint: proof_verify_hint,
         beta: beta,
       });
-      handleGameMode()
+      handleGameMode();
     } finally {
       setIsLoading(false);
     }
@@ -87,7 +87,18 @@ export const Start: React.FC<StartProps> = ({
   return (
     <div className=" p-4 rounded-lg shadow-lg w-full h-full bg-gray-900 m-2">
       <h2 className="text-2xl font-bold mb-2">
-        {mode === ModeType.Daily ? "Daily Mode" : "Normal Mode"}
+        {(() => {
+          switch (mode) {
+            case ModeType.Daily:
+              return <>Daily Mode</>;
+            case ModeType.Normal:
+              return <>Normal Mode</>;
+            case ModeType.Tutorial:
+              return <>Tutorial Mode</>;
+            default:
+              return <>Normal Mode</>;
+          }
+        })()}
       </h2>
       <p className="text-lg">
         <strong>Potential Winnings:</strong> {potentialWinnings}
diff --git a/client/src/ui/screens/Home.tsx b/client/src/ui/screens/Home.tsx
index 94ec3c3a..f5284c18 100644
--- a/client/src/ui/screens/Home.tsx
+++ b/client/src/ui/screens/Home.tsx
@@ -15,11 +15,7 @@ import NextLine from "../components/NextLine";
 import { Surrender } from "../actions/Surrender";
 import { Content as Leaderboard } from "../modules/Leaderboard";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faFire,
-  faGlobe,
-  faStar,
-} from "@fortawesome/free-solid-svg-icons";
+import { faFire, faGlobe, faStar } from "@fortawesome/free-solid-svg-icons";
 import GoogleFormEmbed from "../components/GoogleFormEmbed";
 import { useQuerySync } from "@dojoengine/react";
 import { ModeType } from "@/dojo/game/types/mode";
@@ -54,7 +50,7 @@ export const Home = () => {
   const [isPreviewOpen, setIsPreviewOpen] = useState(false);
   const [level, setLevel] = useState<number | "">(0);
   const [score, setScore] = useState<number | undefined>(0);
-  const [imgData, setImgData] = useState<string>('');
+  const [imgData, setImgData] = useState<string>("");
 
   useEffect(() => {
     if (game?.over) {
@@ -224,20 +220,28 @@ export const Home = () => {
           <div className="relative flex flex-col gap-8 grow items-center justify-start">
             <div className="absolute flex flex-col items-center gap-4 w-full p-2 max-w-4xl mt-4">
               <Create />
-              {(!game || (!!game && isGameOn === "isOver" ))&& (<div className="flex  p-4 rounded-xl mt-12 w-[93%] gap-4 items-center justify-evenly">
-                <Start
-                  mode={ModeType.Daily}
-                  handleGameMode={() => setIsGameOn("isOn")}
-                  potentialWinnings="100 STRK"
-                  remainingTime="02:15:00"
+              {(!game || (!!game && isGameOn === "isOver")) && (
+                <div className="flex  p-4 rounded-xl mt-12 w-[93%] gap-4 items-center justify-evenly">
+                  <Start
+                    mode={ModeType.Daily}
+                    handleGameMode={() => setIsGameOn("isOn")}
+                    potentialWinnings="100 STRK"
+                    remainingTime="02:15:00"
                   />
-                <Start
-                  mode={ModeType.Normal}
-                  handleGameMode={() => setIsGameOn("isOn")}
-                  potentialWinnings="50 STRK"
-                  remainingTime="02:15:00"
-                />
-              </div>)}
+                  <Start
+                    mode={ModeType.Daily}
+                    handleGameMode={() => setIsGameOn("isOn")}
+                    potentialWinnings="100 STRK"
+                    remainingTime="02:15:00"
+                  />
+                  <Start
+                    mode={ModeType.Tutorial}
+                    handleGameMode={() => setIsGameOn("isOn")}
+                    potentialWinnings="0 STRK"
+                    remainingTime="02:15:00"
+                  />
+                </div>
+              )}
               {!game && (
                 <div className="absolute top md:translate-y-[100%] translate-y-[40%] bg-slate-900 w-11/12 p-6 rounded-xl">
                   <Leaderboard modeType={ModeType.Daily} />
@@ -265,9 +269,9 @@ export const Home = () => {
                       <div className="grow text-4xl flex gap-2 justify-end">
                         {game.max_combo}
                         <FontAwesomeIcon
-                  icon={faGlobe}
-                  className="text-slate-700 ml-2"
-                />
+                          icon={faGlobe}
+                          className="text-slate-700 ml-2"
+                        />
                       </div>
                     </div>
                   </div>
@@ -309,9 +313,15 @@ export const Home = () => {
               )}
             </div>
           </div>
-          <TweetPreview open={isPreviewOpen} setOpen={setIsPreviewOpen} level={level} score={score} imgSrc={imgData} />
+          <TweetPreview
+            open={isPreviewOpen}
+            setOpen={setIsPreviewOpen}
+            level={level}
+            score={score}
+            imgSrc={imgData}
+          />
           <AnimatePresence>
-            {!animationDone && ( 
+            {!animationDone && (
               <>
                 <>
                   <PalmTree