Janady13/thatdeveloperguy-website / app/experience/ItServicesRiveCanvas.client.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/thatdeveloperguy-website / app/experience/ItServicesRiveCanvas.client.tsx
Date	Not specified in source
Repository	Janady13/thatdeveloperguy-website
Revision	2bea2ebdff0e34494bff597d4fa9c8422a0c3a94
Branch	main
Path or archive member	app/experience/ItServicesRiveCanvas.client.tsx
Original SHA-256	8e19b3b9ea813a343792ecc0de227bb0bdd9a4f1d9ed8ffd4699bf2cea4629ab
Git blob SHA	1b706d2915e23f6705eb409527bc7f02b586a24e
Reading-copy SHA-256	8e19b3b9ea813a343792ecc0de227bb0bdd9a4f1d9ed8ffd4699bf2cea4629ab

Original source ↗

Recovered source transcript

Download complete source text ↓144 lines · 6.4 KB

import { useEffect, useRef, useState } from 'react';
import { Alignment, Fit, Layout, RuntimeLoader, decodeImage, useRive } from '@rive-app/react-webgl2';
import type { SceneRive } from '../../src/contracts/scene';

RuntimeLoader.setWasmUrl('/animation/runtime/rive.wasm');
RuntimeLoader.setWasmFallbackUrl(null);

/** Page hotspot ids → the room's `hoverTarget` numbers (TDG_IT_SERVICES_ANIMATION_KIT build-spec order). */
const HOVER_TARGET: Record<string, number> = { status: 1, helpdesk: 2, workstations: 3, racks: 4, deployment: 5, toolcart: 6 };
const PLATES = '/animation/rooms/it-services-plates';
const DOOR_MS = 650, DRAWER_MS = 450, DRAWER_STAGGER_MS = 90, LAPTOP_MS = 450, CHAIR_MS = 500;

const ease = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);

interface Props {
  asset: SceneRive;
  focus: string | null;
  onReady: () => void;
  onError: (error: unknown) => void;
}

/**
 * Native IT Services room on the clean plates (rive/it-services). HTML hit shapes own hover and navigation; this component
 * mirrors the focused hotspot into the room's view model (hoverTarget) and drives the kit's effects: display sweep on the
 * status board, door open on deployment, drawer cascade on the tool cart, laptop tilt on the racks, chair nudge on the workstations.
 */
