fix: text

zCloak-Network · Jan 30, 2024 · 513581f · 513581f
1 parent 3d07131
commit 513581f
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 51 deletions.
diff --git a/src/constants/game.ts b/src/constants/game.ts
@@ -1,3 +1,13 @@
 export const RESULT_COLOR_MAP = ["error", "success", "primary"];
 
-export const RESULT_MAP = ["Haven't Played", "Efficiency First", "Done"];
+export const RESULT_MAP = [
+  "Haven't Played",
+  "Shortcut Genius",
+  "Maze Navigator",
+];
+
+export const RESULT_DESCRIPTION = [
+  "You haven't played this game yet.",
+  "Escaped the maze in the shortest path.",
+  "Escaped the maze.",
+];
diff --git a/src/pages/game/_components/Description.tsx b/src/pages/game/_components/Description.tsx
@@ -10,13 +10,11 @@ export const Description = () => {
         <div className="collapse-content bg-primary text-primary-content peer-checked:bg-white peer-checked:text-secondary-content">
           <div className=" p-4 border-t border-base-300 w-[280px] text-sm">
             <p className="mb-2">
-              1. Use the WASD keys or the arrow keys to control the movement of
-              your character.
+              1. Control your character with W A S D or ⬆️ ⬇️ ⬅️ ➡️
             </p>
             <p className="mb-2">
-              2. If you find this path impressive, you can anonymize your route
-              through the ZK method. We will use the ZK program to determine
-              whether you qualify for the achievement.
+              2. Showcase your impressive path anonymously using the ZK method.
+              We'll verify your achievement eligibility with the ZK program.
             </p>
             <h2 className="font-bold mb-2">Achievement</h2>
             <p>

diff --git a/src/pages/game/_components/Header.tsx b/src/pages/game/_components/Header.tsx
@@ -9,7 +9,12 @@ import {
 } from "wagmi";
 import { useWeb3ModalState } from "@web3modal/wagmi/react";
 import { useDispatchStore } from "@/store";
-import { ABI, RESULT_MAP, RESULT_COLOR_MAP } from "@/constants";
+import {
+  ABI,
+  RESULT_MAP,
+  RESULT_COLOR_MAP,
+  RESULT_DESCRIPTION,
+} from "@/constants";
 import { dispatch as dispatchGameState, Chain } from "../_utils";
 import { getETH } from "@/api/zkp";
 import { toast } from "react-toastify";
@@ -135,48 +140,52 @@ const Header = forwardRef((_props, ref) => {
         <div className="font-semibold flex-1 text-primary text-2xl">
           ZK Maze
         </div>
-        <div className="flex h-full w-full top-0 left-0 justify-center items-center absolute">
-          <div
-            className="tooltip tooltip-bottom tooltip-accent"
-            data-tip="Haven't Played < Done < Efficiency First"
-          >
-            <div className="cursor-pointer stats">
-              {isContractLoading ? (
-                <span>loading</span>
-              ) : (
-                <div className="py-2 stat">
-                  <div
-                    className={
-                      "stat-figure text-" + RESULT_COLOR_MAP[Number(data)] || ""
-                    }
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      className="h-8 stroke-current w-8 inline-block"
+        {Number(data) !== 0 ? (
+          <div className="flex h-full w-full top-0 left-0 justify-center items-center absolute">
+            <div
+              className="tooltip tooltip-bottom tooltip-accent"
+              data-tip={RESULT_DESCRIPTION[Number(data)]}
+            >
+              <div className="cursor-pointer stats">
+                {isContractLoading ? (
+                  <span>loading</span>
+                ) : (
+                  <div className="py-2 stat">
+                    <div
+                      className={
+                        "stat-figure text-" + RESULT_COLOR_MAP[Number(data)] ||
+                        ""
+                      }
                     >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        d="M13 10V3L4 14h7v7l9-11h-7z"
-                      ></path>
-                    </svg>
-                  </div>
-                  <div className="stat-title">Your Achievement</div>
-                  <div
-                    className={
-                      "stat-value text-" + RESULT_COLOR_MAP[Number(data)] || ""
-                    }
-                  >
-                    {RESULT_MAP[Number(data)] || "--"}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        className="h-8 stroke-current w-8 inline-block"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M13 10V3L4 14h7v7l9-11h-7z"
+                        ></path>
+                      </svg>
+                    </div>
+                    <div className="stat-title">Your Achievement</div>
+                    <div
+                      className={
+                        "stat-value text-" + RESULT_COLOR_MAP[Number(data)] ||
+                        ""
+                      }
+                    >
+                      {RESULT_MAP[Number(data)] || "--"}
+                    </div>
                   </div>
-                </div>
-              )}
+                )}
+              </div>
             </div>
           </div>
-        </div>
+        ) : null}
         <w3m-button balance={"hide"} />
       </header>
 
@@ -248,8 +257,9 @@ const Header = forwardRef((_props, ref) => {
                 ></path>
               </svg>
               <span className="text-sm">
-                Your balance({balanceData?.formatted || 0}
-                {balanceData?.symbol}) is not enough!
+                Minimum 0.0002 ETH required. Your balance: (
+                {balanceData?.formatted || 0}
+                {balanceData?.symbol})
               </span>
               <div>
                 <button

diff --git a/src/pages/game/_components/Hero.tsx b/src/pages/game/_components/Hero.tsx
@@ -16,10 +16,9 @@ export const Hero = () => {
         <div className="max-w-md">
           <h1 className="font-bold mb-5 text-5xl">ZK Maze</h1>
           <p className="mb-5">
-            Find a path, navigate through various obstacles, and escape the
-            maze. If you want to achieve success, you'll need to strategically
-            plan your route and discover the shortest path to exit the maze. Are
-            all you adventurers ready? Let's get started.
+            In this maze game, wit and strategy are your tools. Find the
+            shortest path, skillfully avoid obstacles, and victory is within
+            reach. Ready? Adventure is calling!
           </p>
           {/* <ButtonEnable /> */}
           <button className="btn btn-primary" onClick={() => void open()}>