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)))