Merge pull request #28 from Ugo-X/main

updated the start component
z-korp · Aug 27, 2024 · 6d8a290 · 6d8a290
2 parents e3623e6 + bf95345
commit 6d8a290
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 19 deletions.
diff --git 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
@@ -183,8 +183,20 @@ 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"
+                  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} />