drag_fix_3

Some little squres to drag around.

Try this example in two browser windows at once!

drag_conflict has a write conflict bug in it.

This example fixes that bug by making sure only one guest (the host) writes to the shared object containing the squares' data. When a client wants to make a change it sends a message to the host, which then writes to the object.

Because only one the host writes to the shared object, there is no chance of a write conflict. But the extra network round trip adds a little latency.

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_2");
  shared = partyLoadShared("shared");
};

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

  if (partyIsHost()) {
    shared.sprites = [];
    shared.sprites.push(initSprite("a", new Rect(10, 10, 100, 100), "#ffff66"));
    shared.sprites.push(initSprite("b", new Rect(30, 30, 100, 100), "#ff66ff"));
    shared.sprites.push(initSprite("c", new Rect(50, 50, 100, 100), "#66ffff"));
  }

  partySubscribe("updateSprite", onUpdateSprite);
};

function onUpdateSprite({ id, updates }) {
  if (!partyIsHost()) return;
  const s = shared.sprites.find((s) => s.id === id);
  if (!s) return;
  for (const [k, v] of Object.entries(updates)) {
    s[k] = v;
  }
}

window.draw = () => {
  background("#cc6666");
  shared.sprites.forEach(stepSprite);
  shared.sprites.forEach(drawSprite);
};

window.mousePressed = () => {
  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(id, rect = new Rect(), color = "red") {
  const s = {};
  s.id = id;
  s.rect = rect;
  s.color = color;
  return s;
}

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 stepSprite(s) {
  if (s.inDrag && s.owner === my_id) {
    // create new rect
    const rect = new Rect(
      mouseX + s.dragOffset.x,
      mouseY + s.dragOffset.y,
      s.rect.w,
      s.rect.h,
    );

    // update
    partyEmit("updateSprite", {
      id: s.id,
      updates: { rect },
    });
  }
}

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);

    partyEmit("updateSprite", {
      id: s.id,
      updates: {
        inDrag: true,
        owner: my_id,
        dragOffset: new Point(s.rect.l - mouseX, s.rect.t - mouseY),
      },
    });
    return true;

    // move to top
    // in drag_conflict squares are moved to the top when dragging starts
    // this is not implemented here yet
  }
  return false;
}

function mouseReleasedSprite(s) {
  if (s.owner === my_id) {
    // s.inDrag = false;
    // s.owner = null;

    partyEmit("updateSprite", {
      id: s.id,
      updates: {
        inDrag: false,
        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>