collision-events.html

<m-cube y="1" color="red" id="collision-cube" collision-interval="100">
  <m-cube y="1" z="-1" collision-interval="100"></m-cube>
</m-cube>
<m-cube y="0.8" ry="0" height="0.1" width="6" depth="6" color="orange" id="collision-ground" collision-interval="100">
  <m-attr-anim attr="ry" start="0" end="360" duration="30000"></m-attr-anim>
  <m-image id="canvas-view" rx="90" y="0.5" collide="false" width="6" height="6"></m-image>
  <m-label id="standing-label" content="Standing: 0" rx="-90" z="2" y="0.08" width="3" font-size="40"></m-label>
</m-cube>

<m-group id="stairs" ry="180" x="-5.5" z="3"></m-group>

<script>
  const stairs = document.getElementById("stairs");

  function getHexForCurrentTime(lightness) {
    const hue = ((Date.now() % 2000)/2000) * 360;
    const saturation = 1.0;
    const alpha = saturation * Math.min(lightness, 1 - lightness);
    const getF = number => {
      const k = (number + hue / 30) % 12;
      return lightness - alpha * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)))
    };
    const red = Math.round(255 * getF(0));
    const green = Math.round(255 * getF(8));
    const blue = Math.round(255 * getF(4));
    const hex = "#"+(red.toString(16).padStart(2, "0"))+(green.toString(16).padStart(2, "0"))+(blue.toString(16).padStart(2, "0"));
    return hex;
  }

  for (let i = 0; i < 15; i++) {
    const stair = document.createElement("m-cube");
    stair.setAttribute("z", i * 0.5);
    stair.setAttribute("y", i * 0.2);
    stair.setAttribute("width", 2);
    stair.setAttribute("height", 0.2);
    stair.setAttribute("depth", 0.5);
    stair.setAttribute("color", "blue");
    stair.setAttribute("collision-interval","1000");
    stair.addEventListener("collisionstart", () => {
      stair.setAttribute("color", "white");
    });
    stair.addEventListener("collisionend", () => {
      stair.setAttribute("color", getHexForCurrentTime(0.5));
    });
    stairs.append(stair);
  }

  const collisionCube = document.getElementById("collision-cube");
  let collidingCubeUsers = new Set();
  function updateCollidingCubeState() {
    if (collidingCubeUsers.size === 0) {
      collisionCube.setAttribute("color", "red");
    } else {
      collisionCube.setAttribute("color", "green");
    }
  }
  updateCollidingCubeState();
  collisionCube.addEventListener("collisionstart", (event) => {
    const { connectionId } = event.detail;
    collidingCubeUsers.add(connectionId);
    updateCollidingCubeState();
  });
  collisionCube.addEventListener("collisionend", (event) => {
    const { connectionId } = event.detail;
    collidingCubeUsers.delete(connectionId);
    updateCollidingCubeState();
  });
  window.addEventListener("disconnected", (event) => {
    const { connectionId } = event.detail;
    collidingCubeUsers.delete(connectionId);
    updateCollidingCubeState();
  });

  const collisionGround = document.getElementById("collision-ground");
  const standingLabel = document.getElementById("standing-label");
  const connectedUsers = new Map();
  function updateCollidingGroundState() {
    if (connectedUsers.size === 0) {
      collisionGround.setAttribute("color", "orange");
    } else {
      const floorColor = `#${Math.floor(0x444466 + Math.min(6, connectedUsers.size) * 0x000019).toString(16)}`;
      collisionGround.setAttribute("color", floorColor);
    }
    standingLabel.setAttribute("content", `Standing: ${connectedUsers.size}`);
  }
  collisionGround.addEventListener("collisionstart", (event) => {
    const { connectionId } = event.detail;
    getOrCreateUser(connectionId, event.detail.position, event.detail.rotation);
    drawState();
    updateCollidingGroundState();
  });
  collisionGround.addEventListener("collisionmove", (event) => {
    const { connectionId } = event.detail;
    getOrCreateUser(connectionId, event.detail.position, event.detail.rotation);
    drawState();
    updateCollidingGroundState();
  });
  collisionGround.addEventListener("collisionend", (event) => {
    const { connectionId } = event.detail;
    clearUser(connectionId);
    drawState();
    updateCollidingGroundState();
  });
  window.addEventListener("disconnected", (event) => {
    const { connectionId } = event.detail;
    clearUser(connectionId);
    drawState();
    updateCollidingGroundState();
  });

  function getOrCreateUser(connectionId, position, rotation) {
    const user = connectedUsers.get(connectionId);
    if (user) {
      user.position = position;
      user.rotation = rotation;
      return user;
    }
    const newUser = {
      position,
      rotation,
    };
    connectedUsers.set(connectionId, newUser);
    return newUser;
  }

  function clearUser(connectionId) {
    const user = connectedUsers.get(connectionId);
    if (!user) return;
    connectedUsers.delete(connectionId);
  }

  window.addEventListener("disconnected", (event) => {
    const { connectionId } = event.detail;
    clearUser(connectionId);
    drawState();
  });

  const canvasView = document.getElementById("canvas-view");
  const canvas = document.createElement("canvas");
  const width = 256;
  const height = width;
  const halfWidth = width / 2;
  const halfHeight = height / 2;
  const pointDrawSize = 64;
  const halfPointDrawSize = pointDrawSize / 2;
  canvas.width = width;
  canvas.height = height;
  const scale = width/parseFloat(canvasView.getAttribute("width"));
  const ctx = canvas.getContext("2d");
  function drawState() {
    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
    ctx.fillRect(0, 0, halfWidth, halfHeight);
    ctx.fillStyle = "orange";
    ctx.fillRect(halfWidth, halfHeight, halfWidth, halfHeight);
    ctx.fillStyle = "green";
    for (const [connectionId, user] of connectedUsers) {
      ctx.fillRect(halfWidth + user.position.x * scale - halfPointDrawSize, halfHeight - user.position.z * scale - halfPointDrawSize, pointDrawSize, pointDrawSize);
    }
    ctx.strokeRect(0, 0, width, height);
    const dataUri = canvas.toDataURL("image/png");
    canvasView.setAttribute("src", dataUri);
  }
  drawState();
</script>