Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/thatstupidcomputer / apps/web/src/animation/desktop/DesktopCharacter.tsx |
| Date | Not specified in source |
| Repository | Janady13/thatstupidcomputer |
| Revision | 57555cde46910102dd25d6c1c1fb2c359e9655bd |
| Branch | main |
| Path or archive member | apps/web/src/animation/desktop/DesktopCharacter.tsx |
| Original SHA-256 | c80890deccbc82488a283d5a1784064fb5dec2778aa1d91a336c74dce6e36da8 |
| Git blob SHA | 9bb3fbea3c0503b3b0e4d5bf185064f9b0b76c1b |
| Reading-copy SHA-256 | c80890deccbc82488a283d5a1784064fb5dec2778aa1d91a336c74dce6e36da8 |
Recovered source transcript
Download complete source text ↓26 lines · 2.2 KB
'use client';
import { useEffect, useId, useRef } from 'react';
import { ComputerGeometry } from './ComputerGeometry';
import type { ComputerMotion, CharacterState } from './computer-motion.mjs';
import cablePoses from './cable-poses.json';
import { DEFAULT_PALETTE } from '../office/catalog';
interface Props { state?: CharacterState; paused?: boolean; replay?: number; attitudeEnabled?: boolean; className?: string; onComplete?: (state: CharacterState) => void; onError?: (error: unknown) => void }
export function DesktopCharacter({ state = 'idle', paused = false, replay = 0, attitudeEnabled = false, className = '', onComplete, onError }: Props) {
const generated = useId(); const id = 'desktop-' + Array.from(generated, c => c.codePointAt(0)!.toString(16)).join('-');
const svg = useRef<SVGSVGElement>(null); const controller = useRef<ComputerMotion | null>(null);
const latest = useRef({ state, paused, attitudeEnabled, onComplete, onError }); latest.current = { state, paused, attitudeEnabled, onComplete, onError };
useEffect(() => {
let cancelled = false; let local: ComputerMotion | null = null;
void import('./computer-motion.mjs').then(({ ComputerMotion: Player }) => {
if (cancelled || !svg.current) return;
local = new Player(svg.current, { cables: cablePoses, state: latest.current.state, autoplay: false, paused: latest.current.paused, attitudeEnabled: latest.current.attitudeEnabled, onComplete: completed => latest.current.onComplete?.(completed) });
controller.current = local; if (latest.current.paused) local.pause();
}).catch(error => { if (!cancelled) latest.current.onError?.(error); });
return () => { cancelled = true; local?.destroy(); if (controller.current === local) controller.current = null; };
}, []);
useEffect(() => { controller.current?.setAttitudeEnabled(attitudeEnabled); }, [attitudeEnabled]);
useEffect(() => { controller.current?.setState(state); }, [state, replay]);
useEffect(() => { if (paused) controller.current?.pause(); else controller.current?.resume(); }, [paused]);
return <div className={`tsc-desktop-actor ${className}`}><ComputerGeometry idPrefix={id} palette={DEFAULT_PALETTE} artRef={svg} /></div>;
}