From 9e43bcbfe9a4ec8a81d4766f562967f5406af068 Mon Sep 17 00:00:00 2001 From: Tyler Murphy Date: Thu, 15 Jun 2023 17:17:48 -0400 Subject: [PATCH] better map bg renderer --- client/css/main.css | 10 +++ client/img/pac.gif | Bin 0 -> 1004 bytes client/img/wall_atlas.png | Bin 0 -> 1261 bytes client/img/wall_cross.png | Bin 4544 -> 0 bytes client/img/wall_dot.png | Bin 4530 -> 0 bytes client/img/wall_empty.png | Bin 563 -> 0 bytes client/img/wall_end.png | Bin 4413 -> 0 bytes client/img/wall_straight.png | Bin 4350 -> 0 bytes client/img/wall_tee.png | Bin 4440 -> 0 bytes client/img/wall_turn.png | Bin 4458 -> 0 bytes client/index.html | 10 ++- client/js/gfx/graphics.js | 10 ++- client/js/gfx/map.js | 140 ++++++++++++++++------------------- client/js/gfx/sprite.js | 4 + client/js/logic.js | 7 +- 15 files changed, 99 insertions(+), 82 deletions(-) create mode 100644 client/img/pac.gif create mode 100644 client/img/wall_atlas.png delete mode 100644 client/img/wall_cross.png delete mode 100644 client/img/wall_dot.png delete mode 100644 client/img/wall_empty.png delete mode 100644 client/img/wall_end.png delete mode 100644 client/img/wall_straight.png delete mode 100644 client/img/wall_tee.png delete mode 100644 client/img/wall_turn.png diff --git a/client/css/main.css b/client/css/main.css index d1d97e8..86b8fd8 100644 --- a/client/css/main.css +++ b/client/css/main.css @@ -72,6 +72,16 @@ input { margin-bottom: .215rem; } +#container img { + image-rendering: pixelated; +} + +#canvas { + position: absolute; + width: 100%; + height: 100%; +} + #fps { position: absolute; left: 0; diff --git a/client/img/pac.gif b/client/img/pac.gif new file mode 100644 index 0000000000000000000000000000000000000000..4b0608b2b2b80fca499314c2c89c1e841bc2d8e9 GIT binary patch literal 1004 zcmZ?wbhEHbRA5kGXkcWxekSSv|Nn~rx&2&2f}I@$T#fV$m>C%u7!>~rIv1rTmZYXA zlxLP?D7bt21~4f8WZ`6GU}Vq%Dgf$NU|?YK@9Aee&C9vCXp3jW=G|`9Wwno*dy|r8 zxvwgFW3hMnpPePGccNFen~Nti<{nDyUmX2ol8VUXN!3oxL8_r%N7k)6`{v@zm`e@& zA6`vnOSfRfW``esJAAH(20TT)VcUTobFa z9f>gd*SYWi_|F`va-P>6aYk{1cC3r$&caD+HA9ni6ZNr1C=DG<%W$T7BB6Fdw*~<9 CFpszZ literal 0 HcmV?d00001 diff --git a/client/img/wall_atlas.png b/client/img/wall_atlas.png new file mode 100644 index 0000000000000000000000000000000000000000..bd3a5df5e9ced63370945bb22bf542099fa5725a GIT binary patch literal 1261 zcmVEX>4Tx04R}tkv&MmKpe$i(`rR39qb_DkfC+5i;6hbDionYs1;guFuC*#nzSS- zE{=k0!NHHks)LKOt`4q(Aou~|>f)s6A|?JWDYS_3;J6>}?mh0_0Ya# zo%23%gq3BL_?&pcpbHW|a$RxxjdRIifoDdHY-XM~LM)bgSm|L_HZNsGzSbbDicGQdq)s#Kpat9cBs>_D#NPe0^u?W1M(KqFR;agyE&F!tTkJASrOI@XJfP+I| zyhPdS9`7FL?d{()o&J6RM}2aY4-oi000006VoOIv0RI600RN!9r;`8x010qNS#tmY zE+YT{E+YYWr9XB6000McNliru=LQc14HG7>^CJKN02y>eSad^gZEa<4bO1wgWnpw> zWFU8GbZ8()Nlj2!fese{00PBHL_t(|+U;CRPUJ8YthS;_dV$o-z5<8fG8~M{a0sq} zG>cAVG0bL+EMq%%`}xyOm4pydlJ}`siQ~M->HYQN3l7|FHvqu4Z2*9ET>$`}zdsSe z<>>+dSe69DX9y);7LGZ5=cN}5>)8^FNqS@9DxKCN|b&8 z=fJ!MN%)D$mlQK`dIgk%bzQ$#Lff`|uZE6Ff^QY5N+jQPu7sL~R6r;(cJlY$0rWBY zUBIP;qd_a*2PK(&-?2F=8eRc0$w^6mNC`)RR{b7SiR4S1dl&_jPSVjxFjX(20HQ2N z00|%g1PLGk1PM6kd%)hhHFq7Kx-K5gezpQ~0>};i(d|bmz_({%?%iCTF3FW(J080? zGK&3d1=tR!R6=g>k8VFn0j~XOy>GuPOL8TIg5TR4AHlwe0!&Bmsh*tRN3tKK0Q*~| z{$@MRv$qm*g5T?q8^!+J3NRf^shXH-ifK@IzKPKrUz>|FG9#&IH@2?+Ungl)r z>Q%ne=EUUxOul4`zS$LSKTn+V0Y^ve`G~2ffLpG%Y(FGg^h5Iz+AbBaQ?;e%Bc`5$ zZK;5m>8+=qiMD?a5-*s$AMN@Bq_6Ujj2p_0`0?AJ~cY5RiB_O@GlnN@K zF-QOjAOQpkAOQpkI3|+c1EiZ&OSgYh0S}JS^9j)kDAlA|y7^U#gxvWADj>5kO3f$i zDxh?OYK;ciRDVMA0XamvVx!~xI)r=qkGl4^VOt4Ogxc{^0fB<3F`uC9 z-pHD0X*=YDO+wC3DETjM&nML?5j`Zor7zm1vopA6z%AMWTl-?#RJALir^;{Pn{DGC Xq<@4;gafCU00000NkvXXu0mjf7k55O literal 0 HcmV?d00001 diff --git a/client/img/wall_cross.png b/client/img/wall_cross.png deleted file mode 100644 index 9553645baa215dbea08e1a2c3f16db57430ab323..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4544 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 diff --git a/client/img/wall_empty.png b/client/img/wall_empty.png deleted file mode 100644 index 6ca5e2976b00d92b38ffbd1da521ab459c9e7f9c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 563 zcmV-30?hr1P)EX>4Tx04R}tkv&MmP!xqvQ?(*34t5X`$xxl_q9Tr3g(6f4wL+^7CNKSiCJjl7 zi=*ILaPVib>fqw6tAnc`2>yV$x;QDiNQw6)g%&Yhc)XAE?m4`7A0RX;OtZRX0Zq5f zbTT1kbE{(L6+MU`fDwo?vy3@OO2N0j?x~aNF3z+3`~IwmnztAb5Q%4*VcNtS#M7I$ z!FiuJ%1W|Id`>)W(glehxvqHp#<}RSz%!#}COuCaB^HYvtaLCdnHupFaZJ^8$``U8 ztDLtuYn2*n-IKpCoYz;DxlU^sNi1Rs5=1Ddp^OS_#A(+_v5=KlnXct1vm?C500}_lx6vi~^xupjmgE?_eSad^gZEa<4bO1wgWnpw> zWFU8GbZ8()Nlj2!fese{000X~L_t&t*JEG+0ssI700H7A1)Bf>002ovPDHLkV1nik B;4c6G diff --git a/client/img/wall_end.png b/client/img/wall_end.png deleted file mode 100644 index 752f73b8253b0da4a46ec4439afcd51a476a0b23..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4413 zcmeHKdsGuw8Xs%{8_GjgYXx^Z9kh$ClguQOWRfKy5QNZ1C`4gdY?;j5gps^Vh9pp^ z6kRR0KH9QYUE5Q&W!JTfTJWroQcx(m9_v1i+g7DmwH1zT)deYifM@R{JkR!=J)E=s zkDQZveBbZ;-S7L|@7{B#E_Zomq$Ey)AV{PkOP>etsQ8~52CtsV%6stkuS!#)kjMB? zm)mLKZ2%Q2TmS`r-hv?hOPim*9NCUOJY?OprNq{Mm;Pd5`MNDvo+J$U`}1;6ZB^`O zUq3L=b&3ryh}xC?(RM}1>eXE_rkgvW;tkQy)wHZ1>fG4W_SS>XRIc84s5W!HPTjg- z%kaLx&ormkH>Q=H&+$Fqx1qQ-{@9GVVN20ajXKtwajE~}9B|;vubV-`FK-?(NqXwp zrwhU2h4I(Uz8%_M?A>$uoR`Y3e(UFC-{IfxsVk^UJA_?YarOg!T-AondmmL5=fp12 z-#d7+AZtALbO56UXjF?4lMdl5VLjJ9%>Jhkso6 zQd478V=ekk$hDi--tNT~-j^+EesSRQqmSLWt-IYFlGbvLI`E6I(&P4q*fr#9tL8j# zu=gaAwxjLcb4%FeufEz#e{lQi^;@gzt>wvsJ-r2vauVQhC$=xEU-`!Dh((vS`tC-bc)qS!axA;# zi^8R$aoi`-_rqIH9O=t{?U_6xN@%6epH7VVG&D|m`rBmh?#_okUmMnVZ+mNAxFyAK z@JRESS;W!E;^IG3Ao^%m$c8r`zF5ENFFE;VdR`b*eAlof=6L9LAHUzd>wCHy`NxG7 zePJ~HV5g+MrTgkaN;IN!U#YJ0!#0fc^RN#KjZbM=r(Mc$PBW1D?Jnp+ zkfap9i($)vfSQ4ocj&M?Ct5L-=X6+s(nuIx>7bO)s&s?=%H<}uvW(SmSW2=a$*+Y3 zb|5gQ-)?hww0<2H;MKxs(JaHz07NL$VTHzAG~MY2C?%z&1fJpNy>cvBf+o2+i#AWc zY=i>7>9A5kaA{>SpU)@tDWp!fRYqzw8W|y%$>lgi;GPPH!1!^8CqbkLa_E7Fb@MKP zcREm!lQBEX1s#S#KRTM9-DNb6(K|dNDnLDCe#RvurG(6GmracD2pL{TGLp~_MtDqc zIm_~Z$64-XL53GNgoKF{96J{8DtFrg<#4PF*nk~EJ#bWV(vX=3WA0dlD1nu?y8=;A z>`6$0w~UK5DL2s*C}(0KFno-65_+`u02rc-My=k-mW$~b^g2u&U&}dJp3?>%frhmJ zrJBGgHD$&r4I{@jq=m#eT1gU&oHJ{HW&)ML;Sm@I3q&eNF6AMQhEZE+z>v6^wWx7Q zAy?oGO#+-&v1+A?zUPVGTG$!L_Nm1|24s662O!8zWd?fDU_#ca;0b z9VXrm@&!gzlT^_vwOXO3Xq8e;Dplj4mB8(RohWjWgj7KVJmR!yVKGoxM(k5a5U|5q zwCQfZ2u`=j>9pxEF(p)t9CI7ta^e_)(K7;oq=a0dB~)6HGLi7A)KY4kptQsUyp!WC z75@t@E*>-~IOSQq2aaD6Fa=jsK3Efc3%=U;z*0idz@pGHY_J3m;{{wGPskN?v89Z| z3gGTB(ypU+{s&q?L8~bZp-|vzB?()BrWLpus4Y0hlCX~`HK|es#T#SyI4y#Yaf4JV z)Ddb0+cTgQni!a%`VpkO$m!p8-pM+B3N6f6_>jM0jdWdEf}QUEYvlYwzT z8{E9$UML&e3`aDB`Tm%{k-7LWhd|NkL8hedv|Q72O-X?%fv3A`TCOQ6FeUJGcm3bw zl8k>&0S7z<`QXP=NYeiA;fGe3`N>Q@asbIjT0gZm^+U@;uB=~q5JZ|F{zLrlq`*&S zBwR2UGs1hqqGm@EvD|`AXqqQv6bk81yLc)`0*6Jwp*~(HMa9En!3$AyA!w&TpK2;> z|LT)e$tfb{H&@r{v)+rT-2Ah>um8KG<>ifc<3i^eRvwR=Wec6#P||%lG`5diK(Md( z51h|-pGPhfg(SX%9O`-`8PJhP$D<)LA4j(36@9k0q-Q2tgUkqCTti>i3|0-VXgkq$ zzq@8|V0gIpPlg+J7MCEu?!S6a@zK7WvZ92Bie_tQQNmE4dTB(*tuK-2#(zH6>^q)A Q!Xyzx#&UgQT1oAH05`Kjr2qf` diff --git a/client/img/wall_straight.png b/client/img/wall_straight.png deleted file mode 100644 index 2dc5448913b6a57d0de97f4859d630b020b37ff1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4350 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 diff --git a/client/img/wall_turn.png b/client/img/wall_turn.png deleted file mode 100644 index dbe5837306514b32f773005055966b569c655773..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4458 zcmeHKdr%bj9bY6u!`lQ&M6H{Jv})Pgy}Lbb@8*u@@r;KQ5K+Ohx4U<2y}Lc`7Vbc- z5uAu2jYy~^4kW=SiA9l=(D)3Yh-k(%>ZCrH)ORcOfmZ2=HZlF}@(?DO=`hp$$Ia~R z?)UNeeZQaY_xGLOZqCd|3G@s1gCHm{E!B_(?yz|M#0UJl%FBnq?M``4o{&YkVTY49 zb5<4>${Z}rdN?x#dHR3*%N6!sIN+Nbq54X7*n&+_OK%2V{MV((hMl`}c1K)c1I#$L zetp-Ob6#9s)VbWlp)*c?u`8m8Xm8whB4cgBj*Z`Rf6xlQ7rHv-W=DHf%E_&3^Z)Gn z&PsR>R^Kle&=3Fp1a>;J|88<~T-n!4R?VwUUfg^<`P0{ST-_V<&Y$)U84mrP`(2&? z@+wvH%9;p!LazMFJ0Xu(_I{aM7BGaEV?OaCPPFZLruEl}yMFpgXU_|HxjpSylIy6B z`@`WCFGt25=u2v9qny!-@P^l|mSFYjM)cThig(JSG|Nuu=^K1By@EzcFp-zu2xy>Fl! zN@)0O&&en{qpog%{B-cjwOa-CmXer$MhS=f5? z#?fm(E2tgbdh7K*zR_RiuTxrEvL76!Odp*(mOi&*$L?86pHIm#eo*n!wU0h8tLeyX z`{O_KkNm4N>)5w%5h=BwA=}{ijg^bj7xpCA=Qf4-%va0q`;g=_ z$NcJ#T)gtPBX^E`ySC-RrC=!9d1+mR2lQc}hXak6XI!GCd7F%4coQr0*c?CuLAqFv zgQC~40&HR}oL!IHJ=BH39HU2;tBknOk;oQtspU>KyF4R@E?+}y7$i2vPv_AB02?b% zu*YV#yR;rXBH?Pmvna+8STYgT=#e~QCY;DSS(uO!G8|3vaHR?)#t+sx8M8LakURy|sSB(spR{C3nlW?SL!`jM*&LD=AbXOf zz?q+tH7PbxBc(Gj5a2$JJIQ)1cgYx78I4*4PnU?{r5W^yxW1O*X^zoKj}(oQ3QEnO zDutXu2})x^HLOO7DoB%@!cBOzf;CToO0&BJ%1*N)6abfT0EeJRjgnN7sG3%&Q36*f zP?EwaRBcw72qmu3kV@4Ah^0;rbR}h-7?lXc04OS2O{mN`i!vrgg%V1_jFKdwL2)&$ zCRxg4B4~{S#n9Sh-f5#iIXN3;VKIl@A}K_|wegv0dPE_^pGq>Vlwbx9dSnS_FY!E8 zsl}tUaw10#{#9C)9K{JOKEa-6 zICI(mvKBWFtQ#qLD(3?0mr0_L9hJ=%kGze%S~+Pe!LYO`v=lv(f{Q9;87WSHHKL-6 zD7%FP(_^$<$K>1(v;wXm2(yM(p>k!k1|>|i8r8^6psyHESB;V(NRpk5?&8gYn{u-8 z7QiFm3bd!h6}(U?)S}7O?jlyK0w4^r9)lkEgcVl!Edx z!nd*B^Ecel8Izfq=e?V}4sQDAAS9#&RD0LX?@ql-yc*Q-qR)%%72iE+l7$sJok3?p zh95onxe+b2SQcF8F86I&K*$@as_5$LmBH`EX8twKYxRcaWkGLf3%~MuKdA7fdVY67 zM(w;AJHw(PH$iQRxd+}1xjg&56{+~FRd1hK9NBRG!i71f - + + + +
@@ -16,8 +21,7 @@
- - + diff --git a/client/js/gfx/graphics.js b/client/js/gfx/graphics.js index b406ab1..8ee4a6f 100644 --- a/client/js/gfx/graphics.js +++ b/client/js/gfx/graphics.js @@ -20,6 +20,12 @@ const draw_players = (data, players, sprites) => { sprites[id].rotate(180) break } + + if (data.players[id].moving) { + sprites[id].set_img("img/pac.gif") + } else { + sprites[id].set_img("img/pac.png") + } } } @@ -34,7 +40,7 @@ const update_player_sprites = (data, players, sprites) => { new_sprites.fill(undefined) for (let id of players) { - let sprite = new Sprite("/img/pac.png", data.map) + let sprite = new Sprite("img/pac.png", data.map) sprite.layer(3) sprite.resize(1,1) sprite.show() @@ -45,7 +51,7 @@ const update_player_sprites = (data, players, sprites) => { } const create_map_dot = (data, x, y) => { - let dot = new Sprite("/img/dot.png", data.map) + let dot = new Sprite("img/dot.png", data.map) dot.move(x, y) dot.resize(.2,.2) dot.show() diff --git a/client/js/gfx/map.js b/client/js/gfx/map.js index e629b17..a9ef0ad 100644 --- a/client/js/gfx/map.js +++ b/client/js/gfx/map.js @@ -1,6 +1,6 @@ import { ItemType, get_item_key } from "../logic.js"; -const gen_style = (map, style) => { +const update_style = (map, style) => { const css = ` * { --scale: 100; @@ -18,13 +18,6 @@ const gen_style = (map, style) => { vertical-align: top; line-height: 0; } - - #container img { - display: inline-block; - width: ${100/map.width}%; - height: ${100/map.height}%; - image-rendering: pixelated; - } @media (max-aspect-ratio: ${map.width}/${map.height}) { #container { @@ -58,86 +51,87 @@ const Direction = { WALL_END_WEST: 16 } -const place_tile = (container, type) => { +/** + * @param {CanvasRenderingContext2D} context + */ +const draw_tile = (context, x, y, w, type) => { - const img = document.createElement("img") - - let image_src, class_name; + let atlas_index, rotation; switch(type) { case Direction.EMPTY: - image_src = "/img/wall_empty.png" - class_name = "" - break + return case Direction.WALL_HZ: - image_src = "/img/wall_straight.png" - class_name = "" + atlas_index = [1, 1] + rotation = 0 break case Direction.WALL_VT: - image_src = "/img/wall_straight.png" - class_name = "rotate90" + atlas_index = [1, 1] + rotation = 90 break case Direction.TURN_Q1: - image_src = "/img/wall_turn.png" - class_name = "" + atlas_index = [2, 0] + rotation = 0 break case Direction.TURN_Q2: - image_src = "/img/wall_turn.png" - class_name = "rotate270" + atlas_index = [2, 0] + rotation = 270 break case Direction.TURN_Q3: - image_src = "/img/wall_turn.png" - class_name = "rotate180" + atlas_index = [2, 0] + rotation = 180 break case Direction.TURN_Q4: - image_src = "/img/wall_turn.png" - class_name = "rotate90" + atlas_index = [2, 0] + rotation = 90 break case Direction.TEE_NORTH: - image_src = "/img/wall_tee.png" - class_name = "rotate180" + atlas_index = [1, 0] + rotation = 180 break case Direction.TEE_EAST: - image_src = "/img/wall_tee.png" - class_name = "rotate270" + atlas_index = [1, 0] + rotation = 270 break case Direction.TEE_SOUTH: - image_src = "/img/wall_tee.png" - class_name = "" + atlas_index = [1, 0] + rotation = 0 break case Direction.TEE_WEST: - image_src = "/img/wall_tee.png" - class_name = "rotate90" + atlas_index = [1, 0] + rotation = 90 break case Direction.CROSS: - image_src = "/img/wall_cross.png" - class_name = "" + atlas_index = [0, 0] + rotation = 0 break case Direction.DOT: - image_src = "/img/wall_dot.png" - class_name = "" + atlas_index = [2, 1] + rotation = 0 break case Direction.WALL_END_NORTH: - image_src = "/img/wall_end.png" - class_name = "" + atlas_index = [0, 1] + rotation = 0 break; case Direction.WALL_END_EAST: - image_src = "/img/wall_end.png" - class_name = "rotate90" + atlas_index = [0, 1] + rotation = 90 break; case Direction.WALL_END_SOUTH: - image_src = "/img/wall_end.png" - class_name = "rotate180" + atlas_index = [0, 1] + rotation = 180 break; case Direction.WALL_END_WEST: - image_src = "/img/wall_end.png" - class_name = "rotate270" + atlas_index = [0, 1] + rotation = 270 break; } - img.setAttribute("class", class_name) - img.setAttribute("src", image_src) - - container.appendChild(img) + let atlas = document.getElementById("atlas") + context.save() + context.translate((x+.5)*w, (y+.5)*w) + context.rotate(rotation * Math.PI / 180) + context.drawImage(atlas, atlas_index[0]*w, atlas_index[1]*w, w, w, -w/2, -w/2, w, w) + context.restore() } const get_point = (width, height, data, x, y) => { @@ -209,10 +203,11 @@ const gen_walls = (width, height, data) => { return walls } -const gen_map = (map, container) => { +const update_canvas = (map, canvas) => { + let context = canvas.getContext("2d"); for (let y = 0; y < map.height; y++) { for (let x = 0; x < map.width; x++) { - place_tile(container, map.walls[y * map.width + x]) + draw_tile(context, x, y, map.tile_width, map.walls[y * map.width + x]) } } } @@ -256,47 +251,42 @@ export class Map { constructor(width, height, data) { - let last = document.getElementById("container") - if (last) last.remove() - this.width = width this.height = height this.data = data this.walls = gen_walls(width, height, data) this.items = gen_items(this) this.visible = false + this.tile_width = 32 + + canvas.width = this.width * this.tile_width + canvas.height = this.height * this.tile_width + + } show() { - this.hide() let container = document.getElementById("container") - if (!container) { - container = document.createElement("div") - container.id = "container" - document.body.appendChild(container) - } + container.style.display = "" + + let canvas = document.getElementById("canvas") + canvas.style.display = "" - gen_map(this, container) - let style = document.getElementById("style") - if (!style) { - style = document.createElement("style") - style.id = "style" - document.body.appendChild(style) - } - - gen_style(this, style) + + update_canvas(this, canvas) + update_style(this, style) this.visible = true } hide() { - let container = document.getElementById("container") - if (container) container.remove() - let style = document.getElementById("style") - if (style) style.remove() + + let canvas = document.getElementById("canvas") + canvas.style.display = "none" + container.style.display = "none" this.visible = false } diff --git a/client/js/gfx/sprite.js b/client/js/gfx/sprite.js index b793d89..07360f1 100644 --- a/client/js/gfx/sprite.js +++ b/client/js/gfx/sprite.js @@ -47,6 +47,10 @@ export class Sprite { this.#update_pos() } + set_img(src) { + this.element.src = src + } + rotate(d) { this.d = d this.#update_pos() diff --git a/client/js/logic.js b/client/js/logic.js index cb063d4..395e4f0 100644 --- a/client/js/logic.js +++ b/client/js/logic.js @@ -27,7 +27,7 @@ export const ItemType = { * * @typedef {{[key: number]: Key}} InputMap * - * @typedef {{pos: Vec2, move_rot: Rotation, input_rot: Rotation, name?: string}} Player + * @typedef {{pos: Vec2, move_rot: Rotation, input_rot: Rotation, moving: boolean, name?: string}} Player * @typedef {{start: boolean, key: Key, name?: string}} PlayerInput * @typedef {{players: {[key: number]: PlayerInput}, added?: number[], removed?: number[] }} Input * @@ -96,7 +96,8 @@ function processInput(pastData, input) { data.input[added] ||= { pos: [1, 1], input_rot: Rotation.EAST, - mov_rot: Rotation.EAST + mov_rot: Rotation.EAST, + moving: false }; if(!(added in data.players)) { data.players[added] = structuredClone(data.input[added]) @@ -314,8 +315,10 @@ const update_players = (data) => { let tile_in_front = get_tile_with_rot(data.map, current_pos, move_dir) if (tile_in_front != 1 && tile_in_front != 2) { data.players[id].pos = move_pos + data.players[id].moving = true } else { data.players[id].pos = round_pos(current_pos) + data.players[id].moving = false } // eat items