🕹️ reformat examples, examples TOC

Squashed commit of the following:

commit 60992f9
Author: Justin Bakse <justin@tsfim.com>
Date:   Fri Apr 15 13:23:18 2022 -0500

    frogs

commit 06b1ec8
Author: Justin Bakse <justin@tsfim.com>
Date:   Fri Apr 15 13:22:47 2022 -0500

    update examples

commit 1af7343
Author: Justin Bakse <justin@tsfim.com>
Date:   Wed Mar 30 13:46:09 2022 -0500

    working on examples

commit 6281504
Author: Justin Bakse <justin@tsfim.com>
Date:   Fri Mar 25 14:30:42 2022 -0500

    update example index page

notes/todo.todo

@@ -4,18 +4,18 @@
 	+ - late loaded shared objects not created with up to date data
 		- they are fixed up when server data change come in
 		- should fully sync up on creation
-     
-- Tests 
+
+- Tests
 	- test more things
 
 - ?
     -	Show Cursors
         	A way to show participant cursors. probably just over the canvas, and using divs so it doesn't impact the actual canvas content. This can be done on the application level, but it might be worth putting into the library because it common + complexish
-        
+
 - Console
     -	Server Connect Message
         	Allow server to send a message to the console on connect.
-        
+
     -	how can we make `console.log(shared)` better
     		1. it doesn't look like anything can be done on the proxy to make logging it nicer.
         	2. could probably extend console.log, but i don't think that is a good idea
@@ -28,20 +28,20 @@
 	-    and send/receive lights
 	-- 	don't update hidden info panel
 	--   remove hidden info panel entirely?
-	---	look into using something like reef or https://preactjs.com/? 
+	---	look into using something like reef or https://preactjs.com/?
 
 - Records
 	-	records leak
 		when a client disconnects we need to drop their participant record
-	     the host (or new host) does this now but if the last client disconnects no one cleans up and there is nothing even keeping the name of the record, its leaked. 
+	     the host (or new host) does this now but if the last client disconnects no one cleans up and there is nothing even keeping the name of the record, its leaked.
 		maybe keep a list of all participant records (across all rooms) and have a cleanup function run somewhere as a garbage collector?
 
     -	Clear Room/App
         	Useful in normal, emergency, and dev situations. A way to clear all the records in a room or app
 		Having stale data stick around can be confusing reloading a js program usually restarts it from 0, but not when you have data hanging out on the back end.
 		it could be a common pattern to have `setup->if host->reset room->init room`
 		might even automatically reset the room if its empty (this would break persistent world apps, could be a flag on connect?)
-	
+
 	- 	type validation and errors
 		+ - factor out of the Record.js
 		+ - use "dedent"?
@@ -74,10 +74,10 @@
 		--	expose participant count?: can be gotten via participants.length, only if you are "subscribed" to participant shareds
 		--	expose participant ids, id list
 		--	expose own id
-	
+
 	-	Participant change event API
         	Something like onParticipantJoin(shared) + onParticipantLeave(shared)
-        
+
      -	Boot participants
         	Add way to remove connected clients from room/app. Maybe both remove and trigger reload/reconnect. Especially useful in development.
 
@@ -104,7 +104,7 @@
 	-	is it creating needless chatter that could be reduced by adding app/room prefix to emits under the hood?
 
 # Release Package
-	
+
 	-	provide min and unmin versions?
 		compare to other p5 libraries
 		https://stackoverflow.com/questions/25956937/how-to-build-minified-and-uncompressed-bundle-with-webpack
@@ -123,7 +123,7 @@
 	.--	Room recordList -> userRecordList?
 	.--	compare whenReady() implemenations in Room, Client, Record
 	+ --	should room.participants be room.participantIds
-	
+
 	--	Room remove properties?
 		- participantUids
 		- participantShareds
