jbakse/p5.party

p5.party is a library for easily creating online multi-user sketches with p5.js. With p5.party you can quickly prototype ideas for multiplayer games, real-time multi-user apps, and multi-computer art projects.

p5.party's Issues

Better Docs and Example for "Rooms"

It would be helpful to have an docs and an example focused on rooms.

• explain how/when to use rooms
• show how to let players choose a room to join.

Current docs on rooms are here:
https://www.notion.so/Apps-and-Rooms-fd7e160a11cc4159924de254d021abea

Change how partyLoadShared() init data works

Describe the solution you'd like
Init data should reset data when first client connects to empty room.

Currently it only initializes if shared object is brand new, which isn't useful in iterative prototyping.

An asynchrony on reading shared object between sender client and receiver clients when using partyEmit().

I'm not sure if it's really a bug or it's just supposed to work like that, but I decide to post it here.

(Please review my code at the bottom)
In my test code, when a player click the mouse, it will add 1 to the shared object named shared.count, and send out a "showChange" event to other clients simultaneously using partyEmit("showChange"). "showChange" event will trigger a showChange() function in every client, and showChange() function will print the value of shared.count in the console.

Expected behavior
showChange() function is expected to print the changed value of shared.count. That is to say, if the initial value of shared.count is 1, when I click the mouse, I'm supposed to have a 2 in the console.

An expected process would be:

1. initially, shared.count is 1;
2. I click the mouse;
3. shared.count changes from 1 to 2;
4. a "showChange" event is sent to the party;
5. every client receives "showChange" event;
6. every client has shared.count(should be 2 now) printed in their consoles.

Observed behavior
On the sender client(the client that sent "showChange" event), the above process happened expectedly. I got 2 in the console finally.

However, on the receiver client(other clients that received "showChange" event), there was 1 in the console instead of 2 in step 6. That means the receiver client didn't read the changed value of shared.count but read the previous value.

If the receiver client read shared.count after the execution of showChange(), it can have the right changed value that is 2. So the asynchrony only happens for an instant after partyEmit().

p5.js and p5.party versions
I think it's the latest version as the source is https://cdn.jsdelivr.net/npm/p5.party@latest/dist/p5.party.js

Error Message
No, there isn't an error. The program can still run.

Your code
Here is my test code in p5 editor.

var shared;

function preload() {
  partyConnect(
    "wss://deepstream-server-1.herokuapp.com",
    "async_example",
    "room_0"
  );
  
  shared = partyLoadShared("shared");
}

function setup() {
  createCanvas(300, 300);
  background(0);
  
  if(partyIsHost()) shared.count = 1; // initial value is 1
  
  partySubscribe("showChange", showChange);
}

function showChange() {
  console.log("init: " + shared.count); // sender gets the changed value, while receiver gets the previous value
  let countdown = setInterval(function() {
    console.log(shared.count);
  }, 10); // if trying to get shared.count an instant later, both sender and receiver can have the changed value 
  setTimeout(function() {
    clearInterval(countdown);
  }, 100);
}

// when clicking the mouse, add 1 to shared.count and tell party to run showChange() to see the changed number in console
function mouseClicked() {
  let x = mouseX, y = mouseY;
  if(x < width && y < height) {
// change of shared.count and sending of 'showChange' event happen together here
    shared.count ++;
    partyEmit("showChange");
    
// This is my current solution - delay the execution of partyEmit(), and it works expectedly; but it looks weird
    // setTimeout(function() {
    //   partyEmit("showChange");
    // }, 50);
  }
}

partySetShared not setting empty array correctly

Using partySetShared() to initialize a shared object in setup doesn't appear to be working correctly. At least not with array properties.

Expected behavior
a property initialized to [] should be an empty array

Observed behavior
setting a property to [] doesn't clear the existing contents of the array properly

p5.js and p5.party versions
p5.js 1.4.0
p5.party 0.6.1

function setup() {
  if (partyIsHost()) {
      partySetShared(shared, {
        locations: [],
      });
      console.log("init");
      console.log(JSON.stringify(shared.locations));  // should be empty, sometimes has a point already!
      shared.locations.push({ x: random(width), y: random(height) });
      shared.locations.push({ x: random(width), y: random(height) });
      console.log(JSON.stringify(shared.locations)); // should be two, sometimes three!
    }
  }
}

Hide "p5.party debug" panel.

Is your feature request related to a problem? Please describe.
The p5.party debug panel is always on for everyone. It is distracting.

Describe the solution you'd like
There should be a way to turn it on/off with code.

Describe alternatives you've considered
I could maybe hide it with CSS, but that seems hacky.

