From eef3fbbaa7075071b02643d31a195268f37e40c4 Mon Sep 17 00:00:00 2001
From: arne <noreply@null.arnes.space>
Date: Sat, 27 Jan 2024 13:37:44 +0100
Subject: [PATCH] Resize canvas on screen orientation change

---
 client/src/main.ts | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/main.ts b/client/src/main.ts
index 1eeb9d2..1ad2071 100644
--- a/client/src/main.ts
+++ b/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)))