Merge pull request #52 from punky-lab/wyy-1127

update - some UI
punky-lab · Nov 27, 2024 · d8914b2 · d8914b2
2 parents 780c909 + 38c872a
commit d8914b2
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 23 deletions.
diff --git a/components/MainUI/Action/Action.tsx b/components/MainUI/Action/Action.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Image from "next/image";
 import HandIcon from "@/assets/icons/v2/hand.svg";
 import MicroIcon from "@/assets/icons/v2/micro.svg";
@@ -15,6 +15,9 @@ export default function Action({
   setIsPetting: (isPetting: boolean) => void;
   petPet: () => void;
 }) {
+  const [isMicro, setIsMicro] = useState(true);
+  const [dots, setDots] = useState(".");
+
   const handlePetTouch = async () => {
     try {
       setIsPetting(true);
@@ -31,20 +34,58 @@ export default function Action({
 
   const router = useRouter();
 
+  // 处理点击事件
+  const handleClick = () => {
+    setIsMicro(!isMicro);
+  };
+
+  // 当 isMicro 为 false 时，处理点的动画
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+
+    if (!isMicro) {
+      interval = setInterval(() => {
+        setDots((prev) => {
+          if (prev === ".") return "..";
+          if (prev === "..") return "...";
+          return ".";
+        });
+      }, 500);
+    }
+
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [isMicro]);
+
   return (
     <div className="relative h-32 w-full mb-6">
       <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
         <div
-          className="w-12 h-12 flex items-center justify-center bg-[url(../assets/icons/button-round.svg)] bg-contain bg-center z-50 cursor-pointer"
-          onClick={handlePetTouch}
+          onClick={handleClick}
+          className={`
+            w-12 h-12 
+            flex items-center justify-center 
+            bg-[url(../assets/icons/button-round.svg)] 
+            bg-contain bg-center 
+            z-50
+            cursor-pointer
+          `}
         >
-          <Image src={HandIcon} alt="Hand" className="w-10 h-10" />
+          {isMicro ? (
+            <Image src={MicroIcon} alt="Micro" className="w-10 h-10" />
+          ) : (
+            <span className="text-white text-xs font-bold">{dots}</span>
+          )}
         </div>
       </div>
 
       <div className="absolute left-1/3 top-[60%] -translate-x-1/2">
-        <div className="w-12 h-12 flex items-center justify-center bg-[url(../assets/icons/button-round.svg)] bg-contain bg-center z-50">
-          <Image src={MicroIcon} alt="Micro" className="w-10 h-10" />
+        <div
+          className="w-12 h-12 flex items-center justify-center bg-[url(../assets/icons/button-round.svg)] bg-contain bg-center z-50 cursor-pointer"
+          onClick={handlePetTouch}
+        >
+          <Image src={HandIcon} alt="Hand" className="w-10 h-10" />
         </div>
       </div>
 

diff --git a/components/MainUI/Init.tsx b/components/MainUI/Init.tsx
@@ -167,6 +167,12 @@ export default function Init({
   };
 
   const petPet = async () => {
+    // TODO：没有连接钱包的时候先把数值记录一下
+    if (!walletConnected) {
+      showTxErrorModal("Connect to wallet in user page first");
+      return;
+    }
+
     try {
       const { pda } = useGameAccountPDA();
 

diff --git a/components/MainUI/PetInfo/PetInfo.tsx b/components/MainUI/PetInfo/PetInfo.tsx
@@ -17,14 +17,14 @@ export default function PetInfo({ gameAccount }: { gameAccount: any }) {
     console.log("gameAccount", gameAccount);
   }, [gameAccount]);
   return (
-    <div className="grid grid-cols-2 w-screen h-[95px] py-2 px-2.5 bg-no-repeat bg-[url('../assets/ui/top-bott-bar.svg')] bg-contain bg-top">
+    <div className="grid grid-cols-2 w-screen h-[95px] py-2 px-2 bg-no-repeat bg-[url('../assets/ui/top-bott-bar.svg')] bg-contain bg-top">
       <ProgressBar value={happiness / 10} Icon={HeartIcon} />
-      <ProgressBar value={fitness / 10} Icon={BatteryIcon} />
-      <ProgressBar value={loyalty / 10} Icon={CoinIcon} />
-      <div className="flex items-center">
+      <div className="flex items-center ml-10">
         <Image src={CoinIcon} alt="Coin" className="w-10 h-10" />
-        <p className="text-white text-xs">{balance} coins</p>
+        <p className="text-white text-xs">{balance} $</p>
       </div>
+      <ProgressBar value={fitness / 10} Icon={BatteryIcon} />
+      {/* <ProgressBar value={loyalty / 10} Icon={CoinIcon} /> */}
     </div>
   );
 }
diff --git a/components/MainUI/PetInfo/components/ProgressBar.tsx b/components/MainUI/PetInfo/components/ProgressBar.tsx
@@ -2,25 +2,34 @@ import Image from "next/image";
 import React from "react";
 
 type ProgressBarProps = {
-  value: number; // 进度值（0-100）
+  value: number;
   Icon: string;
 };
 
 const ProgressBar: React.FC<ProgressBarProps> = ({ value, Icon }) => {
+  const filledBlocks = Math.round(value / 10);
+
   return (
-    <div className="flex items-center">
+    <div className="flex items-center gap-1">
       <Image src={Icon} alt="" className="w-10 h-10" />
-      <div className="relative w-36 h-6 bg-[#6e4e79] border-2 border-[#1b3b44] rounded-md overflow-hidden">
-        <div
-          style={{ width: `${value}%` }}
-          className="h-full bg-[#ffffff]"
-        ></div>
-        {/* 外框的高光效果 */}
-        <div className="absolute top-0 left-0 w-full h-full border border-[#20818f] rounded-md pointer-events-none"></div>
-        {/* 进度值文字 */}
-        <div className="absolute top-0 left-2 h-full flex items-center text-[#5b3b6e] text-[10px]">
-          {Math.round(value)}
+      <div className="relative flex gap-[2px] h-6 bg-[#6e4e79] p-1 border-2 border-[#1b3b44] rounded-md">
+        <div className="absolute -right-9 top-1/2 -translate-y-1/2 text-[#ffffff] text-[10px] whitespace-nowrap">
+          {`${Math.round(value)}%`}
         </div>
+        {[...Array(10)].map((_, index) => (
+          <div
+            key={index}
+            className={`
+              w-2 h-full 
+              border-2 
+              ${
+                index < filledBlocks
+                  ? "bg-white border-[#20818f]"
+                  : "bg-transparent border-[#4a3653]"
+              }
+            `}
+          />
+        ))}
       </div>
     </div>
   );

diff --git a/components/MainUI/SlideUI/UserPage.tsx b/components/MainUI/SlideUI/UserPage.tsx
@@ -7,6 +7,12 @@ import { useNavHeight } from "@/components/Root/navHeightContext";
 import { ConnectButton } from "@ant-design/web3";
 import type { Account } from "@ant-design/web3";
 import { showInitializeModal } from "@/utils/solana";
+import { Press_Start_2P } from "next/font/google";
+
+const pressStart2P = Press_Start_2P({
+  weight: "400",
+  subsets: ["latin"],
+});
 
 export default function UserPage({
   userInfo,
@@ -89,6 +95,7 @@ export default function UserPage({
 
             <ConnectButton
               type="primary"
+              className={pressStart2P.className}
               style={{
                 border: "none",
                 borderRadius: 0,