From 8a5a4bf6967481992a09c7c49b31c5a599afe168 Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Tue, 29 Apr 2025 00:10:42 -0500 Subject: [PATCH] feat: glow and shells --- .../tankopedia/visualizers/reload/shell.png | Bin 0 -> 20430 bytes .../ReloadVisualizer/components/Shell.tsx | 60 ++++++++++---- .../components/ShellBorder.tsx | 21 +++++ .../ReloadVisualizer/components/Target.tsx | 22 +++++ .../components/ReloadVisualizer/index.tsx | 76 +++++++++++++----- 5 files changed, 143 insertions(+), 36 deletions(-) create mode 100644 packages/website/public/assets/images/tankopedia/visualizers/reload/shell.png create mode 100644 packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx create mode 100644 packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Target.tsx diff --git a/packages/website/public/assets/images/tankopedia/visualizers/reload/shell.png b/packages/website/public/assets/images/tankopedia/visualizers/reload/shell.png new file mode 100644 index 0000000000000000000000000000000000000000..57a555a2f6db5cf6df2379915b725fb9896a00e8 GIT binary patch literal 20430 zcmV)MK)An&P)<%(FYRFbMBRjG32RizhIq6b9} zsq$mu#Ho^OIkH4r3@KZ&C4wV>#tbyj)9u@Rr!(9$?z6{y-@o>0G-XP%Xbn_TSAB8& z+;jF`>tEmh{og-qL;dagV-#OGzRco#`T6P7$_(FE=Csvv^1NrnamDq0-*z0w>Gd z7ss)$qDYPAb7go&Zp22IWm&aU%B|Tf9_P7o48x0-mzUdHTX#yfZCj<1J8rkv&fdCp z>y4+Le&*OVrS0wQs8T7{8?|aP zRoP^3f2Ut>G|Ip68^7`Oo7X=0cC%3q`uqFiI5tDiQ)zK8O5wWXkLMX{wOVjzIGo^T zrt;*6@=v%I(=d#*QwvH5!`V!J$MZ7$+>%!rMiv$8Qm+U8;o)G4msqZ=RAi{k!~5{H zwOXy5WtKe}^|IE|#@c6J`0TS^`O1r*+}|HY(L8ZWwUVk-O3RmD`Qc9Q@Zdj8#*+&h zYis4by{&9>W6kkgtK1*-Rk<7()pDhRb)5G5gW+5Etm5!n$%Y|Hk`p^Sf5P#dk;Ny_CCXKto8NH``0&* zwR=4*Y)~t=+pYYEKYV4@XtXz8eDO;UpFVTu^mH1w(l|a*snxw%I5%P8>9J$Sa0R?7ObzZZ0pov)QB@g`w}-wqv_qe?FVWDxSO5 zT5V=q%6A=i^=ufXD$jaZo>h%B%U#{xqB>Np4g<+nc(sYr=Zgyr7ni4iDpao;JSvcYpD5)3i2V z-dUwqHK((Qa%|IYwK~>~ts5U(YByR(H#dUuxT_rAR1(`+78{lks3e)&;XJC@DrU-(n~MZu^;`PW#cpM`JTuCV>=E* z8@fO+HwZ>nmX)kLpBip9wRU&IJfA5$RH}^E&H^WF*E(xnIZab12v)EXnP0EAD!za8 zJJb5@pLk>S67y&CC{tub@$q~Wf}EaqmTEh z%)?oRLpH=R3@5Y6hUu7AwNy@f{ed++JoMI9*SfQLnC8lAGL8yjx!TUOT10>g;h!$XxdN=7M$ z>BX7pH!9U&jJt6SqrTp58-CSUJ$d@{QoG)^0?)ty)Y-E&tX#D>JUn^-eHU6-NUPDP zIPIlIzPG=fwVUmHdAVcXxOrW{eHgA=vv+rg>h|qBDl@Xy*7jEY>b2`ewNh1Yy!n=D zx0jTOMb6S(`7kb^lY*VAc^tzN&hZs0!!(o!L-d0H#<-7+}>Y&n+U*tWc<<2fxiapmWp@2#5nW;p5RMh5gr6C=-(ywh%|pyW1k zBf&i^(-@Ap4ox8^kg34;8m`;PN0SkLVyjZ6Y`EiTHk*cq?*&E}&-35@?cX-O_@yta zgYJPE4#(;c3p_Z?@OoT>}??O{4K)I7o-_|ps?tBQpIDcU%5=H&gGM>lJx>C~Tm{IN@ili>_E zyLtA^x#sQd-2ep4iNK${lJBNjV$Nn$)$Q%7D<8aTT)TSByzks;b!+P?7MuUGR1%xu zMga^!sq5En7`L`=+r4gA(9JMyH4W!*OBoj30F4}~2&lk69>^73oB~qeG9y*;1N()&e zaLo5J@FQ%#Ndq>Qt&$o0U`@p{}dK2g3mzzXt2&G9;y`+x%l(yUz9 z!~Hmdl3^IC-Mu}P z+RfdYI5}7W*ITX|Fh;YPRqEwZb7s2pQ(Fmu0pfY?#aiqYHV0^9$iE=Q+C`AxsSSt2?5_&bk`zEQ5CA$5-GJy;e zAkWV2+p1Bmssx`k83O(Ad8UzI!%RV$B$>#jB`FLNhDj8K@u^0$DW6M&if|u3j0*9C zA~wY^ZaFe|vkbo%l*=l?&*m_+*<=Vqz~=y+Vi@Lh&ik?i0mrilXbr^9=4y9;SM>%x zT!*7Z6S~wykeq%8c8&km2PlL)%~BJFk5z(UB05nH4d2LQ8!eMxx%>@ym-h&VhjI`% zH;$-w3*lO;_1w7=C%*mHZG86z4W?RIagPJt_NP-1=w=P@3>z8~$$)5Fcp3pA4;wQc_wkyUph*{~ zfZzhg7OE^xVH}Q{3Bt|sQXm2LY6jHfhtFVqbUk#xAqoC3_ zH#qei&eEQ}v2p12Ksk1H<_H?*jvcsF1!glF&vV}nIxE%k(#JpX+>wKRw{&~^R`Zv> z_79)K-X1@?wzh-_&Z?9=6@bj|0hPMl9W@?}af3h%oKO&NF{BtPO@ty++>F-D&+*8sEaTTH5F~txl(GNB*7@PY+AVt(KfoHy>s*++8wqol?cO zZF4dUM_>5|fA3Qt`N)I!pFex{ksrML!+9Fb(xXR@pZ?&3D=v`3oMCa^ee;%_I&P@V zXbWx=6c7a6g3E(@jrC%3Dfk-Uayd7M3q)69@!$)`sa8ePf;&Exjm9Am-bFNn_y#0N zU{rIU7F=$tEv_)j4RNd7IB-)zBpRMU1i;UE(#f|%pe|9*#X%ttl)xmR`?SQ}D)2_v z&c&dJ8bq{QX_uDsCuXsfhTc$Gx$V-mA&T~Zo^Yc?JQH8I=(`FiT`BAiYl9yU{`9-! zC59Xb8Y_`B1d8#N8C1;Yvtm6hK~mml8K}v1=5Is(fs3DuCn4&3p05uyt~ZW|thg@T zpK0k&FU*r{HxXMXaN&p-0X=bt+YqFR0H?bns^?fll(4Wr-N z2TvNPG@7bjcOPWlm5qc(1~-|=M)^KeTOtWgHur%BL?bcCOVVON_;aOs3JvjaI8&p+ zs5q(oJriy(78k2bE*@nQ9l=ND(g8z%F0Wbhr&J8?uG26yQs*#QG6K`e1YybZ@>Ku6yiV*7?_|(z z=ki`O1oBZidU-0SI-g^`z*%_$xn_eyXrefLh>R8aLxlIvVWd-VJP%QB;5p#DJs_V8 zBh*#ojdnZu%QU_ZrIO>v-KL4a zay~~uW_tUh*vXSI!Y(ro$L{*-=4spUt&@*F^5iBWg_B?X#V=nR^aqtrt9g89Z{Iz6 z@)W(3dh6{s)dyGK=jk(c6LO(gT!xu*VGu|}i5TB_Jm9io8L(&}Tod@2L}xsaL?aw+ zgJ`DYn92zi7lfbJDrNQl2YZTD=k1zezQ3FhM*GP-vs~Tz0oZyiRHC{lZseCIVd}jMGhpWDhma{{o(!S zb~754quu+Roo#jUfAZElBT|&rloE-F{|yM4&+W|iPbuL_MwvP7!Q2n=bl^lgX+akz3{>l zpk_%Oe`*&m8DIZ5-+-_=RvYVU>IXl184|!Pg|wDBvc9T(ax@rRjvM0#rPx4b&GIY~ zx5FLD#pQwD8J0fb;4y|#YzKX;1lFc}FI)+yl4QB;Yva&SEH_GTBO^z0Bu0wlG7JES zNZQC!K^z~!gJBfz9NbDydz#5XNeYR=CQ8_@AcgPQg2vGHfUJyAi%SwCM9?9ymMc|= zKKkm7yDKe=O(f0r&l7St%Pjsmmlx0=j9j~5Q(T}nT;4bTD}$w$fN(MNk0{rMBfL%4 zH#~KX!Jxo$}hY%Qj;z` z*wXTn{hw=m_qtcR0mKW2!+I}CoDiv|Fdxj*y`Fdf{STI>Vf)fQ`Y-?Cr##PWJ@v%X z7fs7$>a-k`OX|jr8^-QlS6#h&9f!YMXn7bFXRB+Hc^9{4fS3je~XMo75uL&3r;)bdvH(5SCBN5 z|E8|yK*w|G5g9eZxFnH>1*M@uW`q0B1SQGsXbc{x0srQy=LXU!$(P7Y4aya!Mm@cd znH(6gp~ayQ1N@KwSjNID=i=fP2S9w<;#b6WGvRo}8!Al*U~D+4VwNx>$}1}?9l374 zmIp-MHqo?%3({)075Og%4p1m~9e9~sqaDR^iyT#e+R(IvfGvAuYR^Ei8bJ_IkeVQ} zJH}6Ie0PJ1wY4?(P8d3HvE{+ejyuS6mzO)=->*FK)HA2cL2&xBpZVNlM~`iuIe+Ql z^U$-bJT=|P6x!QPPa*FKm3$;*^n(wssUt@>VFW$RDZsa8W6A~OI<7=p!oP51Hlw;+ zpGv()xn6uZ@Tp$wT$6AkFOVV2#2gc*-m_dzBj3j~b(BU|OgCgmfN2UEQf}dYd&n4g z5PHe6LPpd0-4vf~rrOnzoZF(GWfFDks4o+#0!~tA0N_d^aK{qiL&X}EC^DP*T|{G` zVcesFn#KYJ%?}s?kOd@9?1bOjqbjSGH2l7*H@^Kgl z?8wbZ0Ky2B+8zlj4@C(Q3{rVwJaMECIz0jMxPp{?f5p$>`WdF&e_rf`c#13&uA3!9 z+_?l|KaKI-MY@fRjZ%L;N6e#a5OFi81?!m%u7vxXchgkqjjQP#P| zsUcdNQACE~cGbcN^~NkvLpYeMgrUhi7lNOQ&99ULiSQ`OngRrn1-t;9ESJ|&piRIn z9n+SaB}M53JQK-z*?;PVjGTGG=Yq=m8t9fRQwKF>fj9GrqA&st&(oYM*HO11U#`u| zGCnNZG48cO`GNYe<8Kt$s0x9%@Va-ue#}^9NwOjeHDuk0d>#!5H{RRti~EEvN^ro4 zR}L}^)JCvDnsIQ@6@xVMTnx^@zKN);PYKSTp+C#i*RDBcDqlR1d@p(cNM-o@FJ^p; z5+)Y`g;(C+_qPuYD*RckTyB?IE%UyI9=dSf+5499^|{AC`b4MIUOHJWRjm)MUNzo& z=RI}n#x2PnOkni`++ej*L7s9V2+%@$hXN}Rgo0><*Wic=tXC_6I_yEIH&e}($jR<* zk|y|?=xemoC;Z2qmT~w0Vc~2`xSd8jTeurhj;DH#YtUJTT(m3Ev5bN;!SH90HeA~g zM5C)Gzf17@L=0+W!oiAkm$>&#yJP+@j54`?@+4jZT`b?nEDi{PRybC^u(c0kIOATU zGYh_B{Fp83i!>JZs^7sZxR|^L?~5q3ct@d^;H@wsR&UWDXb(`?_5tt zwNwO{H_kE#Kmv}4!i9!WS+jZl+~wXC%bhunM#( z&>~;#!(!7+?Y2ZK(?1dSgAJNYW{?qlaee%3x(vDmx)Iy*LCk%igD3AqLo0q;QgPbV zX}v6oX@DTr*-ZAG8kpo>Q@TQCBXG^35?4j3LrWxun-xyFFcf`c^87=@QpGi!hEb?4 z`oBL!v;~?eSvO@ZT(oE(#cQ*>ZkW0qV_u@!f?rm_c<}j(aZjg4Hn| zeonb0le8PwC$%K96@Hs*Pr|%)p4$>^@IYtyc#~EZ<+A3y2OioGhWwvoe8+)w{eC~d zVh6c5^LBQ2t!lMu!Fty||Aj9-fARhc=f3!*7azyF*OpgStB1ppx&<+DAGz7_SQ}Z2 zYyiuR=!9tbGZ>_kt3p0daKl|O%Dga6@{H+dAQv2CLCQ?f&j$kY0{N6C?%5%Vt~#R4 zWc_7B_46C8~PLY4o~winTx!@4H5LRwd*0@Vg8oJ=Y#iA17r3? z4B6DKi8)ut&`84fbrA(aG>0^!0}moVv(ZquZv!Dl#&%jrll07e<&=|N15Uxl?cIxAY>+sPS;4HJ?N#P*V&RwO(mjDGVK}# z@hG#HI>*VX6+u}~Z#+3+zIY9d&e1ilydN#!AUMGW;Yi^cTp{wdos0W(ao@J7BT&hs z7QsU*Hj-(>E;Eg|3uMnfbfc;;Qp+@docQsbd0-1!M`T2$`2_7|J_{w% zU0GfM3RYOnDqe=~6Zj5j&w(xv!}l4YT~Ie%JE(?T$V5^Ip@eGWh3dfX6{~Zo24s}I zY$=6^S$YPK_h%a4Q%^k=+<5m!3rYI`h+C@F+HRv=JNK1e_=O|q&z*nq@Bh8Odwz;2 z7n^Fle)$cEs)ul`$dAI(CqO)&5+>NG2MG|FlGKs!c{)P8PL~}ikvb$ArF2r%hOt1g z47jgC2#$byyzyK_R-L_&%86pprLag`*CO)MrBS9Bt0_p3n%V$!QRQ{;68II6-@c@q zN=TE9AhgnDaG@>aHEH}IBJ)bwhX5OhLBx!NA))X(M9imYVexC#iYzz}S_RikDTc1t zM#_vvCq)bJ01cL?QyiLl`GtUaM5G zsz@uEI@seHu#-TF8(>Y2=V&fjP=tl-L>F&iU8T4o(-O{~YJAVB=j@$3J1a<=*of?W z+=%~~&wuv0pcI_>g|GbLr%?c9cwGSGVmR|FQ8g(bTFkH{$do~c5DQX=sGX~t(>D_vXa z-tLx4jZ)|u!P&3<TQ@YrKeS*KdeM#}8qBTnLoQByzM=WF$rU zM=uz2qN39=84t7zN+ppixTqw$Q|NplG&~BNwyBqkn?gbx$1_Bo6m>Hp_jYdU#a`q9 zj9emARfxmnOsrIi;#5m2wk__Ge@lHF7K-`IcB3f)N25_z^+pv3s4K7GV$#zwbtQ)f zC^w#j5{0vZc?fhA!5N1tE{X`~Sc#V8gMsUd`{cc+ktO14&ORfcAl+Gx`(Tj6`>~38 zIUOg7;tWJ|wL#;(=H!qRwjF(4N-czSC22&W9=Dey-gYbzuz3(^wB*DRP1765p6iVl zm#m6lNom2n(S+XG@8iIvSc`^2&PmF}Y?GhSq3xW z6z^CS7$PG3MCW0dVaRfAC{__b3GxAPDdi9;<$z&Ly;n!n*qbR`O2%LU*zc(&dc zOG<-M&6Duo-P10nl&-*MT^wNH#hEU) zu&}PgjD_Hz{Ry4V0ME0&>wkCU*}wDgN4;wB@PGe5{tutVi;m(q+?QVZt`Sk2DH>aN zbBlU@5?m5%9c`IKiqQacS0N~e5*7K_lm<)S<|3@(oE8mV;wBX-A-p?DIXIJ4@Ot5E#qMNVqm9E zo=|VRF%Sub>qcN(_4>Nc`h8jK#o8aA%slOB1%Z3B%BVM3!l;mKN2#CGr<+4n<~y z6i)=4iW-4{69I(((6u_0R&t4INyy8%N%AM&z-->fhO;unhXLtsub7R}x#m7}=PVp0 z>egZ0JRlJ^g9{OYD-wyAu1m%3JK_SR+#4Ihmd9>)2sc?4*PLeBC9xZglFbDC#_=N6 zTxuu_22#a=@PkxzDsi!qDaj*#wo`CQngjEb#ty8c)0F7_(A3iCyW#7alWh#1!5waX=|NOkkl;D zPif;OorsNC4ieP{*6tC->W!KhIgO8dor(cgrKxCy!)*frSsN*b&d~uHbx<0i&?&4r zy&Cs|2a;gR!rCNZUyD)L%01C;r?YY9(*5VZ^yR<*i~ogR3eIjGJL0|k^2@sV1B=&c zH3eA&1u~r?Nn+hrM_6Y)L0*($G227Vrm&VVgi!mh%_vCxJQ@U(cB~#Af`$)tNgQb`pK!7E>OduI8LkAnPgU!+v zE?FTe+YFwh;8VNG*ua4ko|8);#0<}TGAe=r7#;*$zXXGgO&l&F0ceA56jVVQnggz- z7=W6F2lpzFiGR))|Q;)&5cdniU-R!g=gFg zmWwG5b3q|43bPp&PN39pF%W@a+BgjkRLMBeW#%iLj+CtPbhZ#>t#;aow0d&!WuTuS zy#j#*4Qi2=$0^ltt#hvYBb$Jm^05H|^F=_gR9}+A!P8CyW8WyH3A#NVo*4yiTrUx) zUM~rE3Ce*4BV~Lh5orWNW5ovD4H1NB$@kPJ-6(h-4Z#(rL48Z2I~bP5UR-X3N8K`! z-)&emH6HcE$QjU3K9T}e78$VX46c+J19IWTCJKVFyq(1i#YXae?xJF@^QbI(1s+QT z&oyB-h{zs`OoBZy6G3Wjml!wJBA*%LJK}yRsPkZh=ZolGD*JMHnTKY2jq3nuSUei( zi0x!jh8E6eBGb^=xn^WDG(sM7enn;^#!jGMU??d^TNS(;2Kl+qeXg~;z5ic5|A~L_ z=z|YF_>nk^#doslW^HY);C2kl$Jn@X;Z`+?CwfrJG72$NteMrJiRLeoj0QR~ne4@$ zT$sJ6gaF!v)3Fp|awAt)R>kn9SmUP+ri12aS-th=#@J zn}>j6C{sZs%Q{DC%c<7J?%u60p)r=NZP=k9X?&lrwJ5+F$5gQ4UNc$4fK zC3LdeNvEbP2`+fkY#QdxiN==dydM3%F5EH14RRyJ-6p!an6S={E{dD{`54B-#nSqi zqi+feUai%{T`*XY8aRV8icW*E42q|S69E_jFUYSiGLA29dm*84Q7D0Mfw`${aTNUw z2u)d_g~LE$nOrTRi-Q4`t7QprgopzH%N2Z%?LiMbkj>*gm+?77M_xOvnJGrPKu;3$ zjzr_+wu~BikQ{N7g&3PB!t-oF&{RsJxJg72t{u^b!I->{=!mZTz8sp8)(LelZ=}Uv z8l^&7J& zI+Z7;+o;ryg+q-pEs=1sT*ue^uV~C!2$XbyNnwy8oupb}HzCdK5~FDqO1aaxisy6a`UoL8gef z8BK`Cbb$@0A#Q3xhDjM(t+u!c@}Y92CT)=X{pF=)EZ$9t!YPuHi`K9?Jl&lR-VZ?p zM?>6y@j)qk9Sz44kg)5GM$UWYAs7uuqH9q^W`IG?QWJscqKPu(V$$C`*OCkOKqv?42-cRnPfz1B zSOh&dgz?No`f$X1ErG}O1|fhUl<1%9p*@W$=`#m=@45jFU{xd(&Z!}#qsEX?I8HPe zagR0c)ma}>9PR@>o15w~dgk=WKglEQU;p)AAN2bXry)Z#ofWN8#Hf?fP77b6w4z)4}W7D;2Z z4lI_M9RwTeqNI~!5~A0SY$CG62A4glU|#4}3^M3e=^DjIYE=<@C2K(A$M2Kyx)xEj zrjk-3pHB^nZjvs7S{w;F7q>2M&=CU7Df!qU%_rFr-F%c3eGzo;v6S7L;yM`>iUA>tPtuw09Z|aUpN2z2mW`z(f$L0= zE9c>M-As^+_d_`on=B2zecmk!Z(FCxZE2xu|Gy3&Pv*YIKv*7HZk*&^CD5XdR>hh%q!2@B3;3qv#F8zdaaT<( z@;e1TZhejQyuILRKM3(T|}`LU{qlg%Y8H(6*)-EK?fyrTWW`tWSVk6 zKGrZ}|8Y8(z=N_Y*PWjiizigFe}agKu2h;$Ne6sMH!5;I-pnum@-NeJUc3MP`~TOQ zw{Cs)zx!|hn=hO`eP;dG(W7#rXiX&0MT<(2#keQl6$4tFgrd@k1;BEPSZftilXL;5CGrf%P~-?`sz{fy>P4c~ za=C~;Q*pO6ob({o4c)0ubko?*oIb6tynjVp7mcGx*rFfF)7{Cw){X=9Yh+ZxZ zLs^$l<%QAXlrg8xLsKc?`W-zYj7CqSjIe%uU$!T5GhDcF>S(@X1Trba(3K_Nf^1o| zbvjRs1L(uw;q@|zVnomPE-f#ML6K@8)gbxxg_ulk-2`%R4Qn+$>xHP#jVBkh9IeH1 z7|_n%fzo2TQV077y3jMH-dYnbY>1X>sMXbVp#z796InA3FR~fYg9?RA$rT5U`z4tb zOY6Y=9GZojrG*DIg}x=JDYkI0Zj!zE=9~WxUn58zy^lWq^v{3%;~zh{wzgUkcjxJg zsUZNMVK|CCYJA#eK812V^_5bh$ehi7rD52OJ$OQ@fi$ z*k$uGGav~>Vq*B%K>I8XpR(5s52RM1xUPl`;?4gf&4LkkP+o>cEL@8N4ncoamc)UmiLJA0_Cc z%%S$XJwa`L-+@A)^+88cW}Zz^-jm@*i~Q;YK~@aOD~v*UU%E;1Ko96mufqV2h)i$5 z&xwoTfJ{_@vWQ+xy^$yLQ0V+FqIcX2JM(0!0gSRyaPCD_k%-N5U(AP>@E&uZdioP{ zyO+QIJHIp8+u0l8=AM1}>1UpX-d4iRnG76OAc^pVz&*=iSV|{~#r>LEWc?HNrxuuK zOQ)9ZBc(G>bIptsNp#Vv zunRH5yJhZ0X?+u1kBiR#rm>ShvQv)I3h(RY&6{#<6)g1Jjth=usne%UsHM&i<+E6X zz-Dz*>f#JRS!vv6ty-K)DLFYA5ujYE2oDtmuLeR*d>NS*iNU2=6UOLCkIHD&R}&Vr z8irJVlb1>ng&1C-Gcc)c#ipcV6yqm&e>_yw4=IGx5G0q&I|+5chXjg>MH-$MDh-3Z zDogEU-Qx^KcIw0l0Sb!cj;y64z0s6^27`VmUB z!NIOvLsCpkkV=}OsDP41nW;3Tizia464IT0QV*A=MSrlaQC#XQ3D4s7QlcTkiBZVf zgpze4O3j&#qViztTF5pyr?fYw+N~y;DQUX~?+-?jNF=Q_Iqn6i2929C4ZRWb-wYVZ z#VxC-^l{5_jieQG2`t&>I+yjD&2)*?l#(2E#6$-?e_BZu_G0?>yKi6h_xs)Lk3RAA z?w#$O2R`-b=buE#ZxLNyy?j}19_SGh$BrKrj+N!Q9gyL^ZD^xoe=eh4W$L0)vp_;| z5$eNAZ@Oc;wgl3IDvT?Q_1rl&^swd5kTArMiV>!+Sd~k{&9ZL>7mEo2Sy5)S7-+*I zoyf-N@ngEm#nFRsaNV4e&^ybKhU`nQh z=|&oIDq^$JeZlO7b$xMRbeAlqpa{*88N4@cs6MDg4;wW?&y{Fix<4|lnM$3Zka=9= zY%Uv0D&%=uOy?Ih(b;TrcTM>kE$z%D<3ahRRyKu4)1n9cp_1bLOc(q%5WsM4$m^(s z8UhT4j7_6F!#d2Bm1P7RL#*9cCY5r8h-6hb6bafNr5N&9DiYL78MuYg^N|;_ojy2e zl>C`x^vLS;u54eM^nQ^4U_VU%=uMp1?Mn|_dIIvo5;nTDx4$nZj8n-g(1+S^6?BUY zXi8aT%V`{A0ra#bxVi<`GxfwJUlQ>;hPGr%Qm6;cDBV8DY{w9~S&C>Xk+wa!5ax*E zOg59GJ&zqVUNi>9GO1Gv86tUos(TawE{w?1Sm#FBr(1$%#ZBi1aby{@5G>4OzX{WN zixC;=JQIzL89j|?N)R^iY>D_-OvaDETW~fzRtBSDVeb1v#3S@F?6n(Wp96m@zE;!;3$>r*RO3OSvmW^{`vp$?&rr} zI+#snXHT9!^AtAO0>|)f-neOa(83Pt2Z9!Bv(>u-qv(6&NM_MwL)Yl&K|Vw*-NRss zL9ilMMw=B~Tii6(5LQ^NC4*)nDQV+GIGGT@B5>c9&5@V~FjImI!p|kokVfwBjPV(O41B8m$_o7&Y9!58J{W>GBaNO7FLHX-$M zT^+;h0dvN=?kW*xgsgJ`rAti@f|Ozu@IE3j`7MQ1N+9g(*oTXz z#ztb#A^|>Wft-z-znGX{njex1ek+KO#NzH{oLZ*ET7Cv~OQtlfqMkl0>J6E-NCk~` z)`Yn;qE-|}MP{ddx2%i-7qvcK1A8l2#7lR_f0s5+HZpNwkK>5!GzP+_MZYea09=pH z0MXUPW|5aaM0C#TXu8lLI5hQ5g2Z?nBH*kG!kLCnQF5%Wt^-I#tY&!}0f$k)(4Zpg zp~vt7al`qaYkXWuc;8+RN%zFC{PJ*r)PL*n?PT)553eq5Y&$tddoBUY`*RNY7jk|*-nO?JGf~O~e%^_zt^Rq4OdUfk%E^diJ@ghUO z&OSYoLP-rBXVLI_n5JS9Un#xekrPSOsOtok^i!vI+2|ZDeMVAsa zdAb^coGcQ9NTs4=Yx}n3{su_TFao3z@9piYddbn%Dl(xgk@2eB9C9XZ2=jd0fC&dR zCUN1;GD-8q#iI#m2!|Al(@YKm4U+#(jgER8ku#M%WhNz1Qh*AitU<=%X9;pxj;^ay zw(e1of!E9>w{$)=)46T(IjNvlnNGmd(4hnJx+sruq9{>m$Ud0yQ1aZ2`uVziQJ|4! zGU0*lN(x|Q=5vuh=X_&a2iJr}8*JW^!v(|gq{dJqv2@R|+Yjh7M*8x!XOE;Dc_Y z-yf*iY72qIScOKc0vwwmHjM8>A2BVeQ`o|n zKFnxq>lTvghkCjuseq}6gR^|X_57l0BoVh`QMARrI~+=4~mtVsMokGJvS4;?jM`fI%J{9Z+dB zGYT=6pSh5_$Ws@i+W0@x8)}T;>{7c&0Y09S0-0E=LoLs+G|Sc%->g!BPf;>8Rj3M| zyU~}iahBl=+5MRtKf(Xf+$_k(22$)d_Dzqm%SZMr7$dApQ!tE zE#bSAEW~x?GN?2Dff)iF?&eEt#a&NK~mw?Lxwtg=JOpbmKQA6^~;Y zIQuv;BpCT{%)Sm3C`0hIOuzB;N`0HslM$rYpm>G_bI6OL1hx}0+0G~Pbb+?qJa+Go zqnT8o$O&eXb*kMc=gBZXN`#@pbR6Pd`n|3g7dbi~IzxI8fzQU$Xs*PtUDy4oj8C>sY4-~=9!I_27$Q++ z4xi{*S#r?rMpn1``hU27^_|P_UU}#G_cxC;AAIQX$A+WBHE4ln>R_bfM!iH*dIwU6 z-ZV=h-Ey@AE^#P59u_CF=cbk|pc~RSxL|BWr7K{+DSIK9383*&6I^IYs%VnYXkutd zglL1HhB60>0eq`06FKkP-V(mTX;eJH^C*;Z_|TrJGEkEI&?&n0_ICG#kP{uGlnU;N zLyw{`5%=Rl`k5Bl7(H<`lg&!vsc4lF#27|VvFu0-A_r_IlK<50oJ6cSA0d!Af^dRH zERc|KzdEhAcqT`Z>QNMWPN5#5p(j7+jneZ1Gl_or;06XmOc}C8aymoc;#G9t^zeOg zx6@gqwzqc?tu|%k+cX*=*XxO#MAyuLLSZY)LhSEm8_y4WLdU!2SKcYBvy-O6ON5 zc|krKgF!k<&&3N%2bt1*L~D7u+PQOEPCnhf?d#e%8VYOoLKxuTC@hL* zbD1(h++{t{ZJIcnm_GB)PAXpe*o<}m4Y*7_1DMgWr zBJrb{RFmjQUZfIvG1pjEHfuDL#}_!h{7i~6i*X?`04diK3}nEhsqT(flZJf`T+LU31{WLpE?hwgM%X(YIAy$!W89cN$LQ+8Eu79F*%x z`@D}dXWA^)nrog4-%E-~SX%y3x*vyp?>__i{-gok`!{Z}CkcqaH0My=o!D?^TQ}a{ zf#}*D!0%3m!}U*o`sd%cdhOc!#Y-1I2f;Q1uWA8@4|woB^~6)w^{s0Zs0~gg%F|G^ zu-Pn4l#nfGGTs~<=#XHsf^BL*p5!F>q$>UNuG8-XN=hx=4NGEl1u^u z5_)brc_%lL^=47V<`-R@%7O)QC33dqhBXJyV9F!!SK9GRsU?SniaxA>7CPvJz<~sOp!>@^~&5H84Ww&~8Sg6L^B1J9_dz zGaJ-fWyT<>66KqMMo4cBgFPk<_&s}uWxlR1IAvx_rW^8MhdyLCznuMLKZhgM#wUNr zhzjA|fP|gS+{cbOQ4;KIZ};a}*8TP${K0$3U#`CO_S^5kwYZNy`PAcq=WZPA>{%Dj zU%Zbse4WNoHSYJ7XCWA=Evdck9m$qZT+XI*sSV4D!Fw{@%F-SA)S;xStQbNh-BLLh zE!AlzQ>Tcyzmz^m@X49zE;);juO|;<>dAFO$;s07v*>cXJXV9@K$SSBj&lbyv&d(A z#ke=kd$d?fk{!x(LFkfsh!~}dWFsPbC^8EtJ_UhSRDI~|M_!23G-kS~%*jNAmT7#P zSz{I5|JefFi&@Z;tkL7&$cq!{nITd++5=>|K`4^PmqNIY452pEMTz#;uiuc|t&GFv zBmzeXWnuc!35;T`GSLP_z^7EE2OsJxcBSX<*+uT&TnxW7^^|^>{my!>fc01L5EvPd zRD3ba0+~CQhE2$H^HL0f*YZ<4*}t<-tnS~uz5hex2dj6swq6OU<)h$*)uqnzlk2N% z7nWOX|H!d3!S(kp+m%|oyuNwbi06muVE;;Q74XY5E6J7X9BNh`YW>52P z={_v7DOnNK8bx2OD|!A#p22&>`e{m{2lBC!wk|ADQu=S+ouRXsnQhyi)bjx}((51G z9RF26du<`lWU8;yDOI^CFMsC1v--14aymHdR`kZ@AH3|88`oeUwSV(_zxRXF_nrO3 z{@$*G8(4YgjUQGvkFTFNeRBOwIP(zE=N{aZ!J8MwKh;Fuk%HG;SJ=o1TT2fm;Ye6! z91K?`DUnlAbF1TI2M|bQq=!sAsO!2jL%UI)d@f=i=u6~d`S_4&DMq7HYJIURXsPV# zM+Pu$gpILNpbYb$7R!UUIhhc285_qOCpAPi5K#(BbO}0%IUn|CxH7|D_#;c32%%9D z->v17Ma}gLYE{$-rHj0;slVsFa7^!_x+Ru!>$#Ndr$vww;oqYqlcAeLHlniVnw%RA ziZToJl&jeshjfY{YBqvg#L~Hv7&~kADt@(i-iJ{(zKYR8oUwPrV;bAX+@Y4AU?RLGAgt1*N*NtB9fIYAVhx>H*cXSG;xZ%8b z%oVwvEu*@SJ_2c$-c=f58p-BURMq2phq4LMW$&0W!-SEr9%yLX9mK=T09|LLqFW^S z`%@TkA`j40va#fF6XZwfa>c8%^j@A@0oM+l(4*1KbY??bk)($8q*WRRjj#w-HKG{B z@N+I;q9fP5D7#t=gOnjbGO+2x$yYK66Fcp(HB^vKiQdNRU{4bzE;bQS4;)R$V$jlI z7DpnU-$8`W1}BcpV1SpVS{$d5G4PTa&Z6-tH#8sQLCUQKShFRqBp!#&|J%3jnD8p; zU-u(VKWGQ$Derk=x~f+<^EGk!@=AK60EgaEg#tCRqL%_ZDUjI?Cr=r zWR^lnx0kB~`D%@8;xaZ@H^I?T8BxaPvrXYL*|u4!HYD2CD1w|SqSPozMZ%y4$Gor% zY0S0TOLI&5lNpfE)v-!=Jms0QbufSp3pkMhpKbd}o_%4;*fUdlJp4jXrjbz!V!Dtr zjZB0`pu`7GJAotUMZQT9p2e9Q-^L{+uZ`SDt_`20XBdjnv#C6nXj564WH*RhdwZNl zQI!G&nF2xNvovgRE$GIXua$|fFz!mZfzLCG2M*drQ+uojgma>5Z0a!@rY_y07V4EM zpeI#oqW$;YfA9a@-rl?VH~Ep+hKB3S=gpa#RJIiO+{TYM3&-iK6&yEGWrz7gJgcb~xLHbbvt&+wE;< zE)7GTq`hc7ZdR%cO%~S*y3cj-YMAS%h|B0Tpy%q!x|WoHo(>K#1OR#RxJ=|XY`G8p z+&YbZGCB~3OEr&&-Ljck%4SzTxbp8Wzxvwuxu`!2#<%!$ukkISWuZ6BPAL(u-(=>yXj?FSm~%^A9?uEm1KTy6rtu;1qBb{=$F+LH zT3%YSd=O_G=bRPJh*%BkW<)2ce6e-0Lk&p6tbi1{N)S|Gk4j#v2I=zhYVNz%+^Sb_ z$?VOGre%bI_}0wfySeY2Gs%e@2y);k4X08oLjf|NHOKiI zSHJV!@4bX<$J^>>%=qs8voOTuo}W=WG&w9DXO7oxJIkTfyBXSUE11qEGs7uMg;I`) z--l7{bAEdFMm8IczJCRgpi{5ZFQ*3fW7c!pYa5MkeDnWvnw{FIci-NQ|LwQG7hQh& zohOeSJH==18iD5>Us+jA%jFD|u(k63`&a+y#IaM2TBCk(Nf|2e)9f%?~FU`CLrAK@7&po zPn}%zj;yaC?~sJAzy5lB;oSXB?{F}?aqC9jtS|YsMhQTdmN{VxIr40Gw?Db^?zQyz z@l`885;YEI{wU1yqnj(%9E+g?`A3tKi2=foF-!hJ#Sb;}x`g=QFSd|esT1)1w zTeri#gZK$Ia{$}O;`TI-?(MBbyMd@|1jMv_L=f-$6zWMck{hfb#d;j*2#^Yogi!%FJHNKzpXMu*~ zha^zO&71nsv8p!{o;cf+|3=0Z(pG71x|#2SyBu_Phx|QrOO0;g@3>y~g6`L!p(W*O1XldV-7>E)*CJ7{r8db?)9&H_q#9sE^lLN z>-H=NoRJ;J<|t8K^(7TAEjO`&wz;*nZyr1LRs^(&0a`MY6m)6^NwLl#vqmCireNbec&H#W2`7Xg8ldAV7#9p5yf%(g4mojctWsZB2$ zQ`B)Y=!JB94r?)4I+43b`$x>yss{Xi((bI*AVeROOXU;IX2*wawo`93R+A)j{c_+P z9v=2KH#auQ)pGmR&6`_Cj~+d>x_PYn%B!!wis<&{zx&qj_muQYfjOkGQmv#|i4ln& z%7D0nTp-w2<{2(CW=>*8b9c^3jZ%&eX(`J2dv+QB!D=PLNa_$AL)M|;g?z$&sZqA4 zgGoZ&IV-z%GG(2Nl5&tzr9y{^<;bBATO|ZD!wVNKoI%2U3F$-Qkw+eWY-?-lYIkpU zxPD~)+&}%N|J(N;c;IXg6yxFb)s|hZR?YqHVZ7X^EX|`N$3ePrWMlPMP - - - + + + + + ); } diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx new file mode 100644 index 000000000..6d0f6b621 --- /dev/null +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/ShellBorder.tsx @@ -0,0 +1,21 @@ +import type { ComponentProps } from 'react'; + +export function ShellBorder(props: ComponentProps<'svg'>) { + return ( + + + + ); +} diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Target.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Target.tsx new file mode 100644 index 000000000..8e3b76920 --- /dev/null +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/components/Target.tsx @@ -0,0 +1,22 @@ +import { Box } from '@radix-ui/themes'; + +export function Target() { + return ( + + ); +} diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx index fb104c7d9..ec1e73b54 100644 --- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx @@ -5,6 +5,7 @@ import { useEffect, useRef } from 'react'; import { Var } from '../../../../../../../core/radix/var'; import type { StatsAcceptorProps } from '../HullTraverseVisualizer'; import { Shell } from './components/Shell'; +import { Target } from './components/Target'; export interface ReloadUpdateData { reload: number; @@ -15,8 +16,8 @@ export const reloadUpdate = new Quicklime(); export function ReloadVisualizer({ stats }: StatsAcceptorProps) { const reloadCircle = useRef(null); - - const size = `${stats.shells === 1 ? 66 : 58}%`; + const reloadCore = useRef(null); + const reloadGlow = useRef(null); useEffect(() => { let cancel = false; @@ -46,11 +47,14 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) { const handleReloadUpdate: QuicklimeCallback = ({ data, }) => { - if (!reloadCircle.current) return; + if (!reloadCircle.current || !reloadCore.current || !reloadGlow.current) + return; const reloadAngle = data.reload * 2 * Math.PI; - reloadCircle.current.style.background = `conic-gradient(${Var('amber-9')} 0 ${reloadAngle}rad, ${Var('red-7')} ${reloadAngle}rad)`; + reloadCircle.current.style.background = `conic-gradient(${Var('amber-9')} 0 ${reloadAngle}rad, ${Var('orange-7')} ${reloadAngle}rad)`; + reloadCore.current.style.background = `conic-gradient(${Var('amber-4')} 0 ${reloadAngle}rad, ${Var('orange-3')} ${reloadAngle}rad)`; + reloadGlow.current.style.background = `conic-gradient(${Var('amber-9')} 0 ${reloadAngle}rad, transparent ${reloadAngle}rad)`; }; reloadUpdate.on(handleReloadUpdate); @@ -63,19 +67,7 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) { return ( - + + + + > + + + + + +