tidy

packages/clock/clock-test-app/src/App.tsx

@@ -16,10 +16,10 @@ const $y = (id: string, y: number) =>
 function App() {
   useEffect(() => {
     const update = () => {
-      const d = clock.getDelta()
+      const d = clock.delta
 
       document.querySelector('#delta')!.textContent = d.toString()
-      document.querySelector('#beat')!.textContent = clock.getBeat().toString()
+      document.querySelector('#beat')!.textContent = clock.beat.toString()
 
       $y('saw', (d * H) % H)
       $y('sin', Math.sin(d * TAU) * H * 0.5 + H * 0.5)
@@ -37,7 +37,7 @@ function App() {
     <>
       <section>
         <div className="grid">
-          <code id="delta">{clock.getDelta()}</code>
+          <code id="delta"></code>
           <button onClick={clock.start}>start</button>
           <button onClick={clock.stop}>stop</button>
           <button onClick={clock.reset}>reset</button>

packages/clock/src/Clock.ts

@@ -5,7 +5,7 @@ const MS_PER_FRAME = 1000 / 60
 const TICK_INTERVAL = MS_PER_FRAME / MS_IN_BEAT
 
 export class Clock {
-  private beatDelta: number = 0 // Increments every frame, at a rate of exactly 1 per beat
+  private beatDelta: number = 0 // Increments fractionally every frame, at a rate of exactly 1 per beat
   private isRunning: boolean = false
   private startTimestamp: number | null = null
   private beatCount: number = 0
@@ -24,9 +24,13 @@ export class Clock {
     }
   }
 
-  public getDelta = () => this.beatDelta
+  get delta() {
+    return this.beatDelta
+  }
 
-  public getBeat = () => this.beatCount
+  get beat() {
+    return this.beatCount
+  }
 
   public stop = () => {
     this.isRunning = false