From 9646be4a6849a67b101cbec2aaca6a30d60e58a4 Mon Sep 17 00:00:00 2001
From: Thilo Behnke <thilo.behnke@gmx.net>
Date: Sat, 9 Jul 2022 18:24:50 +0200
Subject: [PATCH] performance/throttle-fps-to-60

---
 .../svelte-client/src/components/Text.svelte   |  1 -
 .../src/components/TickWrapper.svelte          | 18 ++++++++++++------
 server/src/main.rs                             |  2 +-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/client/svelte-client/src/components/Text.svelte b/client/svelte-client/src/components/Text.svelte
index 60f81af..572534e 100644
--- a/client/svelte-client/src/components/Text.svelte
+++ b/client/svelte-client/src/components/Text.svelte
@@ -14,7 +14,6 @@
 
     renderable(props => {
         const { engineCtx: ctx } = props;
-        console.log({text})
         if (text) {
             ctx.fillStyle = mainColor;
             ctx.font = `${fontSize}px ${fontFamily}`;
diff --git a/client/svelte-client/src/components/TickWrapper.svelte b/client/svelte-client/src/components/TickWrapper.svelte
index e693dc8..a4c712a 100644
--- a/client/svelte-client/src/components/TickWrapper.svelte
+++ b/client/svelte-client/src/components/TickWrapper.svelte
@@ -6,6 +6,9 @@
     export let inputs;
     export let killLoopOnError = true;
 
+    const targetFps = 60;
+    const frameThreshold = 1_000 / targetFps;
+
     let frame: number;
 
     onMount(() => {
@@ -16,14 +19,17 @@
 
     function createLoop (fn) {
         let elapsed = 0;
-        let lastTime = performance.now();
+        let lastTime = Date.now();
         (function loop() {
             frame = requestAnimationFrame(loop);
-            const beginTime = performance.now();
-            const dt = (beginTime - lastTime) / 1000;
-            lastTime = beginTime;
-            elapsed += dt;
-            fn(elapsed, dt);
+            const now = Date.now();
+            const dtMs = now - lastTime;
+            if (dtMs < frameThreshold) {
+                return;
+            }
+            lastTime = now - (dtMs % frameThreshold);
+            elapsed += dtMs;
+            fn(elapsed / 1_000, dtMs / 1_000);
         })();
         return () => {
             cancelAnimationFrame(frame);
diff --git a/server/src/main.rs b/server/src/main.rs
index 9efef16..bc80204 100644
--- a/server/src/main.rs
+++ b/server/src/main.rs
@@ -27,7 +27,7 @@ mod session;
 pub async fn main() {
     let compound_policy = Box::new(CompoundPolicy::new(Box::new(SizeTrigger::new(2u64.pow(20) * 10)), Box::new(DeleteRoller::new())));
     let logfile = RollingFileAppender::builder()
-        .encoder(Box::new(PatternEncoder::new("{d(%Y-%m-%d %H:%M:%S%.f)} [{l}] - {m}\n")))
+        .encoder(Box::new(PatternEncoder::new("{d(%Y-%m-%d %H:%M:%S%.f)} [{l}] - [{M}:{L}] {m}\n")))
         .append(true)
         .build("log/output.log", compound_policy).unwrap();