From e1cc9008f3ba1ee67b7030af87a8386294344cec Mon Sep 17 00:00:00 2001
From: vivomo <929992114@qq.com>
Date: Sun, 22 Oct 2023 00:48:09 +0800
Subject: [PATCH] feat: add loot

---
 packages/client/src/assets/img/loot1.png         | Bin 0 -> 1693 bytes
 packages/client/src/assets/img/loot2.png         | Bin 0 -> 2600 bytes
 .../client/src/components/UserInfo/index.tsx     |  12 ++++++++++--
 .../client/src/components/UserInfo/styles.scss   |  10 ++++++++++
 packages/client/src/pages/home/index.tsx         |   6 +++++-
 5 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 packages/client/src/assets/img/loot1.png
 create mode 100644 packages/client/src/assets/img/loot2.png

diff --git a/packages/client/src/assets/img/loot1.png b/packages/client/src/assets/img/loot1.png
new file mode 100644
index 0000000000000000000000000000000000000000..84aeb2b30e5259b8389fd1b73d1fe653c9be58cd
GIT binary patch
literal 1693
zcmeHI`Ck$S6t^sGnpP|Ez@*JJKh2}hGA|N{Nrh&h1d6v^9;vBQBtf8L>vE~BQfDaQ
zMH1eEihx@3v3buk6U1uHgQ<CtM-xVCpMKn5u=n}C@B8Jw_j&JqKJUHTUZ_(BdS-fB
zT3QC~NCZY>vp(n!9Syr~iGQu7rE}380mohqo|C$y?F%xIEUs^*YFlb+YumTBA$IT4
z2zH<MZY(0u3odn%u2Mqw7<sp~v`8}uAw55uab{PXixO7y@>RMpu1nC6Wmkz{c4YwK
z=;-Kkt+{3Ef!2S(0@?%#>TCk|TyC&P5G@n%qNNShHu$OnTHk}|Mu4q9wm#d&Z>hbP
z&Kfi@v~a~6nmc=4k&A;YpecAm5HzqNSmZxk86t=E*#tIJ2}w#$^tiCm973vNxF*-Q
zQa0+KBa$@Z&gH4z&exK(Ip;19*+d`9jS!!*_Le1WrZwB$(%oh8;%Wc+QC^g<`qz%K
zv+UWYxlXackN`;XQn5udd3AniUe>gMSDR>pL*-)1&|RQYhpdUHNTM-AA_2n;mxPXz
z)7c$&jI2A9iV;OB<^8)DO5_}f?pFq6K*)Rslp+vbT`UyR)Z)N~I2P@AiKIs3gmNU#
zOG$ytN7iNr*c;|x#mvFQ#W(GQRwYxv_UG-#Q~w1owqJ>XF}s+FI6*^f`fowSf=U(C
z!~-xWb`Q$p<FXu+$>hvG(rcLLiwol-p4I!c#S5Z|k$1ePk;|ZAxv?7?IL&2o;Is*c
zsNn}77<Ew6KkjoWZmK8m^7_)G($Jeond)U84)0-<ZTiyUJqO8iFRF{AO~gv6Fu7Kk
zyj-f9UtgXYqndzap#!C7cz~;$8-z{2?cvM#+VT@gnk4>KjAO)#KSyiXb~*$cjHcp-
z7pj&G3qQwMKuB19zx`~9`)#mwqP7x0#*cXto}npj*!~vyP~P?2n7lG9l~dHOs=p%R
z=zAJ8sc_>oMVQw@N%okvZ^hu$vG0FJ2K9l-$_$BDjTW-%6AoZ9In#`u%n58=C$7sG
zfY8I7K|X$jSuZ0MHZLUdI)}nMjO;y}kVeHE3#^|oWxd86Momef4egzMel$;T?%54+
zRuR;*orA#1`VJ$ltbI)-zuXhRIR}PJPtz$Rp@>G#^m4myg<?ETbJMi-S7W}dZ$;p!
z8l9We$jNR~y;+kJ=veqm#>1oOT<@tcb$D<7kbMrI5->Yb8KOAf&lTmLQooZM=5hlk
z!BHn`CYYm*3E@Fp0pJ4X+;H{BUJ8PDD(2%j#DJG*TpM<kO*8vUcAS_Lz>h97?)t{{
zeFhpa;&HYSRY)^4m4&KRo0DVpu{`Ewuob~yU>!yJTIRs7=k4HmZRn?|B8v&yqK8FP
zq|tTG76NMak(j22j@wh#moB9Q5K;lX*k1e!+Oi1v*k!~NdA9-lrSi;d+91RMazD5u
zH>R7TXxcw`syv{+VmVOb*PR+qIyBfB3ezq9w7adTayz7zeI6RAu*1o_OPt!yszHD4
zl@)|!q8z2G*4@<u>p#?y9AwEgRX0#h5yr)Hub`XN4jx5ch%dCK-!(2i5)p?sLL_hj
zQMJ7bhKn<gw1)1@9OL8hZY97veT*$PtN}gA7Ffm9-(12b8k$K5sNL0buf%d&ZwLRP
zY=qb#ZaR^k1m~c?a(YG~MfT@ZSBO@0ujpZH`EWYff9G6lOBfUP#D_qYUp&as*~TlE
zkHE&xovfY6__pCDK>ymd4|omn0nw?JEZ_>6t9mmaDUd&(*4b;Y;Xu5$xvPwSQ?)^i
zxlh2-6hGZEWdS{pPP3ata1dsaUYc{<DJP;2UA|tht88`-0FAh_#m1z)095+%y8X}p
eIf2lZD((3P?QiWLX5ln%N6Y;L3Q_T0XzJhbuP3_z

literal 0
HcmV?d00001

diff --git a/packages/client/src/assets/img/loot2.png b/packages/client/src/assets/img/loot2.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f41b57cc57b915973c0e8f7201105be302ed6bd
GIT binary patch
literal 2600
zcmeHJ_g53h8VyE53j~!GX<~?!r3H}Cg#aNz2#UypC=#(CsKLdsp-7Rgp(qwQ1_&4_
z!lT0zgeZ|_fED8s1p*PINpBJ2MvrITzVrTt_ruJbGvApz_sn;{xnJ@zoTH@pesKT*
zAc@7;y9w5Z--jqjFk1>;9|r)$7O?iV?j)c2JjPR57n%44iA_+dl4;PGbI`awI4SA2
zD99cWEo5}aU@ABGjhD=ETWMvU=UR<;NKIMD$%3&~{z&k<v58f$GiRQ+wBU%W<`!Nm
znM~e|LJPs9$7A-0F1-+qBc+S~QR)gg`cOw~f|16QFmcW?(RI!??)n_3>4yKhK96Tr
zp5Y9Y{fd8+YZl5W0ly}qWN2048($XZ{;UaF7<pcGV|p-%w>llPy}5LLi`$jKd0*|v
zc~{|$U*>j&#>Yjwr;muHe4b@J!@s&M%Xxhl#u41qw=CG8FO0U)>#wqxyG8f7abCm#
zIUVs5)r{uIov=B|n}Q>%xLnf#ozbRXjmW5#NtaA>Vt|jD+IQBzyHS<~yVO(^)P}()
zN}R=NF7`QXYwI*@c?)O@h0wbn{6eQ5ebiAG$lBW$F!b~!p1-{nDvY1(%|gTMT(#%k
zSHmK<mf^kmRxL}l2I9F$f)8nN%=X47ypd%T-;(F4pvB)@icQe!!U}(wIpmxvoo{_}
zzlwE)f@1Hdo<|b}VPp9Ao({uu(LX2oJ6}VoamBloh#x@s^ukhe(xUHbZIGh9-*8j#
zCC~aRUZiC%HbRPS;!jG1sFp~$8lw-q1pZeN6qfq(ERg!{)Pmw8maBd(*C#r&i06GV
z@kNeloyUDDr;@aW0|!+j49TV&Up^{YRYzDs72Ir*I+?{mqlA%vLlt+=fvSQy9i1{m
zhh}Dm%5s)5WqbCW+=$kc&<FQa=@#P@Dm;H*8h@1^ZnNxqPrMn=*(Vm6rebwlp8ugK
zm_tv5T+hoa9Q32iecf2dSr(-JsI$8en<6xB(ik#7T!N!HI=_#wFr3818(n&1zp~E?
z(ipZD&>Q0jGYen8;{1gkoS9kJ|H|G0c6T{^eGV%)js7Lf_)53{ssy)6dIC(2b5>Cj
zB`>x`tL$lLKds>>_wx-7$R5JwDon|Yt0_TPq<qx4Dmq{!Ir5`(sxYZP@%izU=QnzJ
z5Y7`-m}_$QK%s;3232dmK`yv$jn4cdJGIH9wcuvx*%m#Fu%}p+++wmwQ15WNzob0V
zV&GX$SM{ypFI@9}M4)n(f+?ui9Od^U#gskH++fSqRJK*%I0Cf{FzwD!{S_YAMQwb^
zGgCR!8ltmb*=~M#DB2+|Mn3WhhB8z8Y!}+!<~LPzpd#`b*&^Nk$fh@@qW$;seXbI1
zhqB&2y{YpaqA5{ZO4VQlK*0V4@YjxH^cK!K3nVE~bee2Uq!045*15HW(v31j58aE~
zi^Y*=N>d#RRBw*lfEw#4$)n$TH(a|q!|ds4bwW(B9L`!O$67O!&YrW0?Z601ps%`g
zwq%dI0SeeW;#y!Gzc$NaEc^?2`mL^ay>WX|DSUP*bmlFslYwetq^ag)XpYEAtxhou
zQba-os_9gu$4sabXEPqmJX+v&JhC*KXHy*S?MzyEXk9eEc2mfyD~-23R^twmoPBji
zeo1MTbgWHJpZM9Z>Z%iqT1$v16zU0mvjEbBWrx#uEmGz5eUuiM<^vFODU}Lu%L=<h
zslyqk2FB~s;ukg@rkmHeo}QA!M*9e0Vo|Sv#ze*A4A&A{XMcd_!_8{td(fl#O7E~c
z0=*H|?@TPntdOBb*}SFL`{rv#quGZ8vsYqAfRYE>@(L3jAh!}yF3_UdZwb4E-qbNI
z<>lV5yz??4u+*<VIk(Yb+O!IyBw{_FH5S30Y5<~xM3}oxtA^=FD28m4B=WP~Y_+){
zEpnqzeo8Y!)*_2|HQ~~;CDBk+VJbzY=1|(`9UsX-9J_vCIyY?>?QtKPe9+)2>Fat0
zG`0RN<ZSSX<2gh)th#S;PD3T#8`6Z&WaJXOjT{bB{Vo@sPoFHg*6PBpH~Us@t1S<t
z&k#mi4=1Q6e4y^OLEzZV4pv3Y7jXeKm2wa%k8Zznx)%xbN2n`sp!7QGvPVOzmtvK9
z!nKj#o=9R(OM|x%tE><V5=1j0E=|6?r&fNcAPpPqu2;<UN>-z}nB@UPqn>2YlGflb
z1QNL7xlD@O;SJr7+FHI)E<%j>#((Y)7-_s-<b}SnH}(fMNI7a=H*t8;-WnQ)BsuWb
zvvcmlW8K#u6l8pm*2`-^_@$56$By;G9$(sP=LR0M6q0VM#g!b)XTL0`H{Ub!$~m6L
zfPKP`anw1iM39dmpt{w#OtA+J^kDS&c}opsay=J+6<IYg)o*6ZbRHNgskCMeOQZD<
zvL`PjbRU4*CI9ps-?+||X$?xbqLT_(MaEVi8&5SXk~Nyna(^Kz29ve~jE`@a9rUMi
z+iT&n@3tw~NTdCTjC`!H6-DN?!ysQI;fulrUw4X??yAfV4_Q}?nkP;p#jXw4(mwZn
zj%(R||N1Ok)?oEzx{O^|CIS8pXy*?8%Bt{ww5eGI;H?n?u<@P`mm5z8=xaPfe(T+^
z<!jTT*%Dw(Bild>P61mbuU~mgpB}RAF4#l@*0|XC{yG-iCsnU#){&`!VDZ--`Qrcc
zhd)=(u7fk~QZ!_nU5tU$8xk&k@73*WwcqaTyWy6Z4=3YW)p>ZY?ziM)hQ`Gx-GOow
z3+Tnmd=KmCE+@1mbiW(rp?`u3&Da9^P4(2?ow0YbFA)fnz~u1rj}hO^E=C&ix0o}%
z=m(g+I?&>#rc>RE>UMV8TxfCFnf$5yip5)jQi0I?^O_jpJlj(}z2$wRchAgDw?>3!
zaA+wfvaG<PWf?WDoyN4sMwkJNQ&v_Tl*v1sxT*K4?z*@nfghVuu#f|m`4Ns5gfXgm
zKOpR5?}1&pukKtIN2;*f`ve93+6EtY`~p2evU;kc#*?jD)s@Nkr#=6Z@qc=bzuo))
g;h$Z=mLDJ3_Pa>P$NTMv1sxy&>wvSbMETzO3&r`rq5uE@

literal 0
HcmV?d00001

diff --git a/packages/client/src/components/UserInfo/index.tsx b/packages/client/src/components/UserInfo/index.tsx
index 1d21e15b..8de8ca88 100644
--- a/packages/client/src/components/UserInfo/index.tsx
+++ b/packages/client/src/components/UserInfo/index.tsx
@@ -8,11 +8,19 @@ interface IProps {
   head: string;
   clothes: string;
   handheld: string;
+  minting: boolean;
 }
 
 const UserInfo = (props: IProps) => {
 
-  const { handheld, head, clothes } = props;
+  const { handheld, head, clothes, minting } = props;
+
+
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     setLoading(false)
+  //   }, 2000)
+  // }, [])
 
   return (
     <div className={'mi-userinfo-wrapper'}>
@@ -24,7 +32,7 @@ const UserInfo = (props: IProps) => {
               <Appearance clothes={clothes} handheld={handheld} head={head}/>
             </div>
           </div>
-          <div className="loot-wrapper">
+          <div className={`loot-wrapper ${minting ? '' : 'loaded'}`}>
             <div className="loot-detail">
 
             </div>
diff --git a/packages/client/src/components/UserInfo/styles.scss b/packages/client/src/components/UserInfo/styles.scss
index c7162dbc..cd48fd4d 100644
--- a/packages/client/src/components/UserInfo/styles.scss
+++ b/packages/client/src/components/UserInfo/styles.scss
@@ -39,6 +39,16 @@
         justify-content: space-between;
         flex-direction: column;
         height: 100%;
+
+        &.loaded {
+            .loot-detail:nth-child(1) {
+                background: url("../../assets/img/loot1.png") no-repeat center / 100%;
+            }
+
+            .loot-detail:nth-child(2) {
+                background: url("../../assets/img/loot2.png") no-repeat center / 100%;
+            }
+        }
     }
 
     .loot-detail {
diff --git a/packages/client/src/pages/home/index.tsx b/packages/client/src/pages/home/index.tsx
index 870b473f..44299792 100644
--- a/packages/client/src/pages/home/index.tsx
+++ b/packages/client/src/pages/home/index.tsx
@@ -20,6 +20,8 @@ const Home = () => {
     title: '',
   });
 
+  const [minting, setMinting] = useState(true);
+
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -82,6 +84,8 @@ const Home = () => {
     setHandheld(handheld);
     setHead(head);
 
+    setMinting(false);
+
     setTimeout(() => {
       navigate('/game', {
         state: {
@@ -132,7 +136,7 @@ const Home = () => {
           <div className="mi-section mint-section">
             <div className="mint-box">
               <h2 className="mint-title">HOME</h2>
-              <UserInfo clothes={clothes} handheld={handheld} head={head}/>
+              <UserInfo clothes={clothes} handheld={handheld} head={head} minting={minting}/>
               <button className="mi-btn" onClick={mintAndGo}>MINT AND GO</button>
             </div>
           </div>