drag_fix_1

Some little squres to drag around.

drag to move a square

Try this example in two browser windows at once!

drag_conflict has a write conflict bug in it.

This example mostly fixes that bug by allowing only one square to be dragged at once. While one square is being dragged, the other squares are locked. So only one client can be dragging at any time.

However it is still possible for two guests to attempt to start dragging at nearly the exact same time, which will cause a write conflict.

index.js

import { Point, pointInRect, Rect } from "./shape.js";

const my_id = Math.random();

let shared;

window.preload = () => {
  partyConnect("wss://demoserver.p5party.org", "drag_fix_1");
  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
  // this requires players to take turns with dragging
  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;
}

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>