From 7240f0a539ee6e622c3d55eba110fcb04e07e17e Mon Sep 17 00:00:00 2001 From: Daniel Bulant Date: Thu, 28 Jul 2022 10:50:01 +0200 Subject: [PATCH] overlay + test game --- client/src/hooks.js | 4 + client/src/lib/Websocket.ts | 30 +++++- .../lib/view/components/prestartScreen.svelte | 2 +- client/src/lib/view/game/gameOverlay.svelte | 95 +++++++++++++++++- client/src/lib/view/game/init.ts | 26 ++--- client/src/lib/view/game/scene.svelte | 28 ++++++ .../lib/view/game/timedPrestartScreen.svelte | 2 +- client/src/lib/view/game/waiting.svelte | 2 +- client/static/assets/heart.png | Bin 0 -> 6579 bytes 9 files changed, 171 insertions(+), 18 deletions(-) create mode 100644 client/src/hooks.js create mode 100644 client/static/assets/heart.png diff --git a/client/src/hooks.js b/client/src/hooks.js new file mode 100644 index 0000000..1c3f5b3 --- /dev/null +++ b/client/src/hooks.js @@ -0,0 +1,4 @@ +// @ts-ignore +export async function handle({ event, resolve }) { + return resolve(event, { ssr: false }); +} \ No newline at end of file diff --git a/client/src/lib/Websocket.ts b/client/src/lib/Websocket.ts index 4bf0d81..2cf67a8 100644 --- a/client/src/lib/Websocket.ts +++ b/client/src/lib/Websocket.ts @@ -22,6 +22,8 @@ class ConnectedClient extends EventTarget { readyState: number = 0; pings: number[] = []; score: number = 0; + lives: number = 3; + lastScoreChange: number = 0; constructor(public ws: WebsocketConnection, public name: string) { super(); @@ -84,8 +86,17 @@ class ConnectedClient extends EventTarget { this.dispatchEvent(new FastEvent("message", msg.d)); messages.update(t => { t.push({ author: this.name, content: msg.d });return t}) break; + case "lives": + this.lives = msg.d; + players.update(t => t); + break; + case "score": + this.score = msg.d; + this.lastScoreChange = Date.now(); + players.update(t => t); + break; case "start": - gameData.set({ score: 0 }); + gameData.set({ score: 0, lives: 3, lastScoreChange: 0 }); // break not on purpose default: console.log("MSG", msg); @@ -236,6 +247,9 @@ export class WebsocketConnection extends EventTarget { this.fast.delete(msg.client); players.set(this.fast); messages.update(t => { t.push({ author: " SYS ", content: `${msg.client} left`});return t}) + if(this.fast.size == 0) { + gameData.set(null); + } break; } case "host": { @@ -280,6 +294,17 @@ export class WebsocketConnection extends EventTarget { } } + setScore(score: number) { + if (!this.roomName) return console.log("Not in a room"); + this.broadcast({ t: "score", d: score }); + gameData.update(t => { t!.score = score; t!.lastScoreChange = Date.now(); return t}); + } + setLives(lives: number) { + if (!this.roomName) return console.log("Not in a room"); + this.broadcast({ t: "lives", d: lives }); + gameData.update(t => { t!.lives = lives; return t}); + } + createGame(name: string) { this.ws.send(JSON.stringify({ t: "create", name: name })); } @@ -290,6 +315,7 @@ export class WebsocketConnection extends EventTarget { for(const [, client] of this.fast) { client.score = 0; } + gameData.set({ score: 0, lives: 3, lastScoreChange: 0 }); } join(name: string) { @@ -313,4 +339,4 @@ export const lastError: Writable = writable(""); export const room: Writable<{ name: string, host: string } | null> = writable(null); export const players: Writable> = writable(new Map); export const messages: Writable<{ author: string, content: string }[]> = writable([]); -export const gameData: Writable<{ score: number }|null> = writable(null); \ No newline at end of file +export const gameData: Writable<{ score: number, lives: number, lastScoreChange: number }|null> = writable(null); \ No newline at end of file diff --git a/client/src/lib/view/components/prestartScreen.svelte b/client/src/lib/view/components/prestartScreen.svelte index 3d37df2..770d8c1 100644 --- a/client/src/lib/view/components/prestartScreen.svelte +++ b/client/src/lib/view/components/prestartScreen.svelte @@ -79,7 +79,7 @@ transform: rotate3d(1, 0, 0, 0deg); transform-style: preserve-3d; box-sizing: border-box; - animation: dice 1.8s 0.7s ease-in-out; + animation: dice 1.2s 0.5s ease-in-out; animation-fill-mode: both; } @keyframes dice { diff --git a/client/src/lib/view/game/gameOverlay.svelte b/client/src/lib/view/game/gameOverlay.svelte index 13e960c..2e3d9f0 100644 --- a/client/src/lib/view/game/gameOverlay.svelte +++ b/client/src/lib/view/game/gameOverlay.svelte @@ -1,2 +1,95 @@ + + +
+
+
+ {#each [...Array($gameData?.lives).keys()] as i} + + {/each} +
+
    + {#each scoreboard as player (player.name)} +
  • + {player.name} + {player.score} + {#if !player.lives} +
    DEAD
    + {/if} +
    • + {/each} +
+
+
+ +
+
+ +
+
+ + \ No newline at end of file diff --git a/client/src/lib/view/game/init.ts b/client/src/lib/view/game/init.ts index 62720ec..0265c0c 100644 --- a/client/src/lib/view/game/init.ts +++ b/client/src/lib/view/game/init.ts @@ -4,22 +4,19 @@ import { GameScene } from "./scene"; var ratio = window.devicePixelRatio || 1; export function resize() { if(!game || !htmlcanvas) return; - try { - game.scale.resize(htmlcanvas.parentElement!.clientWidth * ratio, htmlcanvas.parentElement!.clientHeight * ratio); - } catch(e) { - // @ts-ignore - console.error(e, new ErrorEvent(e.type, { colno: e.colno, error: e, lineno: e.lineno, message: e.message, filename: e.filename })); - window.dispatchEvent(new ErrorEvent("error", e as any)); - } + // try { + // game.scale.resize(htmlcanvas.parentElement!.clientWidth * ratio, htmlcanvas.parentElement!.clientHeight * ratio); + // } catch(e) { + // // @ts-ignore + // console.error(e, new ErrorEvent(e.type, { colno: e.colno, error: e, lineno: e.lineno, message: e.message, filename: e.filename })); + // window.dispatchEvent(new ErrorEvent("error", e as any)); + // } // console.log("size", htmlcanvas.parentElement!.clientWidth * ratio, htmlcanvas.parentElement!.clientHeight * ratio); } -/** @type {HTMLCanvasElement} */ var htmlcanvas: HTMLCanvasElement; -/** @type {Game} */ var game: Game; -/** @type {GameScene} */ -var gs: GameScene; +var gs: GameScene | null = null; export function setCanvas(canvas: HTMLCanvasElement) { htmlcanvas = canvas; var ctx = canvas.getContext("webgl2") || canvas.getContext("webgl"); @@ -43,7 +40,12 @@ export function setCanvas(canvas: HTMLCanvasElement) { title: "Multidie", version: "0", scene: [gs], - backgroundColor: "#01021B", + backgroundColor: "#85e65c", banner: false }); } + +export function stop() { + game.destroy(false); + gs = null; +} \ No newline at end of file diff --git a/client/src/lib/view/game/scene.svelte b/client/src/lib/view/game/scene.svelte index e69de29..abef2ef 100644 --- a/client/src/lib/view/game/scene.svelte +++ b/client/src/lib/view/game/scene.svelte @@ -0,0 +1,28 @@ + + + + + + \ No newline at end of file diff --git a/client/src/lib/view/game/timedPrestartScreen.svelte b/client/src/lib/view/game/timedPrestartScreen.svelte index 361ebf5..7fef204 100644 --- a/client/src/lib/view/game/timedPrestartScreen.svelte +++ b/client/src/lib/view/game/timedPrestartScreen.svelte @@ -7,7 +7,7 @@ onMount(() => { let i = setTimeout(() => { visible = false; - }, 3000); + }, 2000); return () => clearTimeout(i); }); diff --git a/client/src/lib/view/game/waiting.svelte b/client/src/lib/view/game/waiting.svelte index 2b83c0b..6e0c366 100644 --- a/client/src/lib/view/game/waiting.svelte +++ b/client/src/lib/view/game/waiting.svelte @@ -3,7 +3,7 @@ import Button from '../components/button.svelte'; function startGame() { - + $connection!.startGame(); } let content = ""; function sendMessage() { diff --git a/client/static/assets/heart.png b/client/static/assets/heart.png new file mode 100644 index 0000000000000000000000000000000000000000..d71e27deeb40bf95937662de1388ae4957b08279 GIT binary patch literal 6579 zcmeHKT}T{P6uvW#(^0F8la&wb-m$BEM7>S97jX?vUhG$EpjA{Bt8;?^tgz(qWD@=WWAk(2)r zqKvFggM}MA-SHeze@VVTNY&YPzwgY%>gLx=rNk!{#8zIt{pVsy>v++{^}|P=Im9QA zmwnkYdFlK4_={bEjq%^3H5JMEOKZ`^oA+y8{~0c$U1cSkcW&0c8|RxpJx@*Wq;PzA zqwy$QW-R-f(S%Q;=bIBf$Kg_A-gk$Z;0dSiqY%RzmJnv*{3dgKUtj-{C4`!a0CVl! z2LbNz6r*8*HQP~X+K_#I2+@hmnAm8S28>hUbpqWHGKv+;N|*i=%bJB|q$_`f*onN{ zr!<60o4RX`HH5Ug6EUA4B&JJyr)Da-m~Uuh>!*oA!8^9l*gYh3OIy8D$q&{pEF_hN zUnk0C?{%^E*i5Gy^(Cg)mc?=zK>%wffL3)#223eL{Un}J0CX9!C26LTV)E3_@>a0~ zenuBQYqLe512lGXOBg|=_Y+$L!gVo*rpINPLd>@lfL|S9S=F)>8~`a=zGWOZB5)00 z@Oln8NT*-`ICwpWRoJF5D~yBe0IV>yxH?p? zK@{5p=oQWS=Ga&>-kg`O`o4N|^1*z3VCsFsmCLd$_|?=91ddDFWEnIz%4I>I>!{7A zg2skl1q57Yvf-0VcHQO!Z@7dy!ric+*#IVUKon2~S9&fq?(H&>aI>iMB zx%+@&3n-qc-Y)BHd z0R-A8AQ&7rvlCcla_n>hkeQuO$BQ3#KJqLf^^Z>d_4yZ4+k^MU)Inp4v)mk46|N48 z{dSu;OKsI*SixphnA)mgIamf%(Aex(scirt&_V&x0_!X`rxV?=)5#z}W^`h4y#A!u z;l$z?Aa zsw-nD&sxq)0e~h<_k}6Gc;P5C|D^uL4^3~kB(IjuMhfQcsgb5|1a9}Fv8^eTJZMFF zbkv0rYko8{8wGRu*7n4=`#R;J7Uog_yvf7=g>he)vi_j?vu0w^%4xJS0YCgiio*~8 zwc%UOD?O4#;E(4ujVKDT^UVBSb7i6lW|N(I|yCW?a1Fp2}r0;q$z1x$lsg!brm31*8<4z3mAA-0#@8Bm;4o3u{{6aqWJJdzVEpxD8*$%hWk^Tf3hk0kN|B_)_D z6K&EXF~L-s5V2Qb5`<(yJRy?+kQEF;cL8Pr)WNKPIgM_YVEc(K%^ULPin{|7T`mgY rmOHKAtG{#j?%ChDOx*of(Oo9fQ+=)9Ja%OfzKKYCYlr`%mO$`d0j9or literal 0 HcmV?d00001