From 895e1a2869ec6ac9058afd86351cacd52b5ed369 Mon Sep 17 00:00:00 2001
From: Phoscur <phoscur@pheelgood.net>
Date: Sat, 4 May 2024 14:48:02 +0200
Subject: [PATCH] Refactor TickElement: split effects

---
 src/app/clock.element.tsx    | 14 +++++++++-----
 src/app/signals/zeitgeber.ts |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/app/clock.element.tsx b/src/app/clock.element.tsx
index 4d9a434..0706ee1 100644
--- a/src/app/clock.element.tsx
+++ b/src/app/clock.element.tsx
@@ -100,17 +100,21 @@ export class TickElement extends HTMLElement {
     const zeit = this.zeit();
     const logger = this.#logger();
 
+    const content = this.getElementsByClassName('tick')[0] as HTMLElement;
+    const percent = this.getElementsByTagName('app-percent')[0] as PercentElement;
+    percent.setAttribute('speedms', `${zeit.msPerIteration}`);
+    content.style.setProperty('transition', `--tick ${zeit.msPerIteration}ms`);
+
     zeit.effect(() => {
-      const content = this.getElementsByClassName('tick')[0] as HTMLElement;
-      const percent = this.getElementsByTagName('app-percent')[0] as PercentElement;
       const passed = zeit.passed;
       //percent.setAttribute('value', `${passed <= 0.01 ? 0.1 : passed}`); // rather show 10 than 0
       percent.setAttribute('value', `${passed}`);
-      percent.setAttribute('speedms', `${zeit.msPerIteration}`);
+      //logger.log('ITER', zeit.iteration);
+    });
+    zeit.effect(() => {
       content.style.setProperty('--tick', `${zeit.tick}`);
-      content.style.setProperty('transition', `--tick ${zeit.msPerIteration}ms`);
       content.innerHTML = `[${zeit.tick}]`;
-      logger.log('TICK', zeit.tick, zeit.iteration, passed);
+      logger.log('TICK', zeit.tick);
     });
 
     setTimeout(() => {
diff --git a/src/app/signals/zeitgeber.ts b/src/app/signals/zeitgeber.ts
index 6737a90..7640c3b 100644
--- a/src/app/signals/zeitgeber.ts
+++ b/src/app/signals/zeitgeber.ts
@@ -61,7 +61,7 @@ export class Zeitgeber {
   }
 
   get passed(): number {
-    return (this.timeSource() - this.currentTime) / this.msPerTick;
+    return (this.iteration - this.currentTime) / this.msPerTick;
   }
 
   get running() {