add drag2 example

jbakse · Jan 18, 2022 · 0025f3b · 0025f3b
1 parent a63feac
commit 0025f3b
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 0 deletions.
diff --git a/public/examples/drag2_m/README.md b/public/examples/drag2_m/README.md
@@ -0,0 +1,7 @@
+# drag
+
+Some little squres to drag around.
+
+- **drag** to move a square
+
+> Open this example in two browser windows at once!
diff --git a/public/examples/drag2_m/index.html b/public/examples/drag2_m/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <head>
+      <link rel="stylesheet" href="../sketch.css" />
+    </head>
+  </head>
+  <body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
+
+    <script src="/dist/p5.party.js"></script>
+
+    <script type="module" src="index.js"></script>
+  </body>
+</html>
diff --git a/public/examples/drag2_m/index.js b/public/examples/drag2_m/index.js
@@ -0,0 +1,93 @@
+import { Point, Rect, pointInRect } from "./shape.js";
+
+const my_id = Math.random();
+
+let shared;
+
+window.preload = () => {
+  partyConnect("wss://deepstream-server-1.herokuapp.com", "drag2", "main");
+  shared = partyLoadShared("shared");
+};
+
+window.setup = () => {
+  createCanvas(400, 400);
+  noStroke();
+
+  if (partyIsHost()) {
+    shared.sprites = [];
+    shared.sprites.push(initSprite(new Rect(10, 10, 100, 100), "#ffff66"));
+    shared.sprites.push(initSprite(new Rect(30, 30, 100, 100), "#ff66ff"));
+    shared.sprites.push(initSprite(new Rect(50, 50, 100, 100), "#66ffff"));
+  }
+};
+
+window.draw = () => {
+  background("#cc6666");
+  shared.sprites.forEach(stepSprite);
+  shared.sprites.forEach(drawSprite);
+};
+
+window.mousePressed = () => {
+  // abort if any sprites are already in drag
+  if (shared.sprites.find((s) => s.inDrag)) return;
+
+  for (const s of shared.sprites.slice().reverse()) {
+    if (mousePressedSprite(s)) break;
+  }
+};
+
+window.mouseReleased = () => {
+  for (const s of shared.sprites.slice().reverse()) {
+    if (mouseReleasedSprite(s)) break;
+  }
+};
+
+function initSprite(rect = new Rect(), color = "red") {
+  const s = {};
+  s.rect = rect;
+  s.color = color;
+  return s;
+}
+
+function stepSprite(s) {
+  if (s.inDrag && s.owner === my_id) {
+    s.rect.l = mouseX + s.dragOffset.x;
+    s.rect.t = mouseY + s.dragOffset.y;
+  }
+}
+
+function drawSprite(s) {
+  push();
+  fill(s.color);
+  noStroke();
+  if (s.inDrag) {
+    strokeWeight(3);
+    stroke("black");
+  }
+  rect(s.rect.l, s.rect.t, s.rect.w, s.rect.h);
+  pop();
+}
+
+function mousePressedSprite(s) {
+  if (!s.inDrag && pointInRect(new Point(mouseX, mouseY), s.rect)) {
+    // begin drag
+    s.inDrag = true;
+    s.owner = my_id;
+    s.dragOffset = new Point(s.rect.l - mouseX, s.rect.t - mouseY);
+
+    // move to top
+    const i = shared.sprites.indexOf(s);
+    shared.sprites.splice(i, 1);
+    shared.sprites.push(s);
+    return true;
+  }
+  return false;
+}
+
+function mouseReleasedSprite(s) {
+  if (s.owner === my_id) {
+    s.inDrag = false;
+    s.owner = null;
+  }
+  return false;
+}
diff --git a/public/examples/drag2_m/shape.js b/public/examples/drag2_m/shape.js
@@ -0,0 +1,19 @@
+export class Rect {
+  constructor(l = 0, t = 0, w = 0, h = 0) {
+    this.l = l;
+    this.t = t;
+    this.w = w;
+    this.h = h;
+  }
+}
+
+export class Point {
+  constructor(x = 0, y = 0) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+export function pointInRect(p, r) {
+  return p.x > r.l && p.x < r.l + r.w && p.y > r.t && p.y < r.t + r.h;
+}