Refactor TickElement: split effects

Phoscur · May 4, 2024 · 895e1a2 · 895e1a2
1 parent 0cdec7f
commit 895e1a2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -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() {