Make tableau->base animation cooler

[michaelchadwick]

Sliding the card down and fading it out, and then making it appear on the foundation is not as cool as actually moving it along the proper (dx, dy) vector would be cooler.

Pseudo-code from ChatGPT:

function moveCardToFoundation(cardEl, foundationEl) {
  // 1️⃣  Get the current and target coordinates
  const cardRect      = cardEl.getBoundingClientRect();
  const foundationRect = foundationEl.getBoundingClientRect();

  // center of each element
  const cardX = cardRect.left + cardRect.width  / 2;
  const cardY = cardRect.top  + cardRect.height / 2;
  const baseX = foundationRect.left + foundationRect.width  / 2;
  const baseY = foundationRect.top  + foundationRect.height / 2;

  // Δx / Δy
  const dx = baseX - cardX;
  const dy = baseY - cardY;

  // Angle in degrees
  const angle = Math.atan2(dy, dx) * (180 / Math.PI);

  // 2️⃣  Animate
  cardEl.animate(
    [
      { transform: 'translate(0,0) rotate(0deg)',   opacity: 1 },
      { transform: `translate(${dx}px, ${dy}px) rotate(${angle}deg)`, opacity: 0 }
    ],
    {
      duration: 650,
      easing: 'ease-in-out',
      fill: 'forwards'          // keep the final state after animation
    }
  ).onfinish = () => {
    // optional: move card into the foundation container
    foundationEl.appendChild(cardEl);
    cardEl.style.opacity = ''; // reset for next time
    cardEl.style.transform = ''; // reset
  };
}

// Usage
const card = document.querySelector('.card');
const foundation = document.querySelector('.foundation');

card.addEventListener('click', () => moveCardToFoundation(card, foundation));