From ae31cd027398f8de3d8e75b007c95d6f23754848 Mon Sep 17 00:00:00 2001
From: Ugo-X <ugonnadike001@gmail.com>
Date: Mon, 26 Aug 2024 02:47:58 +0100
Subject: [PATCH 1/2] updated the start component

---
 client/src/ui/actions/Start.tsx | 54 ++++++++++++++++++++++-----------
 client/src/ui/screens/Home.tsx  | 15 +++++++--
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/client/src/ui/actions/Start.tsx b/client/src/ui/actions/Start.tsx
index 449cc248..48020b97 100644
--- a/client/src/ui/actions/Start.tsx
+++ b/client/src/ui/actions/Start.tsx
@@ -10,9 +10,15 @@ import useAccountCustom from "@/hooks/useAccountCustom";
 
 interface StartProps {
   mode: ModeType;
+  potentialWinnings: string; // New prop for potential winnings
+  remainingTime?: string; // New prop for remaining time (optional for Normal mode)
 }
 
-export const Start: React.FC<StartProps> = ({ mode }) => {
+export const Start: React.FC<StartProps> = ({
+  mode,
+  potentialWinnings,
+  remainingTime,
+}) => {
   const {
     master,
     setup: {
@@ -64,27 +70,41 @@ export const Start: React.FC<StartProps> = ({ mode }) => {
       !account ||
       !master ||
       account === master ||
-      !player || 
-      (player?.daily_games_available === 0) ||
+      !player ||
+      player?.daily_games_available === 0 ||
       (!!game && !game.isOver())
     );
   }, [account, master, player, game]);
 
-  const cost = useMemo(() =>{
-    if(player && player?.daily_games_available >0) return "Free"
-    return "0.01 STRK" //TODO: replace with actual cost
-  }, [player, account])
-
-  // if (disabled) return null;
+  const cost = useMemo(() => {
+    if (player && player?.daily_games_available > 0) return "Free";
+    return "0.01 STRK"; //TODO: replace with actual cost
+  }, [player, account]);
 
   return (
-    <Button
-      disabled={isLoading || disabled}
-      isLoading={isLoading}
-      onClick={handleClick}
-      className="text-xl min-w-[200px]"
-    >
-      Start {mode} {cost}
-    </Button>
+    <div className=" p-4 rounded-lg shadow-lg w-full h-full bg-transparent">
+      <h2 className="text-2xl font-bold mb-2">
+        {mode === ModeType.Daily ? "Daily Mode" : "Normal Mode"}
+      </h2>
+      <p className="text-lg">
+        <strong>Potential Winnings:</strong> {potentialWinnings}
+      </p>
+      <p className="text-lg">
+        <strong>Price:</strong> {cost}
+      </p>
+      {remainingTime && (
+        <p className="text-lg text-red-500">
+          <strong>Remaining Time:</strong> {remainingTime}
+        </p>
+      )}
+      <Button
+        disabled={isLoading || disabled}
+        isLoading={isLoading}
+        onClick={handleClick}
+        className="text-xl mt-4 w-full"
+      >
+        Play
+      </Button>
+    </div>
   );
 };
diff --git a/client/src/ui/screens/Home.tsx b/client/src/ui/screens/Home.tsx
index 473b614a..2013f824 100644
--- a/client/src/ui/screens/Home.tsx
+++ b/client/src/ui/screens/Home.tsx
@@ -183,8 +183,19 @@ 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 />
-              <Start mode={ModeType.Daily} />
-              <Start mode={ModeType.Normal} />
+              {/* <Start mode={ModeType.Daily} />
+              <Start mode={ModeType.Normal} /> */}
+              <div className="flex bg-gray-900 p-4 rounded-xl mt-12 w-[93%] gap-4 items-center justify-evenly">
+              <Start
+                mode={ModeType.Daily}
+                potentialWinnings="100 STRK"
+                remainingTime="02:15:00"
+              />
+              <Start
+                mode={ModeType.Normal}
+                potentialWinnings="50 STRK"
+              />
+              </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} />

From bf953458e321b4c4b265e9ffb97cee4d83fdcb79 Mon Sep 17 00:00:00 2001
From: Ugo-X <ugonnadike001@gmail.com>
Date: Mon, 26 Aug 2024 19:30:17 +0100
Subject: [PATCH 2/2] implemented requested changes on PR

---
 client/src/ui/screens/Home.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/ui/screens/Home.tsx b/client/src/ui/screens/Home.tsx
index 2013f824..5f41dd60 100644
--- a/client/src/ui/screens/Home.tsx
+++ b/client/src/ui/screens/Home.tsx
@@ -186,15 +186,16 @@ export const Home = () => {
               {/* <Start mode={ModeType.Daily} />
               <Start mode={ModeType.Normal} /> */}
               <div className="flex bg-gray-900 p-4 rounded-xl mt-12 w-[93%] gap-4 items-center justify-evenly">
-              <Start
-                mode={ModeType.Daily}
-                potentialWinnings="100 STRK"
-                remainingTime="02:15:00"
-              />
-              <Start
-                mode={ModeType.Normal}
-                potentialWinnings="50 STRK"
-              />
+                <Start
+                  mode={ModeType.Daily}
+                  potentialWinnings="100 STRK"
+                  remainingTime="02:15:00"
+                />
+                <Start
+                  mode={ModeType.Normal}
+                  potentialWinnings="50 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">