Merge pull request #38 from punky-lab/yhy-ui

Update UI

assets/animations/SpriteBall/look-up-reverse/index.ts

@@ -0,0 +1,8 @@
+import f01 from "./01.gif";
+import f02 from "./02.gif";
+import f03 from "./03.gif";
+import f04 from "./04.gif";
+
+const frames = [f01, f02, f03, f04];
+
+export default frames;

components/Frames.tsx

@@ -1,6 +1,5 @@
 import Image from "next/image";
 import { useEffect, useRef, useState } from "react";
-import ThinkingBubble from "./thinkingBubble";
 
 interface FramesProps {
   frames: { src: string }[]; // frames 是包含 src 字段的对象数组
@@ -28,7 +27,7 @@ export default function Frames({
     if (frames.length === 0) return;
 
     let loadedCount = 0;
-    console.log("..frames..", frames);
+    // console.log("..frames..", frames);
     preloadedImages.current = frames.map((frame) => {
       const img = new window.Image();
       img.src = frame.src;

components/MainUI/Action/Action.tsx

@@ -6,16 +6,16 @@ import GameIcon from "@/assets/icons/v2/game.svg";
 
 export default function Action() {
   return (
-    <div className="flex mb-4 w-full items-center justify-center space-x-8">
-      <div className="w-12 h-12 flex items-center justify-center border-2 border-[#62cadc] rounded-full">
+    <div className="flex mb-2 w-full items-center justify-center space-x-8">
+      <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={HandIcon} alt="Hand" className="w-10 h-10" />
       </div>
 
-      <div className="w-12 h-12 flex items-center justify-center border-2 border-[#62cadc] rounded-full">
+      <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>
 
-      <div className="w-12 h-12 flex items-center justify-center border-2 border-[#62cadc] rounded-full">
+      <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={GameIcon} alt="Game" className="w-10 h-10" />
       </div>
     </div>

components/MainUI/Main2.tsx

@@ -8,19 +8,61 @@ import ShopPage from "./SlideUI/ShopPage";
 import InfoPage from "./SlideUI/InfoPage";
 import UserPage from "./SlideUI/UserPage";
 import { useState } from "react";
+import { animated, useSpring } from "@react-spring/web";
+
+export type PageState = "chat" | "shop" | "info" | "user";
 
 export default function Init({
   switchTo,
 }: {
   switchTo: (target: UIState) => void;
 }) {
-  const [currentPage, setCurrentPage] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState<PageState>("chat");
   const [isActionOpen, setIsActionOpen] = useState(false);
+  const [isSlideOpen, setIsSlideOpen] = useState(false);
+  const [springs, api] = useSpring(() => ({
+    from: {
+      maxHeight: 0,
+    },
+  }));
 
   const toggleAction = () => {
     setIsActionOpen(!isActionOpen);
   };
 
+  const closeSlide = () => {
+    if (!isSlideOpen) return;
+    setIsSlideOpen(false);
+    api.start({
+      from: {
+        maxHeight: 288,
+      },
+      to: {
+        maxHeight: 0,
+      },
+    });
+  };
+
+  const openSlide = () => {
+    if (isSlideOpen) return;
+    setIsSlideOpen(true);
+    api.start({
+      from: {
+        maxHeight: 0,
+      },
+      to: {
+        maxHeight: 288,
+      },
+    });
+  };
+
+  const changePage = (page: PageState) => {
+    if (!isSlideOpen) {
+      openSlide();
+    }
+    setCurrentPage(page);
+  };
+
   const renderPage = () => {
     switch (currentPage) {
       case "chat":
@@ -36,13 +78,42 @@ export default function Init({
     }
   };
 
+  const renderAction = () => {
+    if (isActionOpen) {
+      return <Action />;
+    }
+
+    if (!isActionOpen && !isSlideOpen) {
+      return (
+        <div className="flex flex-col items-center w-full mb-2">
+          <div className="text-white text-sm shadow-lg">Try to interact with me</div>
+          <div className="text-sm">👇</div>
+        </div>
+      )
+    }
+
+    return null;
+  };
+
   return (
     <div className="flex flex-col w-full h-full relative">
       <PetInfo />
-      <Dog onClick={() => setCurrentPage(null)} />
-      {isActionOpen && <Action />}
-      <NavBar onPageChange={setCurrentPage} toggleAction={toggleAction} />
-      <div className="max-h-[32%] overflow-hidden">{renderPage()}</div>
+      <Dog onClick={closeSlide} />
+      {renderAction()}
+      <NavBar
+        onPageChange={changePage}
+        toggleAction={toggleAction}
+        openSlide={openSlide}
+        closeSlide={closeSlide}
+      />
+      <animated.div
+        style={{
+          overflow: "hidden",
+          ...springs,
+        }}
+      >
+        {renderPage()}
+      </animated.div>
     </div>
   );
 }

components/MainUI/Navigator/NavBar.tsx

@@ -5,15 +5,23 @@ import ShopIcon from "@/assets/ui/nav-02-store.svg";
 import BallIcon from "@/assets/ui/nav-03-ball.svg";
 import InfoIcon from "@/assets/ui/nav-04-info.svg";
 import PersonIcon from "@/assets/ui/nav-05-me.svg";
-
+import SpriteBall from "../SpriteBall/SpriteBall";
 import { useNavHeight } from "@/components/Root/navHeightContext";
+import { PageState } from "../Main2";
 
 interface NavBarProps {
-  onPageChange: (page: string | null) => void;
+  onPageChange: (page: PageState) => void;
   toggleAction: () => void;
+  openSlide: () => void;
+  closeSlide: () => void;
 }
 
-export default function NavBar({ onPageChange, toggleAction }: NavBarProps) {
+export default function NavBar({
+  onPageChange,
+  toggleAction,
+  openSlide,
+  closeSlide,
+}: NavBarProps) {
   const { setNavHeight } = useNavHeight();
   const navRef = useRef<HTMLDivElement>(null);
 
@@ -50,14 +58,12 @@ export default function NavBar({ onPageChange, toggleAction }: NavBarProps) {
       >
         <Image src={ShopIcon} alt="Shop" />
       </div>
-      <div
-        onClick={() => {
-          // onPageChange("ball");
-          toggleAction();
-        }}
-        className="flex items-center justify-center w-12 h-12"
-      >
-        <Image src={BallIcon} alt="Ball" />
+      <div className="flex items-center justify-center w-12 h-12">
+        <SpriteBall
+          onPress={() => toggleAction()}
+          onSwipeUp={() => openSlide()}
+          onSwipeDown={() => closeSlide()}
+        />
       </div>
       <div
         onClick={() => onPageChange("info")}

components/MainUI/SlideUI/ChatPage.tsx

@@ -28,10 +28,12 @@ export default function ChatPage() {
       <WindowWrapper>
         <WindowContent
           style={{
-            height: "33%",
+            height: 288,
             display: "flex",
             flexDirection: "column",
             padding: 0,
+            paddingBottom: 20,
+            paddingTop: 8,
           }}
         >
           <div

components/MainUI/SlideUI/InfoPage.tsx

@@ -1,11 +1,6 @@
 import React, { useState } from "react";
 import { Tabs, Tab, WindowContent } from "react95";
-import { 
-  Page, 
-  WindowWrapper, 
-  TabsContainer,
-  ScrollContainer
-} from "./styles";
+import { Page, WindowWrapper, TabsContainer, ScrollContainer } from "./styles";
 import { useNavHeight } from "@/components/Root/navHeightContext";
 import Quests from "./components/Quests";
 import Ranking from "./components/Ranking";
@@ -14,16 +9,19 @@ import Invite from "./components/Invite";
 export default function InfoPage() {
   const { navHeight } = useNavHeight();
   const [currentTab, setCurrentTab] = useState<string>("quest");
-  
+
   return (
     <Page $navHeight={navHeight}>
       <WindowWrapper>
-        <WindowContent style={{ 
-          height: 'calc(100% - 33px)', 
-          padding: '8px',
-          display: 'flex',
-          flexDirection: 'column'
-        }}>
+        <WindowContent
+          style={{
+            height: 288,
+            padding: "8px",
+            display: "flex",
+            flexDirection: "column",
+            paddingBottom: 20,
+          }}
+        >
           <TabsContainer>
             <Tabs value={currentTab} onChange={(value) => setCurrentTab(value)}>
               <Tab value="quest">Quest</Tab>

components/MainUI/SlideUI/ShopPage.tsx

@@ -67,10 +67,11 @@ export default function ShopPageComponent() {
       <WindowWrapper>
         <WindowContent
           style={{
-            height: "33%",
+            height: 288,
             padding: "8px",
             display: "flex",
             flexDirection: "column",
+            paddingBottom: 20,
           }}
         >
           <div className="grow flex justify-center items-center flex-col">