Cards!

frontend/app/components/widgets/HiboliaScene.vue

@@ -0,0 +1,303 @@
+<script setup lang="ts">
+const ATLAS_URL = 'https://cdn.aranroig.com/web/assets/cards.png';
+const CARD_COLS = 5;
+const CARD_ROWS = 11;
+const CARD_COUNT = 20;
+const CARD_LANES = 5;
+const CARD_SPEED = 1.1;
+const CARD_WIDTH = 1.15;
+const CARD_BACK_FACE = 9 * CARD_COLS + 2;
+
+const root = ref<HTMLDivElement | null>(null);
+let disposeScene: (() => void) | null = null;
+let cancelled = false;
+let cancelSchedule: (() => void) | null = null;
+
+const init = async () => {
+  const el = root.value;
+  if (!el || cancelled) return;
+
+  const {
+    Scene,
+    PerspectiveCamera,
+    WebGLRenderer,
+    TextureLoader,
+    SRGBColorSpace,
+    MeshBasicMaterial,
+    PlaneGeometry,
+    Mesh,
+    Vector2,
+    Vector3,
+    Color,
+    Clock,
+    MathUtils
+  } = await import('three');
+  if (cancelled) return;
+
+  const scene = new Scene();
+
+  const camera = new PerspectiveCamera(45, 1, 0.1, 100);
+  camera.position.z = 4;
+
+  const renderer = new WebGLRenderer({ antialias: true, alpha: true });
+  renderer.setPixelRatio(1);
+  el.appendChild(renderer.domElement);
+
+  let texture;
+  try {
+    texture = await new TextureLoader().loadAsync(ATLAS_URL);
+  } catch (e) {
+    console.warn('HiboliaScene: failed to load card atlas (CORS?)', e);
+    el.removeChild(renderer.domElement);
+    return;
+  }
+  if (cancelled) {
+    texture.dispose();
+    renderer.dispose();
+    if (renderer.domElement.parentElement === el) el.removeChild(renderer.domElement);
+    return;
+  }
+  texture.colorSpace = SRGBColorSpace;
+  texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
+
+  const cellW = texture.image.width / CARD_COLS;
+  const cellH = texture.image.height / CARD_ROWS;
+  const cardHeight = CARD_WIDTH * (cellH / cellW);
+
+  const material = new MeshBasicMaterial({
+    map: texture,
+    transparent: true
+  });
+
+  const backMaterial = new MeshBasicMaterial({
+    map: texture,
+    transparent: true
+  });
+
+  // Round the card corners with an anti-aliased rounded-rect SDF in the shader.
+  const CORNER_RADIUS = 0.09;
+  const applyRoundedCorners = (mat: any) => {
+    mat.onBeforeCompile = (shader: any) => {
+      shader.uniforms.uHalfSize = { value: new Vector2(CARD_WIDTH / 2, cardHeight / 2) };
+      shader.uniforms.uRadius = { value: CORNER_RADIUS };
+      shader.vertexShader = shader.vertexShader
+        .replace(
+          '#include <common>',
+          '#include <common>\nvarying vec2 vCardPos;'
+        )
+        .replace(
+          '#include <begin_vertex>',
+          '#include <begin_vertex>\nvCardPos = position.xy;'
+        );
+      shader.fragmentShader = shader.fragmentShader
+        .replace(
+          '#include <common>',
+          `#include <common>
+varying vec2 vCardPos;
+uniform vec2 uHalfSize;
+uniform float uRadius;`
+        )
+        .replace(
+          '#include <color_fragment>',
+          `#include <color_fragment>
+vec2 q = abs(vCardPos) - uHalfSize + uRadius;
+float sd = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - uRadius;
+diffuseColor.a *= 1.0 - smoothstep(-fwidth(sd), fwidth(sd), sd);`
+        );
+      mat.userData.shader = shader;
+    };
+    mat.needsUpdate = true;
+  };
+  applyRoundedCorners(material);
+  applyRoundedCorners(backMaterial);
+
+  let viewHalfW = 2;
+  let viewHalfH = 1.66;
+  const updateView = () => {
+    viewHalfH = camera.position.z * Math.tan(MathUtils.degToRad(camera.fov / 2));
+    viewHalfW = viewHalfH * camera.aspect;
+  };
+
+  // Inset UVs half a pixel inside each atlas cell to stop neighbors bleeding in.
+  const marginU = 0.5 / cellW;
+  const marginV = 0.5 / cellH;
+
+  // Shift the plane's UVs into one cell of the atlas: col across 5 columns,
+  // row from the top of the image (v origin is bottom-left in three.js).
+  const applyCardFace = (geometry: any, face: number) => {
+    const col = face % CARD_COLS;
+    const row = Math.floor(face / CARD_COLS);
+    const uv = geometry.attributes.uv;
+    if (!geometry.userData.baseUv) {
+      geometry.userData.baseUv = Float32Array.from(uv.array);
+    }
+    const base = geometry.userData.baseUv;
+    for (let i = 0; i < uv.count; i++) {
+      const u = (col + marginU + base[i * 2] * (1 - 2 * marginU)) / CARD_COLS;
+      const v = (CARD_ROWS - 1 - row + marginV + base[i * 2 + 1] * (1 - 2 * marginV)) / CARD_ROWS;
+      uv.setXY(i, u, v);
+    }
+    uv.needsUpdate = true;
+  };
+
+  const cards: any[] = [];
+
+  const respawn = (card: any, initial: boolean) => {
+    const topY = viewHalfH + cardHeight;
+    const bottomY = -viewHalfH - cardHeight;
+    card.mesh.position.set(
+      -viewHalfW + (viewHalfW * 2 / CARD_LANES) * (card.slot % CARD_LANES + 0.5) + MathUtils.randFloatSpread(0.3),
+      initial
+        ? bottomY + (topY - bottomY) * (1 - (card.slot + 0.5) / CARD_COUNT)
+        : topY,
+      MathUtils.randFloat(-1.5, 0.5)
+    );
+    card.mesh.rotation.set(
+      MathUtils.randFloat(-0.3, 0.3),
+      MathUtils.randFloat(-0.4, 0.4),
+      MathUtils.randFloat(-0.3, 0.3)
+    );
+    card.spin.set(
+      MathUtils.randFloatSpread(1.6),
+      MathUtils.randFloatSpread(1.6),
+      MathUtils.randFloatSpread(0.9)
+    );
+    applyCardFace(card.geometry, Math.floor(Math.random() * CARD_COLS * CARD_ROWS));
+  };
+
+  for (let i = 0; i < CARD_COUNT; i++) {
+    const geometry = new PlaneGeometry(CARD_WIDTH, cardHeight);
+    const mesh = new Mesh(geometry, material);
+    const backGeometry = new PlaneGeometry(CARD_WIDTH, cardHeight);
+    applyCardFace(backGeometry, CARD_BACK_FACE);
+    const backMesh = new Mesh(backGeometry, backMaterial);
+    backMesh.rotation.y = Math.PI;
+    backMesh.position.z = -0.001;
+    mesh.add(backMesh);
+    scene.add(mesh);
+    const card = { mesh, geometry, backGeometry, slot: i, spin: new Vector3() };
+    respawn(card, true);
+    cards.push(card);
+  }
+
+  const resize = () => {
+    const width = el.clientWidth;
+    const height = el.clientHeight;
+    if (!width || !height) return;
+    renderer.setSize(width, height);
+    camera.aspect = width / height;
+    camera.updateProjectionMatrix();
+    updateView();
+  };
+  resize();
+
+  const observer = new ResizeObserver(resize);
+  observer.observe(el);
+
+  // Solid canvas background tracking the active theme's --color-background.
+  const applyBackground = () => {
+    const bg = getComputedStyle(document.documentElement)
+      .getPropertyValue('--color-background')
+      .trim();
+    renderer.setClearColor(new Color(bg || '#0e0e0e'), 1);
+  };
+  applyBackground();
+
+  const themeObserver = new MutationObserver(applyBackground);
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-theme']
+  });
+
+  const clock = new Clock();
+  let frameId = 0;
+  let running = false;
+  const animate = () => {
+    if (!running) return;
+    frameId = requestAnimationFrame(animate);
+    const dt = Math.min(clock.getDelta(), 0.05);
+    for (const card of cards) {
+      card.mesh.position.y -= CARD_SPEED * dt;
+      card.mesh.rotation.x += card.spin.x * dt;
+      card.mesh.rotation.y += card.spin.y * dt;
+      card.mesh.rotation.z += card.spin.z * dt;
+      if (card.mesh.position.y < -viewHalfH - cardHeight) {
+        respawn(card, false);
+      }
+    }
+    renderer.render(scene, camera);
+  };
+
+  // Pause the loop while the tab is hidden to free the main thread and GPU.
+  const startLoop = () => {
+    if (running) return;
+    running = true;
+    clock.getDelta();
+    frameId = requestAnimationFrame(animate);
+  };
+  const stopLoop = () => {
+    if (!running) return;
+    running = false;
+    cancelAnimationFrame(frameId);
+  };
+  const removeVisibility = onVisibility((hidden) => (hidden ? stopLoop() : startLoop()));
+  startLoop();
+
+  disposeScene = () => {
+    stopLoop();
+    removeVisibility();
+    observer.disconnect();
+    themeObserver.disconnect();
+    for (const card of cards) {
+      card.geometry.dispose();
+      card.backGeometry.dispose();
+    }
+    material.dispose();
+    backMaterial.dispose();
+    texture.dispose();
+    renderer.dispose();
+    if (renderer.domElement.parentElement === el) {
+      el.removeChild(renderer.domElement);
+    }
+  };
+};
+
+onMounted(() => {
+  cancelSchedule = scheduleIdle(() => {
+    init();
+  });
+});
+
+onBeforeUnmount(() => {
+  cancelled = true;
+  cancelSchedule?.();
+  disposeScene?.();
+});
+</script>
+
+<template>
+  <div ref="root" class="three-root">
+    <div class="three-bg" aria-hidden="true"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.three-root {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .three-bg {
+    position: absolute;
+    inset: 0;
+    background: var(--color-background);
+  }
+
+  :deep(canvas) {
+    position: relative;
+    z-index: 1;
+    display: block;
+  }
+}
+</style>