smooth.js

/**
 * Create a panel div with text.
 * @param {string} txt to be added to element
 */
export function create(txt) {
  const e = document.createElement('div');
  e.className = 'panel';
  if (txt) e.textContent = txt;
  return e;
}

/**
 * Assign a random data-score to each element.
 */
export function randomizeScores(elements) {
  elements.forEach((el) => {
    el.dataset.score = Math.round(Math.random() * 20);
  });
}

/**
 * Record each element's current layout position in data-x/data-y.
 * offsetLeft/offsetTop reflect layout flow, not CSS transforms.
 */
export function getOriginalLocations(elements) {
  elements.forEach((el) => {
    el.dataset.x = el.offsetLeft;
    el.dataset.y = el.offsetTop;
  });
}

/**
 * Set CSS custom properties for translation and hue.
 */
function applyTransform(moveThis, referenceElem) {
  const tx = Number(referenceElem.dataset.x) - Number(moveThis.dataset.x);
  const ty = Number(referenceElem.dataset.y) - Number(moveThis.dataset.y);
  moveThis.style.setProperty('--tx', `${tx}px`);
  moveThis.style.setProperty('--ty', `${ty}px`);
  moveThis.style.setProperty('--hue', `${moveThis.dataset.score * 15}deg`);
}

/**
 * Sort elements by data-score (descending) and apply the transform
 * needed to move each element into its sorted slot.
 */
export function sort(elements) {
  const sorted = elements.toSorted((a, b) => b.dataset.score - a.dataset.score);
  sorted.forEach((el, i) => applyTransform(el, elements[i]));
}

/**
 * Recalculate layout positions and reapply current score-based transforms.
 */
export function refreshLayout(elements) {
  getOriginalLocations(elements);
  sort(elements);
}

/**
 * One animation cycle: new scores, new sort.
 */
export function cycle(elements) {
  randomizeScores(elements);
  sort(elements);
}