role_keeper

This is now half baked!

RoleKeeper

RoleKeeper assigns roles to guests. It ensures that each specified role is given to one guest. If there are fewer guests than roles, the remaining roles are left unassigned. If there are more guests than roles, the extra guests are given the "unassigned" role.

Constructor Arguments

TurnKeeper

TurnKeeper manages a rotation of turns.

Constructor Arguments

index.js

import { RoleKeeper, TurnKeeper } from "./RoleKeeper.js";

let guests, me;

let turnKeeper;

window.preload = () => {
  partyConnect("wss://demoserver.p5party.org", "role_keeper");
  me = partyLoadMyShared();
  guests = partyLoadGuestShareds();

  new RoleKeeper(["player1", "player2"], "none");
  turnKeeper = new TurnKeeper(["player1", "player2"]);
};

window.setup = () => {
  createCanvas(400, 400);
};

window.draw = () => {
  background("#333");
  fill("#fff");
  text("Role Keeper", 10, 20);

  text("Connected Guests", 10, 60);
  let y = 80;
  for (const guest of guests) {
    text(guest.role_keeper.role, 10, y);
    if (guest === me) text("<- you", 100, y);
    if (turnKeeper.getCurrentTurn() === guest.role_keeper.role)
      text("<- turn", 200, y);
    y += 20;
  }

  text(`You are: ${me.role_keeper.role}`, 10, height - 60);
  text(`Current Turn: ${turnKeeper.getCurrentTurn()}`, 10, height - 40);
  if (turnKeeper.getCurrentTurn() === me.role_keeper.role)
    text("Its your turn. Click to end turn.", 10, height - 20);
};

window.mousePressed = () => {
  if (turnKeeper.getCurrentTurn() === me.role_keeper.role)
    turnKeeper.nextTurn();
};

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" type="module"></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>