✨ add partyToggleInfo() to hide the info panel

jbakse · Feb 11, 2022 · 4a1d309 · 4a1d309
1 parent d03514c
commit 4a1d309
Show file tree

Hide file tree

Showing 13 changed files with 224 additions and 67 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -148,7 +148,7 @@ module.exports = {
     "operator-assignment": "error", //	Require or disallow assignment operator shorthand where possible
     "prefer-arrow-callback": "error", //	Require using arrow functions for callbacks
     "prefer-const": "error", //	Require `const` declarations for variables that are never reassigned after declared
-    "prefer-destructuring": "error", //	Require destructuring from arrays and/or objects
+    // "prefer-destructuring": "error", //	Require destructuring from arrays and/or objects
     "prefer-exponentiation-operator": "error", //	Disallow the use of `Math.pow` in favor of the `**` operator
     "prefer-named-capture-group": "error", //	Enforce using named capture group in regular expression
     "prefer-numeric-literals": "error", //	Disallow `parseInt()` and `Number.parseInt()` in favor of binary, octal, and hexadecimal literals

diff --git a/notes/how_to.md b/notes/how_to.md
@@ -23,7 +23,7 @@ git checkout feature-branch # switch to the feature branch
 ... commit changes ...
 git rebase master # rebase your changes on top of master
 git checkout master # switch back to master
-git merge -squash feature-branch # merge your changes into master via a squash
+git merge --squash feature-branch # merge your changes into master via a squash
 # git won't know your branch has been merged, so...
 git branch -d feature-branch
 # ...will warn you and tell you you need to ...

diff --git a/notes/todo.todo b/notes/todo.todo
@@ -11,9 +11,11 @@
 	+ --	clean up console messages
 	+ --	add version to console
 
-- Debug View
-	--	make debug view opt in
-	--	add ping to debug view?
+
+- Info View
+	.--	make view disableable
+	--	add ping?
+	--	look into using something like reef or https://preactjs.com/? 
 
 - Records
 	--	records leak

diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
   "main": "src/index_p5.js",
   "sideEffects": [
     "./src/index.p5.js",
-    "./src/party_debug.css"
+    "./src/InfoPanel.css"
   ],
   "engines": {
     "node": "16.14.0"

diff --git a/public/.eslintrc.js b/public/.eslintrc.js
@@ -14,6 +14,7 @@ module.exports = {
     partyLoadParticipantShareds: "readonly",
     partySubscribe: "readonly",
     partyEmit: "readonly",
+    partyToggleInfo: "readonly",
   },
   rules: {
     "prefer-destructuring": "off",

diff --git a/public/examples/info_panel/README.md b/public/examples/info_panel/README.md
@@ -0,0 +1 @@
+# info_panel
diff --git a/public/examples/info_panel/index.html b/public/examples/info_panel/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <head>
+      <link rel="stylesheet" href="../sketch.css" />
+    </head>
+  </head>
+  <body>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
+
+    <script src="/dist/p5.party.js"></script>
+
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/public/examples/info_panel/index.js b/public/examples/info_panel/index.js
@@ -0,0 +1,47 @@
+let shared;
+
+function preload() {
+  partyConnect("wss://deepstream-server-1.herokuapp.com", "info_panel", "main");
+  shared = partyLoadShared("shared");
+}
+
+function setup() {
+  createCanvas(400, 400);
+  noStroke();
+
+  // set defaults on shared data
+  if (partyIsHost()) {
+    partySetShared(shared, {
+      x: 0,
+      y: 0,
+    });
+  }
+
+  partyToggleInfo(false); // pass false to hide
+
+  createButton("Toggle Info").mousePressed(() => {
+    partyToggleInfo(); // pass nothing to toggle
+  });
+
+  createButton("Show Info").mousePressed(() => {
+    partyToggleInfo(true); // pass true to show
+  });
+
+  createButton("Hide Info").mousePressed(() => {
+    partyToggleInfo(false); // pass true to show
+  });
+}
+
+function mousePressed() {
+  // write shared data
+  shared.x = mouseX;
+  shared.y = mouseY;
+}
+
+function draw() {
+  background("#ffcccc");
+  fill("#000066");
+
+  // read shared data
+  ellipse(shared.x, shared.y, 100, 100);
+}
diff --git a/public/index.html b/public/index.html
@@ -67,6 +67,7 @@ <h2>Expiremental Examples</h2>
       <li><a href="show_example.html?pong">pong</a></li>
       <li><a href="show_example.html?coverup">coverup</a></li>
       <li><a href="show_example.html?select_room">select_room</a></li>
+      <li><a href="show_example.html?info_panel">info_panel</a></li>
     </article>
   </body>
 </html>
diff --git a/src/party_debug.css → src/InfoPanel.css b/src/party_debug.css → src/InfoPanel.css
@@ -1,40 +1,51 @@
-#party-debug {
+#party-info {
   font-family: monospace;
   font-size: 12px;
 
   background-color: #ffcccc;
   position: absolute;
   right: 0;
   top: 0;
+
+  display: none;
+}
+
+#party-info.show {
+  display: block;
 }
-#party-debug div {
+
+#party-info div {
   padding: 10px;
 }
