Experiment with window-sized scaling

client/src/main.ts

@@ -9,7 +9,7 @@ type Message =
 const ctx = canvas.getContext('2d')!
 
 const MIN_RADIUS = 20
-const MAX_RADIUS = 200
+const MAX_RADIUS = Math.min(window.innerHeight, window.innerWidth) / 6
 const MAX_AGE = 1000 // in milliseconds
 
 type Point = [number, number]
@@ -50,8 +50,8 @@ canvas.addEventListener('mousedown', (e) => {
   // TODO Normalize x and y coords
   const radius = MAX_RADIUS
   makeRipple([
-    e.clientX / document.body.offsetWidth,
-    e.clientY / document.body.offsetHeight
+    e.clientX / window.innerWidth,
+    e.clientY / window.innerHeight
   ], radius)
 })
 
@@ -69,15 +69,15 @@ function* minDist(dist: number) {
   }
 }
 
-const hasSpace = minDist(70)
+const hasSpace = minDist(MAX_RADIUS / 6)
 
 canvas.addEventListener('mousemove', (e) => {
   const shouldSpawn = hasSpace.next().value!
   if (shouldSpawn([e.clientX, e.clientY])) {
     const radius = MAX_RADIUS / 3*2
     makeRipple([
-      e.clientX / document.body.offsetWidth,
-      e.clientY / document.body.offsetHeight
+      e.clientX / window.innerWidth,
+      e.clientY / window.innerHeight
     ], radius)
   }
 })
@@ -128,8 +128,8 @@ const render = (state: State, ctx: CanvasRenderingContext2D) => {
     const progress = (particle.age / MAX_AGE)
     const opacity = Math.min(1, Math.pow(1-progress, 3)) * (particle.maxRadius / MAX_RADIUS)
     const [x, y] = particle.position
-    const scaledX = x * document.body.offsetWidth
-    const scaledY = y * document.body.offsetHeight
+    const scaledX = x * window.innerWidth
+    const scaledY = y * window.innerHeight
     const radius = (progress * (particle.maxRadius - MIN_RADIUS)) + MIN_RADIUS
     const gradient = ctx.createRadialGradient(scaledX, scaledY, 0, scaledX, scaledY, radius)
     gradient.addColorStop(0, `rgba(120, 120, 240, 0)`)
@@ -156,9 +156,10 @@ const loop = () => {
 }
 
 // start everything
+// FIXME: Make sure to resize the canvas on orientationchange
 document.addEventListener('DOMContentLoaded', () => {
-  canvas.width = canvas.parentElement!.clientWidth
-  canvas.height = canvas.parentElement!.clientHeight
+  ctx.canvas.width  = window.innerWidth
+  ctx.canvas.height = window.innerHeight
   ctx.translate(0.5, 0.5)
   loop()
 })

client/src/style.css

@@ -1,10 +1,10 @@
 html,
 body {
-  min-width: 100wh;
-  min-height: 100vh;
   padding: 0;
   margin: 0;
   overflow: hidden;
+  font-family: sans-serif;
+  background: #efefef
 }
 
 #presence-info {
@@ -15,4 +15,7 @@ body {
 }
 
 canvas {
+  display: block;
+  width: 100vw;
+  height: 100vh;
 }