From 98145886586895da4b64cbbdbe54a0807101f5aa Mon Sep 17 00:00:00 2001 From: gocivici Date: Sat, 30 Sep 2023 12:16:40 +0300 Subject: [PATCH] Added username storage and inactivity timer --- backend.js | 12 +++- public/Down.png | Bin 902 -> 910 bytes public/Left.png | Bin 851 -> 841 bytes public/Right.png | Bin 799 -> 841 bytes public/Up.png | Bin 780 -> 788 bytes public/cafebackground..js | 115 ++++++++++++++++++++++++++++++++++++++ public/classes/Player.js | 71 +++++++++++++---------- public/classes/Sprite.js | 2 +- public/index.js | 25 +++++++-- 9 files changed, 187 insertions(+), 38 deletions(-) create mode 100644 public/cafebackground..js diff --git a/backend.js b/backend.js index 552cd16..f9e33d5 100644 --- a/backend.js +++ b/backend.js @@ -37,6 +37,7 @@ const bPlayers = { io.on('connection', (socket)=>{ console.log('user connected') + resetDisconnectTimer(); bPlayers[socket.id] = { x:615, y:136, @@ -56,10 +57,13 @@ io.on('connection', (socket)=>{ }) socket.on('clickPosition',(coordinates)=>{ + resetDisconnectTimer(); bPlayers[socket.id].clickX = coordinates[0] bPlayers[socket.id].clickY = coordinates[1] bPlayers[socket.id].x = bPlayers[socket.id].clickX bPlayers[socket.id].y = bPlayers[socket.id].clickY + + console.log(bPlayers) }) @@ -83,6 +87,11 @@ io.on('connection', (socket)=>{ console.log(bPlayers) }) + + function resetDisconnectTimer(){ + clearTimeout(socket.inactivityTimeout); + socket.inactivityTimeout = setTimeout(() => socket.disconnect(true), 1000 * 60 * 15); + } // socket.on('clickPositionX',(coordinates)=>{ // bPlayers[socket.id].x = coordinates // console.log(coordinates) @@ -101,4 +110,5 @@ setInterval(() =>{ server.listen((process.env.PORT || 3000),() =>{ console.log(`app listening on port ${(process.env.PORT || 3000)}`) -}) \ No newline at end of file +}) + diff --git a/public/Down.png b/public/Down.png index d75d75c7fbde5dd4e0d773203bdbe1ec3dce7016..d046346ef2571ba1d34f5d533eecb4de163d3ca8 100644 GIT binary patch delta 875 zcmV-x1C;!R2aX4jFnJ#H2;5Qg_dbVw;EI7EuHRHV-dxW#veT!Eeg zZ~}U$Xel@YqM(RG9f~kP-)Oxa+hgy~JWms?;-7a%nm4mvuXCCjc=!71v8BK8_4mWc zW1LdZ|3pOnFFYm&*c(-u?v<&UQO<+@c_Qh@@gXEd8Qv>XHGjRF2mLl8=*RIPB&N(B zm8lvp=RtoRN7j$yLr6C5_(H4mpudeH>c{aRBrlhKnak8KpPzo--YrjJZRZX8%i4Lf zW&Jolgk;h2Q%DBtYn_q0U22@sPK5sDe!ba(ejFb{viP)~s?l&NjSBvmzj=`Oll|Iwh|PfHD3(2wIoNKCskr8X+vgMXnj*_x?(zS?g-(SLc3{{P_k z5R%0jUuTNfQ+;Y2-LLiQe)QYMP4zpnejFb{;(A76?LO?a&S%%4e_clE$MGQ~uIJ-l zfA~I4(=`1!-z@gewd?IbIsHOP-`4f-J^s143oZI_d&dnn z(TX0wm;T=OA?!W=;>`Dx&wWhi`FZBR@gXEldndeVGeOsyf>({1+U@6EW9pNK7^#m@kcpu zuX*&i);EUMy(2=ey)Ju=zm7-hnWZ$&`uDeY_EjkyA3|bsd~3!EwV9imuN5!-sdlY< zO>*o#{yB2-PObl^V0R`!f-Yxg3bkL?_vYCV&Nml(NK);r4!e~vnS{N>-`YO+Y)}$^ z9AqCt(&YH1dpkz$VJW3m*IG`$_xRWTMe?{093Mhb<@lwm45j0Z!s<9%tCf!u{~T6b zoU#C5q^ZXDa=_Lz8e1uK{;hDd_>by0O*lRTpI z8%ab#RCr$P+A(euQ4q#)J8h&C6dZygEfw^ffLm~w+=3I(Lq$u$At)#!Q3tJeCyK`& z&)YZe?QT5(pM>m)#rgb_@6!flzbo|N&E3=VG~~zM$Kub~5`Xze15^Zv6Q}yR7T^f!2(~}ALFJtkMQdPTOlBQXWwHg>*m{!Q2Ge3)ul&aefTJ~dri@5ajf6{Xnl_rED#akX+vR3-5ijI)4@)DY=c2do+)< zuUzzc5ozrlUar#oOXU^Ua{gi~Uk4T+Da~$;)x@Qm8s+5|rPnQu^KX-%#YalT?I~Rn t?>e!y&X9tZiu5@F2T1QLL|h>~ z=b(owZHk?D72HdE@te5<&~>-M2saeHv!R%gR-9cfH=#9>Y23Uf#B= z7RRv$`IqxybO8XP$nN%5rU|jMfo3x&`JbkwZp;s6N$!^3#((kYWuRHjN&ac%)Q$PU zEYU7m+BiO~3^c1b$-j)0x-mbP<>TlAdNazLa$bw`=l`QQf6NbNDSq=mKmGd(ZMWj? zdc7Mx?$rqS*Ms@NEYUar%iDI9Gj8o=pw`S{PV%qgT>h9J%#uCZ<9DZa%ZN2o?JL*w z^;^H1Y9Rl1V1Irv%VP8VzM)2$bvARhg8Yxc{9u-1^RI5V2iv<}>y!IkidnUoQy~BP zV`6?VOVs@GSGwPMA=AVdZA@VnbCQ3*8ZbYYrQ2+emND|BnllFZ$HDwymSpp%j?sK- zJ9X50crE4>$iMwLFh7_jYJPuhM(^2=+_fO7%xX^ZuYWr)pX35KLANKi#l~#DVS0}( zOU;>Up5E6*{^!ZLF3b;RY2NLj4wnud{WODF&6x`Mr-S*yEZy$#j-D3}5i>;0O#bUf zn=}OZ$HDwymS)xpb?ld)znyc={n^|c{9LOsbIqd#^3MnJgITJ_{L-mnm>B#0Ha99~ zNql^BYJZ*GA^&_ZKbWQ2Y|oGHpAWY0uRb~Fj*TSy-Cwmja~+prPV&zO^MhH6&F^>Y zgL^&PVRQO*509^Be?N-Z%t`+B=fwPAmg+IT-?4&pra!-|-JE{CKHAJl{^ekPFiW-h z_nr8TbZ%%>o>p_p81uMpo#qtCzZ}dDX1VzP#(x+i)r3d0DoV^bJ0tVQ{9u-1^Y8Dh zz29k*&Xn)|SS|Gq-Y90PoBZp+{9u;m>-l4yDzgz<*2LtlEz!Czp8WH{{9u;upX3U$ zw0ZpcVoxT^eRA1olafDAZvaT9+jDzD%wkBtPVLtvXs=UK{+J)kviO*Pw0VTsSTnX? jXdeGjkbgdyAI$O>;#7KwESW(200000NkvXXu0mjfSdP2Q delta 815 zcmX@fcA0I0VLh*>i(^Q|oVRlg^KLr`xZ3lUvc)XnC~6bQ3O>5m{{i!o>!LjIinV+b zgm-LTy+yN#O}Ukuaot>{I8~{l%_>`;oIC&LI)_sD6ZtjIlFN2Rm1=zWc=o9G%Ci!3 z^S;IQzV>O2wLc)=9R4@mR9}rnc(2c@sY@-VmC2X=WvJ)T`SrB^kCIM1Pn1=(?$*2Q zAf?Q+>n!(kcyBM;7Ug#~4y!F%+s=y2;IHOc3$}~zoPAkJo~3DY_TRoK2oIfBOZCk=5+_}~ z|JL>7%l0L{+aPYMk4SreBTQ=L?Kd&m^F7M`*5BXUa$O?g3&`13pZ_d>JFX$W^(Zm$l(jOg8lv?N-KQ%-v57O89pR$x3#+WX}(We z!gc-+#~=9apA+A*G~)B}9N(Lfk1phGkFBk%;Q$9k+}C=LMQ-Q6-KnW6|MKtGAKivJ zv*l&ipD*`X%?M>{r;mUxOT# z;(k#xd%xX(8Jqd9Oue(_pWFWLdj9I=TP9uTu5+l}umv2ih1;G7)bE}2YHQ55s+H!# z$@O2qyvkDl#rXAL&EX8zK2ECK^R*G=bc?QYYfo<|-n#R1&TB85 zbv+^S8Qa`DR{6x8k3V%UEHC+b*Ys~?Gk1OW&i>AFh5goE#}2PKf4tYptevklZNsl+ z?=&tjfeh-<@;Rr%*3NROG;L+#Y0TumAL~;D4p`Ts-k7>;3N& UmdKI;Vst0DX$9a{vGU diff --git a/public/Right.png b/public/Right.png index 0ad6fdaa7764e725f5dcfe7c4d0ad12ed3065880..308266bc6b01d277420b0085799e85df445d2645 100644 GIT binary patch delta 806 zcmV+>1KIqa2FV7HFnF>Vww6o$QsE>emVC}&8KmMZj|AP1n|D@0s@ zo&#_KdZ=hAI0K?c5s5k!lSi1hYo0x0kL`Wm*KB5Xvax^ZeR}eGCcChZn~U?urN8?x zU+*7wB|gU+!ckj2rWVTVA#vKy6x?Q~s{!b@UMW&L8uGTcYN#Rk2?_ zPp@y@9zTW&@~;o(2e)k2^NV3pS=%dP&N<|N2<8X3G+XV_ChFawTbr{s#Dq;Fe;mJ$LUeLkJ<i=70b3=k&wgc>js3@Kn*A7<5!~3gn*;<_EV_>-lx>Chu!{F{owE+p||8gy$Z# zcXN`z4dw^8RO|T_2-Gmms&V&5Z!TjKs zYIky3v^G!bc&&R&WAAT0Kl0DdAM=A-sy(+SMr-2;x#P?=RV&D!=k@@YY;Jzx)C@Gr kd>@2S##=Lg%nxq)1Boe@RM~FZvH$=807*qoM6N<$f>F1tD*ylh delta 763 zcmV9yFn)>+V}h6NeuaIt(l+B54Wm!eoa?$tJ$*^^4n^epUw}riaWoq#I1A?L4I33<)`z*t;I8c zY6jbVd>noK^ndeg>5r_6{I)Ff)A`|6ap%`p+)`qddZ_r}3gKGko5?@^e$V;o{BUdb z%&#lB^vawy^4sbmKb;?LReL2@ZsqD{?^ox;OlSQ{BJ%soPv?hQlbK&CsMS7gdG;-yH{ha^UCBuj{J0fIDeKr&#x;icc$y*6++~<)pLG2 zKipcpt8;7n$u;uZVn07%pm?s*v)aYihY&&tzxJ0$kMCvn6y&$nQ+_%>+{&K$rD9{1 zDz{JUFIU|!9z%ZeYjl3NReZMR^QR9Xgb;2|$G1x*-~IbDx?LY3f1(?CggbQ z{{$Y(AKP81kMA|VVEyya`Qg^$nSWZbplo+-m;* z{JoP7d3}?4#Sv9mu0Ne0ZWW*H(G{86qapWOpLAc2?Iuj=EkEmD51k)w&EC(Ss@z^X zPE6{xrLp_h{{2}0dh1W;hg-AH_N30wZbfeAu(Bf40JF`mo*v$Jr9^4o)a+@E t^>ry>pzE;oUt#$EIj}K002ovPDHLkV1nWysOJCx diff --git a/public/Up.png b/public/Up.png index 060843c19dd834e1f397b74fd8e37ab36ec911fa..7ea3c542e608e521fc77207141ce33ee027582ad 100644 GIT binary patch delta 726 zcmV;{0xA8B29ySnF@MfUL_t(|obB8_ZWKWfhT%4HhD1QXAsqMyY`!Pp7JCO@ft&;Q z1mti70?vR42#|;&u*+gg)9Rn8p1<#X63c6Qrqu5Gws*F7ZqiKe-@f@f_ZTUq^!3;8 zn~3AIqW&j}^}mWZF|bG7-5%Ak-ckuf{nM1{C;1_(xywg&tYbGSfvCTZLj5E^WL0B@p%ZIdc6ZKV;pOeqpVSjY9qF+H(CQKV%ixb6e@$-nA$7$2emBBtK*^`5}wR z4_Vo(JzH6;^`icD?V)~>AF{Hq;J4bjwO1Xee~cs5Pm>V=9e);+AF`PIkX8LjF545a z^nF+S`CCzcABFl!e#q*+V_Pl>?B`!TUq602KYd;6Zor26so#+NkTtuDde?AkCy=53 zb*))H$q!k@JGObbPQCm1t?fXU`^n>sP9*AoM*So|bT!|l**f(5 zsDGMr{UkqRRe!(3>pROl{`nbF$cNYO($sn8CJ^=4S-Sq{x=l;{BtK*|U+pp0VGrp? zOeL3?!{qqH996$R&nSBz|A$X8b>F4yq;DC2k{`0V@6R8#W;1^6W}?=dwpYaVh(xbB zN9{#9+W4E%|A(6KC;1_(dd=@UDr(L4;xc`nxvcX~=YQ)24Xc0fTG{M%{7a($4=vBQ zBtK+TC;w7OFzP&`K1pO(T~6n*S9$h6{{Fag-`UM!Zx2wRnEbwzYLhc}y|vWwTiIux zdtV^;xQVWR@8e&pzjvG?ko=I<{SI%fr9ZV_@{&Z)`@wyp_{8zQ?~U388D;C^@A>hx zx^ufg=Vy#R$q!lG$=|z&WvRU{C8Y$~y1kEouk15(2a+GMnv=ix>O<}EwxYJKrRzV+ z_}9J`8Tp!pHq)$07*qo IM6N<$f^TS!qyPW_ delta 743 zcmVYAPYJeJ4W4Tavme)YTbcmL<}kDt4U z<6MjSpHTl_FQN_vY)!U{qB_>=l|a-#jrvJ`2upTPtB&2``5}wR z4_Qop$YSzC)_>@oT(&2o_kCCV`L9L&b(HHT`5`NN$F@`_+0Q?Hy!`&*`1En9y8#>O zr~Vw0AF_(Ot9A{ybOIUbU)CDyC;1_3pZYpRPQ_~Dz8R*@GdF>#zfAA? zqw6*i^^^RNmAu+xtiv9LZ!u>)#T+KZCuXbq{drp1`uIP*kE#1^xJ>$p@hABqD|>(b zs5P7MYc~_M=Cr*cwnrp-&Dm-%%B_vRY5jkgGyWt$WR2GRzN4bnY-gwG^UP(Pe>h$y zXjuJ?*MG`ptK**&{eOsf#3lJ5Yn1%GlAzUjTD_CVuDTqKZLjidef<4#=f1L=!rmTW zhI8`!PAW~#)b-X}$FF6ddFpk6)b~wv{aYXZT>Z7<+!DzTS=m>3OZ9%&e$F|Gp7(?M zMDdB^f8T4h3o^>u$KUhgX?3S|fwmZbk{`0N$zWf*hoaZsmz-Pzt=-ngzgF^*IS|PY zS;^$Dz4}mkytOE;t9SjkGXAB{MV5HZLh?gacFiBviT*fCCu!@yi*jq@U-}5p1IZ6r Ze*o4cL~kwH<9Pr8002ovPDHLkV1kA^m(KtI diff --git a/public/cafebackground..js b/public/cafebackground..js new file mode 100644 index 0000000..2aeb0e7 --- /dev/null +++ b/public/cafebackground..js @@ -0,0 +1,115 @@ +(function(name,data){ + if(typeof onTileMapLoaded === 'undefined') { + if(typeof TileMaps === 'undefined') TileMaps = {}; + TileMaps[name] = data; + } else { + onTileMapLoaded(name,data); + } + if(typeof module === 'object' && module && module.exports) { + module.exports = data; + }})("cafebackground", +{ "compressionlevel":-1, + "height":12, + "infinite":false, + "layers":[ + { + "data":[20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 23, + 56, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 39, 39, 58, 41, + 56, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 41, + 74, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 77, + 110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113, + 110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113, + 110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113, + 110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113, + 110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113, + 110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113, + 110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113, + 128, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 131], + "height":12, + "id":1, + "name":"Tile Layer 1", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":21, + "x":0, + "y":0 + }, + { + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 169, 170, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 187, 188, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 205, 206, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "height":12, + "id":3, + "name":"doorframe", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":21, + "x":0, + "y":0 + }, + { + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 443, 444, 0, 0, 0, 0, 0, 0, + 0, 590, 0, 0, 0, 0, 0, 0, 0, 229, 230, 0, 0, 443, 444, 0, 0, 0, 171, 172, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 247, 248, 0, 0, 741, 742, 0, 0, 0, 189, 190, 735, + 473, 478, 479, 480, 481, 562, 563, 0, 0, 0, 0, 0, 0, 754, 755, 0, 0, 0, 207, 208, 748, + 486, 491, 492, 493, 494, 575, 576, 0, 0, 0, 0, 0, 0, 767, 768, 0, 0, 0, 377, 378, 761, + 743, 744, 374, 375, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 756, 757, 387, 388, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 769, 770, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 440, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 453, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2147484209, 2147484208, + 466, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2147484222, 2147484221], + "height":12, + "id":2, + "name":"doors and windows", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":21, + "x":0, + "y":0 + }], + "nextlayerid":4, + "nextobjectid":1, + "orientation":"orthogonal", + "renderorder":"right-down", + "tiledversion":"1.10.2", + "tileheight":16, + "tilesets":[ + { + "firstgid":1, + "source":"..\/..\/..\/Tileassets\/TopDownHouse_FloorsAndWalls.tsx" + }, + { + "firstgid":163, + "source":"..\/..\/..\/Tileassets\/TopDownHouse_DoorsAndWindows.tsx" + }, + { + "firstgid":343, + "source":"..\/..\/..\/Tileassets\/TopDownHouse_FurnitureState2.tsx" + }, + { + "firstgid":577, + "source":"..\/..\/..\/Tileassets\/TopDownHouse_SmallItems.tsx" + }, + { + "firstgid":641, + "source":"..\/..\/..\/Tileassets\/TopDownHouse_FurnitureState1.tsx" + }], + "tilewidth":16, + "type":"map", + "version":"1.10", + "width":21 +}); \ No newline at end of file diff --git a/public/classes/Player.js b/public/classes/Player.js index 6b28166..d9e3a05 100644 --- a/public/classes/Player.js +++ b/public/classes/Player.js @@ -55,7 +55,8 @@ class Player extends Sprite { } update(){ - if(this.message!=''){SpeechBubble(ctx,ctx.measureText(this.message).width-20,20,'hsla(181, 100%, 100%, 0.6)',this.position.x-25,this.position.y-100,10)} + if(this.message!=''){SpeechBubble(ctx,ctx.measureText(this.message).width-20,20,'hsla(181, 100%, 100%, 0.6)',this.position.x-20,this.position.y-100,10)} + // CollisionRect(this,"hsla(141, 100%, 52%, 0.5)") ctx.beginPath(); ctx.textAlign = "center"; @@ -65,40 +66,12 @@ class Player extends Sprite { ctx.font = 'normal 15px sans-serif'; ctx.fillStyle = 'black'; - ctx.fillText(this.message, this.position.x-5, this.position.y-80,200); + ctx.fillText(this.message, this.position.x, this.position.y-80); ctx.fill() - function SpeechBubble(ctx, width, height, color, x, y, radius, text) - { - var maxWidth = 300; - var r = radius; - var w = (width > maxWidth ? maxWidth : width) + 40; - var h = ((width > maxWidth ? Math.ceil(width / maxWidth) : 1) * height) + 10; - var pi2 = Math.PI * 2; - var ap = w/2-10; - var aw = 20; - var ah = 10; - x = x-(width/2) - // Speechbubble create start - ctx.beginPath(); - ctx.arc(x+r, y+r, r, pi2 * 0.5, pi2 * 0.75); - ctx.arc(x+ w - r, y+ r, r, pi2 * 0.75, pi2); - ctx.arc(x+w - r,y+ h - r, r, 0, pi2 * 0.25); - ctx.lineTo(x+w - ap, y+h); - ctx.lineTo(x+w - ap - (aw / 2),y+ h + ah); - ctx.lineTo(x+w - ap - aw, y+h); - ctx.arc(x+r, y+h - r, r, pi2 * 0.25, pi2 * 0.5); - ctx.fillStyle = color; - ctx.fill(); - // Speechbubble create end - - // Speechbubble text start - // ctx.fillStyle = "#fff"; - // wrapText(ctx, text, 25, 17, maxWidth, 16); - // Speechbubble text end - } + //ctx.measureText(this.message).width @@ -148,3 +121,39 @@ class Player extends Sprite { } +function SpeechBubble(ctx, width, height, color, x, y, radius, text) +{ + var maxWidth = 300; + var r = radius; + var w = (width > maxWidth ? maxWidth : width) + 40; + var h = ((width > maxWidth ? Math.ceil(width / maxWidth) : 1) * height) + 10; + var pi2 = Math.PI * 2; + var ap = w/2-5; + var aw = 10; + var ah = 8; + x = x-(width/2) + // Speechbubble create start + ctx.beginPath(); + ctx.arc(x+r, y+r, r, pi2 * 0.5, pi2 * 0.75); + ctx.arc(x+ w - r, y+ r, r, pi2 * 0.75, pi2); + ctx.arc(x+w - r,y+ h - r, r, 0, pi2 * 0.25); + ctx.lineTo(x+w - ap, y+h); + ctx.lineTo(x+w - ap - (aw / 2),y+ h + ah); + ctx.lineTo(x+w - ap - aw, y+h); + ctx.arc(x+r, y+h - r, r, pi2 * 0.25, pi2 * 0.5); + ctx.fillStyle = color; + ctx.fill(); + // Speechbubble create end + + // Speechbubble text start +// ctx.fillStyle = "#fff"; +// wrapText(ctx, text, 25, 17, maxWidth, 16); + // Speechbubble text end +} + +function CollisionRect(object,color){ + ctx.beginPath(); + ctx.fillStyle = color; + ctx.fillRect(object.position.x, object.position.y, object.width, object.height) + ctx.fill(); +} diff --git a/public/classes/Sprite.js b/public/classes/Sprite.js index 9d19aff..e57883c 100644 --- a/public/classes/Sprite.js +++ b/public/classes/Sprite.js @@ -75,4 +75,4 @@ class Sprite{ } } } -} \ No newline at end of file +} \ No newline at end of file diff --git a/public/index.js b/public/index.js index ef15ead..2f23fa7 100644 --- a/public/index.js +++ b/public/index.js @@ -3,7 +3,6 @@ const ctx = canvas.getContext('2d') const socket = io() - ctx.imageSmoothingEnabled = false; const speed = 2; var frameCount = 10 @@ -32,7 +31,9 @@ clickCoordinates = [100,100] // background.onload = function(){ // ctx.drawImage(background,0,0); // } - +if(!localStorage.getItem('username')){ + localStorage.setItem('username','Visitor') + } // setInterval(player.animate, 50); canvas.width = 32 * 21 //672 @@ -50,13 +51,21 @@ const background1 = new Sprite({ imageSrc: './img/baackground.png' }) + +socket.on('disconnect',(reason)=>{ + console.log(reason); + if (confirm("Kicked to due inactivity, click OK to refresh page") == true) { + window.location.reload(); + } +}) + // const player = new Player(100,100,'Görkem') const fPlayers = {} socket.on('updatePlayers', (bPlayers) =>{ for(const id in bPlayers){ const bPlayer = bPlayers[id] - + if(!fPlayers[id]){ fPlayers[id] = new Player({ position:{ @@ -68,7 +77,7 @@ socket.on('updatePlayers', (bPlayers) =>{ clickX:bPlayer.clickX, clickY:bPlayer.clickY, userId:id, - username:'Visitor', + username:'', message:'', atPosition:true, animationColumn:0, @@ -83,6 +92,9 @@ socket.on('updatePlayers', (bPlayers) =>{ } }) + fPlayers[socket.id].username = localStorage.getItem('username') + socket.emit('username',fPlayers[socket.id].username); + } else { // if players already exist fPlayers[id].clickX = bPlayer.clickX @@ -162,8 +174,10 @@ function animate(){ - animate() + + + canvas.addEventListener('mousedown', function(e) { clickCoordinates = getCursorPosition(canvas, e) @@ -186,6 +200,7 @@ document.querySelector('#textInput').addEventListener('submit',(event)=>{ if(inputValue.includes("/name ")){ console.log('namechange') fPlayers[socket.id].username = inputValue.replace("/name ","") + localStorage.setItem('username',fPlayers[socket.id].username); socket.emit('username',fPlayers[socket.id].username) }else if(inputValue==='/debug'){ if(debugMode) {debugMode=false;}else{debugMode=true;}