Resize canvas on screen orientation change

client/src/main.ts

@@ -9,7 +9,7 @@ type Message =
 const ctx = canvas.getContext('2d')!
 
 const MIN_RADIUS = 20
-const MAX_RADIUS = Math.min(window.innerHeight, window.innerWidth) / 6
+const MAX_RADIUS = 200
 const MAX_AGE = 1000 // in milliseconds
 
 type Point = [number, number]
@@ -156,10 +156,25 @@ const loop = () => {
 }
 
 // start everything
-// FIXME: Make sure to resize the canvas on orientationchange
 document.addEventListener('DOMContentLoaded', () => {
   ctx.canvas.width  = window.innerWidth
   ctx.canvas.height = window.innerHeight
   ctx.translate(0.5, 0.5)
   loop()
 })
+
+const debounce = (fn: Function, ms: number) => {
+  let prev = 0
+  return (...args: any[]) => {
+    const now = Date.now()
+    if (now - prev > ms) {
+      fn.apply(null, args)
+      prev = now
+    }
+  }
+}
+
+window.addEventListener('resize', debounce(() => {
+  ctx.canvas.width  = window.innerWidth
+  ctx.canvas.height = window.innerHeight
+}, (1000 / 60)))