From af8a4ba9be91aa45e53e5b2c626ae69f8a1b6565 Mon Sep 17 00:00:00 2001 From: gocivici Date: Sun, 25 Feb 2024 14:08:57 +0300 Subject: [PATCH] - add new sprites - add 2D character option - new desciptive text --- public/characterSprites/Blue/Down.png | Bin 0 -> 1711 bytes public/characterSprites/Blue/Left.png | Bin 0 -> 1711 bytes public/characterSprites/Blue/Right.png | Bin 0 -> 1709 bytes public/characterSprites/Blue/Up.png | Bin 0 -> 1709 bytes public/characterSprites/Orange/Down.png | Bin 0 -> 1722 bytes public/characterSprites/Orange/Left.png | Bin 0 -> 1717 bytes public/characterSprites/Orange/Right.png | Bin 0 -> 1722 bytes public/characterSprites/Orange/Up.png | Bin 0 -> 1717 bytes public/classes/Player.js | 11 ++++- public/classes/Sprite.js | 2 +- public/css/cafe.css | 2 +- public/favicon.gif | Bin 0 -> 336 bytes public/index.html | 1 + public/index.js | 53 ++++++++++++++++++----- 14 files changed, 56 insertions(+), 13 deletions(-) create mode 100644 public/characterSprites/Blue/Down.png create mode 100644 public/characterSprites/Blue/Left.png create mode 100644 public/characterSprites/Blue/Right.png create mode 100644 public/characterSprites/Blue/Up.png create mode 100644 public/characterSprites/Orange/Down.png create mode 100644 public/characterSprites/Orange/Left.png create mode 100644 public/characterSprites/Orange/Right.png create mode 100644 public/characterSprites/Orange/Up.png create mode 100644 public/favicon.gif diff --git a/public/characterSprites/Blue/Down.png b/public/characterSprites/Blue/Down.png new file mode 100644 index 0000000000000000000000000000000000000000..f3abeaf4ab36a532b1fd1ad5d37aef3b22011095 GIT binary patch literal 1711 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 literal 0 HcmV?d00001 diff --git a/public/characterSprites/Blue/Up.png b/public/characterSprites/Blue/Up.png new file mode 100644 index 0000000000000000000000000000000000000000..cedb27f79b75c2a1945be545e3f8d99b2ab15dd4 GIT binary patch literal 1709 zcmeAS@N?(olHy`uVBq!ia0y~yVEh4OJ8&=q$%7J89|9@H;vjb?hIQv;UNSH+GX(gA zxB>+g4J<4a6^$$uy{zSxD_=R+F7TeE&M@V_@1#8ooL%?$`X8}3{LjEJOJhRE0_XXA ze7F5)_`i1x}*#}jUB@Be>&#sB|6`B5+$0z)qZ^4^^31?CHek|4ieU@{)bfFbxh zyD9?%lfS2nV@SoEw{uVX9X1efJw+@%b61R6)J(X9`6F zLkg>n^q!ZMGCrH-xaTq+WEuF!J@4G_i_5>wZ07#hu|4oa-F(X(Wk*&w9JRLpuNG6E zyG-kp$NbD40{s=ztv%mowq@(avFh9@*ndCy+~bcN;t#WTm9LvYW3?)O#Q+iM>cI<&}{cKaN15K zjz`+R6y!cK7k}*vXPkUlSUpC6fAH_uUS}rSwIVEV2CDQF zcyzm{O?*AmG&j$MZRN{StV0u2YoF8{FTOeRazR7Tx~traKbua|ZLT=7-@~yc@!W?; z{0Fkcbu$lzb*rR?v3oH6KD{N>t99wuRY#T|IuiDIRq&h~rbmMNJ01QMo@jYAe>SVB ze%0-jx{1*%pNo9EQnByAOPgzF*)yagm^ywOQ|r*rZT^unMf79S#rHm`Tl~&HRbc;Y s=5XY;)Dihmry4WGYU%%zkG=fEaA@}IFYITdc7qBBPgg&ebxsLQ0NCqfPXGV_ literal 0 HcmV?d00001 diff --git a/public/characterSprites/Orange/Down.png b/public/characterSprites/Orange/Down.png new file mode 100644 index 0000000000000000000000000000000000000000..19fa9289ce2f41549c6f68baf284cbca239ba08d GIT binary patch literal 1722 zcmeAS@N?(olHy`uVBq!ia0y~yVEh4OJ8&=q$%7J89|9@H;vjb?hIQv;UNSH+GX(gA zxB>+g4J<4a6^$$uy{zSxD_=R+F7TeE&M@V_@1#8ooL%?$`X8}3{LjEJOJhRE0_XXA ze7F5)_`i1x}*#}jUB@Be>&#sB|6`B5+$0z)qZ^4^^31?CHek|4ieU@{)bfFbxh zyD9?%Q;esJV@SoEw{vg%9Wmf>`JVWjHQ>j8eO*z(X`Z)Y?q1uNK2MDC@SHgcTe=0- z^A^s$ewlefI@3o#X56TF;g53Hb-!O-f4lJ@>&LUzIR%b2pXH=u*dMtbIMiOdp+;`$ zKChE<#xVl?AFbFl?MJ+8?3b5T3KJI`W@wOYHgYKm+`C1&bJGeew*>IsiNb$p~p|4@f#}y z4bF)*+7?|1s@5rV+!L(VQGTlQ!>PG%7?=8o&l6SKnqCGHV*Tg`G^fA$V*kb!um0ML zH^y#1&L)1uc~76?ukSY=SpBR0VccruDXqP>Mv}n zUQ#9Z1nhu}F54j6S4YZ4WX%L-v^7t=mE6qzXl@bE5$o>UKiA98Wxw%@OhB4{?bNh& z3``$+s}`yY-#Z2j}&1AKAGmzvtlljgKTc+J8(I>sbG0 zW?T*1ny(91_TGq^nBh~>xT2uO=e~+w&-rYj^Q{xtzFYjv;wT$X@e-y-pHbJd=IgtDGc9d3Z4kJ>ljTwNb%&abUfmUkB+Au;i0yj r(P_^*hnhU0BjVCs@@@Y;ADh@~7JBI_-+et3R8n}l`njxgN@xNAor7J= literal 0 HcmV?d00001 diff --git a/public/characterSprites/Orange/Left.png b/public/characterSprites/Orange/Left.png new file mode 100644 index 0000000000000000000000000000000000000000..7af9a41b9e5f3ff211d8054df2f6554e3de6c632 GIT binary patch literal 1717 zcmeAS@N?(olHy`uVBq!ia0y~yVEh4OJ8&=q$%7J89|9@H;vjb?hIQv;UNSH+GX(gA zxB>+g4J<4a6^$$uy{zSxD_=R+F7TeE&M@V_@1#8ooL%?$`X8}3{LjEJOJhRE0_XXA ze7F5)_`i1x}*#}jUB@Be>&#sB|6`B5+$0z)qZ^4^^31?CHek|4ieU@{)bfFbxh zyD9?%Q@E##V@SoEx3dHD4jBlr{%jDQu;sgbW>;3C4PeIs*uWahkZXWOLM{nIv zx2wMpWMfyRDEHB-;mhYAH$nyUEp)tJRQ}QW)>89kfonz08z-Abr3^2hf84nGWuf1< z2B)a7n~yeb<^I@loiSzl@oVe&J}MpFH7}Is3k~r8Z-aAUt_wboxb#giLW&0eKzpF6Y<>9=F#m2 zf&KTN`tEtasC)iBPs^%%lTK||CvAAI(tDEf;=b=G|0R-lZ@XTcHxX#}^e%yT`KMuj z4ko_bvmSSZce>T;4Zbxi5E}>K5$(p(Xt2{=pw2@``;H zx8wS&*CYz>YWy}g`O#+GWajVY7Y+tz&2O$a5+g4J<4a6^$$uy{zSxD_=R+F7TeE&M@V_@1#8ooL%?$`X8}3{LjEJOJhRE0_XXA ze7F5)_`i1x}*#}jUB@Be>&#sB|6`B5+$0z)qZ^4^^31?CHek|4ieU@{)bfFbxh zyD9?%Q;esJV@SoEw{vg%9Wmf>`JVWjHQ>j8eO*z(X`Z)Y?q1uNK2MDC@SHgcTe=0- z^A^s$ewlefI@3o#X56TF;g53Hb-!O-f4lJ@>&LUzIR%b2pXH=u*dMtbIMiOdp+;`$ zKChE<#xVl?AFbFl?MJ+8?3b5T3KJI`W@wOYHgYKm+`C1&bJGeew*>IsiNb$p~p|4@f#}y z4bF)*+7?|1s@5rV+!L(VQGTlQ!>PG%7?=8o&l6SKnqCGHV*Tg`G^fA$V*kb!um0ML zH^y#1&L)1uc~76?ukSY=SpBR0VccruDXqP>Mv}n zUQ#9Z1nhu}F54j6S4YZ4WX%L-v^7t=mE6qzXl@bE5$o>UKiA98Wxw%@OhB4{?bNh& z3``$+s}`yY-#Z2j}&1AKAGmzvtlljgKTc+J8(I>sbG0 zW?T*1ny(91_TGq^nBh~>xT2uO=e~+w&-rYj^Q{xtzFYjv;wT$X@e-y-pHbJd=IgtDGc9d3Z4kJ>ljTwNb%&abUfmUkB+Au;i0yj r(P_^*hnhU0BjVCs@@@Y;ADh@~7JBI_-+et3R8n}l`njxgN@xNAor7J= literal 0 HcmV?d00001 diff --git a/public/characterSprites/Orange/Up.png b/public/characterSprites/Orange/Up.png new file mode 100644 index 0000000000000000000000000000000000000000..7af9a41b9e5f3ff211d8054df2f6554e3de6c632 GIT binary patch literal 1717 zcmeAS@N?(olHy`uVBq!ia0y~yVEh4OJ8&=q$%7J89|9@H;vjb?hIQv;UNSH+GX(gA zxB>+g4J<4a6^$$uy{zSxD_=R+F7TeE&M@V_@1#8ooL%?$`X8}3{LjEJOJhRE0_XXA ze7F5)_`i1x}*#}jUB@Be>&#sB|6`B5+$0z)qZ^4^^31?CHek|4ieU@{)bfFbxh zyD9?%Q@E##V@SoEx3dHD4jBlr{%jDQu;sgbW>;3C4PeIs*uWahkZXWOLM{nIv zx2wMpWMfyRDEHB-;mhYAH$nyUEp)tJRQ}QW)>89kfonz08z-Abr3^2hf84nGWuf1< z2B)a7n~yeb<^I@loiSzl@oVe&J}MpFH7}Is3k~r8Z-aAUt_wboxb#giLW&0eKzpF6Y<>9=F#m2 zf&KTN`tEtasC)iBPs^%%lTK||CvAAI(tDEf;=b=G|0R-lZ@XTcHxX#}^e%yT`KMuj z4ko_bvmSSZce>T;4Zbxi5E}>K5$(p(Xt2{=pw2@``;H zx8wS&*CYz>YWy}g`O#+GWajVY7Y+tz&2O$a5A0 zdq8yV|Fvu1&t2Pl@80*lN55~~`+e=!?`zk7pR;spPt;5X1|Y%;6#sMkxrPKgI|jHK z=@~FH0u?F#WMMU8kYLbZU|s?E`BK>mjZ(BO+N9`*W zh6m+BQ9X{$4iUmu?d}UwKS(%82y!tcL^v$oETj;y!bMB;$N>Wvxn33~C8LQBLT?i< z{B+yU>mStU(x{o_-w|Mx=%S&i2)0xXWGNd1D+3D|)xHiZKu&k2?X z`2rL+46LdOYDr<1^Il{!dL=LYu!AX&XZ^C;*ER3|A6QV}p(E9QVo8xCHzR{J0L(#z AMgRZ+ literal 0 HcmV?d00001 diff --git a/public/index.html b/public/index.html index 825caa8..ec558c4 100644 --- a/public/index.html +++ b/public/index.html @@ -150,6 +150,7 @@
  • Click anywhere in the box to move
  • Write /name followed by your name in the text box to change your name
    • +
  • You can change your character with /dino followed by 1,2,3,4 eg. /dino 2
  • Use the textbox to chat and the emoji button to send emojis
  • Be nice & Have fun!
    • Dino sprites by @ScissorMarks
    diff --git a/public/index.js b/public/index.js index 2191dbc..ac1bcb3 100644 --- a/public/index.js +++ b/public/index.js @@ -81,18 +81,15 @@ socket.on('updatePlayers', (bPlayers) =>{ skin:bPlayer.skin, message:'', atPosition:true, + isCharacter2D:true, animationColumn:0, imageSrc:'characterSprites/' + bPlayer.skin + '/Down.png', frames: 7, center:true, - sprites:{ - down:'characterSprites/' + bPlayer.skin + '/Down.png', - up:'characterSprites/' + bPlayer.skin + '/Up.png', - right:'characterSprites/' + bPlayer.skin + '/Right.png', - left:'characterSprites/' + bPlayer.skin + '/Left.png' - } + sprites:spriteFunction(bPlayer.skin) }) + // console.log(fPlayers[id]) fPlayers[socket.id].username = localStorage.getItem('username') socket.emit('username',fPlayers[socket.id].username); @@ -102,7 +99,9 @@ socket.on('updatePlayers', (bPlayers) =>{ fPlayers[id].clickY = bPlayer.clickY fPlayers[id].message = bPlayer.message fPlayers[id].username = bPlayer.username - fPlayers[id].skin = bPlayer.skin + spriteFunctionUpdate(fPlayers[id],bPlayer.skin) + // fPlayers[id].sprites = spriteFunction(bPlayer.skin) + // console.log(fPlayers[id]) //update player position without animation if tab is inactive if (document.hidden) { @@ -207,8 +206,24 @@ document.querySelector('#textInput').addEventListener('submit',(event)=>{ }else if(inputValue==='/debug'){ if(debugMode) {debugMode=false;}else{debugMode=true;} - }else if(inputValue==='/red'){ - fPlayers[socket.id].skin = "Red"; + }else if(inputValue.includes("/dino ")){ + console.log(inputValue.slice(6,7)); + switch(inputValue.slice(6,7)) { + case '1': + fPlayers[socket.id].skin = "Green"; + break; + case '2': + fPlayers[socket.id].skin = "Red"; + break; + case '3': + fPlayers[socket.id].skin = "Orange"; + break; + case '4': + fPlayers[socket.id].skin = "Blue"; + break; + default: + fPlayers[socket.id].skin = "Green"; + } socket.emit('skin',fPlayers[socket.id].skin); }else{ fPlayers[socket.id].message=document.querySelector('#input').value @@ -218,4 +233,22 @@ document.querySelector('#textInput').addEventListener('submit',(event)=>{ fPlayers[socket.id].messageSent = true; } document.querySelector('#textInput').reset(); -}) \ No newline at end of file +}) + +function spriteFunction(skin) { + return { + down:'characterSprites/' + skin + '/Down.png', + up:'characterSprites/' + skin + '/Up.png', + right:'characterSprites/' + skin + '/Right.png', + left:'characterSprites/' + skin + '/Left.png' + }; + } + + function spriteFunctionUpdate(obj,skin) { + + obj.Down.src='characterSprites/' + skin + '/Down.png'; + obj.Up.src='characterSprites/' + skin + '/Up.png'; + obj.Left.src='characterSprites/' + skin + '/Left.png'; + obj.Right.src='characterSprites/' + skin + '/Right.png'; + + } \ No newline at end of file