Is Host

This example is similar to the click_history example, but clears the history automatically every 10 seconds. It uses partyIsHost() to designate one client to do the clearing.

click to add to the click history

Try this example in two browser windows at once!

index.js

let shared;

function preload() {
  partyConnect("wss://demoserver.p5party.org", "is_host");
  shared = partyLoadShared("globals", {
    clicks: [],
    startTime: Date.now(),
  });
}

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

function draw() {
  background("#006666");
  noStroke();

  // reset the history every 10 seconds
  // we don't want every participant doing this
  // so we can ask the host to handle it
  if (partyIsHost()) {
    const elapsed = Date.now() - shared.startTime;
    if (elapsed > 10000) {
      partySetShared(shared, {
        startTime: Date.now(),
        clicks: [],
      });
    }

    // out put some debugging info
    fill(255);
    textSize(24);
    textFont("Courier New");
    text("Hosting!", 10, 40);
    text(elapsed / 1000, 10, 80);
  }

  fill("#ffff00");
  for (const p of shared.clicks) {
    ellipse(p.x, p.y, 20, 20);
  }
}

function mousePressed(e) {
  // write shared data
  shared.clicks.push({ x: mouseX, y: mouseY });
}

index.html

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <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>