Add zeitgeber.iteration, .passed

- compose PercentElement into TickElement
- replace css with tailwind classes

src/app/app.element.ts

@@ -26,7 +26,6 @@ export class AppElement extends HTMLElement {
         <debug-ctx>
           <app-clock></app-clock>
         </debug-ctx>
-        <app-percent></app-percent>
       </div>
       <div class="container">
         <div id="welcome" class="h-8 mb-16 mx-auto grid grid-flow-col gap-4 auto-cols-max">

src/app/clock.element.tsx

@@ -2,7 +2,6 @@ import { raw } from 'hono/html';
 import { injectable, inject } from '@joist/di';
 import './clock.element.css';
 import './percent.element.css';
-import './tick.element.css';
 import { Debug } from './debug.element';
 import { Zeitgeber } from './signals/zeitgeber';
 
@@ -46,25 +45,45 @@ export class ClockElement extends HTMLElement {
 
 export const Percent = () => (
   <>
-    <span class="percent"></span>
+    <span class="percent grid font-bold text-4xl p-4" style="transition: --percent 250ms"></span>
   </>
 );
 
 export class PercentElement extends HTMLElement {
-  public static observedAttributes = [];
+  public static observedAttributes = ['value', 'speedms'];
 
   connectedCallback() {
     const html = Percent();
     this.innerHTML = raw(html);
 
+    const value = this.attributes.getNamedItem('value')?.value || `${Math.random()}`;
+
+    const percent = this.getElementsByClassName('percent')[0] as HTMLElement;
+    percent.style.setProperty('--percent', value);
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
     const percent = this.getElementsByClassName('percent')[0] as HTMLElement;
-    percent.style.setProperty('--percent', `${Math.random()}`);
+    if (!percent) {
+      return;
+    }
+    if (name === 'value') {
+      percent.style.setProperty('--percent', newValue);
+    }
+    if (name === 'speedms') {
+      percent.style.setProperty('transition', `--percent ${newValue}ms`);
+    }
   }
 }
 
 export const Tick = () => (
   <>
-    <span class="tick"></span>
+    <div class="flex flex-row">
+      <span class="tick grid font-bold text-4xl p-4" style="transition: --tick 1s">
+        [-1]
+      </span>
+      <app-percent value="0.99" speedms="250"></app-percent>
+    </div>
   </>
 );
 
@@ -83,8 +102,15 @@ export class TickElement extends HTMLElement {
 
     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}`);
       content.style.setProperty('--tick', `${zeit.tick}`);
-      logger.log('TICK', zeit.tick);
+      content.style.setProperty('transition', `--tick ${zeit.msPerIteration}ms`);
+      content.innerHTML = `[${zeit.tick}]`;
+      logger.log('TICK', zeit.tick, zeit.iteration, passed);
     });
 
     setTimeout(() => {

src/app/percent.element.css

@@ -20,17 +20,13 @@
 }
 
 .percent {
-  font: 800 40px monospace;
-  padding: 1ch;
-  display: grid;
-  transition: --percent 1s;
   --temp: calc(var(--percent) * 100);
   --v1: max(var(--temp) - 0.5, 0);
   --v2: max((var(--temp) - var(--v1)) * 100 - 0.5, 0);
   counter-reset: v1 var(--v1) v2 var(--v2);
 }
 .percent::before {
-  content: counter(v1) '.' counter(v2, decimal-leading-zero) '%';
+  content: counter(v1, decimal-leading-zero) '.' counter(v2, decimal-leading-zero) '%';
 }
 
 /*

src/app/signals/zeitgeber.ts

@@ -11,6 +11,7 @@ export class Zeitgeber {
   private zeitgeist: {
     tick: Signal.State<number>;
     time: Signal.State<number>;
+    iteration: Signal.State<number>;
   };
   private timeoutId?: number;
 
@@ -25,7 +26,7 @@ export class Zeitgeber {
 
   constructor(
     private currentTick = 0,
-    public readonly msPerTick = 1000,
+    public readonly msPerTick = 10000,
     public readonly msPerIteration = 1000,
     public readonly timeSource = () => Date.now(),
     private currentTime = timeSource(),
@@ -35,6 +36,7 @@ export class Zeitgeber {
     this.zeitgeist = {
       tick: new Signal.State(currentTick),
       time: new Signal.State(currentTime),
+      iteration: new Signal.State(currentTime),
     };
   }
 
@@ -46,6 +48,10 @@ export class Zeitgeber {
     return this.zeitgeist.time.get();
   }
 
+  get iteration(): number {
+    return this.zeitgeist.iteration.get();
+  }
+
   get now() {
     return this.currentTime;
   }
@@ -54,12 +60,17 @@ export class Zeitgeber {
     return this.time + this.msPerTick;
   }
 
+  get passed(): number {
+    return (this.timeSource() - this.currentTime) / this.msPerTick;
+  }
+
   get running() {
     return !!this.timeoutId;
   }
 
   private timeloop() {
     const now = this.timeSource();
+    this.zeitgeist.iteration.set(now);
     const diff = now - this.currentTime;
     const ticks = Math.floor(diff / this.msPerTick);
     this.currentTime += ticks * this.msPerTick;