idle_clicker

This example uses partyLoadGuestShareds() to show everyone's score.

click to increase your score and show off

Try this example in two browser windows at once!

index.js

let me, guests;

function preload() {
  partyConnect("wss://demoserver.p5party.org", "idle_clicker");
  guests = partyLoadGuestShareds();
  me = partyLoadMyShared({ score: 0, name: pick(names) });
}

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

function draw() {
  background(220);
  textSize(28);
  let total = 0;
  for (let i = 0; i < guests.length; i++) {
    text(guests[i].name + " " + guests[i].score, 10, i * 32 + 96);
    total += guests[i].score;
  }
  text("Total " + total, 10, 32);
}

function mouseClicked() {
  me.score++;
}

function pick(array) {
  return array[Math.floor(Math.random() * array.length)];
}

const names = [
  "Cookie",
  "Potato",
  "Lemon",
  "Plant",
  "Candy",
  "Cow",
  "Capitalist",
  "Hero",
  "Paperclip",
  "Forage",
  "Trimp",
  "Room",
];

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>