Add Doc Page about OOP Objects

OOP objects can't be shared with p5.party, the functions get stripped out. Add documentation explaining this, and addressing how to use OOP and shared data together.

select_room example should keep the room name in the input field

This feature request is related to the "Is it possible to create multiple rooms through the use of entry keys?" discussion thread:

What currently happens:
The experimental example, select_room, is currently refreshing the HTML input field back to "main" once the user clicks in the "Join Room" button.

What should happen:
After typing the custom room name into the HTML input field and clicking "Join Room", the typed name should remain exposed in the input field, so the users can remember/share their key to friends.

Free Heroku plans are no more

FYI: Starting November 28th, 2022, free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis® will no longer be available.
If you have apps using any of these resources, you must upgrade to paid plans by this date to ensure your apps continue to run and to retain your data. For students, we will announce a new program by the end of September. Learn more

Stale Example Links in Docs

Several of the links to examples from the Notion docs were broken, and new examples are linked from relevant pages.

We need to go through and update the links.

partyGuestCount() could be an awesome function!

Is your feature request related to a problem? Please describe.
Not an unsolvable problem, but a quality of life one. Currently the only way to see the amount of guests online is by having them each create their own shared object, and then checking the length of that array.

Describe the solution you'd like
An easier way of accessing this, built into the library.

Describe alternatives you've considered
A function returning an int partyGuestCount().

Additional context
It's not a huge deal! Could just make a few things easier given that I find myself often wanting to use this function.

Ability to lock rooms after a number of players have entered

I think having this ability would be useful when p5.party is stable and there are many more people using it. An alternative is having players become participants after a certain number of players but maybe just having so many people in one room could cause lag. Another alternative would be to make multiple rooms for people to join but again it would be good to limit the number of players in each room. This request comes from the lag from having so many people trying out game b at once.

ToggleInfo Button not showing up

Describe the bug
I added the code to create a toggle info button for my rocket game. It was working at first but I had to close p5 because I was having an issue with the editor. When I reopened my sketch the button no longer shows up even though I have the code in setup().

p5.js and p5.party versions
p5.js - not sure
p5.party - 0.7.0

if(partyIsHost()){
partyToggleInfo(false);
createButton("Toggle Info").mousePressed(()=> {
partyToggleInfo();
});
}

Screenshots
If applicable, add screenshots to help explain your problem.

As you can see the toggle info button is missing. It was there earlier.

partyIsHost() returning false in setup() for first connecting client

Describe the bug
partyIsHost() returning false in setup() for first connecting client

Observed behavior
partyIsHost() returning false in setup() for first connecting client

Expected behavior
partyIsHost() should return true since no other clients are connected to that room

p5.js and p5.party versions
p5.js 1.4.2
p5.party 0.9.1

Error Message
NA

Your code

// require https://cdn.jsdelivr.net/npm/p5@latest/lib/p5.min.js
// require https://cdn.jsdelivr.net/npm/p5.party@latest/dist/p5.party.js

/* exported setup draw preload mousePressed */
/* global partyConnect partyLoadShared partyIsHost*/

let shared;

function preload() {
  // connect to the party server
  partyConnect(
    "wss://deepstream-server-1.herokuapp.com",
    "jb_party_demo_9_13",
    "main1"
  );

  shared = partyLoadShared("shared");
}

function setup() {
  createCanvas(400, 400);

  console.log("partyIsHost()", partyIsHost());

  if (partyIsHost()) {
    console.log("i'm host, init the grid");
    shared.grid = [];

    for (let col = 0; col < 10; col++) {
      shared.grid[col] = [
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
        false,
      ];
    }
  }
}

function mousePressed() {
  // figure out what row + col are being clicked
  let col = floor(mouseX / 40);
  let row = floor(mouseY / 40);
  col = constrain(col, 0, 9);
  row = constrain(row, 0, 9);

  shared.grid[col][row] = !shared.grid[col][row];
}

function draw() {
  background("black");
  fill("red");
  noStroke();

  for (let row = 0; row < 10; row++) {
    for (let col = 0; col < 10; col++) {
      const x = col * 40 + 1;
      const y = row * 40 + 1;
      //   console.log(col, row);
      if (shared.grid[col][row]) {
        rect(x, y, 40 - 2, 40 - 2);
      }
    }
  }
}

Screenshots
NA

Add function to return active participant ids and roles in a room

Currently, p5.party displays active participant ids and their roles in the info panel.

We could use partyLoadParticipantShareds() or implement a new function to return these information.

These information would make it easier to develop game experiences that depend on active
players. Game developers would know if a player joined or left a room, and update game status accordingly.