-#party-debug .app {
+#party-info .app {
   background-color: #ffffcc;
 }
-#party-debug .room {
+#party-info .room {
   background-color: #ffffcc;
 }
-#party-debug .participant {
+#party-info .id {
+  background-color: #ffffcc;
+}
+
+#party-info .participant {
   background-color: #ccccff;
 }
-#party-debug .host::after {
+#party-info .host::after {
   content: " « host";
 }
-#party-debug .me::after {
+#party-info .me::after {
   content: " « me";
 }
-#party-debug .host.me::after {
+#party-info .host.me::after {
   content: " « host+me";
 }
-#party-debug .missing {
+#party-info .missing {
   color: rgba(0, 0, 0, 0.3);
 }
 
-#party-debug .label {
+#party-info .label {
   background-color: #ccffcc;
 }
-#party-debug .record {
+#party-info .record {
   background-color: #ccffff;
 }
diff --git a/src/InfoPanel.js b/src/InfoPanel.js
@@ -0,0 +1,92 @@
+// eslint-disable-next-line
+import css from "./InfoPanel.css";
+
+const UPDATE_MS = 100;
+
+export class InfoPanel {
+  #client;
+  #room;
+  #el;
+
+  constructor(client, room) {
+    this.#client = client;
+    this.#room = room;
+    this.#el = createInfoPanelElement();
+
+    this.#room.whenReady(this.#startUpdates.bind(this));
+  }
+
+  toggle(show) {
+    this.#el.classList.toggle("show", show);
+  }
+
+  #startUpdates() {
+    setInterval(this.#update.bind(this), UPDATE_MS);
+  }
+
+  #update() {
+    // collect info
+    const onlineClients = this.#client.getAllClients();
+    const data = this.#room._panelData();
+    const isHost = this.#room.getHostName() === this.#client.getUid();
+
+    // generate output
+    // const output = "";
+    this.#el.innerHTML = "";
+
+    const appendDiv = (content, ...classes) => {
+      const el = document.createElement("div");
+      const cleaned_classes = classes.filter((n) => n); // remove empty strings
+      el.classList.add(...cleaned_classes);
+      el.innerHTML = content;
+      this.#el.appendChild(el);
+      return el;
+    };
+
+    // header info
+    appendDiv("p5.party info", "label");
+    appendDiv(data.appName, "app");
+    appendDiv(data.roomName, "room");
+    const shortName = this.#client.getUid().substr(-4);
+    const host = isHost ? "host" : "";
+    appendDiv(shortName, "id", host);
+
+    // participant info
+    appendDiv("Participants", "label");
+    for (const name of data.participantUids) {
+      const shortName = name.substr(-4);
+      const host = this.#room.getHostName() === name ? "host" : "";
+      const missing = onlineClients.includes(name) ? "" : "missing";
+      const me = this.#client.getUid() === name ? "me" : "";
+      appendDiv(shortName, "participant", host, missing, me);
+    }
+
+    // shared objects
+    appendDiv("Shared Objects", "label");
+    for (const entry of data.recordDsList.getEntries()) {
+      const name = entry.split("/")[1];
+      appendDiv(`"${name}"`, "record");
+    }
+
+    // output += `<div class="label">#participantRecords</div>`;
+    // // get keys from #participantRecords
+    // const keys = Object.keys(data.participantRecords);
+    // for (const key of keys) {
+    //   output += `<div class="record">${key}</div>`;
+    // }
+
+    // this.#el.innerHTML = output;
+  }
+}
+
+// add a child div to parent with provided classes and content
+
+function createInfoPanelElement() {
+  let el = document.getElementById("party-info");
+  if (!el) {
+    el = document.createElement("div");
+    el.id = "party-info";
+    document.body.appendChild(el);
+  }
+  return el;
+}
diff --git a/src/Room.js b/src/Room.js
@@ -1,9 +1,7 @@
 import { createEmitter } from "./emitter";
 import { Record } from "./Record";