export default function ItServicesRiveCanvas({ asset, focus, onReady, onError }: Props) {
  const callbacks = useRef({ onReady, onError });
  callbacks.current = { onReady, onError };
  const container = useRef<HTMLDivElement>(null);
  const [loaded, setLoaded] = useState(false);
  const [visible, setVisible] = useState(true);
  const [documentHidden, setDocumentHidden] = useState(false);
  const plateSet = useRef<'2x' | '4x'>('2x');

  const { rive, RiveComponent } = useRive({
    src: asset.file,
    artboard: asset.artboard,
    stateMachine: asset.stateMachine,
    autoplay: true,
    autoBind: true,
    enableRiveAssetCDN: false,
    shouldDisableRiveListeners: true,
    layout: new Layout({ fit: Fit.Cover, alignment: Alignment.Center }),
    // The .riv ships without pixels; plates arrive as WebP, 4x when the device would otherwise upscale the 2x set.
    assetLoader: (fileAsset, bytes) => {
      if (!fileAsset.isImage || bytes.length > 0) return false;
      const set = plateSet.current;
      fetch(`${PLATES}/${set}/${fileAsset.name}.webp`)
        .then(response => { if (!response.ok) throw new Error(`${response.status} ${fileAsset.name}`); return response.arrayBuffer(); })
        .then(buffer => decodeImage(new Uint8Array(buffer)))
        .then(image => { (fileAsset as unknown as { setRenderImage(image: unknown): void }).setRenderImage(image); image.unref(); })
        .catch(error => callbacks.current.onError(error));
      return true;
    },
    onLoad: () => setLoaded(true),
    onLoadError: event => callbacks.current.onError(event),
  }, { shouldResizeCanvasToContainer: true, useDevicePixelRatio: true });

  useEffect(() => {
    plateSet.current = window.innerWidth * window.devicePixelRatio > 3400 ? '4x' : '2x';
  }, []);

  useEffect(() => {
    if (!rive || !loaded) return;
    const artboard = rive.contents?.artboards?.find(candidate => candidate.name === asset.artboard);
    const machines = artboard?.stateMachines?.map(machine => machine.name) ?? [];
    if (!artboard || !machines.includes(asset.stateMachine)) {
      callbacks.current.onError(new Error(`Incompatible IT Services Rive contract: ${asset.artboard} / ${asset.stateMachine}`));
      return;
    }
    callbacks.current.onReady();
  }, [asset.artboard, asset.stateMachine, loaded, rive]);

  // Focus → view model: hoverTarget plus the kit's per-hotspot effect, tweened on the host (see rive-expert local facts).
  useEffect(() => {
    if (!rive || !loaded) return;
    const vmi = rive.viewModelInstance;
    if (!vmi) return;
    const number = (name: string) => { const property = vmi.number(name); if (!property) throw new Error(`IT Services view model has no number ${name}`); return property; };
    const target = focus ? HOVER_TARGET[focus] ?? 0 : 0;
    number('hoverTarget').value = target;
    if (focus === 'status') { const flag = vmi.boolean('refreshDisplay'); if (flag) { flag.value = true; setTimeout(() => { flag.value = false; }, 120); } }
    const goals: Array<[string, number, number, number]> = [
      ['doorAmount', focus === 'deployment' ? 1 : 0, DOOR_MS, 0],
      ['laptopAmount', focus === 'racks' ? 1 : 0, LAPTOP_MS, 0],
      ['chairAmount', focus === 'workstations' ? 1 : 0, CHAIR_MS, 0],
      ...[1, 2, 3, 4, 5].map((i): [string, number, number, number] => [`drawer${i}Amount`, focus === 'toolcart' ? 1 : 0, DRAWER_MS, (i - 1) * DRAWER_STAGGER_MS]),
    ];
    const properties = goals.map(([name]) => number(name));
    const starts = properties.map(property => property.value);
    const t0 = performance.now();
    let frame = 0;
    const tick = (now: number) => {
      let pending = false;
      goals.forEach(([, goal, ms, delay], index) => {
        const t = Math.min(1, Math.max(0, (now - t0 - delay) / ms));
        properties[index]!.value = starts[index]! + (goal - starts[index]!) * ease(t);
        if (t < 1) pending = true;
      });
      if (pending) frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [focus, loaded, rive]);

  useEffect(() => {
    const element = container.current;
    if (!element) return;
    const observer = new IntersectionObserver(entries => {
      const entry = entries.find(candidate => candidate.target === element);
      if (entry) setVisible(entry.isIntersecting);
    }, { threshold: 0.05 });
    observer.observe(element);
    const handleVisibility = () => setDocumentHidden(document.hidden);
    document.addEventListener('visibilitychange', handleVisibility);
    return () => {
      observer.disconnect();
      document.removeEventListener('visibilitychange', handleVisibility);
    };
  }, []);

  const playing = loaded && visible && !documentHidden;
  useEffect(() => {
    if (!rive || !loaded) return;
    if (playing) rive.play(asset.stateMachine);
    else rive.pause();
  }, [asset.stateMachine, loaded, playing, rive]);

  useEffect(() => () => rive?.cleanup(), [rive]);

  return (
    <div
      ref={container}
      className="scene-rive it-services-rive"
      aria-hidden="true"
      data-playing={playing ? 'true' : 'false'}
      data-native-focus={focus ?? 'none'}
    >
      <RiveComponent />
    </div>
  );
}