124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
import { c as _c } from "react/compiler-runtime";
|
|
import * as React from 'react';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { Box } from '../../ink.js';
|
|
import { getInitialSettings } from '../../utils/settings/settings.js';
|
|
import { Clawd, type ClawdPose } from './Clawd.js';
|
|
type Frame = {
|
|
pose: ClawdPose;
|
|
offset: number;
|
|
};
|
|
|
|
/** Hold a pose for n frames (60ms each). */
|
|
function hold(pose: ClawdPose, offset: number, frames: number): Frame[] {
|
|
return Array.from({
|
|
length: frames
|
|
}, () => ({
|
|
pose,
|
|
offset
|
|
}));
|
|
}
|
|
|
|
// Offset semantics: marginTop in a fixed-height-3 container. 0 = normal,
|
|
// 1 = crouched. Container height stays 3 so the layout never shifts; during
|
|
// a crouch (offset=1) Clawd's feet row dips below the container and gets
|
|
// clipped — reads as "ducking below the frame" before springing back up.
|
|
|
|
// Click animation: crouch, then spring up with both arms raised. Twice.
|
|
const JUMP_WAVE: readonly Frame[] = [...hold('default', 1, 2),
|
|
// crouch
|
|
...hold('arms-up', 0, 3),
|
|
// spring!
|
|
...hold('default', 0, 1), ...hold('default', 1, 2),
|
|
// crouch again
|
|
...hold('arms-up', 0, 3),
|
|
// spring!
|
|
...hold('default', 0, 1)];
|
|
|
|
// Click animation: glance right, then left, then back.
|
|
const LOOK_AROUND: readonly Frame[] = [...hold('look-right', 0, 5), ...hold('look-left', 0, 5), ...hold('default', 0, 1)];
|
|
const CLICK_ANIMATIONS: readonly (readonly Frame[])[] = [JUMP_WAVE, LOOK_AROUND];
|
|
const IDLE: Frame = {
|
|
pose: 'default',
|
|
offset: 0
|
|
};
|
|
const FRAME_MS = 60;
|
|
const incrementFrame = (i: number) => i + 1;
|
|
const CLAWD_HEIGHT = 3;
|
|
|
|
/**
|
|
* Clawd with click-triggered animations (crouch-jump with arms up, or
|
|
* look-around). Container height is fixed at CLAWD_HEIGHT — same footprint
|
|
* as a bare `<Clawd />` — so the surrounding layout never shifts. During a
|
|
* crouch only the feet row clips (see comment above). Click only fires when
|
|
* mouse tracking is enabled (i.e. inside `<AlternateScreen>` / fullscreen);
|
|
* elsewhere this renders and behaves identically to plain `<Clawd />`.
|
|
*/
|
|
export function AnimatedClawd() {
|
|
const $ = _c(8);
|
|
const {
|
|
pose,
|
|
bounceOffset,
|
|
onClick
|
|
} = useClawdAnimation();
|
|
let t0;
|
|
if ($[0] !== pose) {
|
|
t0 = <Clawd pose={pose} />;
|
|
$[0] = pose;
|
|
$[1] = t0;
|
|
} else {
|
|
t0 = $[1];
|
|
}
|
|
let t1;
|
|
if ($[2] !== bounceOffset || $[3] !== t0) {
|
|
t1 = <Box marginTop={bounceOffset} flexShrink={0}>{t0}</Box>;
|
|
$[2] = bounceOffset;
|
|
$[3] = t0;
|
|
$[4] = t1;
|
|
} else {
|
|
t1 = $[4];
|
|
}
|
|
let t2;
|
|
if ($[5] !== onClick || $[6] !== t1) {
|
|
t2 = <Box height={CLAWD_HEIGHT} flexDirection="column" onClick={onClick}>{t1}</Box>;
|
|
$[5] = onClick;
|
|
$[6] = t1;
|
|
$[7] = t2;
|
|
} else {
|
|
t2 = $[7];
|
|
}
|
|
return t2;
|
|
}
|
|
function useClawdAnimation(): {
|
|
pose: ClawdPose;
|
|
bounceOffset: number;
|
|
onClick: () => void;
|
|
} {
|
|
// Read once at mount — no useSettings() subscription, since that would
|
|
// re-render on any settings change.
|
|
const [reducedMotion] = useState(() => getInitialSettings().prefersReducedMotion ?? false);
|
|
const [frameIndex, setFrameIndex] = useState(-1);
|
|
const sequenceRef = useRef<readonly Frame[]>(JUMP_WAVE);
|
|
const onClick = () => {
|
|
if (reducedMotion || frameIndex !== -1) return;
|
|
sequenceRef.current = CLICK_ANIMATIONS[Math.floor(Math.random() * CLICK_ANIMATIONS.length)]!;
|
|
setFrameIndex(0);
|
|
};
|
|
useEffect(() => {
|
|
if (frameIndex === -1) return;
|
|
if (frameIndex >= sequenceRef.current.length) {
|
|
setFrameIndex(-1);
|
|
return;
|
|
}
|
|
const timer = setTimeout(setFrameIndex, FRAME_MS, incrementFrame);
|
|
return () => clearTimeout(timer);
|
|
}, [frameIndex]);
|
|
const seq = sequenceRef.current;
|
|
const current = frameIndex >= 0 && frameIndex < seq.length ? seq[frameIndex]! : IDLE;
|
|
return {
|
|
pose: current.pose,
|
|
bounceOffset: current.offset,
|
|
onClick
|
|
};
|
|
}
|