Merge remote-tracking branch 'upstream/master'

jbakse · Jun 13, 2020 · 8564656 · 8564656
2 parents d6d5d39 + b21eb49
commit 8564656
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 42 deletions.
diff --git a/notes/todo.todo b/notes/todo.todo
@@ -6,7 +6,7 @@
 
 - can bake package version into code somehow?
 
-- why is version on npm up to date, only 50k, and missing css? also dist was empty
+.- why is version on npm up to date, only 50k, and missing css? also dist was empty
 
 # Bugs
 
@@ -36,16 +36,20 @@
 # Requests
 - add a way to clear all the shared records in a room
 
+# Branch - Subscribe
+
+--- get shared object changed messages
+
 # Branch - Push Improvements
 
 - config auto push or not on records
 - config record push debounce
 
 # Branch - Participants
 
-- expose participant count
-- expose participant list
-- expose a record of info for each participant
+--- expose participant count
+--- expose participant list
+--- expose a record of info for each participant
 
 # Branch - Info
 - using vue?

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "p5.party",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "author": "Justin Bakse",
   "license": "MIT",
   "description": "Pre-release! An easy to use library for simple multi-user sketches with p5.js.",

diff --git a/public/.eslintrc.js b/public/.eslintrc.js
@@ -2,10 +2,11 @@
 module.exports = {
   globals: {
     party: "readonly",
-    partyLoadShared: "readonly",
     partyConnect: "readonly",
-    partyIsHost: "readonly",
+    partyLoadShared: "readonly",
     partySetShared: "readonly",
+    partyWatchShared: "readonly",
+    partyIsHost: "readonly",
     select: "readonly",
     selectAll: "readonly",
     removeElements: "readonly",

diff --git a/public/examples/hello_cdn/index.html b/public/examples/hello_cdn/index.html
@@ -11,7 +11,7 @@
     <!-- Using the latest version -->
     <script src="https://unpkg.com/p5.party@latest/dist/p5.party.js"></script>
     <!-- Using a specific version -->
-    <!-- <script src="https://unpkg.com/p5.party@0.3.2/dist/p5.party.js"></script> -->
+    <!-- <script src="https://unpkg.com/p5.party@0.3.1/dist/p5.party.js"></script> -->
 
     <script src="index.js"></script>
   </body>

diff --git a/public/examples/hello_watch/README.md b/public/examples/hello_watch/README.md
@@ -0,0 +1,9 @@
+# hello_watch
+
+This example is like hello_party, but uses `partyWatchShared()` to react to data updates.
+
+This example shows how to connect to a party server, load a shared data object, and read and write to it. It also shows how to share a p5 color.
+
+- **click** to move the dot
+
+> Open this example in two browser windows at once!
diff --git a/public/examples/hello_watch/index.html b/public/examples/hello_watch/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <head>
+      <link rel="stylesheet" href="../sketch.css" />
+    </head>
+  </head>
+  <body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
+
+    <script src="/dist/p5.party.js"></script>
+
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/public/examples/hello_watch/index.js b/public/examples/hello_watch/index.js
@@ -0,0 +1,40 @@
+let shared;
+function preload() {
+  partyConnect(
+    "wss://deepstream-server-1.herokuapp.com",
+    "hello_party",
+    "main"
+  );
+  shared = partyLoadShared("shared");
+  partyWatchShared(shared, onDataChange);
+}
+
+function setup() {
+  createCanvas(400, 400);
+  noStroke();
+
+  // set defaults on shared data
+  shared.x = shared.x || 0;
+  shared.y = shared.y || 0;
+
+  // don't draw every frame
+  noLoop();
+}
+
+function mousePressed(e) {
+  // write shared dataa
+  shared.x = mouseX;
+  shared.y = mouseY;
+}
+
+function draw() {
+  background("#ffcccc");
+  fill("#000066");
+  // read shared data
+  ellipse(shared.x, shared.y, 100, 100);
+}
+
+function onDataChange() {
+  // draw when the circle moves
+  draw();
+}
diff --git a/public/examples/index.html b/public/examples/index.html
@@ -38,6 +38,8 @@
       <h1>Examples</h1>
       <ul>
         <li><a href="./hello_party">hello_party</a></li>
+        <li><a href="./hello_watch">hello_watch</a></li>
+        <li><a href="./hello_cdn">hello_cdn</a></li>
         <li><a href="./click_history">click_history</a></li>
         <li><a href="./tilemapper">tilemapper</a></li>
         <li><a href="./hosting">hosting</a></li>

diff --git a/public/index.html b/public/index.html
@@ -19,6 +19,8 @@ <h1>p5.Party</h1>
 
       <ul>
         <li><a href="show_example.html?hello_party">hello_party</a></li>
+        <li><a href="show_example.html?hello_watch">hello_watch</a></li>
+        <li><a href="show_example.html?hello_cdn">hello_cdn</a></li>
         <li><a href="show_example.html?click_history">click_history</a></li>
         <li><a href="show_example.html?tilemapper">tilemapper</a></li>
         <li><a href="show_example.html?hosting">hosting</a></li>
@@ -28,7 +30,6 @@ <h1>p5.Party</h1>
         <li><a href="show_example.html?callbacks">callbacks</a></li>
         <li><a href="show_example.html?chat_log">Chat Log</a></li>
         <li><a href="show_example.html?chat_log_no_p5">Chat Log No p5</a></li>
-
       </ul>
     </article>
   </body>

diff --git a/src/Record.js b/src/Record.js
@@ -35,6 +35,46 @@ export class Record {
     this._connect();
   }
 
+  whenReady(cb) {
+    if (this.#isReady) {
+      if (typeof cb === "function") cb();
+      return Promise.resolve();
+    }
+    if (typeof cb === "function") this.#emitter.once("ready", cb);
+    return new Promise((resolve) => {
+      this.#emitter.once("ready", resolve);
+    });
+  }
+
+  // this is broken until a "deep update" is implemented
+  // allows getting a watched data for data not in shared.
+  // path needs to exist on record for this to work.
+  // getData(path) {
+  //   const deep_value = (o, p) => p.split(".").reduce((a, v) => a[v], o);
+  //   return deep_value(this.#watchedData, path);
+  // }
+
+  getShared() {
+    return this.#watchedShared;
+  }
+
+  setShared(data) {
+    this.#record.set("shared", data);
+  }
+
+  async watchShared(path_or_cb, cb) {
+    await this.whenReady();
+    if (typeof path_or_cb === "string") {
+      this.#record.subscribe("shared." + path_or_cb, cb);
+    } else if (typeof path_or_cb === "function") {
+      this.#record.subscribe("shared", path_or_cb);
+    }
+  }
+
+  static recordForShared(shared) {
+    return onChange.target(shared)[Symbol.for("Record")];
+  }
+
   async _connect() {
     await this.#client.whenReady();
 
@@ -56,18 +96,6 @@ export class Record {
     this.#isReady = true;
     this.#emitter.emit("ready");
   }
-
-  whenReady(cb) {
-    if (this.#isReady) {
-      if (typeof cb === "function") cb();
-      return Promise.resolve();
-    }
-    if (typeof cb === "function") this.#emitter.once("ready", cb);
-    return new Promise((resolve) => {
-      this.#emitter.once("ready", resolve);
-    });
-  }
-
   _onClientChangedData(path, newValue, oldValue) {
     // on-change alerts us when the value actually changes
     // so we don't need to test if newValue and oldValue are different
@@ -85,24 +113,4 @@ export class Record {
       this.#shared[key] = data[key];
     }
   }
-
-  // this is broken until a "deep update" is implemented
-  // allows getting a watched data for data not in shared.
-  // path needs to exist on record for this to work.
-  // getData(path) {
-  //   const deep_value = (o, p) => p.split(".").reduce((a, v) => a[v], o);
-  //   return deep_value(this.#watchedData, path);
-  // }
-
-  getShared() {
-    return this.#watchedShared;
-  }
-
-  setShared(data) {
-    this.#record.set("shared", data);
-  }
-
-  static recordForShared(shared) {
-    return onChange.target(shared)[Symbol.for("Record")];
-  }
 }
diff --git a/src/index_p5.js b/src/index_p5.js
@@ -68,6 +68,24 @@ function init() {
   };
 
   p5.prototype.partySetShared = function (shared, object) {
+    if (!Record.recordForShared(shared)) {
+      log.warn(
+        "partySetShared() doesn't recognize provided shared object.",
+        shared
+      );
+      return;
+    }
     Record.recordForShared(shared).setShared(object);
   };
+
+  p5.prototype.partyWatchShared = function (shared, path, cb) {
+    if (!Record.recordForShared(shared)) {
+      log.warn(
+        "partyWatchShared() doesn't recognize provided shared object.",
+        shared
+      );
+      return;
+    }
+    Record.recordForShared(shared).watchShared(path, cb);
+  };
 }