Merge remote-tracking branch 'upstream/master'

notes/todo.todo

@@ -1,121 +1,45 @@
 # Tooling 
 
-.-- add a webpage endpoint to the server
-	: won't fix
-	: this is not important enough for the time/complexity required
-
--- build party debug css in.
-
--- I've got hello_party looking good, but need to consider
-	-- how quickpack packs examples without packing all of public
-	-- and examples currently link out resources in public
-	-- examples/ should be self contained
-	-- can build a little viewer page in public that takes a path to an example
-		-- runs the script
-		-- shows the script as text
-		-- loads the readme
-
-.- why is p5.party.js 2mb again?!
-	its not
-
-.- webpack-dev-server isn't livereloading static assets
-	webpack-dev-server doesn't livereload unless page includes bundle	
-
-.- build deepstream client into package
-	- how big is ds client? 190kB
-
-.- do we really need the regenerator runtime?
-	- can we webpack without it, targeting only recent browsers?
-	- just a few k, lets not worry abou tit
-
-.- make build smaller, its way too big!
-
 - consider providing min and unmin versions
 	https://stackoverflow.com/questions/25956937/how-to-build-minified-and-uncompressed-bundle-with-webpack
 	- compare to other p5 libraries
 
+- can bake package version into code somehow?
 
-- check github pages https
-- check notion embeded demos
+- why is version on npm up to date, only 50k, and missing css? also dist was empty
 
+# Bugs
+
+# Style / Naming
 
-# Improve
+# Enhancements
 
 - Record 
-	- Keep track of records being created in lists so they can be cleaned up
-		or, maybe don't, and just assume that the whole thing gets blown away every night?
-	- check this out, in order to make record support sharing any property of the record (not just .shared)
-		-- Doesn't work because of the `shortcut reference` problem
-		- 1) watch the whole record instead of shared
-		- 2) return the part of the whole record you want to expose, or that is requested
-		- 3) done!
-	- ?Do a deep nested update of .shared (or whole record) so that shortcut references will still work?
-		-- would solve the `shortcut reference` problem
 
 - Client
-	- improve network usage for getAllClients
 	- consider cacheing random id in _session_ storage so reloads can reconnect as same client
-	- also, while possibly this same library could be used for long term server persistance, for now limit the scope to session-longevity multiplayer
-
+
 - Room
-	- move debug view to client?
-	- add ping to debug view
+	- make debug view opt in
+	- add ping to debug view?
 
-
-# Functionality
 
-
-# Examples
-	- show isHost in setup to setup the room
+# Docs
+- also, while possibly this same library could be used for long term server persistance, for now limit the scope to session-longevity multiplayer
 
 # Questions
-	- how the hell is the onChange proxy handling array insert/remove (splice)?
-		a: onChange sees this as replacing the array with the new array, sends the entire contents of the array
-		a: this creates a lot of data on the wire but...
-		a: since it doesn't look like DS has a way to splice an array, this doesn't make things any worse at least
-
 
 # Tips
-	- Don't store shortcut references to properties or nested properties of "shared".
-	shared = {a: cats, b: dogs}; shortcut_a = shared.a; 
-	... update from server overwrites contents of shared
-	console.log(shortcut_a);
-	// shortcut_a now points to old value of a not updated value found at shared.a
-
-# Style / Naming
 
+# Examples
 
 # Requests
-- add way to clear the .shared object
-- freindly warning if user tries to read/write shared itself
-	don't know how to print a warning for this, how can i know if something is reassigned?
-
-
-# Questions
-- Can I make more than one shared data?
-	- Yes.
-	- and it avoids conflicts
-
-- What can be shared?
-	- Basic data like strings and numbers
-	- Arrays and Data Objects
-	- Nesting is okay
-	- Constructed Objects don't work, but sometimes you can "serialize" them
-	```
-	shared.color = color(random(255), random(255), random(255)).toString();
-	...
-	fill(shared.color);
-	```
+- add a way to clear all the shared records in a room
 
+# Branch - Push Improvements
 
-# Features
-
-- config auto publish or not on records
-- config record publish debounce
-
-# Bugs
-
-- change hooks: npm install is running prepublish, and prepublish doesn't work on pc
+- config auto push or not on records
+- config record push debounce
 
 # Branch - Participants
 
@@ -125,12 +49,18 @@
 
 # Branch - Info
 - using vue?
-
 - debug view?
-
 - room view?
 	- show room records
 	- show room participants
-
 - dashboard view?
 	- show apps, rooms, records, participants
+
+# Branch - Deep Update
+- check this out, in order to make record support sharing any property of the record (not just .shared)
+	-- Doesn't work because of the `shortcut reference` problem
+	- 1) watch the whole record instead of shared
+	- 2) return the part of the whole record you want to expose, or that is requested
+	- 3) done!
+- ?Do a deep nested update of .shared (or whole record) so that shortcut references will still work?
+	-- would solve the `shortcut reference` problem

package.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.party",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "Justin Bakse",
   "license": "MIT",
   "description": "Pre-release! An easy to use library for simple multi-user sketches with p5.js.",

