Merge branch 'main' of https://github.com/punky-lab/punky-tma

assets/animations/SpriteBall/idle/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;

assets/animations/SpriteBall/look-up/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;

assets/animations/SpriteBall/pressed/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

@@ -0,0 +1,86 @@
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+import ThinkingBubble from "./thinkingBubble";
+
+interface FramesProps {
+  frames: { src: string }[]; // frames 是包含 src 字段的对象数组
+  interval: number; // 动画帧切换间隔
+  width: number; // 图片宽度
+  height: number; // 图片高度
+  once?: boolean;
+  onEnd?: () => void;
+}
+
+export default function Frames({
+  frames,
+  interval,
+  width,
+  height,
+  once,
+  onEnd,
+}: FramesProps) {
+  const [currentFrame, setCurrentFrame] = useState(0); // 当前帧索引
+  const preloadedImages = useRef<HTMLImageElement[]>([]); // 用于存储预加载的图像
+  const [imagesLoaded, setImagesLoaded] = useState(false);
+
+  // 预加载图像
+  useEffect(() => {
+    if (frames.length === 0) return;
+
+    let loadedCount = 0;
+    console.log("..frames..", frames);
+    preloadedImages.current = frames.map((frame) => {
+      const img = new window.Image();
+      img.src = frame.src;
+      img.onload = () => {
+        loadedCount++;
+        if (loadedCount === frames.length) {
+          setImagesLoaded(true);
+        }
+      };
+      return img;
+    });
+  }, [frames]);
+
+  // 使用定时器切换动画帧
+  useEffect(() => {
+    if (!imagesLoaded) return;
+
+    const timer = setInterval(() => {
+      setCurrentFrame((prevFrame) => {
+        if (once && prevFrame === frames.length - 1) {
+          // If once is true and we're at the last frame, stay there
+          clearInterval(timer);
+          onEnd?.();
+          return prevFrame;
+        }
+        // Otherwise continue to next frame
+        return (prevFrame + 1) % frames.length;
+      });
+    }, interval);
+
+    return () => clearInterval(timer); // 在组件卸载时清理定时器
+  }, [frames.length, interval, imagesLoaded, once, onEnd]);
+
+  return (
+    <div style={{ width, height, position: "relative" }}>
+      {preloadedImages.current.map((img, index) => (
+        <Image
+          key={index}
+          src={img.src} // 使用缓存的图像对象
+          alt={`frames-${index}`}
+          width={width}
+          height={height}
+          unoptimized
+          priority={index === 0}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            opacity: index === currentFrame ? 1 : 0,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

components/MainUI/SlideUI/ChatPage.tsx

@@ -1,19 +1,19 @@
 import React, { useState } from "react";
 import { WindowContent, TextInput, Button } from "react95";
-import { 
-  Page, 
-  WindowWrapper, 
-  FlexBox, 
-  ChatContainer, 
-  MessageBubble 
+import {
+  Page,
+  WindowWrapper,
+  FlexBox,
+  ChatContainer,
+  MessageBubble,
 } from "./styles";
 import { useNavHeight } from "@/components/Root/navHeightContext";
 
 export default function ChatPage() {
   const { navHeight } = useNavHeight();
   const [message, setMessage] = useState("");
   const [messages, setMessages] = useState([
-    { text: "Hi!", isMe: true },
+    { text: "🐶🐶🥰Hi!", isMe: false },
   ]);
 
   const handleSend = () => {
@@ -26,33 +26,64 @@ export default function ChatPage() {
   return (
     <Page $navHeight={navHeight}>
       <WindowWrapper>
-        <WindowContent style={{ 
-          height: '33%', 
-          display: 'flex', 
-          flexDirection: 'column',
-          padding: 0,
-        }}>
-          <div className="grow flex flex-col gap-2 overflow-y-scroll">
-            {messages.map((msg, index) => (
-              <div key={index} className="nes-balloon from-right text-black">
-                <p>{msg.text}</p>
-              </div>
-            ))}
+        <WindowContent
+          style={{
+            height: "33%",
+            display: "flex",
+            flexDirection: "column",
+            padding: 0,
+          }}
+        >
+          <div
+            className="grow flex flex-col gap-3 overflow-y-scroll text-black text-lg px-4"
+            ref={(el) => {
+              if (el) {
+                el.scrollTop = el.scrollHeight;
+              }
+            }}
+          >
+            {messages.map((msg, index) =>
+              msg.isMe ? (
+                <div
+                  key={index}
+                  className="nes-container is-rounded with-title bg-white"
+                >
+                  <p className="title">Me</p>
+                  <p>{msg.text}</p>
+                </div>
+              ) : (
+                <div
+                  key={index}
+                  className="nes-container is-rounded with-title bg-white"
+                >
+                  <p className="title">Punky</p>
+                  <p>{msg.text}</p>
+                </div>
+              )
+            )}
           </div>
-
-          <FlexBox style={{ 
-            padding: '16px',
-            borderTop: '2px solid #424242',
-            marginTop: 'auto'
-          }}>
-            <TextInput
+
+          <FlexBox
+            style={{
+              padding: "8px",
+              borderTop: "2px solid #424242",
+              marginTop: "auto",
+            }}
+          >
+            <input
+              type="text"
+              className="nes-input grow text-black"
               value={message}
+              placeholder="Chat..."
               onChange={(e) => setMessage(e.target.value)}
-              placeholder="Type a message..."
-              style={{ flex: 1 }}
-              onKeyPress={(e) => e.key === 'Enter' && handleSend()}
             />
-            <Button onClick={handleSend}>Send</Button>
+            <button
+              type="button"
+              className="nes-btn is-success"
+              onClick={handleSend}
+            >
+              Send
+            </button>
           </FlexBox>
         </WindowContent>
       </WindowWrapper>

components/MainUI/SlideUI/ShopPage.tsx

@@ -1,12 +1,7 @@
 import React, { useState } from "react";
 import { WindowContent, Tabs, Tab } from "react95";
 import ShopGrid from "./components/ShopGrid";
-import { 
-  Page, 
-  WindowWrapper,
-  TabsContainer,
-  ScrollContainer
-} from "./styles";
+import { Page, WindowWrapper, TabsContainer, ScrollContainer } from "./styles";
 import { useNavHeight } from "@/components/Root/navHeightContext";
 
 interface ShopItem {
@@ -18,35 +13,73 @@ interface ShopItem {
 }
 
 const ITEMS_DATA: ShopItem[] = [
-  { id: '1', name: 'Sword', image: '/sword.png', price: 100, description: 'A sharp sword' },
+  {
+    id: "1",
+    name: "Sword",
+    image: "/sword.png",
+    price: 100,
+    description: "A sharp sword",
+  },
 ];
 
 const TRAITS_DATA: ShopItem[] = [
-  { id: '1', name: 'Speed', image: '/speed.png', price: 200, description: 'Increase speed' },
+  {
+    id: "1",
+    name: "Speed",
+    image: "/speed.png",
+    price: 200,
+    description: "Increase speed",
+  },
 ];
 
+// export default function ShopPageComponent() {
+//   const { navHeight } = useNavHeight();
+//   const [currentTab, setCurrentTab] = useState<string>("items");
+
+//   return (
+//     <Page $navHeight={navHeight}>
+//       <WindowWrapper>
+//         <WindowContent style={{
+//           height: 'calc(100% - 33px)',
+//           padding: '8px',
+//           display: 'flex',
+//           flexDirection: 'column'
+//         }}>
+//           <TabsContainer>
+//             <Tabs value={currentTab} onChange={(value) => setCurrentTab(value)}>
+//               <Tab value="items">Items</Tab>
+//               <Tab value="traits">Traits</Tab>
+//             </Tabs>
+//           </TabsContainer>
+//           <ScrollContainer>
+//             <ShopGrid items={currentTab === "items" ? ITEMS_DATA : TRAITS_DATA} />
+//           </ScrollContainer>
+//         </WindowContent>
+//       </WindowWrapper>
+//     </Page>
+//   );
+// }
+
 export default function ShopPageComponent() {
   const { navHeight } = useNavHeight();
-  const [currentTab, setCurrentTab] = useState<string>("items");
-
   return (
     <Page $navHeight={navHeight}>
       <WindowWrapper>
-        <WindowContent style={{ 
-          height: 'calc(100% - 33px)', 
-          padding: '8px',
-          display: 'flex',
-          flexDirection: 'column'
-        }}>
-          <TabsContainer>
-            <Tabs value={currentTab} onChange={(value) => setCurrentTab(value)}>
-              <Tab value="items">Items</Tab>
-              <Tab value="traits">Traits</Tab>
-            </Tabs>
-          </TabsContainer>
-          <ScrollContainer>
-            <ShopGrid items={currentTab === "items" ? ITEMS_DATA : TRAITS_DATA} />
-          </ScrollContainer>
+        <WindowContent
+          style={{
+            height: "33%",
+            padding: "8px",
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <div className="grow flex justify-center items-center flex-col">
+            <p className="text-xl">Shop closed</p>
+            <div className="flex flex-row gap-2">
+              <i className="nes-icon coin p-0"></i>
+              <p className="text-xl p-0 m-0">100</p>
+            </div>
+          </div>
         </WindowContent>
       </WindowWrapper>
     </Page>