This is now half baked!
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
roles
(Array of Strings/Numbers): Specifies the roles available for assignment. This array must contain at least one role.unassigned
(String/Number): Represents the default state for new or currently unassigned guests. This role is temporarily assigned until a specific role from the roles list can be allocated.TurnKeeper manages a rotation of turns.
Constructor Arguments
turns
(Array of Strings/Numbers): The names of turns to be managed. e.g. ["player1", "player2", "player3"] or ["red", "blue", "green", "yellow"]
getCurrentTurn()
: Returns the name of the current turn
nextTurn()
: Advances the turn to the next participant.
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();
};
<!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>