-import * as log from "./log";
 
-// eslint-disable-next-line
-import css from "./party_debug.css";
+import * as log from "./log";
 
 /*
  * Room
@@ -41,9 +39,21 @@ export class Room {
       this.#client.getUid()
     );
     this.#isReady = false;
+
     this.#connect();
   }
 
+  _panelData() {
+    return {
+      appName: this.#appName,
+      roomName: this.#roomName,
+      participantUids: this.#participantUids,
+      roomDataDsRecord: this.#roomDataDsRecord,
+      recordDsList: this.#recordDsList,
+      participantRecords: this.#participantRecords,
+    };
+  }
+
   async #connect() {
     await this.#client.whenReady();
     const connectRoomData = async () => {
@@ -89,8 +99,6 @@ export class Room {
     // ready
     this.#isReady = true;
     this.#emitter.emit("ready");
-
-    setInterval(this.#displayDebug.bind(this), 100);
   }
 
   // whenReady returns a promise AND calls a callback
@@ -106,6 +114,10 @@ export class Room {
     }
   }
 
+  get isReady() {
+    return this.#isReady;
+  }
+
   getRecord(id) {
     const name = `${this.#appName}-${this.#roomName}/${id}`;
     const record = new Record(this.#client, name);
@@ -278,48 +290,4 @@ export class Room {
 
     // @todo currently not removing or hiding disconnected clients (ghosts)
   }
-
-  // @todo: factor this out of Room?
-  #displayDebug() {
-    // create element if needed
-    let el = document.getElementById("party-debug");
-    if (!el) {
-      el = document.createElement("div");
-      el.id = "party-debug";
-      document.body.appendChild(el);
-    }
-
-    // collect info
-    const onlineClients = this.#client.getAllClients();
-
-    // generate output
-    let output = "";
-    output += '<div class="label">p5.party debug</div>';
-    output += `<div class="app">${this.#appName}</div>`;
-    output += `<div class="room">${this.#roomName}</div>`;
-    output += `<div class="label">Participants</div>`;
-
-    for (const name of this.#participantUids) {
-      const shortName = name.substr(-4);
-      const host = this.#roomDataDsRecord.get(`host`) === name ? "host" : "";
-      const missing = onlineClients.includes(name) ? "" : "missing";
-      const me = this.#client.getUid() === name ? "me" : "";
-
-      output += `<div class="participant ${host} ${me} ${missing}">${shortName}</div>`;
-    }
-
-    output += `<div class="label">Shared Objects</div>`;
-    for (const entry of this.#recordDsList.getEntries()) {
-      output += `<div class="record">${entry.split("/")[1]}</div>`;
-    }
-
-    // output += `<div class="label">#participantRecords</div>`;
-    // // get keys from #participantRecords
-    // const keys = Object.keys(this.#participantRecords);
-    // for (const key of keys) {
-    //   output += `<div class="record">${key}</div>`;
-    // }
-
-    el.innerHTML = output;
-  }
 }