@@ -160,8 +160,8 @@
 		I wrote a custom merge function in Record, but maybe it would be better to use a library?
 		* [Lodash.merge](https://lodash.com/docs/#merge)
 		* [Lodash.mergeWidth](https://lodash.com/docs/#mergeWith)
-		these probably don't work, because they don't _remove_ properties 
-		mergeWidth might be flexible enough to customize behavior add debug reporting 
+		these probably don't work, because they don't _remove_ properties
+		mergeWidth might be flexible enough to customize behavior add debug reporting
 		might be good to just study their merge and compare to the current party implementation
 		might be worth also studying the merge function in deepstream to see how the approaches differ, if one is better
 		it might remove properties given its usecase

package.json

@@ -31,7 +31,7 @@
   },
   "scripts": {
     "prestart": "npm run gv",
-    "start": "webpack-dev-server --open --config webpack.dev.js",
+    "start": "webpack serve --open --config webpack.dev.js",
     "prebuild": "npm run gv",
     "build": "webpack --config webpack.prod.js",
     "watch": "webpack --watch --config webpack.dev.js",

public/.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+ overrides: [ {files: "*.html", printWidth: 120}]
+};

public/examples/!tic_tac_toe/README.md

@@ -0,0 +1,9 @@
+# tic tac toe
+
+This example shows a multiplayer tic-tac-toe game; users can choose a team and play in turn with others.
+
+- **pick** a team from the select menu
+- **click** to add a mark on your turn
+- **clear** the board
+
+> Open this example in two browser windows at once!

public/examples/exercise_sign_up/index.html → public/examples/!tic_tac_toe/index.html

@@ -1,19 +1,21 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
-      body {
-        padding: 0;
-        margin: 0;
+      canvas {
+        display: block;
+        user-select: none;
+      }
+      button {
+        margin: 1em;
       }
     </style>
   </head>
   <body>
     <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>
   </body>
 </html>

public/examples/!tic_tac_toe/index.js

@@ -0,0 +1,240 @@
+// Tic Tac Toe
+//
+// Multi-player Tic Tac Toe game created as an example for p5.party
+//
+// Written by Isabel Anguera
+
+let shared; // p5.party shared object
+let my; // p5.party shared record of user's own data
+let participants; // p5.party shared record of all participant's data
+
+const gridSize = 150;
+
+let blueTeamColor;
+let yellowTeamColor;
+
+function preload() {
+  partyConnect(
+    "wss://deepstream-server-1.herokuapp.com",
+    "tic_tac_toe",
+    "default"
+  );
+  shared = partyLoadShared("globals");
+  my = partyLoadMyShared();
+  participants = partyLoadParticipantShareds();
+}
+
+function setup() {
+  const boardExtension = 50;
+  createCanvas(10 + gridSize * 3, gridSize * 3 + boardExtension);
+
+  blueTeamColor = color(60, 98, 181);
+  yellowTeamColor = color(255, 220, 82);
+
+  // Init shared
+  // boardState describes what is each cell of the board
+  // 0 - empty, 1 - blue token, 2 - yellow token
+  shared.boardState = shared.boardState || [0, 0, 0, 0, 0, 0, 0, 0, 0];
+  shared.currentTurn = shared.currentTurn || "Blue";
+
+  // Make a select menu
+  const teamDropDownMenu = createSelect();
+  teamDropDownMenu.option("Choose a Team");
+  teamDropDownMenu.disable("Choose a Team");
+  teamDropDownMenu.option("Blue");
+  teamDropDownMenu.option("Yellow");
+  teamDropDownMenu.option("Observer");
+
+  // When an option is chosen, assign it to my.selectedTeam
+  teamDropDownMenu.changed(() => {
+    my.selectedTeam = teamDropDownMenu.value();
+  });
+
+  // Make the clear button
+  createButton("clear").mousePressed(() => {
+    if (my.selectedTeam !== "Observer") {
+      partySetShared(shared, {
+        boardState: [0, 0, 0, 0, 0, 0, 0, 0, 0],
+        currentTurn: "Blue",
+      });
+    }
+  });
+}
+
+function draw() {
+  background("red");
+  noStroke();
+
+  // Draw board
+  push();
+  fill("white");
+  stroke("red");
+  strokeWeight(10);
+  for (let i = 0; i < 3; i++) {
+    for (let j = 0; j < 3; j++) {
+      rect(5 + i * gridSize, 5 + j * gridSize, gridSize, gridSize);
+    }
+  }
+  pop();
+
+  // Draw tokens
+  push();
+  for (let i = 0; i < 9; i++) {
+    const grid_col = i % 3;
+    const grid_row = Math.floor(i / 3);
+
+    if (shared.boardState[i] === 0) continue;
+    if (shared.boardState[i] === 1) fill(blueTeamColor);
+    if (shared.boardState[i] === 2) fill(yellowTeamColor);
+
+    ellipse(
+      grid_col * gridSize + 0.5 * gridSize,
+      grid_row * gridSize + 0.5 * gridSize,
+      gridSize / 3,
+      gridSize / 3
+    );
+  }
+  pop();
+
+  // Display current turn
+  if (shared.currentTurn !== "nobody") {
+    push();
+    fill("white");
+    textSize(22);
+    textFont("Gill Sans");
+    text(shared.currentTurn + " team's turn!", 12, 482);
+
+    // Display num players on each team
+    textSize(16);
+
+    const blueTeamCount = participants.filter(
+      (participant) => participant.selectedTeam === "Blue"
+    ).length;
+
+    const yellowTeamCount = participants.filter(
+      (participant) => participant.selectedTeam === "Yellow"
+    ).length;
+
+    text(
+      `Players on Blue: ${blueTeamCount}, Yellow ${yellowTeamCount}`,
+      260,
+      482
+    );
+    pop();
+  }
+
+  showOutcome();
+}
+
+function mousePressed() {
+  if (mouseX < 0 || mouseX > width || mouseY < 0 || mouseY > height) return;
+  if (my.selectedTeam !== shared.currentTurn) return;
+
+  const col = Math.floor(mouseX / gridSize);
+  const row = Math.floor(mouseY / gridSize);
+  const index = row * 3 + col;
+
+  // return if cell already marked
+  if (shared.boardState[index] > 0) return;
+
+  shared.boardState[index] = my.selectedTeam === "Blue" ? 1 : 2;
+
+  if (shared.currentTurn === "Blue") {
+    shared.currentTurn = "Yellow";
+  } else {
+    shared.currentTurn = "Blue";
+  }
+}
+
+function checkCombo(a, b, c) {
+  return (
+    shared.boardState[a] > 0 &&
+    shared.boardState[a] === shared.boardState[b] &&
+    shared.boardState[b] === shared.boardState[c]
+  );
+}
+
+function showOutcome() {
+  push();
+  stroke(30);
+  strokeWeight(10);
+
+  let winner = false;
+
+  // top row
+  if (checkCombo(0, 1, 2)) {
+    winner = shared.boardState[0] === 1 ? "Blue" : "Yellow";
+    line(40, 75, 410, 75);
+  }
+
+  // middle row
+  if (checkCombo(3, 4, 5)) {
+    winner = shared.boardState[3] === 1 ? "Blue" : "Yellow";
+    line(40, 225, 410, 225);
+  }
+
+  // bottom row
+  if (checkCombo(6, 7, 8)) {
+    winner = shared.boardState[6] === 1 ? "Blue" : "Yellow";
+    line(40, 375, 410, 375);
+  }
+
+  // left column
+  if (checkCombo(0, 3, 6)) {
+    winner = shared.boardState[0] === 1 ? "Blue" : "Yellow";
+    line(75, 40, 75, 410);
+  }
+
+  // middle column
+  if (checkCombo(1, 4, 7)) {
+    winner = shared.boardState[1] === 1 ? "Blue" : "Yellow";
+    line(225, 40, 225, 410);
+  }
+
+  // right column
+  if (checkCombo(2, 5, 8)) {
+    winner = shared.boardState[2] === 1 ? "Blue" : "Yellow";
+    line(375, 40, 375, 410);
+  }
+
+  // diagonal \
+  if (checkCombo(0, 4, 8)) {
+    winner = shared.boardState[0] === 1 ? "Blue" : "Yellow";
+    line(40, 40, 410, 410);
+  }
+
+  // diagonal /
+  if (checkCombo(2, 4, 6)) {
+    winner = shared.boardState[2] === 1 ? "Blue" : "Yellow";
+    line(40, 410, 410, 40);
+  }
+
+  // show "draw" message
+  if (!winner && shared.boardState.every((cellState) => cellState > 0)) {
+    shared.currentTurn = "nobody";
+
+    push();
+    fill("white");
+    noStroke();
+    textSize(22);
+    textFont("Gill Sans");
+    text("Tie Game!", 182, 482);
+    pop();
+  }
+
+  // show winer message
+  if (winner) {
+    shared.currentTurn = "nobody";
+
+    push();
+    fill("white");
+    noStroke();
+    textSize(22);
+    textFont("Gill Sans");
+    textAlign(CENTER);
+    text(`${winner} Team Wins!`, width * 0.5, 482);
+    pop();
+  }
+
+  pop();
+}