From d5abc17760360452224e3d2cc67a2306cbc412c9 Mon Sep 17 00:00:00 2001 From: arne Date: Sat, 27 Jan 2024 12:30:37 +0100 Subject: [PATCH] Add presence info message --- client/index.html | 1 + client/src/main.ts | 25 ++++++++++++++++++++----- client/src/style.css | 8 ++++++++ 3 files changed, 29 insertions(+), 5 deletions(-) diff --git a/client/index.html b/client/index.html index faa4336..db49110 100644 --- a/client/index.html +++ b/client/index.html @@ -7,6 +7,7 @@ +
diff --git a/client/src/main.ts b/client/src/main.ts index d3223fb..c365a61 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -1,3 +1,4 @@ +const presenceInfo = document.querySelector('#presence-info')! const canvas = document.querySelector('#canvas')! const socket = new WebSocket(`ws://${window.location.hostname}:3000`) @@ -20,7 +21,8 @@ type Particle = { } let state = { - particles: [] + particles: [], + others: 0 } type State = typeof state @@ -47,7 +49,10 @@ const makeRipple = (position: [number, number], radius: number): void => { canvas.addEventListener('mousedown', (e) => { // TODO Normalize x and y coords const radius = MAX_RADIUS - makeRipple([e.clientX, e.clientY], radius) + makeRipple([ + e.clientX / document.body.offsetWidth, + e.clientY / document.body.offsetHeight + ], radius) }) // create a smaller ripple when moving over the screen @@ -70,7 +75,10 @@ canvas.addEventListener('mousemove', (e) => { const shouldSpawn = hasSpace.next().value! if (shouldSpawn([e.clientX, e.clientY])) { const radius = MAX_RADIUS / 3*2 - makeRipple([e.clientX, e.clientY], radius) + makeRipple([ + e.clientX / document.body.offsetWidth, + e.clientY / document.body.offsetHeight + ], radius) } }) @@ -82,7 +90,13 @@ socket.addEventListener('message', (e) => { const message = JSON.parse(e.data) if (message?.type === 'presence-information') { const data = message - console.log(`i'm seeing ${data.others} others around the pond`) + state.others = data.others + // TODO: Would be nicer to have this DOM update elsewhere + presenceInfo.innerText = 'You see a pond. ' + (state.others === 0 + ? 'You are currently alone here.' + : state.others === 1 + ? 'Somebody else is also here.' + : `There are ${state.others} others with you.`) } else if (message?.type === 'ripple') { const data = message const particle = createParticle(data.position, data.maxRadius) @@ -97,6 +111,7 @@ socket.addEventListener('message', (e) => { // update the particles and remove them after a certain time const update = (state: State, deltaTime: number): State => ({ + ...state, particles: state.particles .map(p => ({ ...p, @@ -117,7 +132,7 @@ const render = (state: State, ctx: CanvasRenderingContext2D) => { ctx.strokeStyle = `rgba(40, 40, 40, ${opacity})` const [x, y] = particle.position const radius = (progress * (particle.maxRadius - MIN_RADIUS)) + MIN_RADIUS - ctx.ellipse(x, y, radius, radius, 0, 0, Math.PI * 2) + ctx.ellipse(x * document.body.offsetWidth, y * document.body.offsetHeight, radius, radius, 0, 0, Math.PI * 2) ctx.stroke() } } diff --git a/client/src/style.css b/client/src/style.css index 38c53a1..55c3ced 100644 --- a/client/src/style.css +++ b/client/src/style.css @@ -4,6 +4,14 @@ body { min-height: 100vh; padding: 0; margin: 0; + overflow: hidden; +} + +#presence-info { + position: absolute; + top: 24px; + left: 24px; + pointer-events: none } canvas {