select_room

This example shows one way to allow a user to select a room.

The user may enter a room name into the form element defined in the HTML. When the user submits the form the page is reloaded and the room name is sent as a query parameter in the URL.

The sketch checks to see if the query parameter is set. If it is, it sets the room to the value of the query parameter when it connects.

If the room is not specified, the sketch doesn't connect and displays a prompt to choose a room.

type a custom room name into the field
click "Join Room"
click to move the dot

Try this example in two browser windows at once!

index.js

// get the room name from the query string
const room = new URLSearchParams(location.search).get("room");
console.log("room:", room);

if (room) {
  document.getElementById("room").value = room;
}

let shared;

function preload() {
  if (room) {
    partyConnect("wss://demoserver.p5party.org", "select_room", room);
    shared = partyLoadShared("shared", { x: 0, y: 0 });
  }
}

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

function draw() {
  if (room) {
    background("#ffcccc");
    fill("#000066");
    ellipse(shared.x, shared.y, 100, 100);
  } else {
    background("#ffcccc");
    noStroke();
    fill("white");
    textAlign(CENTER);
    text("Choose a room", 200, 200);
  }
}

function mousePressed() {
  if (!room) return;

  shared.x = mouseX;
  shared.y = mouseY;
}

index.html

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <form action="">
      <input type="text" id="room" name="room" value="main" />
      <input type="submit" value="Join Room" />
    </form>

    <main></main>

    <div id="readme"></div>

    <h2>index.js</h2>
    <div id="source-javascript"></div>

    <h2>index.html</h2>
    <div id="source-html"></div>

    <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>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
    <link rel="stylesheet" href="/examples.css" />
    <script src="/examples.js" type="module"></script>
  </body>
</html>