From 4aa5dab94b0368553adfc8ce813f10c8b7894fc9 Mon Sep 17 00:00:00 2001
From: deepdigger <hannes.reichle31@gmail.com>
Date: Mon, 29 Mar 2021 22:44:06 +0200
Subject: [PATCH] added gifs for eyes, mouth and character and included it in
the js
---
client/res/.gitignore | 5 ++++-
client/res/MouthsAndEyes.gif | Bin 0 -> 17440 bytes
client/res/pi.gif | Bin 0 -> 11245 bytes
client/res/selectArrows.gif | Bin 0 -> 6839 bytes
client/ui/SkribblMenu.js | 7 ++++++-
client/ui/SkribblPlayerIcon.js | 30 +++++++++++++++++++-----------
6 files changed, 29 insertions(+), 13 deletions(-)
create mode 100644 client/res/MouthsAndEyes.gif
create mode 100644 client/res/pi.gif
create mode 100644 client/res/selectArrows.gif
diff --git a/client/res/.gitignore b/client/res/.gitignore
index c5d9347..25eb906 100644
--- a/client/res/.gitignore
+++ b/client/res/.gitignore
@@ -1 +1,4 @@
-*.kra~
\ No newline at end of file
+*.kra*
+paintnet/*
+*.log
+
diff --git a/client/res/MouthsAndEyes.gif b/client/res/MouthsAndEyes.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ed5240368cc9437b52a811a0ca99afa4dab1390c
GIT binary patch
literal 17440
zcmeI2iBHpa7{-eh0;ur-ITUe#vO<tSRpgigVIZKOSdNwZYD=pkj&g3O2y#^lSX-bJ
z1<KU|rLdJyP|y;D77^triVRv1<WQy{BBJYb$vU@eF-uH_;rsg!es7-d=Y5{{eGfX=
znVJPC%D^ED5+exsKm}H81tbtH$r@){SA>oAQCqm7(Q27@rO;Z0%0eL$h{5}^yniOi
zE4Du1$3X?&y##p)M4|w-Vi#D)%PZ-7x3dddk~io$((G%BS_x{qaf2y$3);?W=xkbx
zef|ZX1Vb>r8FzyYWg1Ah7au$ywWq=@M+W(%k<NG{RjMmi$?A5lS$ekt^QW?&GKT;;
zl<9nNFB68*-nj)2>&UY#)a2wU74>H#x-JDXg}9!?0FNnUi#ok_wp$JEiQ*nZPqxQ!
z1IG&yCaAKQZ-_(IRr|N9tzJ!DQx8X#_^hi&QPtpWjXE~XozqeDUVb(`P55T9?C0);
zhov(o@S!$c>brjoJ=q;8?5<yU?Q9Uqv3YQ9qvRH05I-p58Ml-Y5U1uIH3pI13UV8w
z${MOAl1`S-*O3#$JsDpyuUNe9eDtux(lV~;?b55c>EW*CW{CtM2NRuxs)UH*<#o$N
z=hvD{h!Qr~!NiHm?jhm}YUpxtl1Ai&IQfet*htC_O2|kmthBr+e7>sPkFY+pZ6s2#
zZag6UNbWv5aeYne(08VFP)#?h+31`sRersuw<Se&@cXP1SyYB~w+YJDk*7MGh47su
zUG`PHP)zD`Q}-cyP}Rqdwv4Ha6ODM>lDu$3<R$92+I_nD5$3sLv2iQ~U)tdrE;>5V
zd5<oQC}xz?@h_nz&Zn9ZCr%`sU;Oea!O?XxJ5TTm8&Dk)J6ImW3(<E=s)b=ml!lZ<
z96enQC#)>cR>ZRE?OK)mT!q4^LULz=e%XNmDzoPL6;F(R>a1r4MX+k%3B6pC@HC%i
z*HM8Vm=TO|?#FiEYTL9GJULftb7$BnT%#&y!gJ~5HP-b;2Kf;>jm3S;(?>U7fTMTa
zc%cakJ2uL6Fmio1I~~XlKX7;(&)d23`7Jp)=zBOTd;n)-2oUE=7iZG{FHUb4tKWTt
zg6yBZ0Z0>Yb2&*9P!qKD4_Z2qCUBd})NKN30%-zi{#y`|dQE9VSCIL`YbwhZ_}~2J
zj2;}q9=(~qN#>k}Lv8W9jDBc~Ydw7I2E}k=tg`xUt=m-7@W40qnHT}lJm59nj8uAu
zZtthKcYws;XV|!`db^Jd>&dgk+Bxa>>9~~{+$6r>l7sItee#4feni#1gy3XKXFH<e
zeobWIkSsTXg{(APpmMmbED<5%DcX%$e|#w0y=xp=dCYjAJUI%tGY2`>PdPIwbemE+
zDWZqzbv(KFYS*-|z{$gXYtM17V#c;4VNT;qr@rX?nenOxlYVYXYO{Oj!+l<(cN5Z_
znoh^ekC!kG4&TwRSolTMLXcqA{%~z^Zlb5cudC_$(!#URj;lwS|6@k4K=x-wX~;bm
zI}8|mJV18sCyyjARYiNpoF&V<APs#zdToqmQTJ1Im@v9+t$4mD+0q%0Bx-Hu2l-q7
zO76|D=TUMl1-M{?GVDyuw&HYfSZ$2EJ60oQhh5CJ>|=rad#3`rO@e)Wc}b;s<rtJM
z(XEw{OSRIB3Az|ncMC;2dqxfxleIrLs9<B3Sq^^h88jv@#ZiDkWWUs-1!tiI-LweS
zH+nH)v5Mn4v74u83}`%4uYzoDKc&v3r@g#fv3Zh<VP1w$=~Tus6TPyU&}OKd26XoJ
zG@36%k8~QfWs=PqQt_&BV5aHi=Lc@}PT9^Q``3oXA7^nMn=5blYsLoR0^<7A;*zFh
zATA)TPc1Ic7C~DCZ4r1b;JJXI7bgKj|93;LC{2rCqq}l9x?sizW^7=__R$%eG^qk=
zf;$*W1E40LCZOg=sVN=70BQni0&0T8)@6Ixx-1(y*ouIy2-u2%V}Z}+SU{SR0l5IV
g0J#9UJ{xjLlPVw=AQvDPAQvDPxc*()*S{9O0f+Irr2qf`
literal 0
HcmV?d00001
diff --git a/client/res/pi.gif b/client/res/pi.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7668e7fb1c57f3b881ae79c99df6ce220e306505
GIT binary patch
literal 11245
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
literal 0
HcmV?d00001
diff --git a/client/res/selectArrows.gif b/client/res/selectArrows.gif
new file mode 100644
index 0000000000000000000000000000000000000000..471bcd941529067d0de354d4332af0026e3fb021
GIT binary patch
literal 6839
zcmZ?wbhEHbG+~fo`2OF3VHAvpz=#cj{|t)%x&2&2f}I@$T#fV$m>GdVq4<-9m4)Fy
zgAOQIK-r{y#D>qP$45f|m=idTF#P9~@tB~%z`!c3B~l^q@K8IKv{{Qp;3DTPeqFgE
z83B)7`($mK{yZ;y?9nEyI&X_d(Ibzky1x5LIE9tZ%+k)>)lyOX+;fUrq~06N&(9qe
z$vZ2FWQDABp5rjxDOc+2O8==oE5$^*Owt0^Mwhb5{ua%N*c4>$XIdSS6TQ{$rrX@#
z)7IVD8GKaj>Zzi&*VlynK4zP}edU9LEqmFHy$a7voZ#`D&$n~NqjSeZUC*^d&s?5%
zLRFl3+n<{T&rZ&LU!=3!KmnAoIl&nll*^5Q8JmIQAlPFC$R6VadTd3&BgZZQ-8i7f
z7CZN`*ycUa_@wO7`9Gk^r!z?PWT%e%yq1?n%DywSCGSm%EL?taj-hN+%!*BF0du8$
zm0T^pWE@=P7Ohn(6{6v{(qg5Zu9cv+|60Y`V=-LU(t`ROPuo4o`uga~rX2gOQ0Z&A
z*EVLp<eM86^!DEF(vw+#xh)FrEpFMLXS;ev(w+G(yT!_EKIQsv(cbH{Y>i=h{E@lF
z$z`{$Y);*!@5sgi_7y9rxEgl88lG`A>Z_rXui$ZI1THQ1K#ReKCJte(m=ggC4ek8W
zO2A_9kyDqbuGNu>fX5D9{}rluP8u$DouFb}B{DN8)p?3W_@<u9LbcNqHSO>Da1^Vb
zn{C2-%cQe-@u>y6y}NW)g)Bcg&t<0BT&~iUA<NyB!}dmPPCB_VM%3x-OXHk_8=cQ~
zeVt{vHfo`4=B`?9lUD(&eO^C0JM&A{nN0-;|6SRAePu##J)?h0^bYN?BT5sERBSe-
zJU+^9`0T3A<jo-`^&R(5l`u_oKrQ};i-+JP-*EBJXp$SvLjzSPK-xt6h;9>ojQ5<t
zqdrT<GwA8bY0~jcHkzLmeWz*!A3L)1gWBmi+U1{kUKVLwSiqP4$|vi~ila+eYwK*J
zLbHx{`>*`ACCX^^wYAFXVt;>{KDx2o>$H&QD&bX8o1N_E)kaT!>Ax{^WmIc-$*OC6
zMITRdoxNT6(*9WP-Jv{U+Q}>Wf9`5sX_)?KnWSx$*vjojUgtUt)5UzZtDa~8_utT)
zdBed=@RDvcmNZ5a-e_K;O7TE^tD#R)w~0q{;-h1Ia*Fd@ZeDm|KV8%K(4G~aQhoc?
zf$h2%MQVPtHELh2(fIP*ccE?hKN+c#^q@)JGs|kMLNh~}{Tsttt3<T}`?Pm&TeEVL
zPWZ;S?M!Do!xSTD#z$^TwZ8o3=4$ta`}TGlYoFgy)cdQHTSEWp#%Sj0XHJ)E+}>9p
x?XByzxxi<`^sQQPJ~Iv6HqO=dp67iziR^aW;Pw!_v>T0~(IhvTheitpYXHiRt-1gJ
literal 0
HcmV?d00001
diff --git a/client/ui/SkribblMenu.js b/client/ui/SkribblMenu.js
index aa613e1..4308e47 100644
--- a/client/ui/SkribblMenu.js
+++ b/client/ui/SkribblMenu.js
@@ -23,7 +23,7 @@ export default class SkribblMenu extends HTMLElement {
border:none;
height:34px;
width:34px;
- background: url('/res/selectArrows.png');
+ background: url('/res/selectArrows.gif');
background-size: 54px;
background-repeat: no-repeat;
cursor: pointer;
@@ -74,6 +74,11 @@ export default class SkribblMenu extends HTMLElement {
justify-content: center;
position: relative;
}
+ #avatar-container{
+ flex: 0 0 auto;
+ width:66px;
+ height:96px;
+ }
diff --git a/client/ui/SkribblPlayerIcon.js b/client/ui/SkribblPlayerIcon.js
index ddc2107..ab1b06a 100644
--- a/client/ui/SkribblPlayerIcon.js
+++ b/client/ui/SkribblPlayerIcon.js
@@ -15,20 +15,23 @@
border-radius: 5px;
}
.container-character{
- border: 2px solid #777;
- border-radius: 10px;
+ background:url("/res/pi.gif");
+ background-size:contain;
+ background-repeat: no-repeat;
}
.character-eyes{
height: 34px;
- width: 34px;
- background:url("/res/MouthsAndEyes.png");
- background-position: 10px 0;
+ width: 68px;
+ background:url("/res/MouthsAndEyes.gif");
+ background-position: 25px 18px;
+ background-repeat: no-repeat;
}
.character-mouth{
height: 34px;
- width: 34x;
- background:url("/res/MouthsAndEyes.png");
- background-position: 0px -52px;
+ width: 68x;
+ background:url("/res/MouthsAndEyes.gif");
+ background-position: 24px -32px;
+ background-repeat: no-repeat;
}
</style>
@@ -43,26 +46,31 @@
/** @param {boolean} toTheRight */
changeEye(toTheRight) {
- let displacement = 80;
-
+ let displacement = 38;
if (toTheRight){
this.eyesDisplacement += displacement;
}else{
this.eyesDisplacement -= displacement;
}
+ if(this.eyesDisplacement>266){
+ this.eyesDisplacement = 10;
+ }
const eye = this.shadowRoot.getElementById("eyes");
eye.style.backgroundPositionX = this.eyesDisplacement+"px";
}
/** @param {boolean} toTheRight */
changeMouth(toTheRight) {
- let displacement = 80;
+ let displacement = 38;
if (toTheRight){
this.mouthDisplacement += displacement;
}else{
this.mouthDisplacement -= displacement;
}
+ if(this.mouthDisplacement>266){
+ this.mouthDisplacement = 0;
+ }
const mouth = this.shadowRoot.getElementById("mouth");
mouth.style.backgroundPositionX = this.mouthDisplacement+"px";
}
--
GitLab