public/.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
     partyLoadShared: "readonly",
     partyConnect: "readonly",
     partyIsHost: "readonly",
+    partySetShared: "readonly",
     select: "readonly",
     selectAll: "readonly",
     removeElements: "readonly",

public/examples/hosting/index.js

@@ -8,9 +8,11 @@ function preload() {
 function setup() {
   createCanvas(400, 400);
   noStroke();
-  // set defaults on shared data
-  shared.clicks = shared.clicks || [];
-  shared.startTime = shared.startTime || new Date();
+  // use partyIsHost in setup to see if you are the first one in the room
+  if (partyIsHost()) {
+    shared.clicks = [];
+    shared.startTime = new Date();
+  }
   console.log("start as host?", partyIsHost());
 }
 

public/examples/set_shared/README.md

@@ -0,0 +1,8 @@
+# set_shared
+
+This example demonstrates the use of `partySetShared()`.
+
+- **click** to move the dot
+- **press a key** to center the dot
+
+> Open this example in two browser windows at once!

public/examples/set_shared/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>

public/examples/set_shared/index.js

@@ -0,0 +1,33 @@
+let shared;
+function preload() {
+  partyConnect("wss://deepstream-server-1.herokuapp.com", "test", "main");
+  shared = partyLoadShared("shared");
+}
+
+function setup() {
+  createCanvas(400, 400);
+  noStroke();
+
+  // remove all properties from shared
+  partySetShared(shared, {});
+}
+
+function mousePressed(e) {
+  // write x and y to shared data all at once
+  partySetShared(shared, { x: mouseX, y: mouseY });
+}
+
+function keyPressed() {
+  partySetShared(shared, { x: width * 0.5, y: height * 0.5 });
+}
+
+function draw() {
+  // check if shared has a property called x
+  if (typeof shared.x === "undefined") {
+    background("#ffcccc");
+  } else {
+    background("#ccffcc");
+    fill("#000066");
+    ellipse(shared.x, shared.y, 100, 100);
+  }
+}

src/Client.js

@@ -10,6 +10,7 @@ export class Client {
   #isReady;
   #emitter;
   #deepstreamClient;
+  #clients = [];
 
   constructor(host) {
     this.#host = host;
@@ -21,6 +22,13 @@ export class Client {
     this.#deepstreamClient.on("connectionStateChanged", (connectionState) =>
       log.debug("connectionStateChanged", connectionState)
     );
+    this.#deepstreamClient.presence.getAll((error, clients) => {
+      this.#clients = clients;
+    });
+    this.#deepstreamClient.presence.subscribe(async (username, isLoggedIn) => {
+      this.#clients = await this.#deepstreamClient.presence.getAll();
+    });
+
     this.#isReady = false;
     this.#emitter = createEmitter();
     this.#deepstreamClient.login({ username: this.#name }, () => {
@@ -48,13 +56,16 @@ export class Client {
     return this.#deepstreamClient.record.getRecord(name);
   }
 
-  async getAllClients() {
-    // @todo getAllClients() will get network heavy if a lot of people
-    // were on at once. we could request getAll once and then update our own
-    // list with a subscription
-    // or a little slower, but more reliable maybe, subscribe to changes and refetch all then
-    const clients = await this.#deepstreamClient.presence.getAll();
-    clients.push(this.#name);
+  getList(name) {
+    if (!this.#isReady) {
+      log.error("Client.getList() called before client ready.");
+    }
+    return this.#deepstreamClient.record.getList(name);
+  }
+
+  getAllClients() {
+    const clients = [...this.#clients];
+    if (!clients.includes(this.#name)) clients.push(this.#name);
     return clients;
   }
 

src/Record.js

@@ -2,16 +2,16 @@ import * as log from "./log";
 import * as onChange from "on-change";
 import { createEmitter } from "./emitter";
 
-const customMergeStrategy = (
-  localValue,
-  localVersion,
-  remoteValue,
-  remoteVersion,
-  callback
-) => {
-  log.warn("Merge");
-  callback(null, remoteValue);
-};
+// const customMergeStrategy = (
+//   localValue,
+//   localVersion,
+//   remoteValue,
+//   remoteVersion,
+//   callback
+// ) => {
+//   log.warn("Merge");
+//   callback(null, remoteValue);
+// };
 export class Record {
   #client;
   #name;
@@ -29,6 +29,7 @@ export class Record {
       this.#shared,
       this._onClientChangedData.bind(this)
     );
+    this.#shared[Symbol.for("Record")] = this;
     this.#emitter = createEmitter();
     this.#isReady = false;
     this._connect();
@@ -70,8 +71,10 @@ export class Record {
   _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
+
     this.#record.set("shared." + path, newValue);
   }
+
   _onServerChangedData(data) {
     // replace the CONTENTS of this.#shared
     // don't replace #shared itself as #watchedShared has a reference to it
@@ -94,4 +97,12 @@ export class Record {
   getShared() {
     return this.#watchedShared;
   }
+
+  setShared(data) {
+    this.#record.set("shared", data);
+  }
+
+  static recordForShared(shared) {
+    return onChange.target(shared)[Symbol.for("Record")];
+  }
 }