Intermediate Guide Drag and Drop Planets

// CodePen JS (Module)
// HTML:
// <canvas id="dotLottie-canvas" data-src="YOUR_DOTLOTTIE_URL"></canvas>

import { DotLottie } from "https://esm.sh/@lottiefiles/dotlottie-web@latest";

/* =============================
   Animation-space constants
   (from your file coords)
============================= */
const SLOT_EARTH = "earth";

// Animation dimensions must match the coordinate system your token uses.
// Your provided coords strongly imply anim-space pixels.
// (For planets-4.lottie, it's 942 x 1931.)
const ANIM_W = 942;
const ANIM_H = 1931;

const START_POS = { x: 487, y: 1676 };
const START_HIT_HALF = 50; // 50px from center in all directions (square)

const SNAP_POS = { x: 418, y: 800 };
const SNAP_RADIUS = 50; // within 50px of target (circle)

/* =============================
   Setup
============================= */
const canvas = document.getElementById("dotLottie-canvas");
const SRC = canvas?.dataset?.src;

if (!canvas) throw new Error("Missing #dotLottie-canvas element.");
if (!SRC) throw new Error("Missing data-src on #dotLottie-canvas.");

canvas.style.touchAction = "none";

const dotLottie = new DotLottie({
  canvas,
  src: SRC,
  autoplay: true,
  loop: true,
  renderConfig: { autoResize: true },
});

// Track current earth position in anim-space
let earthPos = { ...START_POS };

// Drag state
let dragging = false;
let pointerId = null;
let grabOffset = { x: 0, y: 0 };

/* =============================
   Helpers
============================= */
function dist(a, b) {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  return Math.hypot(dx, dy);
}

// Convert pointer (client) coords -> animation coords,
// assuming the animation is "contain" fit and centered in the canvas rect.
function clientToAnim(clientX, clientY) {
  const r = canvas.getBoundingClientRect();
  const xCss = clientX - r.left;
  const yCss = clientY - r.top;

  const scale = Math.min(r.width / ANIM_W, r.height / ANIM_H);
  const ox = (r.width - ANIM_W * scale) / 2;
  const oy = (r.height - ANIM_H * scale) / 2;

  const x = (xCss - ox) / scale;
  const y = (yCss - oy) / scale;

  return { x, y };
}

function setEarth(pos) {
  earthPos = { x: pos.x, y: pos.y };
  dotLottie.setVectorSlot(SLOT_EARTH, [earthPos.x, earthPos.y]); // per Slots API :contentReference[oaicite:0]{index=0}
}

function withinStartHitbox(p) {
  return (
    Math.abs(p.x - START_POS.x) <= START_HIT_HALF &&
    Math.abs(p.y - START_POS.y) <= START_HIT_HALF
  );
}

/* =============================
   Init
============================= */
dotLottie.addEventListener("load", () => {
  // Ensure earth is exactly at the declared starting point on load.
  setEarth(START_POS);
});

/* =============================
   Pointer events
============================= */
canvas.addEventListener("pointerdown", (e) => {
  const p = clientToAnim(e.clientX, e.clientY);

  // Only start dragging if click is within the 50px square around the START_POS
  if (!withinStartHitbox(p)) return;

  dragging = true;
  pointerId = e.pointerId;

  // Keep the relative grab point so it doesn't jump
  grabOffset = { x: p.x - earthPos.x, y: p.y - earthPos.y };

  canvas.setPointerCapture(pointerId);
});

canvas.addEventListener("pointermove", (e) => {
  if (!dragging || e.pointerId !== pointerId) return;

  const p = clientToAnim(e.clientX, e.clientY);

  // Move earth so the grabbed point stays under the cursor
  const next = { x: p.x - grabOffset.x, y: p.y - grabOffset.y };
  setEarth(next);
});

function endDrag(e) {
  if (!dragging || e.pointerId !== pointerId) return;

  dragging = false;

  // Snap test: within 50px of SNAP_POS => snap, else reset
  if (dist(earthPos, SNAP_POS) <= SNAP_RADIUS) {
    setEarth(SNAP_POS);
  } else {
    setEarth(START_POS);
  }

  try {
    canvas.releasePointerCapture(pointerId);
  } catch {}
  pointerId = null;
}

canvas.addEventListener("pointerup", endDrag);
canvas.addEventListener("pointercancel", endDrag);
canvas.addEventListener("lostpointercapture", () => {
  // Safety: if capture is lost mid-drag, treat as release (reset behavior)
  if (dragging) {
    dragging = false;
    setEarth(START_POS);
    pointerId = null;
  }
});