path: root/public/js/components/chess.js

/* global AFRAME, THREE, NAF */
// A chess board and its pieces on a table. Nothing knows the rules: pick a
// piece up and, while it's over the board, the square under it lights up (red
// if a piece is already there); let go and it stands in the middle of that
// square, and a piece that was there goes off to the side of the board. Let go
// anywhere else and it drops onto the table, or the floor. In VR, squeeze grip
// next to a piece (the one you'd get glows). On desktop, F picks up the piece
// you're looking at; it hovers over wherever you look, and F again puts it there. resetChess() (the
// world's action, or the buttons on the table in VR) sets the board up again.
// In a shared room everyone sees the same board, newcomers included.
//
// The entity sits on the middle of the tabletop. White is at +z, so someone
// who arrives facing -z sits down to play white.
(function () {
  const SQUARE = 0.055;
  const HALF = SQUARE * 4;    // half the playing area
  const BORDER = 0.022;
  const EDGE = HALF + BORDER; // half the whole board
  const THICK = 0.016;        // the squares are on top
  const SCALE = 0.12;         // the models' king is 0.89 tall
  const SLOT = 0.045;         // spacing of taken pieces beside the board
  const GRAB_REACH = 0.06;    // hand to a piece's middle line
  const LOOK_REACH = 2.2;     // desktop: head to piece
  const LOOK_AIM = 0.03;      // desktop: how far off your line of sight
  const BUTTON_REACH = 0.1;   // hand to a reset button
  const TOUCH_REACH = 0.2;    // wield.js's reach for touchables
  const ARMED_MS = 3000;      // VR: how long the second trigger pull has to reset
  const POSE_MS = 66;         // how often a held piece's pose is sent
  const SMOOTH = 0.05;        // seconds to ease toward someone else's pose
  const GRAVITY = 9.8;
  const MODEL_DIR = 'assets/chess/';
  const SOUNDS = ['chess-1', 'chess-2', 'chess-3'];
  const SOUND_DIR = 'assets/sounds/';

  const BACK_RANK = ['rook', 'knight', 'bishop', 'queen', 'king', 'bishop', 'knight', 'rook'];
  const HEIGHT = { pawn: 0.6, rook: 0.7, knight: 0.72, bishop: 0.75, queen: 0.78, king: 0.89 };
  const COLOR = { white: '#efe4cc', black: '#2e2622' };
  // On desktop a held piece hovers this high over where you look, or else
  // floats low in front of you.
  const DESK_HOVER = 0.05;
  const DESK_AHEAD = 0.32;
  const DESK_DROP = 0.2;

  const Y = new THREE.Vector3(0, 1, 0);
  const v1 = new THREE.Vector3();
  const v2 = new THREE.Vector3();
  const v3 = new THREE.Vector3();
  const q1 = new THREE.Quaternion();
  const m1 = new THREE.Matrix4();
  const euler = new THREE.Euler(0, 0, 0, 'YXZ');

  const online = () => typeof NAF !== 'undefined' && NAF.connection && NAF.connection.isConnected();
  const finite = (a, n) => Array.isArray(a) && a.length === n && a.every((x) => Number.isFinite(x) && Math.abs(x) < 1000);
  const round = (x) => Math.round(x * 1e4) / 1e4;
  const clamp = (x, lo, hi) => Math.min(hi, Math.max(lo, x));

  // Where a piece can be: on a square, beside the board having been taken, or
  // anywhere else ("loose"), all in the board's own coordinates.
  function validAt(at) {
    if (!at || typeof at !== 'object') return null;
    if (Number.isInteger(at.sq) && at.sq >= 0 && at.sq < 64) return { sq: at.sq };
    if (Number.isInteger(at.slot) && at.slot >= 0 && at.slot < 16) return { slot: at.slot };
    if (finite(at.p, 3) && Number.isFinite(at.yaw)) return { p: at.p.slice(), yaw: at.yaw };
    return null;
  }

  function buzz(handEl, strength, ms) {
    try {
      const tracked = handEl.components['tracked-controls'];
      const pad = tracked && tracked.controller && tracked.controller.gamepad;
      const motor = pad && pad.hapticActuators && pad.hapticActuators[0];
      if (motor && motor.pulse) Promise.resolve(motor.pulse(strength, ms)).catch(() => {});
    } catch (e) {
      // No haptics on this controller.
    }
  }

  // Distance from the ray (origin o, unit direction d) to point p, and how far along it.
  function offRay(o, d, p) {
    v3.subVectors(p, o);
    const along = v3.dot(d);
    return [v3.addScaledVector(d, -along).length(), along];
  }

  AFRAME.registerComponent('chess', {
    schema: {
      table: { default: 0.4 },    // half the tabletop's width
      height: { default: 0.75 },  // the tabletop above the floor
      head: { type: 'selector', default: '#player' },
      leftHand: { type: 'selector', default: '#left-hand' },
      rightHand: { type: 'selector', default: '#right-hand' },
      rig: { type: 'selector', default: '#rig' },
    },

    init() {
      this.group = new THREE.Group();
      this.el.setObject3D('mesh', this.group);
      this.epoch = 0;           // goes up each time the board is set up again
      this.pieces = [];
      this.lastPose = 0;
      this.armedAt = -Infinity;
      this.buildBoard();
      this.buildButtons();
      this.loadPieces();
      this.loadSounds();

      const hand = (el, vr) => ({ el, vr, piece: null, near: null });
      this.hands = [hand(this.data.leftHand, true), hand(this.data.rightHand, true)];
      this.desk = hand(this.data.head, false);

      this.listeners = [];
      const on = (target, type, fn, opts) => {
        target.addEventListener(type, fn, opts);
        this.listeners.push([target, type, fn, opts]);
      };
      // The world is added after the rig, so wield.js hears grip first and a
      // pen it picks up wins; screens.js waits for both of us.
      for (const h of this.hands) {
        on(h.el, 'gripdown', () => this.gripDown(h));
        on(h.el, 'gripup', () => this.release(h));
        on(h.el, 'controllerdisconnected', () => this.release(h));
      }
      on(this.el.sceneEl, 'enter-vr', () => this.release(this.desk));
      on(this.el.sceneEl, 'exit-vr', () => this.hands.forEach((h) => this.release(h)));

      // F is wield.js's key too: take it first when it's about a piece.
      const typing = (evt) => evt.target.closest && evt.target.closest('input, textarea, select');
      on(window, 'keydown', (evt) => {
        if (evt.code !== 'KeyF' || evt.repeat || typing(evt) || this.el.sceneEl.is('vr-mode')) return;
        if (this.desk.piece) {
          this.release(this.desk);
        } else {
          const wield = this.wield();
          if (wield && wield.desk.tool) return;  // F puts down the pen
          const piece = this.looked();
          if (!piece) return;
          if (piece.by) this.data.rig.emit('wield-failed', { reason: 'held', label: 'that piece' }, false);
          else this.grab(this.desk, piece);
        }
        evt.stopImmediatePropagation();
      }, true);

      if (typeof NAF !== 'undefined' && NAF.connection) {
        NAF.connection.subscribeToDataChannel('chess', (from, type, msg) => this.onMessage(msg));
        on(document.body, 'clientConnected', (evt) => this.catchUp(evt.detail.clientId));
        on(document.body, 'clientDisconnected', (evt) => {
          for (const piece of this.pieces) {
            if (piece.by !== evt.detail.clientId) continue;
            piece.by = null;
            piece.target = null;
            this.settle(piece, this.restingAt(piece), true);
          }
        });
      }
    },

    remove() {
      for (const [target, type, fn, opts] of this.listeners) target.removeEventListener(type, fn, opts);
      for (const h of this.hands.concat(this.desk)) this.release(h);
      if (typeof NAF !== 'undefined' && NAF.connection) NAF.connection.unsubscribeToDataChannel('chess');
      for (const s of this.sounds || []) if (s.isPlaying) s.stop();
      this.group.traverse((o) => {
        if (o.geometry) o.geometry.dispose();
      });
      this.el.removeObject3D('mesh');
    },

    // ---- making it ---------------------------------------------------------------

    buildBoard() {
      const wood = new THREE.MeshStandardMaterial({ color: '#4a2e1c', roughness: 0.55 });
      const frame = new THREE.Mesh(new THREE.BoxGeometry(EDGE * 2, THICK - 0.002, EDGE * 2), wood);
      frame.position.y = (THICK - 0.002) / 2;
      this.group.add(frame);
      const light = new THREE.MeshStandardMaterial({ color: '#e3c99a', roughness: 0.5 });
      const dark = new THREE.MeshStandardMaterial({ color: '#8a5a36', roughness: 0.5 });
      const tile = new THREE.BoxGeometry(SQUARE, 0.002, SQUARE);
      for (let sq = 0; sq < 64; sq++) {
        const mesh = new THREE.Mesh(tile, (sq % 8 + Math.floor(sq / 8)) % 2 ? light : dark);
        mesh.position.copy(this.squareCenter(sq)).y -= 0.001;
        this.group.add(mesh);
      }
      // The square a held piece would go to.
      this.glowGeometry = new THREE.PlaneGeometry(SQUARE * 0.94, SQUARE * 0.94).rotateX(-Math.PI / 2);
      this.glowFree = new THREE.MeshBasicMaterial({ color: '#6fd0ff', transparent: true, opacity: 0.55, depthWrite: false });
      this.glowTake = new THREE.MeshBasicMaterial({ color: '#ff6a4a', transparent: true, opacity: 0.6, depthWrite: false });
    },

    // A red button on each of the two free corners of the table: in VR, reach
    // for one and pull the trigger twice to set the board up again.
    buildButtons() {
      const t = this.data.table - 0.06;
      const red = new THREE.MeshStandardMaterial({ color: '#b8352a', roughness: 0.4 });
      const base = new THREE.MeshStandardMaterial({ color: '#222222', roughness: 0.6 });
      this.buttons = [new THREE.Vector3(-t, 0, t), new THREE.Vector3(t, 0, -t)].map((at, k) => {
        const button = new THREE.Group();
        button.position.copy(at);
        const ring = new THREE.Mesh(new THREE.CylinderGeometry(0.032, 0.034, 0.008, 24), base);
        ring.position.y = 0.004;
        const cap = new THREE.Mesh(new THREE.CylinderGeometry(0.024, 0.024, 0.01, 24), red);
        cap.position.y = 0.012;
        button.add(ring, cap);
        this.group.add(button);
        const label = document.createElement('a-entity');
        label.setAttribute('text', { value: 'reset', align: 'center', width: 0.35, color: '#333333' });
        // Lying on the table, the right way up for the player it's nearest.
        label.object3D.position.set(at.x, 0.001, at.z + (k ? 0.048 : -0.048));
        label.object3D.rotation.set(-Math.PI / 2, 0, k ? Math.PI : 0);
        this.el.appendChild(label);
        return button;
      });
      const world = this;
      this.touchables = this.buttons.map((button) => ({
        name: 'chess-reset',
        label: () => (world.el.sceneEl.time - world.armedAt < ARMED_MS ? 'again to reset the board' : 'set up the chess board'),
        // Closer than for most touchables, so reaching for a piece doesn't offer it.
        distance: (p) => button.getWorldPosition(v1).distanceTo(p) + TOUCH_REACH - BUTTON_REACH,
        use: () => {
          const now = world.el.sceneEl.time;
          if (now - world.armedAt < ARMED_MS) {
            world.armedAt = -Infinity;
            world.resetChess();
          } else {
            world.armedAt = now;
          }
        },
      }));
    },

    loadPieces() {
      const loader = new THREE.GLTFLoader();
      const kinds = [...new Set(BACK_RANK.concat('pawn'))];
      const load = (kind) => new Promise((resolve, reject) => loader.load(`${MODEL_DIR}${kind}.glb`, resolve, undefined, reject))
        .then((gltf) => {
          let geometry = null;
          let material = null;
          gltf.scene.traverse((o) => {
            if (o.isMesh && !geometry) {
              geometry = o.geometry;
              material = o.material;
            }
          });
          return [kind, geometry, material];
        });
      Promise.all(kinds.map(load)).then((loaded) => {
        const models = {};
        for (const [kind, geometry, material] of loaded) models[kind] = geometry;
        // Each side's own look, and a glow for the piece your hand would take.
        const template = loaded[0][2];
        this.materials = {};
        for (const side of ['white', 'black']) {
          const plain = template.clone();
          plain.color.set(COLOR[side]);
          plain.roughness = side === 'white' ? 0.45 : 0.35;
          const lit = plain.clone();
          lit.emissive.set('#3d9bd6');
          lit.emissiveIntensity = side === 'white' ? 0.45 : 0.8;
          this.materials[side] = { plain, lit };
        }
        this.makePieces(models);
      }).catch((err) => console.warn("Couldn't load the chess pieces", err));
    },

    // Pieces 0–15 are white's, 16–31 black's; each starts on its own square.
    makePieces(models) {
      for (let i = 0; i < 32; i++) {
        const side = i < 16 ? 'white' : 'black';
        const n = i % 16;
        const file = n % 8;
        const rank = side === 'white' ? (n < 8 ? 0 : 1) : (n < 8 ? 7 : 6);
        const kind = n < 8 ? BACK_RANK[file] : 'pawn';
        const mesh = new THREE.Mesh(models[kind], this.materials[side].plain);
        mesh.scale.setScalar(SCALE);
        const object = new THREE.Group();
        object.add(mesh);
        this.group.add(object);
        const glow = new THREE.Mesh(this.glowGeometry, this.glowFree);
        glow.visible = false;
        this.group.add(glow);
        const piece = {
          i, side, kind, mesh, object, glow, home: rank * 8 + file, height: HEIGHT[kind] * SCALE,
          at: null, from: null, holder: null, by: null, v: 0, target: null, fall: null, lit: false,
        };
        piece.at = { sq: piece.home };
        this.pose(piece, piece.at);
        this.pieces.push(piece);
      }
    },

    loadSounds() {
      const sceneEl = this.el.sceneEl;
      if (!sceneEl.audioListener) {
        sceneEl.audioListener = new THREE.AudioListener();
        if (sceneEl.camera) sceneEl.camera.add(sceneEl.audioListener);
        sceneEl.addEventListener('camera-set-active', (e) => e.detail.cameraEl.getObject3D('camera').add(sceneEl.audioListener));
      }
      const loader = new THREE.AudioLoader();
      Promise.all(SOUNDS.map((name) => new Promise((resolve, reject) => loader.load(`${SOUND_DIR}${name}.ogg`, resolve, undefined, reject))))
        .then((buffers) => {
          this.buffers = buffers;
          this.sounds = [0, 1, 2, 3].map(() => {
            const sound = new THREE.PositionalAudio(sceneEl.audioListener);
            sound.setRefDistance(0.6);
            sound.setRolloffFactor(1.2);
            this.group.add(sound);
            return sound;
          });
        })
        .catch((err) => console.warn("Couldn't load the chess sounds", err));
    },

    // A wooden knock where a piece lands, a little different each time.
    knock(at, loud) {
      if (!this.sounds) return;
      const sound = this.sounds.find((s) => !s.isPlaying);
      if (!sound) return;
      sound.setBuffer(this.buffers[Math.floor(Math.random() * this.buffers.length)]);
      sound.setPlaybackRate(0.92 + Math.random() * 0.22);
      sound.setVolume(loud * (0.75 + Math.random() * 0.25));
      sound.position.copy(at);
      sound.play();
    },

    // ---- where pieces go -----------------------------------------------------------

    // Square 0 is a1 (white's left), 7 is h1, 63 is h8.
    squareCenter(sq, out = new THREE.Vector3()) {
      return out.set((sq % 8 - 3.5) * SQUARE, THICK, (3.5 - Math.floor(sq / 8)) * SQUARE);
    },

    // The square under a point, if it's over the board.
    squareAt(p) {
      if (Math.abs(p.x) > EDGE || Math.abs(p.z) > EDGE || p.y < -0.05) return null;
      const file = clamp(Math.floor((p.x + HALF) / SQUARE), 0, 7);
      const rank = clamp(Math.floor((HALF - p.z) / SQUARE), 0, 7);
      return rank * 8 + file;
    },

    // Pieces face the other side: the knights' heads point at the opponent.
    facing(piece) {
      return piece.side === 'white' ? Math.PI : 0;
    },

    // Where a piece stands for `at`: { p, yaw } in the board's coordinates.
    placeOf(piece, at) {
      if (at.sq !== undefined) return { p: this.squareCenter(at.sq), yaw: this.facing(piece) };
      if (at.slot !== undefined) {
        // Taken pieces stand in two rows beside the board, on the right of
        // whoever took them: black's on white's right, white's on black's.
        const s = piece.side === 'black' ? 1 : -1;
        const col = Math.floor(at.slot / 8);
        const row = at.slot % 8;
        const p = new THREE.Vector3(s * (EDGE + 0.035 + col * SLOT), 0, s * (EDGE + 0.1 - row * SLOT));
        return { p, yaw: this.facing(piece) };
      }
      return { p: new THREE.Vector3().fromArray(at.p), yaw: at.yaw };
    },

    // Puts a piece straight there.
    pose(piece, at) {
      const { p, yaw } = this.placeOf(piece, at);
      piece.object.position.copy(p);
      piece.object.quaternion.setFromAxisAngle(Y, yaw);
    },

    // Where a piece that's let go of here lands: on the table under it, or on the floor.
    looseAt(piece) {
      const p = piece.object.position;
      const t = this.data.table;
      const y = Math.abs(p.x) < t && Math.abs(p.z) < t && p.y > -0.02 ? 0 : -this.data.height;
      euler.setFromQuaternion(piece.object.quaternion);
      return { p: [round(p.x), y, round(p.z)], yaw: round(euler.y) };
    },

    // Where a piece that's let go of here goes: the square under it, or else
    // down onto the table or floor.
    restingAt(piece) {
      const sq = this.squareAt(piece.object.position);
      return sq !== null ? { sq } : this.looseAt(piece);
    },

    // Moves a piece to `at`: it drops straight down if that's under it, or else
    // glides there; then it knocks.
    settle(piece, at, sound) {
      piece.at = at;
      const { p, yaw } = this.placeOf(piece, at);
      const from = piece.object.position.clone();
      const drop = from.y - p.y;
      const across = Math.hypot(from.x - p.x, from.z - p.z);
      const falling = drop > 0.005 && across < 0.04;
      piece.fall = {
        from, to: p, q0: piece.object.quaternion.clone(), q1: new THREE.Quaternion().setFromAxisAngle(Y, yaw),
        t: 0, falling, sound,
        dur: falling ? Math.sqrt(2 * drop / GRAVITY) : clamp(from.distanceTo(p) / 1.5, 0.1, 0.35),
      };
    },

    animate(piece, dt) {
      const f = piece.fall;
      f.t += dt;
      const k = Math.min(1, f.t / f.dur);
      const obj = piece.object;
      if (f.falling) {
        obj.position.lerpVectors(f.from, f.to, k);
        obj.position.y = Math.max(f.to.y, f.from.y - 0.5 * GRAVITY * f.t * f.t);
      } else {
        obj.position.lerpVectors(f.from, f.to, k * k * (3 - 2 * k));
      }
      obj.quaternion.slerpQuaternions(f.q0, f.q1, Math.min(1, f.t / Math.min(f.dur, 0.12)));
      if (k < 1) return;
      piece.fall = null;
      if (f.sound) this.knock(obj.position, f.falling ? clamp(0.4 + (f.from.y - f.to.y) * 2, 0.4, 1) : 0.5);
    },

    occupant(sq, except) {
      return this.pieces.find((p) => p !== except && p.at && p.at.sq === sq);
    },

    freeSlot(side) {
      const used = new Set(this.pieces.filter((p) => p.side === side && p.at && p.at.slot !== undefined).map((p) => p.at.slot));
      for (let slot = 0; slot < 16; slot++) if (!used.has(slot)) return slot;
      return 15;
    },

    // Puts down a piece you had, taking whatever was on its square.
    place(piece, at) {
      if (at.sq !== undefined) {
        const taken = this.occupant(at.sq, piece);
        if (taken) {
          taken.v++;
          this.settle(taken, { slot: this.freeSlot(taken.side) }, true);
          this.send({ op: 'put', i: taken.i, v: taken.v, at: taken.at }, true);
        }
      }
      piece.v++;
      this.settle(piece, at, true);
      this.send({ op: 'put', i: piece.i, v: piece.v, at: piece.at }, true);
    },

    // Everything back where it starts, for everyone.
    resetChess() {
      if (!this.pieces.length) return;
      this.setUp(this.epoch + 1);
      this.send({ op: 'reset' }, true);
      this.knock(v1.set(0, THICK, 0), 0.8);
    },

    setUp(epoch) {
      this.epoch = epoch;
      for (const piece of this.pieces) {
        if (piece.holder) this.letGoOf(piece);
        Object.assign(piece, { at: { sq: piece.home }, by: null, v: 0, target: null, fall: null });
        this.pose(piece, piece.at);
      }
    },

    // ---- holding ---------------------------------------------------------------------

    wield() {
      const el = this.data.rig;
      return el && el.components.wield;
    },

    myId() {
      return online() ? NAF.clientId : 'me';
    },

    // Whether a hand of yours (its entity) holds a piece; for screens.js.
    holds(handEl) {
      return this.hands.some((h) => h.el === handEl && h.piece);
    },

    // The base and top of a piece, in the world.
    ends(piece) {
      piece.object.updateWorldMatrix(true, false);
      const base = piece.object.getWorldPosition(new THREE.Vector3());
      const up = Y.clone().applyQuaternion(piece.object.getWorldQuaternion(q1));
      return [base, base.clone().addScaledVector(up, piece.height)];
    },

    // The piece nearest an empty hand, within reach.
    nearest(hand) {
      const at = hand.el.object3D.getWorldPosition(v2);
      let best = null;
      let bestDistance = GRAB_REACH;
      for (const piece of this.pieces) {
        if (piece.by || piece.holder) continue;
        const [a, b] = this.ends(piece);
        v3.subVectors(b, a);
        const t = clamp(v3.dot(v1.subVectors(at, a)) / v3.lengthSq(), 0, 1);
        const d = at.distanceTo(v1.copy(a).addScaledVector(v3, t));
        if (d < bestDistance) {
          best = piece;
          bestDistance = d;
        }
      }
      return best;
    },

    // Desktop: the piece nearest your line of sight, within reach.
    looked() {
      const head = this.data.head.object3D;
      const eye = head.getWorldPosition(new THREE.Vector3());
      const ahead = new THREE.Vector3(0, 0, -1).applyQuaternion(head.getWorldQuaternion(q1));
      let best = null;
      let bestAim = LOOK_AIM;
      for (const piece of this.pieces) {
        if (piece.holder) continue;
        const [a, b] = this.ends(piece);
        for (let k = 0; k <= 6; k++) {
          const [aim, along] = offRay(eye, ahead, v2.lerpVectors(a, b, k / 6));
          if (along < 0 || along > LOOK_REACH || aim >= bestAim) continue;
          best = piece;
          bestAim = aim;
        }
      }
      return best;
    },

    // Desktop: where you're looking, as somewhere to put a piece: a square,
    // a spot on the table, or nowhere.
    lookedAt(piece) {
      const head = this.data.head.object3D;
      const o = this.group.worldToLocal(head.getWorldPosition(new THREE.Vector3()));
      m1.copy(this.group.matrixWorld).invert();
      const d = new THREE.Vector3(0, 0, -1).applyQuaternion(head.getWorldQuaternion(q1)).transformDirection(m1);
      if (d.y > -0.05) return null;
      const onBoard = o.clone().addScaledVector(d, (THICK - o.y) / d.y);
      const sq = this.squareAt(onBoard);
      if (sq !== null && onBoard.distanceTo(o) < LOOK_REACH) return { sq };
      const onTable = o.clone().addScaledVector(d, -o.y / d.y);
      const t = this.data.table - 0.02;
      if (Math.abs(onTable.x) < t && Math.abs(onTable.z) < t && onTable.distanceTo(o) < LOOK_REACH) {
        euler.setFromQuaternion(piece.object.quaternion);
        return { p: [round(onTable.x), 0, round(onTable.z)], yaw: round(euler.y) };
      }
      return null;
    },

    gripDown(hand) {
      if (hand.piece || !this.pieces.length) return;
      const wield = this.wield();
      const held = wield && wield.hands.find((h) => h.el === hand.el);
      if (held && held.tool) return;  // it picked up a pen instead
      const piece = this.nearest(hand);
      if (piece) this.grab(hand, piece);
    },

    grab(hand, piece) {
      if (piece.holder) this.letGoOf(piece);  // from your other hand
      piece.from = piece.at;
      piece.at = null;
      piece.fall = null;
      piece.target = null;
      piece.by = null;
      piece.holder = hand;
      hand.piece = piece;
      // In VR it stays just as it was in your hand; on desktop it floats in front of you.
      if (hand.vr) hand.el.object3D.attach(piece.object);
      piece.v++;
      this.sendPose(piece, true);
      if (hand.vr) buzz(hand.el, 0.4, 30);
    },

    // Takes a piece out of your hand without putting it anywhere.
    letGoOf(piece) {
      const hand = piece.holder;
      if (!hand) return;
      hand.piece = null;
      piece.holder = null;
      piece.glow.visible = false;
      this.group.attach(piece.object);
    },

    release(hand) {
      const piece = hand.piece;
      if (!piece) return;
      let at;
      if (hand.vr) {
        this.letGoOf(piece);
        at = this.restingAt(piece);
        buzz(hand.el, 0.25, 20);
      } else {
        at = this.lookedAt(piece) || piece.from || this.looseAt(piece);
        this.letGoOf(piece);
      }
      this.place(piece, at);
    },

    // ---- syncing -------------------------------------------------------------------------

    send(msg, guaranteed, to) {
      if (!online()) return;
      msg.e = this.epoch;
      if (to) NAF.connection.sendDataGuaranteed(to, 'chess', msg);
      else if (guaranteed) NAF.connection.broadcastDataGuaranteed('chess', msg);
      else NAF.connection.broadcastData('chess', msg);
    },

    // A held piece's pose in the board's coordinates.
    sendPose(piece, guaranteed, to) {
      if (!online()) return;
      piece.object.updateWorldMatrix(true, false);
      m1.copy(this.group.matrixWorld).invert().multiply(piece.object.matrixWorld);
      const p = new THREE.Vector3();
      const q = new THREE.Quaternion();
      m1.decompose(p, q, v1);
      this.send({
        op: 'pose', i: piece.i, v: piece.v, by: piece.holder ? this.myId() : piece.by,
        p: [round(p.x), round(p.y), round(p.z)], q: [round(q.x), round(q.y), round(q.z), round(q.w)],
      }, guaranteed, to);
    },

    onMessage(msg) {
      if (!msg || !Number.isInteger(msg.e) || msg.e < this.epoch || !this.pieces.length) return;
      if (msg.e > this.epoch) this.setUp(msg.e);
      if (msg.op === 'reset') return;
      const piece = Number.isInteger(msg.i) && this.pieces[msg.i];
      if (!piece || !Number.isInteger(msg.v) || msg.v < piece.v) return;
      const by = msg.op === 'pose' && typeof msg.by === 'string' ? msg.by : null;
      const current = piece.holder ? this.myId() : piece.by;
      // Two people took it at once: the lower id keeps it, the same for everyone.
      if (msg.v === piece.v && by !== current && (by || '￿') > (current || '￿')) return;
      if (msg.op === 'pose') {
        if (!finite(msg.p, 3) || !finite(msg.q, 4)) return;
        const q = new THREE.Quaternion().fromArray(msg.q);
        if (q.lengthSq() < 1e-6) return;
        piece.v = msg.v;
        if (piece.holder && by !== this.myId()) this.letGoOf(piece);
        if (piece.holder) return;
        if (piece.at) piece.from = piece.at;
        Object.assign(piece, { at: null, fall: null, by, target: { p: new THREE.Vector3().fromArray(msg.p), q: q.normalize() } });
      } else if (msg.op === 'put') {
        const at = validAt(msg.at);
        if (!at) return;
        piece.v = msg.v;
        if (piece.holder) this.letGoOf(piece);
        piece.by = null;
        piece.target = null;
        this.settle(piece, at, true);
      }
    },

    // Tells someone who just arrived about every piece that's been moved since
    // the board was last set up. Everyone here does this; they keep the newest.
    catchUp(clientId) {
      if (!online()) return;
      if (this.epoch > 0) this.send({ op: 'reset' }, true, clientId);
      for (const piece of this.pieces) {
        if (!piece.v) continue;
        if (piece.holder || piece.by) this.sendPose(piece, true, clientId);
        else if (piece.at) this.send({ op: 'put', i: piece.i, v: piece.v, at: piece.at }, true, clientId);
      }
    },

    // ---- every frame -----------------------------------------------------------------------

    tick(time, delta) {
      if (!this.pieces.length) return;
      const dt = Math.min(delta, 100) / 1000;
      const ease = 1 - Math.exp(-dt / SMOOTH);
      const vr = this.el.sceneEl.is('vr-mode');

      if (this.desk.piece) this.hover(this.desk.piece, ease);

      for (const piece of this.pieces) {
        if (piece.target && !piece.holder) {
          piece.object.position.lerp(piece.target.p, ease);
          piece.object.quaternion.slerp(piece.target.q, ease);
        }
        if (piece.fall) this.animate(piece, dt);
        this.showSquare(piece);
      }

      // The piece each empty hand would take glows.
      const wield = this.wield();
      const near = new Set();
      for (const hand of this.hands) {
        const busy = hand.piece || !vr || !hand.el.object3D.visible || (wield && wield.hands.some((h) => h.el === hand.el && h.tool));
        const piece = busy ? null : this.nearest(hand);
        if (piece && piece !== hand.near) buzz(hand.el, 0.1, 12);
        hand.near = piece;
        if (piece) near.add(piece);
      }
      if (!vr && !this.desk.piece) {
        const piece = this.looked();
        if (piece && !piece.by) near.add(piece);
      }
      for (const piece of this.pieces) {
        const lit = near.has(piece);
        if (lit !== piece.lit) {
          piece.lit = lit;
          piece.mesh.material = this.materials[piece.side][lit ? 'lit' : 'plain'];
        }
      }

      if (time - this.lastPose >= POSE_MS) {
        this.lastPose = time;
        for (const piece of this.pieces) if (piece.holder) this.sendPose(piece, false);
      }
    },

    // Desktop: a held piece hovers over where you're looking, upright, or
    // floats low in front of you if that's nowhere.
    hover(piece, ease) {
      const at = this.lookedAt(piece);
      let p;
      if (at) {
        p = this.placeOf(piece, at).p;
        p.y += DESK_HOVER;
      } else {
        const head = this.data.head.object3D;
        euler.setFromQuaternion(head.getWorldQuaternion(q1));
        p = v2.set(-Math.sin(euler.y), 0, -Math.cos(euler.y)).multiplyScalar(DESK_AHEAD).add(head.getWorldPosition(v1));
        p.y -= DESK_DROP;
        this.group.worldToLocal(p);
      }
      piece.object.position.lerp(p, Math.min(1, ease * 2));
      piece.object.quaternion.setFromAxisAngle(Y, this.facing(piece));
    },

    // Lights the square a held piece would go to: under it in VR or for
    // someone else, or where you're looking on desktop.
    showSquare(piece) {
      let sq = null;
      if (piece.holder === this.desk) {
        const at = this.lookedAt(piece);
        sq = at && at.sq !== undefined ? at.sq : null;
      } else if (piece.holder || piece.by) {
        piece.object.updateWorldMatrix(true, false);
        sq = this.squareAt(this.group.worldToLocal(piece.object.getWorldPosition(v1)));
      }
      const glow = piece.glow;
      glow.visible = sq !== null;
      if (sq === null) return;
      if (sq !== piece.glowSq && piece.holder && piece.holder.vr) buzz(piece.holder.el, 0.08, 10);
      piece.glowSq = sq;
      this.squareCenter(sq, glow.position).y += 0.0015;
      glow.material = this.occupant(sq, piece) ? this.glowTake : this.glowFree;
    },
  });
})();