feat: track cycles

client/app.js

@@ -21,6 +21,7 @@ import {Room, RoomView} from '@avocado/topdown';
 // 1st party.
 import {augmentParserWithThroughput} from '../common/parser-throughput';
 import {WorldTime} from '../common/world-time';
+import {CycleTracker} from './cycle-tracker';
 import Ui from './ui';
 import DebugUi from './ui/debug';
 
@@ -42,12 +43,18 @@ const decorate = compose(
     default: 0,
     track: true,
   }),
+  Property('rps', {
+    track: true,
+  }),
   Property('selfEntity', {
     track: true,
   }),
   Property('selfEntityUuid', {
     track: true,
   }),
+  Property('tps', {
+    track: true,
+  }),
 );
 
 export class App extends decorate(class {}) {
@@ -64,6 +71,7 @@ export class App extends decorate(class {}) {
     this.reactContainer = undefined;
     this.lastIntensity = undefined;
     this.renderHandle = undefined;
+    this.rps = new CycleTracker(1 / 60); // Refresh rate, actually.
     this.stage = new Stage(config.visibleSize, config.visibleScale);
     this.roomView = new RoomView(this.room, this.stage.renderer);
     this.stage.addChild(this.roomView);
@@ -90,6 +98,7 @@ export class App extends decorate(class {}) {
     this.isConnected = false;
     this.socket = undefined;
     // Simulation.
+    this.tps = new CycleTracker(config.simulationFrequency);
     this.simulationHandle = undefined;
     this.world = config.doPhysicsSimulation ? new World() : undefined;
     this.room.world = this.world;
@@ -486,6 +495,8 @@ export class App extends decorate(class {}) {
       lastTime = now;
       this.calculateDarkness();
       this.stage.render();
+      // Sample.
+      this.rps.sample(elapsed);
     });
   }
 
@@ -503,6 +514,8 @@ export class App extends decorate(class {}) {
       // Tick synchronized.
       this.synchronizer.tick(elapsed);
       this.state = this.synchronizer.state;
+      // Sample.
+      this.tps.sample(elapsed);
     }, 1000 * config.simulationFrequency);
   }
 

client/cycle-tracker.js

@@ -0,0 +1,48 @@
+import {compose} from '@avocado/core';
+import {EventEmitter, Property} from '@avocado/mixins';
+import {Ticker} from '@avocado/timing';
+
+const decorate = compose(
+  EventEmitter,
+  Property('count', {
+    track: true,
+  }),
+  Property('jitter', {
+    track: true,
+  }),
+);
+
+export class CycleTracker extends decorate(class {}) {
+
+  constructor(targetFrequency) {
+    super();
+    this.count = 0;
+    this.jitter = [0, 0];
+    this.targetFrequency = targetFrequency;
+    this.ticker = new Ticker(.25);
+    this.trackCount = 0;
+    this.trackJitter = [0, 0];
+    this.ticker.on('tick', this.onTick, this);
+  }
+
+  onTick() {
+    this.count = this.trackCount * 4;
+    this.trackCount = 0;
+    this.jitter = this.trackJitter;
+    this.trackJitter = [0, 0];
+    this.emit('updated');
+  }
+
+  sample(elapsed) {
+    this.trackCount += 1;
+    const jitter = elapsed - this.targetFrequency;
+    if (jitter < 0 && elapsed < this.trackJitter[0]) {
+      this.trackJitter[0] = Math.round(1000 * jitter) / 1000;
+    }
+    if (jitter > 0 && elapsed > this.trackJitter[1]) {
+      this.trackJitter[1] = Math.round(1000 * jitter) / 1000;
+    }
+    this.ticker.tick(elapsed);
+  }
+}
+

client/ui/debug/index.js

@@ -8,6 +8,7 @@ import contempo from 'contempo';
 // 3rd party.
 import SelfEntity from './self-entity';
 import Connection from './connection';
+import Timers from './timers';
 
 const decorate = compose(
   contempo(``),
@@ -74,6 +75,7 @@ const DebugUi = ({
       }}
     >
       <Connection Parser={Parser} socket={socket} />
+      <Timers app={app} />
       {/* <SelfEntity app={app} /> */}
     </div>
   </div>;

client/ui/debug/timers.js

@@ -0,0 +1,63 @@
+// 3rd party.
+import React, {useEffect, useState} from 'react';
+// 2nd party.
+import {compose} from '@avocado/core';
+import contempo from 'contempo';
+// 1st party.
+import {usePropertyChange} from '../hooks/use-property-change';
+
+const decorate = compose(
+  contempo(`
+.timers {
+  left: 164px;
+  position: absolute;
+  color: white;
+  font-size: 4px;
+  font-family: monospace;
+  top: 4px;
+  border: 1px solid white;
+  padding: 2px;
+}
+.tps:before {
+  content: 'TPS: ';
+}
+.rps:before {
+  content: 'RPS: ';
+}
+.count {
+  margin-right: 2px;
+}
+.jitter::before {
+  content: '+/-: ';
+}
+.down, .up {
+  display: inline-block;
+  width: 12px;
+}
+.down {
+  margin-right: 2px;
+}
+.up {
+  margin: 0px 2px;
+}
+  `),
+);
+
+const TimersComponent = ({app}) => {
+  const tpsCount = usePropertyChange(app.tps, 'count', 0);
+  const tpsJitter = usePropertyChange(app.tps, 'jitter', [0, 0]);
+  const rpsCount = usePropertyChange(app.rps, 'count', 0);
+  const rpsJitter = usePropertyChange(app.rps, 'jitter', [0, 0]);
+  return <div className="timers unselectable">
+    <div className="tps">
+      <span className="count">{tpsCount}</span>
+      <span className="jitter"><span className="down">{tpsJitter[1]}</span>/<span className="up">{tpsJitter[0]}</span></span>
+    </div>
+    <div className="rps">
+      <span className="count">{rpsCount}</span>
+      <span className="jitter"><span className="down">{rpsJitter[1]}</span>/<span className="up">{rpsJitter[0]}</span></span>
+    </div>
+  </div>;
+}
+
+export default decorate(TimersComponent);