From 44334fc3852eb832280a335f72e6416c93a9f19f Mon Sep 17 00:00:00 2001 From: Tyler Murphy Date: Fri, 16 Jun 2023 20:38:55 -0400 Subject: [PATCH] ts --- .gitignore | 3 +- client/css/main.css | 21 -- client/img/atlas.png | Bin 0 -> 6304 bytes client/img/{pac.png => atlas.png.bak} | Bin 4583 -> 5670 bytes client/img/dot.png | Bin 4363 -> 0 bytes client/img/pac.gif | Bin 1004 -> 0 bytes client/img/wall_atlas.png | Bin 1261 -> 0 bytes client/index.html | 8 +- client/js/game.js | 111 ------ client/js/gfx/graphics.js | 128 ------- client/js/gfx/map.js | 293 --------------- client/js/gfx/sprite.js | 71 ---- client/js/input.js | 84 ----- client/js/logic.js | 335 ------------------ client/js/main.js | 168 +++------ client/src/logic/items.ts | 41 +++ client/src/logic/logic.ts | 80 +++++ client/src/logic/movement.ts | 142 ++++++++ client/src/logic/players.ts | 79 +++++ client/src/logic/ui.ts | 32 ++ client/src/main.ts | 75 ++++ client/src/map.ts | 151 ++++++++ client/src/net/game.ts | 186 ++++++++++ client/src/net/input.ts | 70 ++++ .../multiplayer.js => src/net/multiplayer.ts} | 85 ++--- client/src/renderer.ts | 320 +++++++++++++++++ client/src/types.ts | 131 +++++++ client/tsconfig.json | 11 + Cargo.lock => server/Cargo.lock | 0 Cargo.toml => server/Cargo.toml | 0 {src => server/src}/main.rs | 0 {src => server/src}/room/handle.rs | 0 {src => server/src}/room/messages.rs | 0 {src => server/src}/room/mod.rs | 0 {src => server/src}/room/websocket.rs | 0 {src => server/src}/rooms.rs | 0 {src => server/src}/routes.rs | 2 +- 37 files changed, 1416 insertions(+), 1211 deletions(-) create mode 100644 client/img/atlas.png rename client/img/{pac.png => atlas.png.bak} (52%) delete mode 100644 client/img/dot.png delete mode 100644 client/img/pac.gif delete mode 100644 client/img/wall_atlas.png delete mode 100644 client/js/game.js delete mode 100644 client/js/gfx/graphics.js delete mode 100644 client/js/gfx/map.js delete mode 100644 client/js/gfx/sprite.js delete mode 100644 client/js/input.js delete mode 100644 client/js/logic.js create mode 100644 client/src/logic/items.ts create mode 100644 client/src/logic/logic.ts create mode 100644 client/src/logic/movement.ts create mode 100644 client/src/logic/players.ts create mode 100644 client/src/logic/ui.ts create mode 100644 client/src/main.ts create mode 100644 client/src/map.ts create mode 100644 client/src/net/game.ts create mode 100644 client/src/net/input.ts rename client/{js/multiplayer.js => src/net/multiplayer.ts} (81%) create mode 100644 client/src/renderer.ts create mode 100644 client/src/types.ts create mode 100644 client/tsconfig.json rename Cargo.lock => server/Cargo.lock (100%) rename Cargo.toml => server/Cargo.toml (100%) rename {src => server/src}/main.rs (100%) rename {src => server/src}/room/handle.rs (100%) rename {src => server/src}/room/messages.rs (100%) rename {src => server/src}/room/mod.rs (100%) rename {src => server/src}/room/websocket.rs (100%) rename {src => server/src}/rooms.rs (100%) rename {src => server/src}/routes.rs (96%) diff --git a/.gitignore b/.gitignore index ea8c4bf..f4c9b61 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -/target +server/target +client/js diff --git a/client/css/main.css b/client/css/main.css index 86b8fd8..87c145c 100644 --- a/client/css/main.css +++ b/client/css/main.css @@ -71,24 +71,3 @@ input { padding: .25rem; margin-bottom: .215rem; } - -#container img { - image-rendering: pixelated; -} - -#canvas { - position: absolute; - width: 100%; - height: 100%; -} - -#fps { - position: absolute; - left: 0; - top: 0; - z-index: 99; - font-size: 20; - font-style: monospace; - background-color: black; - color: white; -} diff --git a/client/img/atlas.png b/client/img/atlas.png new file mode 100644 index 0000000000000000000000000000000000000000..240705b2c7b8c382bfddfbadf65204d82c0bec03 GIT binary patch literal 6304 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 literal 0 HcmV?d00001 diff --git a/client/img/pac.png b/client/img/atlas.png.bak similarity index 52% rename from client/img/pac.png rename to client/img/atlas.png.bak index 7dc0989d85f3bfe59bb8116e86c2473634bfdbe6..3cb5dfc8c9839c3e2740159792f13e5062aa94b3 100644 GIT binary patch delta 2280 zcmYjRX;cze8@>c6l2PE+SSTu`q!|0=3@T}+xusTCT7rO{?UjgdqO|Q|0Mecw zUYAtZghR|u5zI)_>cewk84#eg4 zu1r|Y<)lWx9>w##Q^hLJw-T$xs-Y97Hl)tN3R&q}GyJ2zC3GVNtB$?lB^2%qk-yK1 z%3LTl!5GAxS*Sh!^�mwbaVZ??$#a2Zy-MtZPkd6>LZowLMue{NU10>2_yF6AT=a zGQudlLVlaVnj)-2Z1r(oJLY%kIpdQHVR|(TI}S(NJ+QOLT;`(O`@#3HJ6W+~SHg7O zH^ZjqQ0K~2&4kXRE4W8K3sw=Fx(?mEIma;qahrD?wS46_^l2KN z;9i)W(9lrYRKD+E)eY2*Y}_a4@c8hhQO9M2#g?0OpN6KmowWvuK0_J0lG-tz4?Ue+ zGA87;|Fc2Y?Ru}f2q@8~Ha)Dsmkrg{zZnSlyD9C2VxaW;#*QuK3PipxMSPMm#hIGE zoFo}^F4P>Yz?51PmGt7KoE}>h=~*_>)@fp0`z1rZlTL8+@NtHCS-8_V$HMZ{!Jm2k zvB%$A$Ne59>fnB!-?%qp?}1mh@{Z`{Svz>|&tAa@%{{#MEQes-BP)G7wXi1hKoqiu zp=}`-A!#i)>}MBdD!Tet1O})1KZkXH9%kA9<`r)f-@DZC^{*6LXRo(ERrhR}3&5WI zjIZnOx#;JmXGl^8dXD`vBsECq-c=-=e*YEXhLjd;%gw<8fZDR%cV@%OI1_h&UiY7$z}=3Y@%2oG$t|yd?K4gViLuCsxgf$qL5eubtXL8oW*3)$W$tm zOrem~26zgR9zh{*Akqb7Dv`!w2#9*^F2| zpH3B0$!Z70TBDE5XvxK}N+)vS!mR0NkB^0FqYbnQ9bG zW&T0FrUsKm5U4|D0CJ&G`bp*+DOKA3*#H1L zVsy5le+wzyHN{!R9qkq1z=ur%ZuFmFq0udgO(c?Fr&$+zjPgC3uRhZzB zQNMKrLtwyHWij2<15Zw!ZN_#DI$dyiFzB(X^OyHeJvt8lNu$nwvKvCK^S(Yx#YfK>w(#W?l0Z9n=~TI{HwdC`C-QFZFSe z`5d><%rEbXLE8zseFBbGOX0$OO@fsBn9c6RGuJQF7j)l3y75%oW}@wr+j<}zLBzXf zAHmDGwmPq~7GH9EJ_otTkLss4+1Q9CfrT`&Hg){b~;8x zPc}ggX<{Iez*^ZbPXiR@*5|K$Ro>Zs{S{|0HTujJd7NprOndwND?5D)Bq+|huc~CK z|1XY3Z*IxC!!I!UCy*Wck|+)TYiNV)HuSx$`4&&B?1V)do^?Llm2b@N%S~;yEABK{ z8WYBA+uog>kgyWlVa1(y*SEaH+^>R`FSylet4^d4LfRF?%qtEqKG-WA)Lnkm0EisKVk1*ce{@SS=X%hWMZ?!p5lT7%v`YY%pB(-hmB5bKm&UvapMk@{&nZ zf6YGb(AUIP>(@Y_0d8Qv_Qxts=68ogPD152*K*yzi%l!oJbef$)$6KbUw6|V^*)li zQY}gncqnwnVl#HpJumudNJY}GvKeU9{tCq_SC8|{2u4G^%&P+VJYw$RjW5ZOyR%n% z_svy8X=dn=Ox}h5)em8!#ONgv=%~4|7QLt53T}las6w8cpoo)1l6F-1F?iVBGTW;B zvt|Sl*Y{cP;(o}=xV+VyDr@)HU807ynJKS;J0K7w-k3{34Owf=wKfjA2~MEm%LC^z zhbC2+9fSqf#C|$XP%?S>r3tP|*D0>gsMqXfGY5f6@0;Hjy32g1CQq{w1Os_sQapy- z%CzG9&bfJw#)8RkjJIz2{hEg-uEDBWbRG`l-?NTM zt87s5o4(qkKYT}MJ%DGWl~!U{`x0c`&r9FSKHpfg@MQtM)WM|}EsIfcl-t@2x6rj` zux*wfEl*Upc0#cG&;MLp(-Evh@!GF3hI&!?l?$&Hbd%PFK>nk^kAAlVV}<{-9afV6d$G?g_z2 zz0C!|VT5qP)j|yI=2kc=!+hx16}4XOYyDGDh%uNtZob1m;3JT~wfu~n(`ll@faDM3e+2mMat#<)>xl zq$-qD7NjbqR%E6zFjU;i4Y3}Tz0bbFhWF8{dAj1t zwaYf#W1alvy8Pll9q#UnyLEeYdS^HtFnM7ZwsP59t3$h{TbuCp9ME;M_o>Uy+_yKk za8hTPo1WZERjCJs5<9AcY?Zq0kDSTDYU&zpzuV%T%C?Ci)&gU3!PSoMwJ@u{K7rUL`74tuPOWB z!TzJGn!7iz<6GCH@PqNut4B*-D5?I_*WA+a^}!DL_wQ`q-D7mxd&Xq7He1H7++{+A zhLdAOnb*HK$lx^Nz?w5U$$pb2y|CE#?&0Itu~X7Z?Y=*M5ne1-&s?Ka*dw{jcaNjZ z=1l21-#ZVl(O7-t`H{zJu@inweBE_Ce-5`Ew~cYmvf$505|cJwIOZk2dC^Kie_{6! z-{m!mk2jvG?A{!B*KAJD&;!=Klb|lySIJ{o*Wlsz*n;0;@oi!fg7w+rpJHUmCZTE`JkR{ z-Irnr5MEZfa(%YhsaXp=)VwY^m!n`UH?0<^`zIN8)yu zwa^0<6;pU>N)Mf2n$4A=o><-}^+D9}L}C!D=}ZG%=iUx)d5t`mH*PMoSx?#>ka7D` z=<}BOq}!ECM|Z^?6!3m2ko{9YURb;Hj Iol`;+07t&eCjbBd diff --git a/client/img/dot.png b/client/img/dot.png deleted file mode 100644 index b911cea429dfa1861d9dcce1ff2a8f1333d115d7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4363 zcmeHLYj6|S6_y_u5OxX)V3L@0D@>>%t9@wo+FG`SB(QJ<#t&pVV7k&?$%`eeEUhic z0b=utOTaG1jCnYuOz_~8SKLkmLu(o+9#d0~DRpsyCgb8Hja>+kw2D`rW>`7)a zo@xGBn$_-}d(L;x`R=)A?$u9omoH6{zaW>%WJ%U+a~`};5w9r;@b}{P&b9qYd)KFJ zYT6alU;U!;+2#JpLSbz`%RiPyROB4|L#|FrZsQEOw?WdA-ZrF~uguN8%p<96uSma~7gSW-%7?a2K>kNgC^uWplZ&-T>z_LY8A_f>0A zxxeh%U(Od!kI&3nv$kpG+9MaA%-=Sfcq!#!|A%cIAO5K7SmUg&!J3!@zJu?Y*IZ)l z+pa7+d*uz|y*Z6DFYkM%gRD()3$TZ@zc9KHxl|c zI*QYlExfP4ztx(Yx`{n|`~Hjln=hwa{dkIr(5$V^)2pJ%`XNTx#e)m}|u=Vkj; zxqfzTb;2M1z2))wyS@{TdX6;Ctc`mMtNoIYZ>^|a(p7e@Ztl^t*!Z`r7qxwIs;Bz; zimRn48i@ZFAD7&V+CGX?hN=!PFp=}^@~aVAP(T>dtSoivSw&`sJUvW9 z051?2B<%J0f^^uRkZ@`EEQ&D&BB=op-@N}QYra>8zc03J%*DQNup2#4Muzd6GnZ(c_KsAWM^^~kJv56y6I->)D<|DXcw1;z-l%bZ*Mw@wOxfq_+Y*2{)X_j|#EG<2%bSf3e z5E@jYA+;!_bup-(B-JQM0oLIFdXmD`qoAz5puqT?K!k$eN)F-x3g9@QB2Y%f0+iAa zYE;iK1gga;763w}(lVM+5Gw*4tV+f+Iw}#0g;0968UT{jp?ZoWP>Q7pR0q@|l$zD* zbSl!Rp(H5QNiX38UItDl=Vjag^ZVS=fJiuP%(WU6q!NEB$@MUT3mO;{uX4Wf@Y8_; z&I|GdMr4!F=rmd#rPJd&iqsKNM-tvD5D3Cb6fp^0sfvz>(?Y{!AhC>Crw~Abg}KnC z0AK_@P{8vZgF=KrM9Yz38(dB-BQR!001y->RWz=l395k5(oNsmr>HW!5cBa$e(qVhpm^ey`8;iRR6Akw0s8D}(wAX5QYDNcwL9ded1J~x2f zW2jt*<=i)v0_C8b4C&IKDy_o>tBFvdjLxA&82}t4!>V;^z>Gx?@-8971c1>Ed4ycS z@|3tjeke^;+F0#S2@q!i5{BX$^y`FSLkVMI<`)9s3$5>5{^zCIjuFGT6LeFT_Tg z;SgtH+xZSZLv!&RdVtUqPR7OW1YHw!jf;VCDNj__1YP4|U|h-*)%Aa)OaAmY1$=N9 z6oQAPlaJbPc+g64akFTzekK_zxvgen!JI#Dt7}c#nw1#e zVUN4M_ukaPD<7RU>Qn6({yF8ds>bcIrBxTR5AK{_s+IM~H&pH3GpS_8ebb3S`<=l< z0|N^O8*VMLAFbynf1db3QTQ->_|D(okI9L70gqdBulxAGkAK^hE<5#l-n23^eFnOe OSuM-WCl~)@^Zx+)h9#r` diff --git a/client/img/pac.gif b/client/img/pac.gif deleted file mode 100644 index 4b0608b2b2b80fca499314c2c89c1e841bc2d8e9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 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 diff --git a/client/img/wall_atlas.png b/client/img/wall_atlas.png deleted file mode 100644 index bd3a5df5e9ced63370945bb22bf542099fa5725a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 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 diff --git a/client/index.html b/client/index.html index fb1e66e..af15bbd 100644 --- a/client/index.html +++ b/client/index.html @@ -2,15 +2,13 @@ + - - + +
-
diff --git a/client/js/game.js b/client/js/game.js deleted file mode 100644 index 3d8f6a7..0000000 --- a/client/js/game.js +++ /dev/null @@ -1,111 +0,0 @@ -/** - * @author tint - * @template Data, Input - */ -export class Game { - /** - * @param {number} history How many frames of history to keep in memory - * @param {(data: Data, input: Input, frame: number) => Data} advance The function to apply game logic. For rollback to work properly, this must be a pure function, and can't mutate inputs. - */ - constructor(history, advance) { - this.historysize = history; - this.advance = advance; - - /** @type {{data: Data, input: Input}[]} */ - this.history = []; - this.historyStart = 0; - - // the game may have inputs from the "future" - // (local input delay to make sure inputs play at the same time on all machines) - // so the "present" isn't always the latest frame - // the game loop should set this every frame - this.currentFrame = 0; - } - - startHistory(frame, data) { - this.historyStart = frame; - this.history = [{ data }]; - this.currentFrame = frame; - } - - getHistory(frame) { - return this.history[frame - this.historyStart]; - } - - getFrame() { - return this.historyStart + this.history.length - 1; - } - - getCurrentData() { - const entry = this.history[this.history.length - 1]; - return entry && entry.data; - } - - /** - * Sets the input at a specific frame. If that frame is in history, - * the game will be rewound, the input applied, and then fast-forwarded to the current head. - * If the frame is ahead of the current latest frame, the game will be run until that frame. - * @param {number} frame The time to apply the input at - * @param {Input} input The input - */ - setInput(frame, input) { - this.editFrame(frame, index => { - let past = this.history[index - 1]; - if(index === 0) { - past = { data: undefined }; - } - this.history[index] = { - input, - data: this.advance(past ? past.data : undefined, input, frame), - }; - }); - } - - setData(frame, data) { - this.editFrame(frame, index => { - this.history[index] = { - data, - input: this.history[index] && this.history[index].input, - } - }); - } - - /** - * @param {number} frame - * @param {(index: number) => void} edit - */ - editFrame(frame, edit) { - const head = this.historyStart + this.history.length; - if(frame < head) { - if(frame < this.historyStart) { - throw new Error("Tried to edit a past frame not in history:", frame); - } - - edit(frame - this.historyStart); - // fast forward back to the present with the new data - for(let i = frame + 1; i < head; i++) { - const past = this.history[i - this.historyStart - 1]; - this.history[i - this.historyStart].data = this.advance( - past ? past.data : undefined, - this.history[i - this.historyStart].input, - i - ); - } - } else { - // fast forward the inbetween frames with no input - for(let i = head; i < frame; i++) { - const entry = this.history[i - this.historyStart - 1]; - this.history[i - this.historyStart] = { - input: undefined, - data: this.advance(entry ? entry.data : undefined, undefined, i), - }; - } - edit(frame - this.historyStart); - } - - while(this.history.length > this.historysize) { - this.history.shift(); - this.historyStart++; - } - } -} diff --git a/client/js/gfx/graphics.js b/client/js/gfx/graphics.js deleted file mode 100644 index 8ee4a6f..0000000 --- a/client/js/gfx/graphics.js +++ /dev/null @@ -1,128 +0,0 @@ -import { Sprite } from './sprite.js' -import { ItemType, Rotation } from '../logic.js' - - -const draw_players = (data, players, sprites) => { - for (let id of players) { - let pos = data.players[id].pos - sprites[id].move(pos[0], pos[1]) - switch (data.players[id].move_rot) { - case Rotation.NORTH: - sprites[id].rotate(270) - break - case Rotation.EAST: - sprites[id].rotate(0) - break - case Rotation.SOUTH: - sprites[id].rotate(90) - break - case Rotation.WEST: - 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") - } - } -} - -const update_player_sprites = (data, players, sprites) => { - for (const sprite of sprites) { - if (sprite !== undefined) { - sprite.destroy() - } - } - - let new_sprites = Array(players) - new_sprites.fill(undefined) - - for (let id of players) { - let sprite = new Sprite("img/pac.png", data.map) - sprite.layer(3) - sprite.resize(1,1) - sprite.show() - new_sprites[id] = sprite - } - - return new_sprites -} - -const create_map_dot = (data, x, y) => { - let dot = new Sprite("img/dot.png", data.map) - dot.move(x, y) - dot.resize(.2,.2) - dot.show() - dot.type = ItemType.DOT - return dot -} - -const draw_sprites = (data, item_sprites) => { - let items = data.map.items - - let to_remove = [] - // remove rendered but non existing items - for (const item_key in item_sprites) { - - let sprite = item_sprites[item_key] - if (!items[item_key]) { - sprite.destroy() - to_remove.push(item_key) - } - - } - - for (const id of to_remove) { - delete item_sprites[id] - } - - // add not rendered sprites - for (const item_key in items) { - - /** @type {import('../logic.js').Item} */ - let item = items[item_key] - let sprite = item_sprites[item_key] - - if (sprite) { - if (item.type === sprite.type) - continue - sprite.destroy() - } - - switch (item.type) { - case ItemType.DOT: - sprite = create_map_dot(data, ...item.pos) - break; - } - - item_sprites[item_key] = sprite - } - -} - -export const startGraphicsUpdater = () => { - - let player_sprites = [] - let item_sprites = {} - - /** - * @type {(data: import("../logic.js").GameState) => void} - */ - return (data) => { - - if (!data.map || !data.map.visible) return - - let players = Object.keys(data.players).filter(k => data.players[k] !== undefined) - - if (player_sprites.length !== players.length) { - player_sprites = update_player_sprites(data, players, player_sprites) - console.log("updating player sprites") - } - - draw_sprites(data, item_sprites) - draw_players(data, players, player_sprites) - - } -} diff --git a/client/js/gfx/map.js b/client/js/gfx/map.js deleted file mode 100644 index a9ef0ad..0000000 --- a/client/js/gfx/map.js +++ /dev/null @@ -1,293 +0,0 @@ -import { ItemType, get_item_key } from "../logic.js"; - -const update_style = (map, style) => { - const css = ` - * { - --scale: 100; - --aspect: ${map.width/map.height}; - --scaleX: calc(var(--scale) * 1vw); - --scaleY: calc(var(--scale) * 1vh); - } - - #container { - width: calc(var(--scaleY) * var(--aspect)); - height: var(--scaleY); - margin-top: calc((100vh - var(--scaleY))/2); - margin-left: calc(50vw - var(--scaleY)*var(--aspect)/2); - position: relative; - vertical-align: top; - line-height: 0; - } - - @media (max-aspect-ratio: ${map.width}/${map.height}) { - #container { - width: var(--scaleX); - height: calc(var(--scaleX) / var(--aspect)); - margin-left: calc((100vw - var(--scaleX))/2); - margin-top: calc(50vh - var(--scaleX)/var(--aspect)/2); - } - }`; - - style.innerHTML = css -} - -const Direction = { - EMPTY: 0, - WALL_HZ: 1, - WALL_VT: 2, - TURN_Q1: 3, - TURN_Q2: 4, - TURN_Q3: 5, - TURN_Q4: 6, - TEE_NORTH: 7, - TEE_EAST: 8, - TEE_SOUTH: 9, - TEE_WEST: 10, - CROSS: 11, - DOT: 12, - WALL_END_NORTH: 13, - WALL_END_SOUTH: 14, - WALL_END_EAST: 15, - WALL_END_WEST: 16 -} - -/** - * @param {CanvasRenderingContext2D} context - */ -const draw_tile = (context, x, y, w, type) => { - - let atlas_index, rotation; - switch(type) { - case Direction.EMPTY: - return - case Direction.WALL_HZ: - atlas_index = [1, 1] - rotation = 0 - break - case Direction.WALL_VT: - atlas_index = [1, 1] - rotation = 90 - break - case Direction.TURN_Q1: - atlas_index = [2, 0] - rotation = 0 - break - case Direction.TURN_Q2: - atlas_index = [2, 0] - rotation = 270 - break - case Direction.TURN_Q3: - atlas_index = [2, 0] - rotation = 180 - break - case Direction.TURN_Q4: - atlas_index = [2, 0] - rotation = 90 - break - case Direction.TEE_NORTH: - atlas_index = [1, 0] - rotation = 180 - break - case Direction.TEE_EAST: - atlas_index = [1, 0] - rotation = 270 - break - case Direction.TEE_SOUTH: - atlas_index = [1, 0] - rotation = 0 - break - case Direction.TEE_WEST: - atlas_index = [1, 0] - rotation = 90 - break - case Direction.CROSS: - atlas_index = [0, 0] - rotation = 0 - break - case Direction.DOT: - atlas_index = [2, 1] - rotation = 0 - break - case Direction.WALL_END_NORTH: - atlas_index = [0, 1] - rotation = 0 - break; - case Direction.WALL_END_EAST: - atlas_index = [0, 1] - rotation = 90 - break; - case Direction.WALL_END_SOUTH: - atlas_index = [0, 1] - rotation = 180 - break; - case Direction.WALL_END_WEST: - atlas_index = [0, 1] - rotation = 270 - break; - } - - 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) => { - if (x < 0 || x >= width || y < 0 || y >= height) { - return 0 - } else { - return data[y * width + x] - } -} - -const gen_walls = (width, height, data) => { - - let walls = Array(width * height) - for (let y = 0; y < height; y++) { - for (let x = 0; x < width; x++) { - - let north = get_point(width, height, data, x, y-1) == 1 - let south = get_point(width, height, data, x, y+1) == 1 - let east = get_point(width, height, data, x+1, y) == 1 - let west = get_point(width, height, data, x-1, y) == 1 - let current = get_point(width, height, data, x, y) == 1 - - let point = Direction.EMPTY - - if (!current) { - walls[y * width + x] = point - continue - } - - if (north && south && east && west) { - point = Direction.CROSS - } else if (east && west && north) { - point = Direction.TEE_NORTH - } else if (east && west && south) { - point = Direction.TEE_SOUTH - } else if (north && south && east) { - point = Direction.TEE_EAST - } else if (north && south && west) { - point = Direction.TEE_WEST - } else if (east && west) { - point = Direction.WALL_HZ - } else if (north && south) { - point = Direction.WALL_VT - } else if (west && south) { - point = Direction.TURN_Q1 - } else if (south && east) { - point = Direction.TURN_Q2 - } else if (east && north) { - point = Direction.TURN_Q3 - } else if (north && west) { - point = Direction.TURN_Q4 - } else if (north) { - point = Direction.WALL_END_NORTH - } else if (east) { - point = Direction.WALL_END_EAST - } else if (south) { - point = Direction.WALL_END_SOUTH - } else if (west) { - point = Direction.WALL_END_WEST - } else { - point = Direction.DOT - } - - walls[y * width + x] = point - - } - } - - return walls -} - -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++) { - draw_tile(context, x, y, map.tile_width, map.walls[y * map.width + x]) - } - } -} - -const gen_items = (map) => { - - let width = map.width - let height = map.height - - let items = {} - - for (let y = 0; y < height; y++) { - for (let x = 0; x < width; x++) { - let tile = get_point(width, height, map.data, x, y) - if (tile != 0) continue - - let item_key = get_item_key(x, y, width) - items[item_key] = {type: ItemType.DOT, pos: [x, y]} - - let tile_south = get_point(width, height, map.data, x, y + 1) - if (tile_south == 0) { - item_key = get_item_key(x, y + .5, width) - items[item_key] = {type: ItemType.DOT, pos: [x, y + .5]} - } - - let tile_east = get_point(width, height, map.data, x + 1, y) - if (tile_east == 0) { - item_key = get_item_key(x + .5, y, width) - items[item_key] = {type: ItemType.DOT, pos: [x + .5, y]} - } - } - } - - return items -} - -export class Map { - - static data - static walls - - constructor(width, height, data) { - - 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() { - - let container = document.getElementById("container") - container.style.display = "" - - let canvas = document.getElementById("canvas") - canvas.style.display = "" - - let style = document.getElementById("style") - - update_canvas(this, canvas) - update_style(this, style) - - this.visible = true - } - - hide() { - - 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 deleted file mode 100644 index 07360f1..0000000 --- a/client/js/gfx/sprite.js +++ /dev/null @@ -1,71 +0,0 @@ -export class Sprite { - - constructor(image_src, map) { - this.element = document.createElement("img") - this.element.src = image_src - this.element.className = "sprite" - document.getElementById("container").appendChild(this.element) - - this.map = map - this.x = 0 - this.y = 0 - this.w = 1 - this.h = 1 - this.z = 1 - this.d = 0 - this.hide() - } - - #update_pos() { - let width = 100 / this.map.width * this.w - let height = 100 / this.map.height * this.h - let left = 100 / this.map.width * (this.x + (1 - this.w) / 2) - let top = 100 / this.map.height * (this.y + (1 - this.h) / 2) - - this.element.style.width = `${width}%` - this.element.style.height = `${height}%` - this.element.style.left = `${left}%` - this.element.style.top = `${top}%` - this.element.style.transform = `rotate(${this.d}deg)` - this.element.style.zIndex = `${this.z}` - } - - move(x, y) { - this.x = x - this.y = y - this.#update_pos() - } - - resize(w, h) { - this.w = w - this.h = h - this.#update_pos() - } - - layer(z) { - this.z = z - this.#update_pos() - } - - set_img(src) { - this.element.src = src - } - - rotate(d) { - this.d = d - this.#update_pos() - } - - hide() { - this.element.style.display = "none" - } - - show() { - this.element.style.display = "initial" - } - - destroy() { - this.element.remove() - } - -} diff --git a/client/js/input.js b/client/js/input.js deleted file mode 100644 index 3928e91..0000000 --- a/client/js/input.js +++ /dev/null @@ -1,84 +0,0 @@ -import { Key } from "./logic.js"; - -const debug_style = document.body.appendChild(document.createElement("style")) -var debug_enabled = false - -export function startInputListener() { - let dir = 0; - let start = false; - - // document.getElementById("start").onclick = e => { - // e.preventDefault(); - // start = true; - // } - - let keymap = { - "KeyW": Key.UP, - "KeyA": Key.LEFT, - "KeyS": Key.DOWN, - "KeyD": Key.RIGHT, - }; - - document.getElementById("start").onclick = function() { - start = true - } - - window.addEventListener("keydown", ev => { - if(ev.repeat) { - return; - } - if(!(ev.code in keymap)) { - if (ev.code === "KeyB") { - debug_enabled = !debug_enabled - if (debug_enabled) { - debug_style.innerHTML = ` \ - #container img { \ - box-shadow: 0 0 1px red inset; \ - } \ - #container .sprite { \ - box-shadow: 0 0 1px white inset; \ - } \ - ` - } else { - debug_style.innerHTML = "" - } - } - return; - } - dir = keymap[ev.code]; - }); - - window.addEventListener("keyup", ev => { - if (ev.repeat) { - return; - } - if (!(ev.code in keymap)) { - return - } - if (dir == keymap[ev.code]) { - dir = Key.NOTHING - } - }) - - let last = { - dir: 0, - } - - return function() { - - if(dir === last.dir && !start) { - return; - } - - last = { - dir, - }; - - let s = start; - start = false; - return { - dir, - start: s, - } - } -} diff --git a/client/js/logic.js b/client/js/logic.js deleted file mode 100644 index 395e4f0..0000000 --- a/client/js/logic.js +++ /dev/null @@ -1,335 +0,0 @@ -import { Map } from "./gfx/map.js"; - -// enum -export const Key = { - NOTHING: undefined, - UP: 1, - DOWN: 2, - LEFT: 3, - RIGHT: 4, -} - -// enum -export const Rotation = { - NOTHING: undefined, - NORTH: 1, - EAST: 2, - SOUTH: 3, - WEST: 4 -} - -export const ItemType = { - DOT: 1 -} - -/** - * @typedef {[number, number]} Vec2 - * - * @typedef {{[key: number]: Key}} InputMap - * - * @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 - * - * @typedef {{[key: number]: Player}} Players - * - * @typedef {{width: number, height: number, data: number[]}} Map - * - * @typedef {{type: ItemType, pos: Vec2}} Item - * - * @typedef {{ - * started: boolean, - * input: InputMap, - * players: Players, - * map: Map, - * items_removed: Item[] - * }} GameState - */ - -/** @type {GameState} */ -export const initState = { - started: false, - input: {}, - players: [], - map: {} -} - -let last = Date.now() -let fps_div = document.getElementById("fps") -let frameCount = 0 - -export function advance( - pastData = initState, - input = { players: {} }, - frame -) { - let data = processInput(pastData, input, frame); - - if (frameCount == 60) { - frameCount = 0 - let now = Date.now() - let fps = (now-last)/1000*60 - fps_div.innerHTML = fps.toFixed(2); - last = now - } - - frameCount++ - - return data; -} - -/** - * @param {GameState} pastData - * @param {Input} input - * @param {number} frame - */ -function processInput(pastData, input) { - - /** @type {GameState} */ - let data = structuredClone(pastData) - - let startPressed = false; - - for(const added of input.added || []) { - if (data.started || Object.keys(data.players).length >= 4) continue; - console.log("added", added); - data.input[added] ||= { - pos: [1, 1], - input_rot: Rotation.EAST, - mov_rot: Rotation.EAST, - moving: false - }; - if(!(added in data.players)) { - data.players[added] = structuredClone(data.input[added]) - } - } - - for(const id in input.players) { - if(!input.players[id]) { - continue; - } - - if(id in data.players && input.players[id].name !== undefined) { - let name = input.players[id].name; - name = name.substring(0, 16); - - data.players[id] = { - ...data.players[id], - name, - }; - - } - - startPressed ||= input.players[id].start; - data.input[id] = input.players[id].dir - } - - const player_display = document.getElementById("players") - for (const id in data.players) { - if (data.players[id] === null) continue - let name = data.players[id].name - if (name === undefined) continue - - let element_id = 'span' + id - - let element = player_display.children[element_id] - if (element === null || element === undefined) { - let span = document.createElement("span") - span.innerHTML = `[${id}] ${name}` - span.id = element_id - player_display.appendChild(span) - } - } - - if (startPressed && !data.started) { - init_map(data) - data.started ||= startPressed; - } - - if (data.started) { - update_players(data) - } - - - for(const removed of input.removed || []) { - console.log("removed", removed); - delete data.input[removed]; - delete data.players[removed]; - - let element_id = 'span' + removed - let element = document.getElementById(element_id) - if (element !== null && element !== undefined) element.remove() - } - - - return data -} - -const init_map = (data) => { - - document.getElementById("lobby").style.display = "none" - - let width = 21 - let height = 21 - let m_data = [ - 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, - 1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1, - 1,0,1,1,1,0,1,1,1,0,1,0,1,1,1,0,1,1,1,0,1, - 1,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,1, - 1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1, - 1,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,1, - 1,0,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,0,1, - 1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, - 1,1,1,0,1,0,1,0,1,1,1,1,1,0,1,0,1,0,1,1,1, - 1,0,0,0,0,0,1,0,1,2,2,2,1,0,1,0,0,0,0,0,1, - 1,0,1,1,1,0,1,0,1,2,2,2,1,0,1,0,1,1,1,0,1, - 1,0,0,0,0,0,1,0,1,2,2,2,1,0,1,0,0,0,0,0,1, - 1,1,1,0,1,0,1,0,1,1,2,1,1,0,1,0,1,0,1,1,1, - 1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, - 1,0,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,0,1, - 1,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,1, - 1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1, - 1,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,1, - 1,0,1,1,1,0,1,1,1,0,1,0,1,1,1,0,1,1,1,0,1, - 1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1, - 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 - ] - - data.map = new Map(width, height, m_data) - data.map.show() -} - -const MOVE_SPEED = .1 - -const round_pos = (pos) => { - return [Math.round(pos[0]), Math.round(pos[1])] -} - -const is_stable_pos = (pos) => { - let rpos = round_pos(pos) - return Math.abs(rpos[0] - pos[0]) < .05 && Math.abs(rpos[1] - pos[1]) < .05 -} - -const get_tile = (map, pos, ox, oy) => { - let x = Math.round(pos[0] + ox) - let y = Math.round(pos[1] + oy) - if (x < 0 || x >= map.width || y < 0 || y >= map.height) return 1 - return map.data[y * map.width + x] -} - -const get_tile_with_rot = (map, pos, rot) => { - let collider = 1 - switch(rot) { - case Rotation.NORTH: - collider = get_tile(map, pos, 0, -.51) - break - case Rotation.SOUTH: - collider = get_tile(map, pos, 0, .51) - break - case Rotation.WEST: - collider = get_tile(map, pos, -.51, 0) - break - case Rotation.EAST: - collider = get_tile(map, pos, .51, 0) - break - } - return collider -} - -const get_rot = (dir) => { - switch (dir) { - case Key.UP: return Rotation.NORTH - case Key.DOWN: return Rotation.SOUTH - case Key.LEFT: return Rotation.WEST - case Key.RIGHT: return Rotation.EAST - case Key.NOTHING: return Rotation.NOTHING - } -} - -const increment_pos = (pos, rot, speed) => { - switch (rot) { - case Rotation.NORTH: - pos[1] -= speed - break - case Rotation.SOUTH: - pos[1] += speed - break - case Rotation.WEST: - pos[0] -= speed - break - case Rotation.EAST: - pos[0] += speed - break - } -} - -export const get_item_key = (x, y, w) => { - let nx = Math.round(x * 2) - let ny = Math.round(y * 2) - let key = ny * w * 2 + nx - return key -} - -const ceil_half = (n) => { - return Math.ceil(n*2)/2 -} - -const floor_half = (n) => { - return Math.floor(n*2)/2 -} - -/** - * @param {GameState} data - */ -const update_players = (data) => { - - for(const id in data.input) { // move players - if(!(id in data.players)) { - console.log("what. player undefined???", id); - continue; - } - - let input_key = data.input[id] - let input_dir = get_rot(input_key) - let move_dir = data.players[id].move_rot - let current_pos = data.players[id].pos - - let tile_in_front_with_turn = get_tile_with_rot(data.map, current_pos, input_dir) - if (tile_in_front_with_turn == 1 || tile_in_front_with_turn == 2) { - input_dir = Rotation.NOTHING - } - - let turning = input_dir != Key.NOTHING && input_dir != move_dir - - data.players[id].input_rot = input_dir - - if (turning && is_stable_pos(current_pos)) { - current_pos = round_pos(current_pos) - data.players[id].move_rot = input_dir - move_dir = input_dir - } - - let move_pos = structuredClone(current_pos) - increment_pos(move_pos, move_dir, MOVE_SPEED) - - 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 - let pos = data.players[id].pos - for (let x = ceil_half(pos[0]-.5); x <= floor_half(pos[0]+.5); x += .5) { - for (let y = ceil_half(pos[1]-.5); y <= floor_half(pos[1]+.5); y += .5) { - let item_key = get_item_key(x, y, data.map.width) - delete data.map.items[item_key] - } - } - - } - -} diff --git a/client/js/main.js b/client/js/main.js index 1d241b7..c80f8f3 100644 --- a/client/js/main.js +++ b/client/js/main.js @@ -1,113 +1,59 @@ -import { Game } from "./game.js"; -import { startInputListener } from "./input.js"; -import { multiplayer } from "./multiplayer.js"; -import { advance, initState } from "./logic.js"; -import { startGraphicsUpdater } from "./gfx/graphics.js"; - -const join = document.getElementById("join") -const lobby = document.getElementById("lobby") -lobby.style.display = "none" - -join.onsubmit = async function(event) { - event.preventDefault() - - const room_code = this.elements.room_code.value.trim() - const player_name = this.elements.name.value.trim() - - if (room_code == '') { - alert('Please enter a room code') - return +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +import { Game } from "./net/game.js"; +import { InitialState, onLogic } from "./logic/logic.js"; +import { startGraphicsUpdater } from "./renderer.js"; +import { GameKeyMap, Key } from "./types.js"; +const join = document.getElementById("join"); +const lobby = document.getElementById("lobby"); +lobby.style.display = "none"; +join.onsubmit = function (event) { + return __awaiter(this, void 0, void 0, function* () { + event.preventDefault(); + const room_code = this.elements.room_code.value.trim(); + const player_name = this.elements.name.value.trim(); + if (room_code == '') { + alert('Please enter a room code'); + return; + } + if (player_name == '') { + alert('Please enter a player name'); + return; + } + join.style.display = "none"; + startGame(room_code, player_name); + }); +}; +const updateGraphics = startGraphicsUpdater(); +const onLoad = (startData) => { + if (startData.data.started) { + alert('Room has already started'); + return false; } - - if (player_name == '') { - alert('Please enter a player name') - return + let players = Object.values(startData.data.players).filter(p => { return p !== null && p.name !== undefined; }); + if (players.length >= 4) { + alert('Room is full'); + return false; } - - join.style.display = "none" - - startGame(room_code, player_name) -} - -function startGame(code, name) { - - const game = window.game = new Game(3000, advance); - const fps = 60; - let delay = 3; - - // set up the game up - // const ui = document.getElementById("ui"); - // ui.style.display = "block"; - - multiplayer( - game, - code, - (startFrame, latency, player, update, ping, desyncCheck) => { - // document.getElementById("desynccheck").onclick = function(e) { - // e.preventDefault(); - // this.textContent = "check for desyncs: checking..."; - // desyncCheck(game.currentFrame - 5) - // .then(res => { - // this.textContent = "check for desyncs: " + (res ? "desync" : "no desync"); - // }); - // } - console.log("started game at frame", startFrame); - window.desyncCheck = () => desyncCheck(game.currentFrame - 5); - - lobby.style.display = "" - - let startTs = performance.now() - latency; - let lastFrame = startFrame; - update({ - name, - }, startFrame + 1); - - const getInput = startInputListener(); - const updateGraphics = startGraphicsUpdater(); - - const start_data = game.getHistory(startFrame) - if (start_data.data.started) { - alert('Room has already started') - return false - } - - let players = Object.values(start_data.data.players).filter(p => { return p !== null && p.name !== undefined }) - if (players.length >= 4) { - alert('Room is full') - return false - } - - // main game loop - let lastTs = performance.now(); - function f(ts) { - const frame = Math.floor((ts - startTs) / 1000 * fps) + startFrame; - if(frame !== lastFrame) { // update input once per frame, regardless of the display refresh rate - lastFrame = frame; - - // gather input - const input = getInput(); - - // apply input - update(input, frame + delay); - } - - // set up graphics - game.currentFrame = frame; - const data = game.getHistory(frame); - updateGraphics(data ? data.data : initState); - lastTs = ts; - - requestAnimationFrame(f); - } - - requestAnimationFrame(f); - if(startFrame === -1) { - update({ - name, - }, 0); - } - - return true - } - ); -} + lobby.style.display = ""; + return true; +}; +const onFrame = (data, frame) => { + updateGraphics(data ? data.data : InitialState, frame); +}; +const startGame = (code, name) => { + const game = new Game(3000); + game.start(code, GameKeyMap, onLoad, onFrame, onLogic, { + start: false, + key: Key.NOTHING, + name + }); +}; +//# sourceMappingURL=main.js.map \ No newline at end of file diff --git a/client/src/logic/items.ts b/client/src/logic/items.ts new file mode 100644 index 0000000..5f8a38e --- /dev/null +++ b/client/src/logic/items.ts @@ -0,0 +1,41 @@ +import { getMap, getItemKey } from "../map.js" +import { GameState, Map, Player } from "../types.js" + +const ceilHalf = (n: number): number => { + return Math.ceil(n*2)/2 +} + +const floorHalf = (n: number): number => { + return Math.floor(n*2)/2 +} + +const eatItems = (data: GameState, map: Map, player: Player) => { + + let pos = player.pos + + for (let x = ceilHalf(pos.x-.5); x <= floorHalf(pos.x+.5); x += .5) { + for (let y = ceilHalf(pos.y-.5); y <= floorHalf(pos.y+.5); y += .5) { + let item_key = getItemKey(x, y, map.width) + delete data.items[item_key] + } + } +} + +export const updateItems = (data: GameState) => { + + let map = getMap(data.mapId) + if (!map) return + + for(const id in data.input) { + + const player = data.players[id] + + if(!player) { + continue; + } + + eatItems(data, map, player) + + } + +} diff --git a/client/src/logic/logic.ts b/client/src/logic/logic.ts new file mode 100644 index 0000000..1cca2b7 --- /dev/null +++ b/client/src/logic/logic.ts @@ -0,0 +1,80 @@ +import { genItems, loadMap, getMap } from "../map.js"; +import { updatePlayers } from "./players.js" +import { updateUI } from "./ui.js" +import { updateMovement } from "./movement.js" +import { updateItems } from "./items.js" +import { GameState, Input } from "../types.js"; + + +export const InitialState: GameState = { + started: false, + input: {}, + players: [], + items: {}, + mapId: undefined +} + +export const onLogic = ( + pastData: GameState = InitialState, + input: Input = { players: {} }, + _frame: number +) => { + + let data = structuredClone(pastData) + + let startPressed = updatePlayers(data, input); + + if (data.started) { + updateMovement(data) + updateItems(data) + } else { + updateUI(data) + } + + if (startPressed && !data.started) { + initMap(data) + data.started = true; + } + + return data + +} + +const initMap = (data: GameState) => { + + document.getElementById("lobby").style.display = "none" + + data.mapId = 0 + + if (getMap(0)) return + + let width = 21 + let height = 21 + let m_data = [ + 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, + 1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1, + 1,0,1,1,1,0,1,1,1,0,1,0,1,1,1,0,1,1,1,0,1, + 1,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,1, + 1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1, + 1,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,1, + 1,0,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,0,1, + 1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, + 1,1,1,0,1,0,1,0,1,1,1,1,1,0,1,0,1,0,1,1,1, + 1,0,0,0,0,0,1,0,1,2,2,2,1,0,1,0,0,0,0,0,1, + 1,0,1,1,1,0,1,0,1,2,2,2,1,0,1,0,1,1,1,0,1, + 1,0,0,0,0,0,1,0,1,2,2,2,1,0,1,0,0,0,0,0,1, + 1,1,1,0,1,0,1,0,1,1,2,1,1,0,1,0,1,0,1,1,1, + 1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1, + 1,0,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,0,1, + 1,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,1, + 1,0,1,0,1,1,1,1,1,0,1,0,1,1,1,1,1,0,1,0,1, + 1,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,1, + 1,0,1,1,1,0,1,1,1,0,1,0,1,1,1,0,1,1,1,0,1, + 1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1, + 1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1 + ] + + loadMap(width, height, m_data) // cursed temp thing + data.items = genItems(getMap(0)) +} + diff --git a/client/src/logic/movement.ts b/client/src/logic/movement.ts new file mode 100644 index 0000000..40cfc3e --- /dev/null +++ b/client/src/logic/movement.ts @@ -0,0 +1,142 @@ +import { getMap } from "../map.js" +import { Vec2, Map, Rotation, Key, Player, GameState } from "../types.js" + +const MOVE_SPEED = .1 + +const roundPos = (pos: Vec2): Vec2 => { + return {x: Math.round(pos.x), y: Math.round(pos.y)} +} + +const isStablePos = (pos: Vec2): boolean => { + let rpos = roundPos(pos) + return Math.abs(rpos.x - pos.x) < .05 && Math.abs(rpos.y - pos.y) < .05 +} + +const getTile = ( + map: Map, + pos: Vec2, + ox: number, + oy: number +): number => { + let x = Math.round(pos.x + ox) + let y = Math.round(pos.y + oy) + if (x < 0 || x >= map.width || y < 0 || y >= map.height) return 1 + return map.data[y * map.width + x] +} + +const getTileFrontWithRot = ( + map: Map, + pos: Vec2, + rot: Rotation +): number => { + let collider = 1 + switch(rot) { + case Rotation.NORTH: + collider = getTile(map, pos, 0, -.51) + break + case Rotation.SOUTH: + collider = getTile(map, pos, 0, .51) + break + case Rotation.WEST: + collider = getTile(map, pos, -.51, 0) + break + case Rotation.EAST: + collider = getTile(map, pos, .51, 0) + break + } + return collider +} + +const getRot = (key: Key): Rotation => { + switch (key) { + case Key.UP: return Rotation.NORTH + case Key.DOWN: return Rotation.SOUTH + case Key.LEFT: return Rotation.WEST + case Key.RIGHT: return Rotation.EAST + case Key.NOTHING: return Rotation.NOTHING + } +} + +const incrementPos = ( + pos: Vec2, + rot: Rotation, + speed: number +): void => { + switch (rot) { + case Rotation.NORTH: + pos.y -= speed + break + case Rotation.SOUTH: + pos.y += speed + break + case Rotation.WEST: + pos.x -= speed + break + case Rotation.EAST: + pos.y += speed + break + } +} + +let i = 0 + +const updateMovementForPlayer = ( + map: Map, + player: Player, + inputKey: Key +) => { + + let inputRot = getRot(inputKey) + let moveRot = player.moveRotation + let currentPosition = player.pos + + let turningFrontTile = getTileFrontWithRot(map, currentPosition, inputRot) + if (turningFrontTile == 1 || turningFrontTile == 2) { + inputRot = Rotation.NOTHING + } + + let turning = inputRot != Rotation.NOTHING && inputRot != moveRot + + player.inputRotation = inputRot + + if (turning && isStablePos(currentPosition)) { + currentPosition = roundPos(currentPosition) + player.moveRotation = inputRot + moveRot = inputRot + } + + let movePos = structuredClone(currentPosition) + incrementPos(movePos, moveRot, MOVE_SPEED) + + let frontTile = getTileFrontWithRot(map, currentPosition, moveRot) + if (frontTile != 1 && frontTile != 2) { + player.pos = movePos + player.moving = true + } else { + player.pos = roundPos(currentPosition) + player.moving = false + } + + +} + +export const updateMovement = (data: GameState) => { + + let map = getMap(data.mapId) + if (!map) return + + for (const id in data.players) { + + const player = data.players[id] + + if(!player) { + continue + } + + let inputKey = data.input[id] + + updateMovementForPlayer(map, player, inputKey) + + } + +} diff --git a/client/src/logic/players.ts b/client/src/logic/players.ts new file mode 100644 index 0000000..ebe469f --- /dev/null +++ b/client/src/logic/players.ts @@ -0,0 +1,79 @@ +import { GameState, Input, Key, Rotation } from "../types.js" + +const canPlayerJoin = (data: GameState) => { + + // lobby has already started + if (data.started) { + return false + } + + // lobby full + if (Object.keys(data.players).length >= 4) { + return false + } + + return true + +} + +export const updatePlayers = (data: GameState, input: Input) => { + + let startPressed = false; + + for(const added of input.added || []) { + + if (!canPlayerJoin(data)) { + continue + } + + console.log("added", added); + + data.input[added] = Key.NOTHING + + data.players[added] ||= { + pos: {x: 1, y: 1}, + inputRotation: Rotation.EAST, + moveRotation: Rotation.EAST, + moving: false, + }; + + } + + for(const id in input.players) { + + if(!input.players[id]) { + continue; + } + + if(id in data.players && input.players[id].name !== undefined) { + + let name = input.players[id].name; + name = name.substring(0, 16); + + data.players[id] = { + ...data.players[id], + name, + }; + + } + + startPressed ||= input.players[id].start; + if (input.players[id].key) + data.input[id] = input.players[id].key + + } + + for(const removed of input.removed || []) { + console.log("removed", removed); + delete data.input[removed]; + delete data.players[removed]; + + let element_id = 'span' + removed + let element = document.getElementById(element_id) + if (element !== null && element !== undefined) element.remove() + } + + return startPressed + +} + diff --git a/client/src/logic/ui.ts b/client/src/logic/ui.ts new file mode 100644 index 0000000..5706843 --- /dev/null +++ b/client/src/logic/ui.ts @@ -0,0 +1,32 @@ +import { GameState } from "../types.js" + +export const updateUI = (data: GameState) => { + + const player_display = document.getElementById("players") + + for (const id in data.players) { + + const player = data.players[id] + + if (!player) { + continue + } + + let name = player.name + + if (!name) { + continue + } + + let element_id = 'span' + id + let element = player_display.children[element_id] + + if (!element) { + let span = document.createElement("span") + span.textContent = `[${id}] ${name}` + span.id = element_id + player_display.appendChild(span) + } + } + +} diff --git a/client/src/main.ts b/client/src/main.ts new file mode 100644 index 0000000..a6cc3ba --- /dev/null +++ b/client/src/main.ts @@ -0,0 +1,75 @@ +import { Game } from "./net/game.js"; +import { InitialState, onLogic } from "./logic/logic.js"; +import { startGraphicsUpdater } from "./renderer.js"; +import { GameKeyMap, Frame, Key } from "./types.js"; + +const join = document.getElementById("join") +const lobby = document.getElementById("lobby") +lobby.style.display = "none" + +join.onsubmit = async function(event) { + event.preventDefault() + + const room_code = this.elements.room_code.value.trim() + const player_name = this.elements.name.value.trim() + + if (room_code == '') { + alert('Please enter a room code') + return + } + + if (player_name == '') { + alert('Please enter a player name') + return + } + + join.style.display = "none" + + startGame(room_code, player_name) +} + +const updateGraphics = startGraphicsUpdater() + +const onLoad = (startData: Frame) => { + + if (startData.data.started) { + alert('Room has already started') + return false + } + + let players = Object.values(startData.data.players).filter(p => { return p !== null && p.name !== undefined }) + if (players.length >= 4) { + alert('Room is full') + return false + } + + lobby.style.display = "" + + return true +} + +const onFrame = (data: Frame, frame: number) => { + + updateGraphics(data ? data.data : InitialState, frame); + +} + + +const startGame = (code: string, name: string) => { + + const game = new Game(3000) + + game.start( + code, + GameKeyMap, + onLoad, + onFrame, + onLogic, + { + start: false, + key: Key.NOTHING, + name + } + ) + +} diff --git a/client/src/map.ts b/client/src/map.ts new file mode 100644 index 0000000..e6fab9d --- /dev/null +++ b/client/src/map.ts @@ -0,0 +1,151 @@ +import { Wall, ItemType, Map, Maps, Items } from "./types.js" + +export const getItemKey = ( + x: number, + y: number, + w: number +): number => { + let nx = Math.round(x * 2) + let ny = Math.round(y * 2) + let key = ny * w * 2 + nx + return key +} + +const getPoint = ( + width: number, + height: number, + data: number[], + x: number, + y: number +): number => { + if (x < 0 || x >= width || y < 0 || y >= height) { + return 0 + } else { + return data[y * width + x] + } +} + +const genWalls = ( + width: number, + height: number, + data: number[] +): number[] => { + + let walls = Array(width * height) + for (let y = 0; y < height; y++) { + for (let x = 0; x < width; x++) { + + let north = getPoint(width, height, data, x, y-1) == 1 + let south = getPoint(width, height, data, x, y+1) == 1 + let east = getPoint(width, height, data, x+1, y) == 1 + let west = getPoint(width, height, data, x-1, y) == 1 + let current = getPoint(width, height, data, x, y) == 1 + + let point = Wall.EMPTY + + if (!current) { + walls[y * width + x] = point + continue + } + + if (north && south && east && west) { + point = Wall.CROSS + } else if (east && west && north) { + point = Wall.TEE_NORTH + } else if (east && west && south) { + point = Wall.TEE_SOUTH + } else if (north && south && east) { + point = Wall.TEE_EAST + } else if (north && south && west) { + point = Wall.TEE_WEST + } else if (east && west) { + point = Wall.WALL_HZ + } else if (north && south) { + point = Wall.WALL_VT + } else if (west && south) { + point = Wall.TURN_Q1 + } else if (south && east) { + point = Wall.TURN_Q2 + } else if (east && north) { + point = Wall.TURN_Q3 + } else if (north && west) { + point = Wall.TURN_Q4 + } else if (north) { + point = Wall.WALL_END_NORTH + } else if (east) { + point = Wall.WALL_END_EAST + } else if (south) { + point = Wall.WALL_END_SOUTH + } else if (west) { + point = Wall.WALL_END_WEST + } else { + point = Wall.DOT + } + + walls[y * width + x] = point + + } + } + + return walls +} + +export const genItems = (map: Map): Items => { + + let width = map.width + let height = map.height + let data = map.data + + let items: Items = {} + + for (let y = 0; y < height; y++) { + for (let x = 0; x < width; x++) { + let tile = getPoint(width, height, data, x, y) + if (tile != 0) continue + + let item_key = getItemKey(x, y, width) + items[item_key] = {type: ItemType.DOT, pos: {x, y}} + + let tile_south = getPoint(width, height, data, x, y + 1) + if (tile_south == 0) { + item_key = getItemKey(x, y + .5, width) + items[item_key] = {type: ItemType.DOT, pos: {x, y: y + .5}} + } + + let tile_east = getPoint(width, height, data, x + 1, y) + if (tile_east == 0) { + item_key = getItemKey(x + .5, y, width) + items[item_key] = {type: ItemType.DOT, pos: {x: x + .5, y}} + } + } + } + + return items +} + +let mapData: Maps = {} +let id: number = 0 + +export const loadMap = ( + width: number, + height: number, + data: number[] +): number => { + + let mapId = id++ + + mapData[mapId] = { + data: structuredClone(data), + walls: genWalls(width, height, data), + width, + height, + id: mapId + } + + return mapId +} + +export const getMap = (mapId: number): Map | undefined => { + if (mapId == undefined) return undefined + return mapData[mapId] +} diff --git a/client/src/net/game.ts b/client/src/net/game.ts new file mode 100644 index 0000000..c8e5991 --- /dev/null +++ b/client/src/net/game.ts @@ -0,0 +1,186 @@ +import { Frame, GameState, Input, Key, KeyMap, PlayerInput } from "../types.js"; +import { startInputListener } from "./input.js"; +import { multiplayer } from "./multiplayer.js"; + +/** + * @author tint + * @template Data, Input + */ +export class Game { + + historysize: number + history: Frame[] + historyStart: number + currentFrame: number + advance: (pastData: GameState, input: Input, frame: number) => GameState + + constructor(history: number) { + this.historysize = history; + + this.history = []; + this.historyStart = 0; + + // the game may have inputs from the "future" + // (local input delay to make sure inputs play at the same time on all machines) + // so the "present" isn't always the latest frame + // the game loop should set this every frame + this.currentFrame = 0; + } + + startHistory(frame: number, data: GameState) { + this.historyStart = frame; + this.history = [{ data, input: { players: {} }}]; + this.currentFrame = frame; + } + + getHistory(frame: number): Frame { + return this.history[frame - this.historyStart]; + } + + getFrame(): number { + return this.historyStart + this.history.length - 1; + } + + getCurrentData(): GameState { + const entry = this.history[this.history.length - 1]; + return entry && entry.data; + } + + /** + * Sets the input at a specific frame. If that frame is in history, + * the game will be rewound, the input applied, and then fast-forwarded to the current head. + * If the frame is ahead of the current latest frame, the game will be run until that frame. + */ + setInput(frame: number, input: Input) { + console.log('input', frame, input) + this.editFrame(frame, (index: number): void => { + let past = this.history[index - 1]; + if(index === 0) { + past = { data: undefined, input: undefined }; + } + this.history[index] = { + input, + data: this.advance(past ? past.data : undefined, input, frame), + }; + }); + } + + setData(frame: number, data: GameState) { + console.log('data', frame, data) + this.editFrame(frame, (index: number): void => { + this.history[index] = { + data, + input: this.history[index] && this.history[index].input, + } + }); + } + + editFrame(frame: number, edit: (index: number) => void) { + const head = this.historyStart + this.history.length; + if(frame < head) { + if(frame < this.historyStart) { + throw new Error("Tried to edit a past frame not in history: " + frame); + } + + edit(frame - this.historyStart); + // fast forward back to the present with the new data + for(let i = frame + 1; i < head; i++) { + const past = this.history[i - this.historyStart - 1]; + this.history[i - this.historyStart].data = this.advance( + past ? past.data : undefined, + this.history[i - this.historyStart].input, + i + ); + } + } else { + // fast forward the inbetween frames with no input + for(let i = head; i < frame; i++) { + const entry = this.history[i - this.historyStart - 1]; + this.history[i - this.historyStart] = { + input: undefined, + data: this.advance(entry ? entry.data : undefined, undefined, i), + }; + } + edit(frame - this.historyStart); + } + + while(this.history.length > this.historysize) { + this.history.shift(); + this.historyStart++; + } + } + + start ( + code: string, + keymap: KeyMap, + onLoad: (startFrame: Frame) => boolean, + onFrame: (data: Frame, frame: number) => void, + onLogic: (pastData: GameState, input: Input, frame: number) => GameState, + data: PlayerInput = { start: false, key: Key.NOTHING } + ): void { + + const fps = 60; + let delay = 3; + + this.advance = onLogic + + const onStart = ( + startFrame: number, + latency: number, + _connection: number, + update: (input: PlayerInput, frame: number) => void, + _ping: () => Promise, + _desyncCheck: (frame: number) => Promise, + ) => { + console.log("started game at frame", startFrame); + // window.desyncCheck = () => desyncCheck(this.currentFrame - 5); + + let startTs = performance.now() - latency; + let lastFrame = startFrame; + update(data, startFrame + 1); + + let getInput = startInputListener(keymap) + + const startData = this.getHistory(startFrame) + + if (!onLoad(startData)) return false + + let lastTs = performance.now(); + + let loop = (ts: number) => { + + const frame = Math.floor((ts - startTs) / 1000 * fps) + startFrame; + + if(frame !== lastFrame) { // update input once per frame, regardless of the display refresh rate + lastFrame = frame; + + // gather input + const input: PlayerInput = getInput(); + + // apply input + update(input, frame + delay); + } + + this.currentFrame = frame + const data = this.getHistory(frame) + + onFrame(data, frame) + + lastTs = ts + + requestAnimationFrame(loop) + } + + requestAnimationFrame(loop) + + if(startFrame === -1) { + update(data, 0); + } + + return true + } + + multiplayer(this, code, onStart) + + } +} diff --git a/client/src/net/input.ts b/client/src/net/input.ts new file mode 100644 index 0000000..75be3e6 --- /dev/null +++ b/client/src/net/input.ts @@ -0,0 +1,70 @@ +import { Key, KeyMap, PlayerInput } from "../types.js" + +let pressed = {} + +const updateRecent = (keymap: KeyMap) => { + let max = -1 + let key = undefined + for (let code in pressed) { + let weight = pressed[code] + if (weight < max) continue + max = weight + key = keymap[code] + } + + return key +} + +export const startInputListener = (keymap: KeyMap): () => PlayerInput => { + let key: Key = Key.NOTHING; + let start = false; + + document.getElementById("start").onclick = function() { + start = true + } + + window.addEventListener("keydown", ev => { + if(ev.repeat) { + return; + } + if(!(ev.code in keymap)) { + return; + } + pressed[ev.code] = Object.keys(pressed).length + key = updateRecent(keymap) + }); + + window.addEventListener("keyup", ev => { + if (ev.repeat) { + return; + } + if (!(ev.code in keymap)) { + return + } + delete pressed[ev.code] + key = updateRecent(keymap) + }) + + let last = { + key: Key.NOTHING, + } + + return (): PlayerInput => { + + if(key === last.key && !start) { + return; + } + + last = { + key, + }; + + let s = start; + start = false; + + return { + key, + start: s, + } + } +} diff --git a/client/js/multiplayer.js b/client/src/net/multiplayer.ts similarity index 81% rename from client/js/multiplayer.js rename to client/src/net/multiplayer.ts index eec1c7d..e9f3057 100644 --- a/client/js/multiplayer.js +++ b/client/src/net/multiplayer.ts @@ -2,52 +2,39 @@ * @author tint */ -/** - * @template Input - * @typedef {{ - * added?: number[], - * removed?: number[], - * players: { - * [conn: number]: Input - * }, - * }} GameInput - */ +import { GameState, Message, PlayerInput } from "../types.js"; +import { Game } from "./game"; -/** - * @template Data, Input - * @param {import("./game.js").Game>} game - * @param {string} code - * @param {( - * startFrame: number, - * latency: number, - * connection: number, - * update: (input: Input, frame: number) => void, - * ping: () => Promise, - * desyncCheck: () => Promise, - * ) => void} onStart - * Called when the game is in a ready state with the current frame - * (or -1 if you're starting the room), an estimate of how many milliseconds have elapsed since that frame was sent, - * and your connection ID - */ -export function multiplayer(game, code, onStart) { - const url = new URL("api/join/" + encodeURIComponent(code), window.location); +export function multiplayer( + game: Game, + code: string, + onStart: ( + startFrame: number, + latency: number, + connection: number, + update: (input: PlayerInput, frame: number) => void, + ping: () => Promise, + desyncCheck: (frame: number) => Promise, + ) => boolean +) { + const url = new URL("api/join/" + encodeURIComponent(code), window.location.toString()); url.protocol = url.protocol.replace("http", "ws"); const socket = new WebSocket(url); - let requestStateTime; + let requestStateTime: number; let hasState = false; - let connectionId; + let connectionId: number; let cachedInputs = []; let connections = []; - let pingPromise; + let pingPromise: (type: Promise) => void; - function send(obj) { + function send(obj: any) { socket.send(JSON.stringify(obj)); } - function applyInput(input) { + function applyInput(input: Message) { let prev = game.getHistory(input.frame); let newInput = prev && prev.input ? {...prev.input} : { players: {} }; @@ -74,11 +61,10 @@ export function multiplayer(game, code, onStart) { newInput.removed = (newInput.removed || []).concat([input.removed]); } } - game.setInput(input.frame, newInput); } - function flushCachedInputs(latency = 0) { + function flushCachedInputs(latency = 0): boolean { for(const input of cachedInputs) { // only care about inputs after the new state if(input.frame <= game.historyStart) { @@ -91,15 +77,14 @@ export function multiplayer(game, code, onStart) { return onStart(game.getFrame(), latency, connectionId, update, ping, desyncCheck); } - function update(input, frame) { + function update(input: PlayerInput, frame: number) { if(input === undefined) { // used to update the game locally if(hasState) { - applyInput({ - frame, - }); + applyInput({}) } return; } + const data = { type: "input", data: input, @@ -118,17 +103,17 @@ export function multiplayer(game, code, onStart) { type: "ping", frame: Math.max(0, game.currentFrame), }); - const frame = await new Promise(r => pingPromise = r); + const frame: number = await new Promise(r => pingPromise = r); return game.currentFrame - frame; } - async function desyncCheck(frame) { + async function desyncCheck(frame: number): Promise { const history = game.getHistory(frame); if(!history) { console.error("tried to check for desyncs on a frame not in memory", frame); return true; } - const localstate = history.data; + // const localstate = history.data; const proms = connections .filter(n => n !== connectionId) .map(connection => { @@ -138,7 +123,7 @@ export function multiplayer(game, code, onStart) { connection, }); return new Promise(r => { - stateRequests[frame + "," + connection] = state => { + stateRequests[frame + "," + connection] = (state: GameState) => { r({ state, connection, @@ -150,11 +135,11 @@ export function multiplayer(game, code, onStart) { if(!proms.length) { return false; // this is the only connection, no check necessary } - const states = await Promise.all(proms); - if(!states.every(({ state }) => objeq(localstate, state))) { - console.error("desync! remote states:", states, "local state:", localstate); - return true; - } + // const states = await Promise.all(proms); + // if(!states.every(({ state }) => objeq(localstate, state))) { + // console.error("desync! remote states:", states, "local state:", localstate); + // return true; + // } return false; } @@ -203,7 +188,7 @@ export function multiplayer(game, code, onStart) { case "requeststate": // wait until there's some state to send const startTime = performance.now(); - function check() { + const check = () => { if(performance.now() - startTime > 5000) { return; // give up after 5s } @@ -272,7 +257,7 @@ export function multiplayer(game, code, onStart) { } // compare two plain objects (things that can be JSON.stringified) -function objeq(a, b) { +function objeq(a: any, b: any) { if(typeof(a) !== typeof(b)) { return false; } diff --git a/client/src/renderer.ts b/client/src/renderer.ts new file mode 100644 index 0000000..c7bbbc2 --- /dev/null +++ b/client/src/renderer.ts @@ -0,0 +1,320 @@ +import { getMap } from "./map.js"; +import { Items, Players, Rotation, ItemType, Map, Wall, GameState } from "./types.js"; + +const ATLAS_TILE_WIDTH = 32 + +const update_style = (width: number, height: number) => { + + let style = document.getElementById("style") + + const css = ` + * { + --scale: 100; + --aspect: ${width/height}; + --scaleX: calc(var(--scale) * 1vw); + --scaleY: calc(var(--scale) * 1vh); + } + + #canvas { + width: calc(var(--scaleY) * var(--aspect)); + height: var(--scaleY); + margin-top: calc((100vh - var(--scaleY))/2); + margin-left: calc(50vw - var(--scaleY)*var(--aspect)/2); + position: relative; + vertical-align: top; + line-height: 0; + } + + @media (max-aspect-ratio: ${width}/${height}) { + #canvas { + width: var(--scaleX); + height: calc(var(--scaleX) / var(--aspect)); + margin-left: calc((100vw - var(--scaleX))/2); + margin-top: calc(50vh - var(--scaleX)/var(--aspect)/2); + } + }`; + + style.innerHTML = css +} + +const draw_sprite = ( + ctx: CanvasRenderingContext2D, + x: number, + y: number, + width: number, + atlas: CanvasImageSource, + atlas_index: [number, number], + atlas_tile_width: number, + rotation: Rotation +) => { + ctx.save() + ctx.translate( + (x + 0.5) * ATLAS_TILE_WIDTH, + (y + 0.5) * ATLAS_TILE_WIDTH + ) + ctx.rotate(rotation * Math.PI / 180) + ctx.drawImage( + atlas, + atlas_index[0] * atlas_tile_width, + atlas_index[1] * atlas_tile_width, + atlas_tile_width, + atlas_tile_width, + -width * ATLAS_TILE_WIDTH / 2, + -width * ATLAS_TILE_WIDTH / 2, + width * ATLAS_TILE_WIDTH, + width * ATLAS_TILE_WIDTH + ) + ctx.restore() +} + +const draw_players = ( + ctx: CanvasRenderingContext2D, + atlas: CanvasImageSource, + players: Players, + frame: number +) => { + + let atlas_frames: [number, number][] = [ + [0, 2], + [1, 2], + [2, 2], + [0, 3], + [1, 3], + [0, 3], + [2, 2], + [1, 2], + ] + + for (let id in players) { + + let player = players[id] + if (!player) continue + + let atlas_index = atlas_frames[0] + if (player.moving) { + atlas_index = atlas_frames[Math.floor(frame / 2) % atlas_frames.length] + } + + let rotation: number + switch (player.moveRotation) { + case Rotation.NORTH: + rotation = 270 + break + case Rotation.SOUTH: + rotation = 90 + break + case Rotation.WEST: + rotation = 180 + break + case Rotation.EAST: + default: + rotation = 0 + break + } + + draw_sprite ( + ctx, + player.pos.x, + player.pos.y, + 1, + atlas, + atlas_index, + ATLAS_TILE_WIDTH, + rotation + ) + } +} + +const draw_items = ( + ctx: CanvasRenderingContext2D, + atlas: CanvasImageSource, + items: Items +) => { + + for (let item_key in items) { + + let item = items[item_key] + if (!item) continue + + let width: number, atlas_index: [number, number] + switch (item.type) { + case ItemType.DOT: + width = .2, + atlas_index = [2, 3] + break + default: + continue + } + + draw_sprite ( + ctx, + item.pos.x, + item.pos.y, + width, + atlas, + atlas_index, + ATLAS_TILE_WIDTH, + 0 + ) + + } + +} + +const draw_map_canvas = ( + ctx: CanvasRenderingContext2D, + atlas: CanvasImageSource, + map: Map +) => { + + for (let y = 0; y < map.height; y++) { + for (let x = 0; x < map.width; x++) { + + let wall_type = map.walls[y * map.width + x] + + let atlas_index: [number, number], rotation: number; + switch(wall_type) { + case Wall.EMPTY: + continue + case Wall.WALL_HZ: + atlas_index = [1, 1] + rotation = 0 + break + case Wall.WALL_VT: + atlas_index = [1, 1] + rotation = 90 + break + case Wall.TURN_Q1: + atlas_index = [2, 0] + rotation = 0 + break + case Wall.TURN_Q2: + atlas_index = [2, 0] + rotation = 270 + break + case Wall.TURN_Q3: + atlas_index = [2, 0] + rotation = 180 + break + case Wall.TURN_Q4: + atlas_index = [2, 0] + rotation = 90 + break + case Wall.TEE_NORTH: + atlas_index = [1, 0] + rotation = 180 + break + case Wall.TEE_EAST: + atlas_index = [1, 0] + rotation = 270 + break + case Wall.TEE_SOUTH: + atlas_index = [1, 0] + rotation = 0 + break + case Wall.TEE_WEST: + atlas_index = [1, 0] + rotation = 90 + break + case Wall.CROSS: + atlas_index = [0, 0] + rotation = 0 + break + case Wall.DOT: + atlas_index = [2, 1] + rotation = 0 + break + case Wall.WALL_END_NORTH: + atlas_index = [0, 1] + rotation = 0 + break; + case Wall.WALL_END_EAST: + atlas_index = [0, 1] + rotation = 90 + break; + case Wall.WALL_END_SOUTH: + atlas_index = [0, 1] + rotation = 180 + break; + case Wall.WALL_END_WEST: + atlas_index = [0, 1] + rotation = 270 + break; + } + + draw_sprite ( + ctx, + x, + y, + 1, + atlas, + atlas_index, + ATLAS_TILE_WIDTH, + rotation + ) + } + } + +} + +let map_canvas = document.createElement("canvas") +const draw_map = ( + ctx: CanvasRenderingContext2D, + atlas: CanvasImageSource, + map: Map, + last: number | undefined +) => { + + if (map.id !== last) { + map_canvas.width = map.width * ATLAS_TILE_WIDTH + map_canvas.height = map.height * ATLAS_TILE_WIDTH + + let map_ctx = map_canvas.getContext("2d") + draw_map_canvas(map_ctx, atlas, map) + } + + ctx.drawImage ( + map_canvas, + 0, + 0 + ) + +} + +let last_map_drawn: number | undefined +export const startGraphicsUpdater = () => { + + let canvas = document.getElementById("canvas") as HTMLCanvasElement + let atlas = document.getElementById("atlas") as HTMLImageElement + + /** + * @param {import("./logic").GameState} data + */ + return ( + data: GameState, + frame: number + ) => { + + let map = getMap(data.mapId) + + if (!map) return + + if (map.id !== last_map_drawn) { + canvas.style.display = "" + canvas.width = map.width * ATLAS_TILE_WIDTH + canvas.height = map.height * ATLAS_TILE_WIDTH + } + + let ctx = canvas.getContext("2d") + ctx.clearRect(0, 0, canvas.width, canvas.height) + + draw_map(ctx, atlas, map, last_map_drawn) + draw_items(ctx, atlas, data.items) + draw_players(ctx, atlas, data.players, frame) + update_style(map.width, map.height) + + last_map_drawn = map.id + + } + +} diff --git a/client/src/types.ts b/client/src/types.ts new file mode 100644 index 0000000..df0c8b1 --- /dev/null +++ b/client/src/types.ts @@ -0,0 +1,131 @@ + +export enum Wall { + EMPTY, + WALL_HZ, + WALL_VT, + TURN_Q1, + TURN_Q2, + TURN_Q3, + TURN_Q4, + TEE_NORTH, + TEE_EAST, + TEE_SOUTH, + TEE_WEST, + CROSS, + DOT, + WALL_END_NORTH, + WALL_END_SOUTH, + WALL_END_EAST, + WALL_END_WEST +} + +export enum ItemType { + DOT +} + +export enum Key { + NOTHING, + UP, + DOWN, + LEFT, + RIGHT +} + +export type KeyMap = { + [key: string]: Key +} + +export const GameKeyMap = { + "KeyW": Key.UP, + "KeyA": Key.LEFT, + "KeyS": Key.DOWN, + "KeyD": Key.RIGHT, +} + +export enum Rotation { + NOTHING, + NORTH, + EAST, + SOUTH, + WEST +} + +export type Vec2 = { + x: number, + y: number +} + +export type InputMap = { + [key: number]: Key +} + +export type Player = { + pos: Vec2, + moveRotation: Rotation, + inputRotation: Rotation, + name?: string, + moving: boolean +} + +export type PlayerInput = { + start: boolean, + key: Key, + name?: string +} + +export type Input = { + players: {[key: number]: PlayerInput}, + added?: number[], + removed?: number[], +} + +export type Message = { + type?: string; + connections?: number[], + added?: number, + removed?: number, + id?: number, + frame?: number, + data?: any, + connection?: number, + state?: GameState, + error?: string +} + +export type Players = { + [key: number]: Player +} + +export type Item = { + type: ItemType, + pos: Vec2 +} + +export type Items = { + [key: number]: Item +} + +export type Map = { + data: number[], + walls: number[], + width: number, + height: number, + id: number +} + +export type Maps = { + [key: number]: Map +} + +export type GameState = { + started: boolean, + input: InputMap, + players: Players, + items: Items, + mapId: number | undefined +} + +export type Frame = { + data: GameState, + input: Input +} diff --git a/client/tsconfig.json b/client/tsconfig.json new file mode 100644 index 0000000..4850356 --- /dev/null +++ b/client/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "noImplicitAny": false, + "sourceMap": true, + "outDir": "./js", + "allowJs": false, + "module": "es6", + "target": "es6" + }, + "include": ["./**/*"] +} diff --git a/Cargo.lock b/server/Cargo.lock similarity index 100% rename from Cargo.lock rename to server/Cargo.lock diff --git a/Cargo.toml b/server/Cargo.toml similarity index 100% rename from Cargo.toml rename to server/Cargo.toml diff --git a/src/main.rs b/server/src/main.rs similarity index 100% rename from src/main.rs rename to server/src/main.rs diff --git a/src/room/handle.rs b/server/src/room/handle.rs similarity index 100% rename from src/room/handle.rs rename to server/src/room/handle.rs diff --git a/src/room/messages.rs b/server/src/room/messages.rs similarity index 100% rename from src/room/messages.rs rename to server/src/room/messages.rs diff --git a/src/room/mod.rs b/server/src/room/mod.rs similarity index 100% rename from src/room/mod.rs rename to server/src/room/mod.rs diff --git a/src/room/websocket.rs b/server/src/room/websocket.rs similarity index 100% rename from src/room/websocket.rs rename to server/src/room/websocket.rs diff --git a/src/rooms.rs b/server/src/rooms.rs similarity index 100% rename from src/rooms.rs rename to server/src/rooms.rs diff --git a/src/routes.rs b/server/src/routes.rs similarity index 96% rename from src/routes.rs rename to server/src/routes.rs index 1fa16c7..a8c96a3 100644 --- a/src/routes.rs +++ b/server/src/routes.rs @@ -16,7 +16,7 @@ pub fn routes() -> Router { .route("/api/check", get(|| async {"ok"})) .route("/api/exists/:code", get(game_exists)) .route("/api/join/:code", get(game_join)) - .nest_service("/", ServeDir::new("client")) + .nest_service("/", ServeDir::new("../client")) .layer(Extension(room_server)) }