From d1e51cda07e2285464ecba2dcd8c5ce9e01fa5d9 Mon Sep 17 00:00:00 2001 From: FrozenArcher Date: Sat, 9 Nov 2024 04:25:22 +0800 Subject: [PATCH 1/3] feat: --- components/MainUI/SlideUI/ChatPage.tsx | 91 +++++++++++++++++--------- 1 file changed, 61 insertions(+), 30 deletions(-) diff --git a/components/MainUI/SlideUI/ChatPage.tsx b/components/MainUI/SlideUI/ChatPage.tsx index 8d30636..cbbaa4e 100644 --- a/components/MainUI/SlideUI/ChatPage.tsx +++ b/components/MainUI/SlideUI/ChatPage.tsx @@ -1,11 +1,11 @@ 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"; @@ -13,7 +13,7 @@ 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 ( - -
- {messages.map((msg, index) => ( -
-

{msg.text}

-
- ))} + +
{ + if (el) { + el.scrollTop = el.scrollHeight; + } + }} + > + {messages.map((msg, index) => + msg.isMe ? ( +
+

Me

+

{msg.text}

+
+ ) : ( +
+

Punky

+

{msg.text}

+
+ ) + )}
- - - + setMessage(e.target.value)} - placeholder="Type a message..." - style={{ flex: 1 }} - onKeyPress={(e) => e.key === 'Enter' && handleSend()} /> - + From 65d9f40f1bae9dfe4ad7d3228b60f5dea272c003 Mon Sep 17 00:00:00 2001 From: FrozenArcher Date: Sat, 9 Nov 2024 04:40:03 +0800 Subject: [PATCH 2/3] feat: close the score --- components/MainUI/SlideUI/ChatPage.tsx | 4 +- components/MainUI/SlideUI/ShopPage.tsx | 83 ++++++++++++++++++-------- 2 files changed, 60 insertions(+), 27 deletions(-) diff --git a/components/MainUI/SlideUI/ChatPage.tsx b/components/MainUI/SlideUI/ChatPage.tsx index cbbaa4e..36db94c 100644 --- a/components/MainUI/SlideUI/ChatPage.tsx +++ b/components/MainUI/SlideUI/ChatPage.tsx @@ -30,11 +30,11 @@ export default function ChatPage() { style={{ height: "33%", display: "flex", - flexDirection: "column", + flexDirection: "column", padding: 0, }} > -
{ if (el) { diff --git a/components/MainUI/SlideUI/ShopPage.tsx b/components/MainUI/SlideUI/ShopPage.tsx index 0281e03..cbe10d7 100644 --- a/components/MainUI/SlideUI/ShopPage.tsx +++ b/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("items"); + +// return ( +// +// +// +// +// setCurrentTab(value)}> +// Items +// Traits +// +// +// +// +// +// +// +// +// ); +// } + export default function ShopPageComponent() { const { navHeight } = useNavHeight(); - const [currentTab, setCurrentTab] = useState("items"); - return ( - - - setCurrentTab(value)}> - Items - Traits - - - - - + +
+

Shop closed

+
+ +

100

+
+
From c25424fb3799cd659c1416c2387eb54af29a480f Mon Sep 17 00:00:00 2001 From: FrozenArcher Date: Sat, 9 Nov 2024 05:41:18 +0800 Subject: [PATCH 3/3] feat: add animation assets and components --- assets/animations/SpriteBall/idle.gif | Bin 0 -> 1827 bytes assets/animations/SpriteBall/idle/01.gif | Bin 0 -> 1714 bytes assets/animations/SpriteBall/idle/02.gif | Bin 0 -> 562 bytes assets/animations/SpriteBall/idle/03.gif | Bin 0 -> 557 bytes assets/animations/SpriteBall/idle/04.gif | Bin 0 -> 563 bytes assets/animations/SpriteBall/idle/index.ts | 8 ++ assets/animations/SpriteBall/jump-spin.gif | Bin 0 -> 4637 bytes assets/animations/SpriteBall/loading.gif | Bin 0 -> 4163 bytes assets/animations/SpriteBall/look-left-up.gif | Bin 0 -> 2965 bytes .../animations/SpriteBall/look-right-up.gif | Bin 0 -> 3001 bytes assets/animations/SpriteBall/look-up.gif | Bin 0 -> 2960 bytes assets/animations/SpriteBall/look-up/01.gif | Bin 0 -> 1712 bytes assets/animations/SpriteBall/look-up/02.gif | Bin 0 -> 557 bytes assets/animations/SpriteBall/look-up/03.gif | Bin 0 -> 492 bytes assets/animations/SpriteBall/look-up/04.gif | Bin 0 -> 474 bytes assets/animations/SpriteBall/look-up/index.ts | 8 ++ assets/animations/SpriteBall/pressed.gif | Bin 0 -> 2817 bytes assets/animations/SpriteBall/pressed/01.gif | Bin 0 -> 1599 bytes assets/animations/SpriteBall/pressed/02.gif | Bin 0 -> 485 bytes assets/animations/SpriteBall/pressed/03.gif | Bin 0 -> 552 bytes assets/animations/SpriteBall/pressed/04.gif | Bin 0 -> 568 bytes assets/animations/SpriteBall/pressed/index.ts | 8 ++ components/Frames.tsx | 86 ++++++++++++++++++ components/MainUI/SpriteBall/SpriteBall.tsx | 0 24 files changed, 110 insertions(+) create mode 100644 assets/animations/SpriteBall/idle.gif create mode 100644 assets/animations/SpriteBall/idle/01.gif create mode 100644 assets/animations/SpriteBall/idle/02.gif create mode 100644 assets/animations/SpriteBall/idle/03.gif create mode 100644 assets/animations/SpriteBall/idle/04.gif create mode 100644 assets/animations/SpriteBall/idle/index.ts create mode 100644 assets/animations/SpriteBall/jump-spin.gif create mode 100644 assets/animations/SpriteBall/loading.gif create mode 100644 assets/animations/SpriteBall/look-left-up.gif create mode 100644 assets/animations/SpriteBall/look-right-up.gif create mode 100644 assets/animations/SpriteBall/look-up.gif create mode 100644 assets/animations/SpriteBall/look-up/01.gif create mode 100644 assets/animations/SpriteBall/look-up/02.gif create mode 100644 assets/animations/SpriteBall/look-up/03.gif create mode 100644 assets/animations/SpriteBall/look-up/04.gif create mode 100644 assets/animations/SpriteBall/look-up/index.ts create mode 100644 assets/animations/SpriteBall/pressed.gif create mode 100644 assets/animations/SpriteBall/pressed/01.gif create mode 100644 assets/animations/SpriteBall/pressed/02.gif create mode 100644 assets/animations/SpriteBall/pressed/03.gif create mode 100644 assets/animations/SpriteBall/pressed/04.gif create mode 100644 assets/animations/SpriteBall/pressed/index.ts create mode 100644 components/Frames.tsx create mode 100644 components/MainUI/SpriteBall/SpriteBall.tsx diff --git a/assets/animations/SpriteBall/idle.gif b/assets/animations/SpriteBall/idle.gif new file mode 100644 index 0000000000000000000000000000000000000000..c3e0279a3ae80c025b4ca44731210e108c585377 GIT binary patch literal 1827 zcma)6Sy&TS6rKPgB2^Tr#RZ4p1~N%zvXF_QU={^MD2rQ_I+>Y3gv^925-FC@x*&*q zkt#(*KtwUTRp8KEe{^y)&feJB-ApioL zas~i)Bme*sU^;7%S9ElAWo2csY(Xrr5>R!T&E`~~C^81?i-9T}cDD*{i9#ZiJiWimL)Br$2U8q$D)CQTfrmzez67(pvZ33IlH zxooftVuPNNSi~2gs1JznU@?~`=E8gk7D)s=34(y{ z7Mt;=BUF+wnc|%<=H|zaF&MNGE;k_|fs?@J(7I?YjG`!)hj0-DVi1siDP_P+5T*CD zT9A=?T&LC=)HDTJEMiL9Xz*h*k#?t`(FO;qE_8NN^ig@oV5B@Grr&H27FXkBGr+Yf!0OPbey#cLStwHt&gF# zpj2vM9R)=m z<2YX>R>5p86C&4AIz39sDq`x>a(v$y%;kM+krdNUI;L@0o&Wyx_V2&my#Di#-(S6a z@w}t`x3*_bpFIBc(ZdJ#e`)>sUdvBE-o11C*3BEuP1mnoy>hwn(#3`g_2J#+fh z$rH!xjvYNxTXXo(!RiB5`ztHT%Sua%_w6m(vwK%zLH^FX9l6_ce#qXo_4}+Xncr>R zv~k1wb!#)$q^GS;UA1z>@^8OMF(-e$Ea|JnrKW@>MuT1#ucawXT|2US5#3zQ|`gE3cyVNO{%r zz4Bt)qi1SutKz*`0|ulXK7ICDX_dWw^|*_dF4vSgTyLppwr^~>)Of138HtjBHl3sZ>zgqck>v_C-pgS7($f;;XR@n}@nNt#vWsr+T#S8_FP=>2Yz1&?OlH7&lB9USVt%HhN zi&QBhf&*oXsG#CjL~(($#ZpHd6dY}}wM{P|)(`&t_5E=7zR&yrKkI#-XF`ZZhT$lH z0?z;d;74;GIWUpeJ0LbTw!FMttC|%LEC%#Whr^Ku6r`l2Xf&G4%*96pCL?W?+ZBAAWOS6A+q=Xt zA8d!P@d|#h>jHGyR5BI{lnA5{fruqw5GFvRA~A*qf~XLY!9p2~h#*8N7YpSm3cgx= z&YFeP%Og~pSGKs5f*;4SW;qNeCMF6JMFPeW3nLhY!9o;9QHVo8*7-Dx+acQO->E@G zSqY25%o-RPbZNwOjEzZiW$o5H^`yakZnZYy|b6 z8*fEhqvo3_ID)b=HVZ*dXX^;dW zaRQY{g+g2+=Hl<*lW*j&qfR*q7l*mi9XXESdV~^5Aq*FjkPH(O5RMZVL=ZZXAPA9O zrbqZN=OXMXoi|FUQ^eJ$Yx}w}xWnt#qG+z4EL`L8od5j&@~=N%JpbeO-<~~v^0=+_ z*Oo^QAKd@t-rYO5e{TNiR@09^+`Mu9+SMzK4VN!nyl}q$+}XM_wWm*=JaPQk(Ibaz z4jnvDUA2GT-pV}{yUWW;ONxsMckL|Lv3=Xt{Jbr>n{zg0f1kB+!*`kMGrnE7cFpQl zD_1OEmcI0xv?YrdE&TecR7c8}3zEM`nr}~>XJf6F1T#aMjPY{~aj|-eBy{+k&tqoK z`fTQm>C>i0M@2?_8Xh)9J9$!Q$ixX6wMscYc-+`AiqWIwn2akuu?R(kumB1iIU->A zu%SZ+`}6(4LB5}SJa9n&kNSPs_XD3ky?gcS@xFI=uWp|2d31Gm>%xs6zZdR2FQ69? z=$c`!AqaGJf`eC(hU~b4BICn@=D>Q^)MPJeO>TA85sac?jAm9j=7=sGHttfgs98TsJOWyF?rXO(z}l2nPJbl$!VLBB#Pmsx-U&%wk(ww zi&}Zh=VkD`z0+5%hSzqpx#e!j%d>fBEfOrr$p?x{N=x%IR}}%8-F|`@jd_ZtW{g#rs zNZ$f&YL{)A&AP1pwIik$9tuxr*$|Q6$RD)vh-XgDj@(J+u>9z%JDoEA9>%=a5&9pWX$9WwZm<3VQ99oZy9wWXzBE=yK0_L$3ySfeOvll*PqPu6VX}M RPBm}UtV!Fe@^=SD{R?l$iTwZo literal 0 HcmV?d00001 diff --git a/assets/animations/SpriteBall/idle/02.gif b/assets/animations/SpriteBall/idle/02.gif new file mode 100644 index 0000000000000000000000000000000000000000..faef2077fc8fbfb6ffa71aa6bd539515cdf6c06c GIT binary patch literal 562 zcmZ?wbhEHbG-5Df_`<-zpcD!utQb5P1vS&t(>HJ4?CTPf&Cte>_P?Q_p@U&neSN)~ zo7;>TGivfDe)#a=|Ns9$^~3|k|J;7AA;Hd$0j@@R2F#2=or*tM7`Ye(7<53UfSkd= z`d>k%FC}wc#;SEWulE(`oG;0}U$O3e&HMic78HnUNOd2+xba|)QU8IYL@!+n>Fzg7 zC%FUU6AG@Lx{_CV=}_{SdDFJunN?o1=K98G4K-2zKY(s8jjS?`V{ByU>h9@jWK1_I zX6!AS#>m6dJz=8$WX@9NMT?g#Ddm~ds@J|?DZ}~=8#gYUF=3U?e8xqa_UzrbwPm&I zTIPMn_AqZP)MDi0>)3Vl_~rFm+1R$LpFMYB_j-;i_cvW*JAdZf`6G`WzP`HR`ZLYj zH(oJ3xc_}4$IqV(Pd;kQihUiHBd^oEN#NFLcfQ*@8()cN*_`NqxVw>mqhQCj39@z( zyql+T6!j4T`t zmQz;Phj`Uz1utk=X|nv?B)wSIt6JBlMlJPgt-O>uu{YXQGh)??NwCV z?%9W=qP)Mqjb2)m%wpjny5ZsB4&m;jr40sGk55=>HgC-jw}~ewiux?;shHV&aJF-? b-JTl)85h|_rcX;&DZGC*L+2s~BZD;n;kN9< literal 0 HcmV?d00001 diff --git a/assets/animations/SpriteBall/idle/03.gif b/assets/animations/SpriteBall/idle/03.gif new file mode 100644 index 0000000000000000000000000000000000000000..10f05714944459614d880f62ce4a3bda73494cd4 GIT binary patch literal 557 zcmZ?wbhEHbG-5Df_`<-zpcD!utQb5P1vS&t(>HJ4?CTPf&Cte>_P?Q_p@U&neSN)~ zo7;>TGivfDe)#a=|Ns9$^~3|k|J;7AA;Hd$0j@@R2F#2=or*tM7`Ye(7<53UfSkd= z`d>k%FC}wc#;SEWulE(`oG;0}U$O3e&HMic78HnUNOd2+xba|)QU8IYL@!+n>Fzg7 zC%FUU6AG@Lx{_CV=}_{SdDFJunN?o1=K98G4K-2zKY(s8jjS?`V{ByU>h9@jWK1_I zX6!AS#>m6dJz=8$WX@9NMT?g#Ddm~ds@J|?DZ}~=8#gYUF=3U?e8xqa_UzrbwPm&I zTIPMn_AqZP)MDi0>)3Vl_~rFm+1R$LpFMYB_j-;i_cvW*JAdZf`6G`WzP`HR`ZLYj zH(oJ3c=K)l`=>Wm&tAXVrMM%#UtvunJLjasWqb>)TJH0>`EX<>+6(>PAlMNm5bs{j zxXy5j`Xr&_H9vT!N2P=nEjI7G9P&=uGw8ABlq)KecE32^;hlLrq0c#Wi7NvmlTX#> z74I`Hg>s2#u$~f837V(I&sC8AoF`EQ7MmuH+YK1Mpd7B6S*Z-`sCc*CpE*; zxYljD+x;cChkQl36Dz%e%eN-2D8^J?zH1^}RD=2idz literal 0 HcmV?d00001 diff --git a/assets/animations/SpriteBall/idle/04.gif b/assets/animations/SpriteBall/idle/04.gif new file mode 100644 index 0000000000000000000000000000000000000000..6040bcc742b8fa6d47bdf2ff466f4afa42e91924 GIT binary patch literal 563 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%0DwGeXYuVntkMRvo4oi-XcTdiOrX-%uEiBHxI1Vhm zdD|$gDpm*vrWFQ-Ol1B>l3a#uc8#P5;nI&65l>qE~VSu0r! z*`Le}Ef|i~+|n|W4((o+&8%;^o6 zK3S?Pxi;9F1S2Y*&kK|2kCVRmjy}JeeIX7n@Sdltf6*{fJBELKgHAH`RS7jwa51tH zfm|s=ICFiu^BEC#=+xF%3tm$B^Y*~KC$2rN zt9bb^TwFKxe8R2&Uk~|D27u=IG0C$T&vWKMuReVI@C?R^99et0@CjJ0nFg08o^{y<g}Be?Wa5V^fiJF7%K9|EcAQ<7)b1vz527Jw||*&u&7=;o-=qx+W;+-IG00 zOEoO%&Vu3tMR`M6n1cL6IAhbHEQ73fcFW`g%B)#d zUS~|~$$b)6yhiV(w^OP1Kk<7X);4k|cNTw31f1$NHKjlC~Z z-`LgM%Ai{p0m)s$<=wXd&^YMVZLLtUcqmo)Iqy90$lbAt={Msu$LG>szOV3cuAUfw z^YoeY`iuERm#@x0Txju~tgPQy5>#dfq(Neh0?J=B?(R&FXuKS5+3EYE2I;B9+SP`j zWAG%jJ0E;p+g(Pb)NX&@Ra~6^jjpBx!>XtxMV$UstK8Y3h%Q)eWBWe9JI^5N=eJJP z8Kv3Waf&gIoMll(msx!Tos|NgD*lE~AA*eKj#ldLO4sXkF6ovd3?yXmPRNVgp$qYx>5v0`3$k1`*mv?Gi@j8tygH*P;EXuK>9^DN##pmzh3$^ J&fazEe*pITATs~} literal 0 HcmV?d00001 diff --git a/assets/animations/SpriteBall/loading.gif b/assets/animations/SpriteBall/loading.gif new file mode 100644 index 0000000000000000000000000000000000000000..4df93c6ac701968bfccbc6558ac5e0a33adf5b8e GIT binary patch literal 4163 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 Q-W)ZO0+C^1@Q4TiJ3sQyumAu6 literal 0 HcmV?d00001 diff --git a/assets/animations/SpriteBall/look-up/index.ts b/assets/animations/SpriteBall/look-up/index.ts new file mode 100644 index 0000000..328824f --- /dev/null +++ b/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; diff --git a/assets/animations/SpriteBall/pressed.gif b/assets/animations/SpriteBall/pressed.gif new file mode 100644 index 0000000000000000000000000000000000000000..2bb87e9a9a2317a744d4c950a10c35476cefa54e GIT binary patch literal 2817 zcmbtUXIPWj68=5|h9kx^W1ySpL5Qfd1v04Gc%4(4s-^G z1dxDMV*o(A0|3ATHh~K*0KXZ3fB&kgDmKd}JUraN!Qs%MLrS1H5Qxdn&JGi&O;1mM z`t)gq(K590a?91`rpru>7A^kp;lr}UhRc^MH8xm+S+&N*&}e362DbTSna=3CY;@aU zZ|k~|gd-q8SPF}FvRzRuj+_JU>o+JQ99|$KM{yy4fyf#?)o=xk67a3jo>Vr0EwP6J z1e-#o(2h_SH(qEUkHJT8_yM(E!Bhw(LP*X*DTF~H8B<}6=J3T_hzXx(#dtL8vx+>> z8f`oKfSUDbFP1_mDvpNb5h+xZ6$3}4ktqy@C5l8K((wd3o=CdaE0dl#7iN}Y8gy2HRII+|pPh>C{cmfGeB4J?-tZbi1&QV}RGP5}g zEJ((a3M6uYScICj$l;3j%B|5b(=Qm=YViLu@JA|Nbp1)0WTEJ#`RfS zCf^SIhsIxO%iQ)!ApCYnCf+OML9n{n92m~s-#eOBgxN5+N(JzzaDrH3-d-Ujk~^`i z(eMk7FW@r?JS!TNM5JSBR(u+k$fx*WITS7zOD0pueiR0gOy*PP?EDqp&d%Q6mSsm~ zu;_L~;zkDsnM7p}$Sf+=mSjaETg_peL^3%?#DnI13t-=0v82DnGVP@hM=qASiN!&4 zRp1&RmWyQpVhPILe)iWHD05GNh%XM2ST{l%g1_Lv_oG7$ z2AzVXav=hi22p5O4wpy8`tczMB12RfgGNMu#q9_X-)*!=j`#1#(*z>v=$_S`$-Bn z4mk7gfBp99glKXNg!O z3<}&M2=MoV_&hGhclWNJe17!y+Ue=x?zUt5HrK5#>@Ay}oi;f-Y-HKn+1hOQ!Fv5V zCW8)_9)(OI67V>zC1$OK`I^ar49OruL0*r9abbBKM@}Srut>9%sLVchQw*)cvJJOwhK2CyDs*m-a_8K($}w9Q(IqB zHZs~ecJ;~AiDwB7jW0*B)}m!xYMOKUNbmrAs5ho&*{x?aWh)2buju9%X}s;Ad2WtD^_&ei6K zJnEC)?9Mmiao_%5`ExT;d6(a7>KT{_T|8QGFFs0A93u}FF7OmiV7M;jw{_pEA7L|8 zFM@)!wfFgY6TYACuH}hHPDxEecxt=v$1jbSfvG@lUj8W{6^sIpT7rjik_*bp3(uTY zt(BJKX;hr5&#&ayfcpAiVkywrSl)3d3yBOfZ*FO=)#&UixR*NsRCZsjY3XT0w0Dl@ zKbXiJMvhuEci$;}@O-epbF!zVd#tv7P>%g{ddjuh-(BZ7gi6=bd^h;6Sr=tv0~}6S zx+l|pp?9^WF3y`+v@J8sc`<(L>3M>MDJ?bxwVvJm^KBYOJba!%i1RP%aduy;lRX_d zuPd3z(J8GnjnPPTJnDSXxuzi6$UWZ?K5CJZ|Lw%xe(^*o?ZG5_#>(rYmyOOo8zpJ&Hdk((Bi8lQ2Q_ z=TV~hUyTyY;Vj;OwTrK&c)#PL*NQ^#dQ?XHXZ`ep5%x6juik@c&=p5AMh&THHm zt?onit{v>THS+M$Sml$a7SHYtPfa#Wz6W04Upd&{2cp7L^6^ol(^*$zx@~RtYc1-I zr@L~B1NELVT0O!&+u}Z%JNQh9SwJGlEO5ruZGF_R#}H9qe=dEfYxl>7 zR%7Y;%Zl{8SE{O&(eDNth$_h@^Zc5Q n{rZ@Cl8T>r;6;LJjyS2`=^Z_K+OkfRN9MXkv0GD=db(6%)RG+-#Op8_nbQ} z!KkGe48VX6005xL@`ncE6$3^BmQJhHT2WD9GR(}*&Ndp2Sy@>*KuH>~q@bW+p0H}@ zpux`#43qKye}s1iPl!vNq>o9A!;~sNh0K&q(@cq=fsq*bA3fINWY{!b0?oYD=Fmay z2aiIajnhF>36sj?)bpvf_)L+XlsO@p%}iq{4jMZKjP}qTyVK4~4Ct|^J6yC!2Qi#r z=4pBEH6sw%1(DKpP>gp2^v2W+A`cQu5@t~~0ct2EO5$pYiUKheszp><1jS*Lq}3`K z!@%wV$P}u6^39KEF)moT!+MXV23Nh z=fS|cSkdN`Y=Q&ydSuK(hNOdJrT0^?J58nsjvX##S3*iwup=JEiJ(dqVz+zq>O#Au zB>q1ck3_qY=Q?>LiFXMZBFoG02p?HKyT=Fe0%bMyMA0T+3X^US*bF=GkP-|!NZwI$ zHjY-Y8j`?JElg@S5=J?-1!mM{GmPVE+@hvX9Onq1pGWayWA*wNLo7}iw6Q1}XQXh9 zpj5blAYw2LiEDh^1cysv94zmPZIfenbFs&AX}!oZk{~7vLb|UC5>o|9aHR@PP_Osi zIt4~fwK+J!?HcL5ru$hNc+ob8=ZvCY2fNOhwmm`vXVLN$rB%a(nODIiuO?x}%o4DL z<9QzE36dgFsGH9{bbj~iRJO=@IDK+xoMK5WL69(pacWqjQ8TcX)R)BXtbTXZ z$`#9(EzQr%&3R|Z;zbMJUXYzN|E+m%X3q7v=VVAO@eQZou&1ZJZcDXVc#btQvtOI_ z>dYC_Q>IOwGC6rt(kqD*CzxJ-X?#NbIAfea9~<-H*fF~3(KMx%OHYkss0vZSQKMcM z89Czl;lm=JaB%2z&kh+JHfZ28p-(^c_Y3LUC%AX7punC1{(e2==O_H0f3My^ zUm(i+hIt=BAfR)0#B$EIDYc|L{rVAS)G5h+(No?&uf4N+vok&_Y(@Q6u_2u zmrY-=pma`C-;S!BU7qMEkyQk|zv*n~1wmHP7IN$Eq50LO+QXw#dMbiaGJ%}jynG-t zrI*5*JwnlQ;bPCy4TX7b#Y)TSVQbedQn+*dH*PG+D_XT>c)!`({c_576jlK{Qz1o2 zO-SIjV*j$bhQ_A4%Br1#Ej8KIH7&>Yom|><;MB^Nz|%+1o(tGpxxcjh;-%Wl$6Bvk zy_SFQ(2YxHZq~M~@91bgZ`!c8bw&7$&QN;-&~Pp&s0Y-$zDM26!u;StjQ?MjeT|{Z7p7>n6;#|q2fwolxw$Y;P^d}enmuUb3sE# JTW)_~^uJSfO2GgC literal 0 HcmV?d00001 diff --git a/assets/animations/SpriteBall/pressed/02.gif b/assets/animations/SpriteBall/pressed/02.gif new file mode 100644 index 0000000000000000000000000000000000000000..b5800d44d8c99e1764179342689b6952ba5906d9 GIT binary patch literal 485 zcmZ?wbhEHbG-5Df_`<-zpcD!utQb5P1vMGc{->v>Z{EDw*CnQ*p~20~t-ij#gJD%R zL)(lQGivfDe)#a=_wV0IGIBa<8j8}g(xT$ps_L@hl0Xx10mc8^ey$fiz?9v8*X$p+pKCUDa+*z&wZhtX*oHMjqU$m>3aRS4<`3n{@OkiwgoUX%IKc{cey7h~f zE?=Qlv}QibhJ`y9Y)aY6$j8UnvzB4cp7kg8PGx7W(KvYM$aa>K*B0HFcZ*@uxx-rz zoj=Na{N%F*cV5i9$NoU`;JGVn@4UKw{p8#8ThBe-e*AWc?(Ze<1Gc1xa{Xam!5yv< z&-m>iw}OKMLu$NqhMKW}OQ|f`O+SgZk+a59qKB~>U RA@u%?ofActbqg?90|4L*#A^Tm literal 0 HcmV?d00001 diff --git a/assets/animations/SpriteBall/pressed/03.gif b/assets/animations/SpriteBall/pressed/03.gif new file mode 100644 index 0000000000000000000000000000000000000000..4aade7850d6ba1041e8320c914ebd4beb4e69b66 GIT binary patch literal 552 zcmZ?wbhEHbG-5Df_`<-zpcD!utQb5P1vMGc{->v>Z{EDw*CnQ*p~20~t-ij#gJD%R zL)(lQGivfDe)#a=_wV2GlG2jGqCbEBlo68v>ctNf|8x7fh6Fo12DlpO889;fRV)5v z;pAcvWY7WW1UZ9&^?!m&UrOe@j8*G$UhgZ=IbV`{zhd3{n)m+?EGY2Mk?KE@qIDq0 zs{3qP$f^}#vmKTto}L@DmP^flckK-MnC9(_V)sw56<4kMwvBl!gShYe>-)nhjH>F` z{MxI^at&KzIyfdwpN*ehu@SboSeRmdM%6-JD69mS=+H_ak%bs4&Sw_ z8Fud4y`9;2;|%RBj5~H8JAQmM7(n5U%tL|_uhqvERX-6Vw7puleHGU>(?n%)Av_D3A|j92K& z+86MYJD&Lwki^iv>Z{EDw*CnQ*p~20~t-ij#gJD%R zL)(lQGivfDe)#a=_wV08^~3|k|J;7AA;Hd$0j@@R2F#2=or*tM7`Ye(7<53UfSkd= z`d>k%FC}wc#;SEWulE(`oG;0}U$O3e&HMic78H2su=bru7Mzr0G5?&(hl~|bycgP% zRtLOWakV|7=BU-qyAFB@wNvh2HIB+no<6x^Pg&gN$AS%wO-&WiC5Cm)tld4mz0Hhm zMstZy}`Y*O(4ijPsetF>2OJw8F%J?)GVL-U#$#>r_1W`2HRI@eVH h#hpl_)UDGzSAXM~xw21rb) void; +} + +export default function Frames({ + frames, + interval, + width, + height, + once, + onEnd, +}: FramesProps) { + const [currentFrame, setCurrentFrame] = useState(0); // 当前帧索引 + const preloadedImages = useRef([]); // 用于存储预加载的图像 + 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 ( +
+ {preloadedImages.current.map((img, index) => ( + {`frames-${index}`} + ))} +
+ ); +} diff --git a/components/MainUI/SpriteBall/SpriteBall.tsx b/components/MainUI/SpriteBall/SpriteBall.tsx new file mode 100644 index 0000000..e69de29