update tanks_emit example

jbakse · Jan 13, 2022 · cff11dc · cff11dc
1 parent 00f83dd
commit cff11dc
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 52 deletions.
diff --git a/public/examples/tanks_emit/debug.js b/public/examples/tanks_emit/debug.js
@@ -0,0 +1,15 @@
+///////////////////////////////////////////
+// DEBUG CODE
+
+function debugShow(data) {
+  const roundIt = (key, value) => {
+    if (typeof value === "number") return Math.floor(value * 100) / 100;
+    return value;
+  };
+
+  document.getElementById("debug").innerText = JSON.stringify(
+    data,
+    roundIt,
+    "  "
+  );
+}
diff --git a/public/examples/tanks_emit/fps.js b/public/examples/tanks_emit/fps.js
diff --git a/public/examples/tanks_emit/index.html b/public/examples/tanks_emit/index.html
@@ -26,7 +26,8 @@
     <script src="/dist/p5.party.js"></script>
 
     <script src="shape.js"></script>
-    <script src="fps.js"></script>
+    <script src="stats.js"></script>
+    <script src="debug.js"></script>
 
     <script src="index.js"></script>
   </body>

diff --git a/public/examples/tanks_emit/index.js b/public/examples/tanks_emit/index.js
@@ -1,13 +1,12 @@
-// uuidv4.min.js
-/* global uuidv4 */
-
 // p5.party experimental
 /* global partyEmit partySubscribe*/
 
 // project utils
-/* global Rect pointInRect fpsCounter*/
+/* global Rect pointInRect */
+/* global StatTracker */
+/* global debugShow */
 
-const fps = new fpsCounter();
+let stats;
 let shared, me, participants;
 
 function preload() {
@@ -19,6 +18,7 @@ function preload() {
 
 function setup() {
   createCanvas(400, 400).parent("canvas-wrap");
+  stats = new StatTracker();
 
   if (partyIsHost()) {
     shared.bullets = [];
@@ -34,20 +34,26 @@ function draw() {
   moveTank();
   if (partyIsHost()) stepGame();
   drawScene();
-  showDebugData();
+
+  stats.tick();
+  debugShow({
+    stats,
+    participants,
+  });
 }
 
 ///////////////////////////////////////////
 // HOST CODE
 
 function stepGame() {
-  // step bullets
   shared.bullets.forEach(stepBullet);
 }
 
 function stepBullet(b) {
   b.x += b.dX;
   b.y += b.dY;
+
+  // remove out of bounds bullets
   if (!pointInRect(b, new Rect(0, 0, 400, 400))) {
     const i = shared.bullets.indexOf(b);
     shared.bullets.splice(i, 1);
@@ -78,7 +84,6 @@ function moveTank() {
   if (keyIsDown(68) /*d*/) me.tank.a += radians(2);
 
   for (const bullet of shared.bullets) {
-    console.log(bullet, bullet.x, bullet.y, me.tank.x, me.tank.y);
     if (dist(bullet.x, bullet.y, me.tank.x, me.tank.y) < 15) {
       me.tank.spin = 0.4;
     }
@@ -128,25 +133,3 @@ function drawBullet(b) {
   ellipse(b.x, b.y, 10, 10);
   pop();
 }
-
-///////////////////////////////////////////
-// DEBUG CODE
-function showDebugData() {
-  const data = {
-    frameRate: fps.tick(),
-    bulletCount: shared.bullets.length,
-    playerCount: participants.length,
-    me,
-  };
-
-  const roundIt = (key, value) => {
-    if (typeof value === "number") return Math.floor(value * 100) / 100;
-    return value;
-  };
-
-  document.getElementById("debug").innerText = JSON.stringify(
-    data,
-    roundIt,
-    "  "
-  );
-}
diff --git a/public/examples/tanks_emit/stats.js b/public/examples/tanks_emit/stats.js
@@ -0,0 +1,47 @@
+/* global uuidv4 */
+/* global me */
+/* global partySubscribe partyEmit */
+
+class StatTracker {
+  #id;
+  #frames;
+  #startTime;
+
+  constructor() {
+    this.#frames = 0;
+    this.#startTime = performance.now();
+    this.frameRate = 0;
+    this.ping = 0;
+    this.#id = uuidv4();
+    me.stats = {};
+    partySubscribe("ping", this.onPing.bind(this));
+    partySubscribe("pong", this.onPong.bind(this));
+  }
+  onPing(data) {
+    if (partyIsHost()) {
+      partyEmit("pong", data);
+    }
+  }
+  onPong(data) {
+    if (data.sender === this.#id) {
+      this.ping = performance.now() - data.time;
+      me.stats.ping = this.ping;
+    }
+  }
+  tick() {
+    this.#frames++;
+    const now = performance.now();
+    if (now > this.#startTime + 1000) {
+      this.frameRate = this.#frames;
+      this.#frames = 0;
+      this.#startTime = now;
+
+      me.stats.frameRate = this.frameRate;
+      partyEmit("ping", {
+        sender: this.#id,
+        time: performance.now(),
+      });
+    }
+    return this.frameRate;
+  }
+}
diff --git a/src/Record.js b/src/Record.js
@@ -96,7 +96,6 @@ export class Record {
 
     // report
     log.debug("RecordManager: Record ready.", this.#name);
-    //log.debug(this.#record.get());
 
     // ready
     this.#isReady = true;
@@ -147,7 +146,7 @@ function patchInPlace(_old, _new, _keyPath = "") {
   // remove old keys not in new
   for (const key of oldKeys) {
     if (!Object.prototype.hasOwnProperty.call(_new, key)) {
-      log.debug(`remove ${_keyPath}.${key}`);
+      // log.debug(`remove ${_keyPath}.${key}`);
       if (Array.isArray(_old)) {
         _old.splice(key, 1);
       } else {
@@ -175,7 +174,7 @@ function patchInPlace(_old, _new, _keyPath = "") {
       }
       if (oldType !== "object" || newType !== "object") {
         if (_old[key] !== _new[key]) {
-          log.debug(`update ${_keyPath}.${key}`);
+          // log.debug(`update ${_keyPath}.${key}`);
           _old[key] = _new[key];
         }
         continue;
@@ -187,7 +186,7 @@ function patchInPlace(_old, _new, _keyPath = "") {
   // add new keys not in old
   for (const key of newKeys) {
     if (!Object.prototype.hasOwnProperty.call(_old, key)) {
-      log.debug(`add ${_keyPath}.${key}`);
+      // log.debug(`add ${_keyPath}.${key}`);
       _old[key] = _new[key];
     }
   }