923 lines
27 KiB
TypeScript
923 lines
27 KiB
TypeScript
import {
|
|
ArrowLeft,
|
|
Gift,
|
|
PartyPopper,
|
|
RotateCcw,
|
|
SkipForward,
|
|
} from 'lucide-react';
|
|
import {
|
|
type CSSProperties,
|
|
type PointerEvent as ReactPointerEvent,
|
|
useCallback,
|
|
useEffect,
|
|
useRef,
|
|
useState,
|
|
} from 'react';
|
|
|
|
import type {
|
|
BabyObjectMatchDraft,
|
|
BabyObjectMatchItemAsset,
|
|
BabyObjectMatchVisualAsset,
|
|
BabyObjectMatchVisualAssetKind,
|
|
} from '../../../packages/shared/src/contracts/edutainmentBabyObject';
|
|
import type {
|
|
MocapHandInput,
|
|
MocapInputCommand,
|
|
UseMocapInputResult,
|
|
} from '../../services/useMocapInput';
|
|
import { useMocapInput } from '../../services/useMocapInput';
|
|
import { ResolvedAssetImage } from '../ResolvedAssetImage';
|
|
|
|
const BABY_OBJECT_MATCH_SUCCESS_TARGET = 20;
|
|
const BABY_OBJECT_MATCH_GIFT_APPEAR_DURATION_MS = 620;
|
|
const BABY_OBJECT_MATCH_GIFT_OPEN_DURATION_MS = 640;
|
|
const BABY_OBJECT_MATCH_ITEM_APPEAR_DURATION_MS = 620;
|
|
const BABY_OBJECT_MATCH_FEEDBACK_DURATION_MS = 1180;
|
|
const BABY_OBJECT_MATCH_INTRO_SHOW_DURATION_MS = 2000;
|
|
const BABY_OBJECT_MATCH_INTRO_FLY_DURATION_MS = 720;
|
|
const BABY_OBJECT_MATCH_INTRO_READY_PAUSE_MS = 1000;
|
|
const BABY_OBJECT_MATCH_ITEM_CENTER: RuntimeHandPoint = { x: 0.5, y: 0.37 };
|
|
const BABY_OBJECT_MATCH_ITEM_GRAB_RADIUS = 0.14;
|
|
// 篮子仍只认主体附近，但在上一版核心区基础上扩大约 50%，避免贴近篮子后仍难以命中。
|
|
const BABY_OBJECT_MATCH_BASKET_DROP_Y = 0.62;
|
|
const BABY_OBJECT_MATCH_LEFT_BASKET_MAX_X = 0.36;
|
|
const BABY_OBJECT_MATCH_RIGHT_BASKET_MIN_X = 0.64;
|
|
|
|
type BabyObjectMatchRuntimeShellProps = {
|
|
draft: BabyObjectMatchDraft;
|
|
embedded?: boolean;
|
|
enableMocapInput?: boolean;
|
|
mocapInput?: UseMocapInputResult | null;
|
|
random?: BabyObjectMatchRandom;
|
|
onBack?: () => void;
|
|
onNextLevel?: () => void;
|
|
};
|
|
|
|
type BasketSide = 'left' | 'right';
|
|
type RuntimePhase =
|
|
| 'intro-left-showing'
|
|
| 'intro-left-flying'
|
|
| 'intro-left-ready'
|
|
| 'intro-right-showing'
|
|
| 'intro-right-flying'
|
|
| 'intro-right-ready'
|
|
| 'gift-entering'
|
|
| 'gift-opening'
|
|
| 'item-appearing'
|
|
| 'active'
|
|
| 'correct'
|
|
| 'wrong'
|
|
| 'complete';
|
|
|
|
type RuntimeRound = {
|
|
item: BabyObjectMatchItemAsset;
|
|
baskets: Record<BasketSide, BabyObjectMatchItemAsset>;
|
|
};
|
|
|
|
type RuntimeIntroShowcase = {
|
|
side: BasketSide;
|
|
item: BabyObjectMatchItemAsset;
|
|
isFlying: boolean;
|
|
};
|
|
|
|
type RuntimeHandPoint = {
|
|
x: number;
|
|
y: number;
|
|
};
|
|
|
|
type RuntimeHandRole = 'left' | 'right';
|
|
|
|
type RuntimeHands = Record<RuntimeHandRole, RuntimeHandPoint | null>;
|
|
|
|
type HeldItemState = {
|
|
hand: RuntimeHandRole;
|
|
};
|
|
|
|
type BabyObjectMatchRandom = () => number;
|
|
type BabyObjectMatchStageStyle = CSSProperties &
|
|
Partial<
|
|
Record<
|
|
| '--baby-object-ui-frame-image'
|
|
| '--baby-object-gift-box-image'
|
|
| '--baby-object-basket-image'
|
|
| '--baby-object-smoke-image',
|
|
string
|
|
>
|
|
>;
|
|
|
|
function pickRandomIndex(length: number, random: BabyObjectMatchRandom) {
|
|
if (length <= 1) {
|
|
return 0;
|
|
}
|
|
|
|
return Math.min(length - 1, Math.floor(random() * length));
|
|
}
|
|
|
|
function buildRuntimeRound(
|
|
draft: BabyObjectMatchDraft,
|
|
random: BabyObjectMatchRandom,
|
|
): RuntimeRound {
|
|
const items = draft.itemAssets;
|
|
const item = items[pickRandomIndex(items.length, random)] ?? items[0]!;
|
|
|
|
return {
|
|
item,
|
|
baskets: {
|
|
left: items[0]!,
|
|
right: items[1]!,
|
|
},
|
|
};
|
|
}
|
|
|
|
function mocapHandToRuntimePoint(
|
|
hand: MocapHandInput | null | undefined,
|
|
skeletonWrist: RuntimeHandPoint | null | undefined,
|
|
): RuntimeHandPoint | null {
|
|
if (skeletonWrist) {
|
|
return clampRuntimePoint(skeletonWrist);
|
|
}
|
|
|
|
if (!hand) {
|
|
return null;
|
|
}
|
|
|
|
// 骨架 wrist 缺失时再回退到手部 landmarks 的 wrist，最后才使用手部派生点。
|
|
const point = hand.wrist ?? hand;
|
|
return clampRuntimePoint({ x: point.x, y: point.y });
|
|
}
|
|
|
|
function clampRuntimePoint(point: RuntimeHandPoint): RuntimeHandPoint {
|
|
return {
|
|
x: Math.max(0, Math.min(1, point.x)),
|
|
y: Math.max(0, Math.min(1, point.y)),
|
|
};
|
|
}
|
|
|
|
function isRuntimePointTouchingItem(point: RuntimeHandPoint) {
|
|
const dx = point.x - BABY_OBJECT_MATCH_ITEM_CENTER.x;
|
|
const dy = point.y - BABY_OBJECT_MATCH_ITEM_CENTER.y;
|
|
return Math.sqrt(dx * dx + dy * dy) <= BABY_OBJECT_MATCH_ITEM_GRAB_RADIUS;
|
|
}
|
|
|
|
function isRuntimeControlPointerTarget(target: EventTarget | null) {
|
|
return (
|
|
target instanceof Element &&
|
|
target.closest(
|
|
'button, a, input, select, textarea, [role="button"], [data-baby-object-runtime-control="true"]',
|
|
) !== null
|
|
);
|
|
}
|
|
|
|
function resolveBasketSideForPoint(point: RuntimeHandPoint): BasketSide | null {
|
|
if (point.y < BABY_OBJECT_MATCH_BASKET_DROP_Y) {
|
|
return null;
|
|
}
|
|
if (point.x <= BABY_OBJECT_MATCH_LEFT_BASKET_MAX_X) {
|
|
return 'left';
|
|
}
|
|
if (point.x >= BABY_OBJECT_MATCH_RIGHT_BASKET_MIN_X) {
|
|
return 'right';
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function resolveMocapRuntimeHands(command: MocapInputCommand): RuntimeHands {
|
|
// 本地 mocap 当前按摄像头视角输出 handedness，这里换回用户身体视角用于显示双手。
|
|
return {
|
|
left: mocapHandToRuntimePoint(
|
|
command.rightHand,
|
|
command.bodyJoints?.rightWrist,
|
|
),
|
|
right: mocapHandToRuntimePoint(
|
|
command.leftHand,
|
|
command.bodyJoints?.leftWrist,
|
|
),
|
|
};
|
|
}
|
|
|
|
function buildMocapPacketKey(
|
|
command: MocapInputCommand,
|
|
rawPacketPreview: UseMocapInputResult['rawPacketPreview'],
|
|
) {
|
|
return rawPacketPreview?.receivedAtMs !== undefined
|
|
? `${rawPacketPreview.receivedAtMs}:${rawPacketPreview.text}`
|
|
: JSON.stringify(command);
|
|
}
|
|
|
|
function findVisualAsset(
|
|
draft: BabyObjectMatchDraft,
|
|
kind: BabyObjectMatchVisualAssetKind,
|
|
): BabyObjectMatchVisualAsset | null {
|
|
return (
|
|
draft.visualPackage?.assets.find((asset) => asset.assetKind === kind) ??
|
|
null
|
|
);
|
|
}
|
|
|
|
function buildCssImageValue(src: string) {
|
|
return `url("${src.replace(/"/gu, '\\"')}")`;
|
|
}
|
|
|
|
function resolveIntroShowcase(
|
|
phase: RuntimePhase,
|
|
draft: BabyObjectMatchDraft,
|
|
): RuntimeIntroShowcase | null {
|
|
if (phase === 'intro-left-showing' || phase === 'intro-left-flying') {
|
|
const item = draft.itemAssets[0];
|
|
return item
|
|
? { side: 'left', item, isFlying: phase === 'intro-left-flying' }
|
|
: null;
|
|
}
|
|
|
|
if (phase === 'intro-right-showing' || phase === 'intro-right-flying') {
|
|
const item = draft.itemAssets[1];
|
|
return item
|
|
? { side: 'right', item, isFlying: phase === 'intro-right-flying' }
|
|
: null;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function isBasketOptionReadyInIntro(side: BasketSide, phase: RuntimePhase) {
|
|
if (!phase.startsWith('intro-')) {
|
|
return true;
|
|
}
|
|
|
|
if (side === 'left') {
|
|
return (
|
|
phase === 'intro-left-ready' ||
|
|
phase === 'intro-right-showing' ||
|
|
phase === 'intro-right-flying' ||
|
|
phase === 'intro-right-ready'
|
|
);
|
|
}
|
|
|
|
return phase === 'intro-right-ready';
|
|
}
|
|
|
|
export function BabyObjectMatchRuntimeShell({
|
|
draft,
|
|
embedded = false,
|
|
enableMocapInput = true,
|
|
mocapInput = null,
|
|
random,
|
|
onBack,
|
|
onNextLevel,
|
|
}: BabyObjectMatchRuntimeShellProps) {
|
|
const randomRef = useRef<BabyObjectMatchRandom>(
|
|
random ?? (() => Math.random()),
|
|
);
|
|
const introTimerRef = useRef<number | null>(null);
|
|
const feedbackTimerRef = useRef<number | null>(null);
|
|
const handledMocapPacketKeyRef = useRef<string | null>(null);
|
|
const latestMocapPacketKeyRef = useRef<string | null>(null);
|
|
const [phase, setPhase] = useState<RuntimePhase>('intro-left-showing');
|
|
const [successCount, setSuccessCount] = useState(0);
|
|
const [round, setRound] = useState<RuntimeRound | null>(() =>
|
|
buildRuntimeRound(draft, randomRef.current),
|
|
);
|
|
const [feedbackText, setFeedbackText] = useState<string | null>(null);
|
|
const [lastTargetSide, setLastTargetSide] = useState<BasketSide | null>(null);
|
|
const [runtimeHands, setRuntimeHands] = useState<RuntimeHands>({
|
|
left: null,
|
|
right: null,
|
|
});
|
|
const [heldItem, setHeldItem] = useState<HeldItemState | null>(null);
|
|
const liveMocapInput = useMocapInput({
|
|
enabled: enableMocapInput && !mocapInput,
|
|
});
|
|
const resolvedMocapInput = mocapInput ?? liveMocapInput;
|
|
const backgroundAsset = findVisualAsset(draft, 'background');
|
|
const uiFrameAsset = findVisualAsset(draft, 'ui-frame');
|
|
const giftBoxAsset = findVisualAsset(draft, 'gift-box');
|
|
const basketAsset = findVisualAsset(draft, 'basket');
|
|
const smokeAsset = findVisualAsset(draft, 'smoke-puff');
|
|
const stageStyle: BabyObjectMatchStageStyle = {
|
|
...(uiFrameAsset
|
|
? {
|
|
'--baby-object-ui-frame-image': buildCssImageValue(
|
|
uiFrameAsset.imageSrc,
|
|
),
|
|
}
|
|
: {}),
|
|
...(giftBoxAsset
|
|
? {
|
|
'--baby-object-gift-box-image': buildCssImageValue(
|
|
giftBoxAsset.imageSrc,
|
|
),
|
|
}
|
|
: {}),
|
|
...(basketAsset
|
|
? {
|
|
'--baby-object-basket-image': buildCssImageValue(
|
|
basketAsset.imageSrc,
|
|
),
|
|
}
|
|
: {}),
|
|
...(smokeAsset
|
|
? {
|
|
'--baby-object-smoke-image': buildCssImageValue(
|
|
smokeAsset.imageSrc,
|
|
),
|
|
}
|
|
: {}),
|
|
};
|
|
|
|
const progressText = `${successCount}/${BABY_OBJECT_MATCH_SUCCESS_TARGET}`;
|
|
const isComplete = phase === 'complete';
|
|
const currentItem = round?.item ?? null;
|
|
const isJudgementOpen = phase === 'active';
|
|
const introShowcase = resolveIntroShowcase(phase, draft);
|
|
const heldPoint = heldItem ? runtimeHands[heldItem.hand] : null;
|
|
const shouldShowCurrentItem =
|
|
currentItem &&
|
|
(phase === 'item-appearing' ||
|
|
phase === 'active' ||
|
|
phase === 'correct' ||
|
|
phase === 'wrong');
|
|
const shouldShowGift = phase === 'gift-entering' || phase === 'gift-opening';
|
|
const shouldShowSmoke =
|
|
phase === 'gift-opening' || phase === 'item-appearing';
|
|
|
|
useEffect(() => {
|
|
randomRef.current = random ?? (() => Math.random());
|
|
}, [random]);
|
|
|
|
useEffect(() => {
|
|
latestMocapPacketKeyRef.current = resolvedMocapInput.latestCommand
|
|
? buildMocapPacketKey(
|
|
resolvedMocapInput.latestCommand,
|
|
resolvedMocapInput.rawPacketPreview,
|
|
)
|
|
: null;
|
|
}, [resolvedMocapInput.latestCommand, resolvedMocapInput.rawPacketPreview]);
|
|
|
|
const clearFeedbackTimer = useCallback(() => {
|
|
if (feedbackTimerRef.current !== null) {
|
|
window.clearTimeout(feedbackTimerRef.current);
|
|
feedbackTimerRef.current = null;
|
|
}
|
|
}, []);
|
|
|
|
const clearIntroTimer = useCallback(() => {
|
|
if (introTimerRef.current !== null) {
|
|
window.clearTimeout(introTimerRef.current);
|
|
introTimerRef.current = null;
|
|
}
|
|
}, []);
|
|
|
|
const resetInputPaths = useCallback(() => {
|
|
handledMocapPacketKeyRef.current = null;
|
|
setHeldItem(null);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
clearIntroTimer();
|
|
|
|
if (phase === 'intro-left-showing') {
|
|
introTimerRef.current = window.setTimeout(() => {
|
|
introTimerRef.current = null;
|
|
setPhase('intro-left-flying');
|
|
}, BABY_OBJECT_MATCH_INTRO_SHOW_DURATION_MS);
|
|
return clearIntroTimer;
|
|
}
|
|
|
|
if (phase === 'intro-left-flying') {
|
|
introTimerRef.current = window.setTimeout(() => {
|
|
introTimerRef.current = null;
|
|
setPhase('intro-left-ready');
|
|
}, BABY_OBJECT_MATCH_INTRO_FLY_DURATION_MS);
|
|
return clearIntroTimer;
|
|
}
|
|
|
|
if (phase === 'intro-left-ready') {
|
|
introTimerRef.current = window.setTimeout(() => {
|
|
introTimerRef.current = null;
|
|
setPhase('intro-right-showing');
|
|
}, BABY_OBJECT_MATCH_INTRO_READY_PAUSE_MS);
|
|
return clearIntroTimer;
|
|
}
|
|
|
|
if (phase === 'intro-right-showing') {
|
|
introTimerRef.current = window.setTimeout(() => {
|
|
introTimerRef.current = null;
|
|
setPhase('intro-right-flying');
|
|
}, BABY_OBJECT_MATCH_INTRO_SHOW_DURATION_MS);
|
|
return clearIntroTimer;
|
|
}
|
|
|
|
if (phase === 'intro-right-flying') {
|
|
introTimerRef.current = window.setTimeout(() => {
|
|
introTimerRef.current = null;
|
|
setPhase('intro-right-ready');
|
|
}, BABY_OBJECT_MATCH_INTRO_FLY_DURATION_MS);
|
|
return clearIntroTimer;
|
|
}
|
|
|
|
if (phase === 'intro-right-ready') {
|
|
introTimerRef.current = window.setTimeout(() => {
|
|
introTimerRef.current = null;
|
|
setPhase('gift-entering');
|
|
}, BABY_OBJECT_MATCH_INTRO_READY_PAUSE_MS);
|
|
return clearIntroTimer;
|
|
}
|
|
|
|
if (phase === 'gift-entering') {
|
|
introTimerRef.current = window.setTimeout(() => {
|
|
introTimerRef.current = null;
|
|
setPhase('gift-opening');
|
|
}, BABY_OBJECT_MATCH_GIFT_APPEAR_DURATION_MS);
|
|
return clearIntroTimer;
|
|
}
|
|
|
|
if (phase === 'gift-opening') {
|
|
introTimerRef.current = window.setTimeout(() => {
|
|
introTimerRef.current = null;
|
|
setPhase('item-appearing');
|
|
}, BABY_OBJECT_MATCH_GIFT_OPEN_DURATION_MS);
|
|
return clearIntroTimer;
|
|
}
|
|
|
|
if (phase === 'item-appearing') {
|
|
introTimerRef.current = window.setTimeout(() => {
|
|
introTimerRef.current = null;
|
|
resetInputPaths();
|
|
handledMocapPacketKeyRef.current = latestMocapPacketKeyRef.current;
|
|
setPhase('active');
|
|
}, BABY_OBJECT_MATCH_ITEM_APPEAR_DURATION_MS);
|
|
return clearIntroTimer;
|
|
}
|
|
|
|
return clearIntroTimer;
|
|
}, [clearIntroTimer, phase, resetInputPaths]);
|
|
|
|
const resetRuntime = useCallback(() => {
|
|
clearIntroTimer();
|
|
clearFeedbackTimer();
|
|
resetInputPaths();
|
|
setSuccessCount(0);
|
|
setRound(buildRuntimeRound(draft, randomRef.current));
|
|
setFeedbackText(null);
|
|
setLastTargetSide(null);
|
|
setPhase('intro-left-showing');
|
|
}, [clearFeedbackTimer, clearIntroTimer, draft, resetInputPaths]);
|
|
|
|
const finishFeedback = useCallback(
|
|
(nextSuccessCount: number, wasCorrect: boolean) => {
|
|
clearIntroTimer();
|
|
clearFeedbackTimer();
|
|
feedbackTimerRef.current = window.setTimeout(() => {
|
|
feedbackTimerRef.current = null;
|
|
if (wasCorrect) {
|
|
if (nextSuccessCount >= BABY_OBJECT_MATCH_SUCCESS_TARGET) {
|
|
setFeedbackText('恭喜你！小朋友！');
|
|
setRound(null);
|
|
setPhase('complete');
|
|
return;
|
|
}
|
|
|
|
setRound(buildRuntimeRound(draft, randomRef.current));
|
|
setFeedbackText(null);
|
|
setLastTargetSide(null);
|
|
resetInputPaths();
|
|
setPhase('gift-entering');
|
|
return;
|
|
}
|
|
|
|
setFeedbackText(null);
|
|
setLastTargetSide(null);
|
|
resetInputPaths();
|
|
setPhase('active');
|
|
}, BABY_OBJECT_MATCH_FEEDBACK_DURATION_MS);
|
|
},
|
|
[clearFeedbackTimer, clearIntroTimer, draft, resetInputPaths],
|
|
);
|
|
|
|
const sendItemToBasket = useCallback(
|
|
(side: BasketSide) => {
|
|
if (!isJudgementOpen || !round) {
|
|
return;
|
|
}
|
|
|
|
const isCorrect = round.baskets[side].itemId === round.item.itemId;
|
|
setLastTargetSide(side);
|
|
if (isCorrect) {
|
|
const nextSuccessCount = successCount + 1;
|
|
setSuccessCount(nextSuccessCount);
|
|
setFeedbackText('真棒');
|
|
setPhase('correct');
|
|
finishFeedback(nextSuccessCount, true);
|
|
return;
|
|
}
|
|
|
|
setFeedbackText('再想一想吧');
|
|
setPhase('wrong');
|
|
finishFeedback(successCount, false);
|
|
},
|
|
[finishFeedback, isJudgementOpen, round, successCount],
|
|
);
|
|
|
|
useEffect(
|
|
() => () => {
|
|
clearIntroTimer();
|
|
clearFeedbackTimer();
|
|
},
|
|
[clearFeedbackTimer, clearIntroTimer],
|
|
);
|
|
|
|
useEffect(() => {
|
|
const command = resolvedMocapInput.latestCommand;
|
|
if (!command || isComplete) {
|
|
return;
|
|
}
|
|
|
|
const packetKey = buildMocapPacketKey(
|
|
command,
|
|
resolvedMocapInput.rawPacketPreview,
|
|
);
|
|
if (handledMocapPacketKeyRef.current === packetKey) {
|
|
return;
|
|
}
|
|
handledMocapPacketKeyRef.current = packetKey;
|
|
|
|
const nextHands = resolveMocapRuntimeHands(command);
|
|
setRuntimeHands(nextHands);
|
|
|
|
if (!isJudgementOpen) {
|
|
resetInputPaths();
|
|
return;
|
|
}
|
|
|
|
const currentHeldItem = heldItem;
|
|
if (currentHeldItem) {
|
|
const heldHandPoint = nextHands[currentHeldItem.hand];
|
|
const targetSide = heldHandPoint
|
|
? resolveBasketSideForPoint(heldHandPoint)
|
|
: null;
|
|
if (!targetSide) {
|
|
return;
|
|
}
|
|
sendItemToBasket(targetSide);
|
|
resetInputPaths();
|
|
return;
|
|
}
|
|
|
|
for (const hand of ['left', 'right'] as const) {
|
|
const point = nextHands[hand];
|
|
if (!point || !isRuntimePointTouchingItem(point)) {
|
|
continue;
|
|
}
|
|
setHeldItem({ hand });
|
|
return;
|
|
}
|
|
}, [
|
|
heldItem,
|
|
isComplete,
|
|
isJudgementOpen,
|
|
resetInputPaths,
|
|
resolvedMocapInput.latestCommand,
|
|
resolvedMocapInput.rawPacketPreview,
|
|
sendItemToBasket,
|
|
]);
|
|
|
|
const getPointerUnitPoint = (
|
|
event: ReactPointerEvent<HTMLElement>,
|
|
element: HTMLElement,
|
|
): RuntimeHandPoint => {
|
|
const rect = element.getBoundingClientRect();
|
|
const width = rect.width || 1;
|
|
const height = rect.height || 1;
|
|
return clampRuntimePoint({
|
|
x: (event.clientX - rect.left) / width,
|
|
y: (event.clientY - rect.top) / height,
|
|
});
|
|
};
|
|
|
|
const handlePointerDown = (event: ReactPointerEvent<HTMLElement>) => {
|
|
if (isRuntimeControlPointerTarget(event.target)) {
|
|
return;
|
|
}
|
|
|
|
if (!isJudgementOpen) {
|
|
return;
|
|
}
|
|
|
|
if (event.button !== 0 && event.button !== 2) {
|
|
return;
|
|
}
|
|
|
|
const hand: RuntimeHandRole = event.button === 2 ? 'right' : 'left';
|
|
const point = getPointerUnitPoint(event, event.currentTarget);
|
|
setRuntimeHands((current) => ({ ...current, [hand]: point }));
|
|
if (isRuntimePointTouchingItem(point)) {
|
|
setHeldItem({ hand });
|
|
}
|
|
event.preventDefault();
|
|
if (typeof event.currentTarget.setPointerCapture === 'function') {
|
|
event.currentTarget.setPointerCapture(event.pointerId);
|
|
}
|
|
};
|
|
|
|
const handlePointerMove = (event: ReactPointerEvent<HTMLElement>) => {
|
|
if (isRuntimeControlPointerTarget(event.target)) {
|
|
return;
|
|
}
|
|
|
|
if (!isJudgementOpen) {
|
|
return;
|
|
}
|
|
|
|
if (event.buttons !== 1 && event.buttons !== 2) {
|
|
return;
|
|
}
|
|
|
|
const hand: RuntimeHandRole = event.buttons === 2 ? 'right' : 'left';
|
|
const point = getPointerUnitPoint(event, event.currentTarget);
|
|
setRuntimeHands((current) => ({ ...current, [hand]: point }));
|
|
if (!heldItem && isRuntimePointTouchingItem(point)) {
|
|
setHeldItem({ hand });
|
|
return;
|
|
}
|
|
|
|
if (!heldItem || heldItem.hand !== hand) {
|
|
return;
|
|
}
|
|
|
|
const targetSide = resolveBasketSideForPoint(point);
|
|
if (targetSide) {
|
|
sendItemToBasket(targetSide);
|
|
resetInputPaths();
|
|
}
|
|
};
|
|
|
|
const handlePointerUp = (event: ReactPointerEvent<HTMLElement>) => {
|
|
if (
|
|
typeof event.currentTarget.hasPointerCapture === 'function' &&
|
|
event.currentTarget.hasPointerCapture(event.pointerId)
|
|
) {
|
|
event.currentTarget.releasePointerCapture(event.pointerId);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main
|
|
className={`baby-object-runtime${embedded ? ' baby-object-runtime--embedded' : ''}`}
|
|
data-testid="baby-object-match-runtime"
|
|
>
|
|
<section
|
|
className={`baby-object-runtime__stage${
|
|
backgroundAsset ? ' baby-object-runtime__stage--skinned' : ''
|
|
}`}
|
|
style={stageStyle}
|
|
onPointerDown={handlePointerDown}
|
|
onPointerMove={handlePointerMove}
|
|
onPointerUp={handlePointerUp}
|
|
onPointerCancel={handlePointerUp}
|
|
onContextMenu={(event) => event.preventDefault()}
|
|
>
|
|
{backgroundAsset ? (
|
|
<ResolvedAssetImage
|
|
src={backgroundAsset.imageSrc}
|
|
alt=""
|
|
className="baby-object-runtime__background-image"
|
|
data-testid="baby-object-background-image"
|
|
aria-hidden="true"
|
|
/>
|
|
) : null}
|
|
|
|
{onBack ? (
|
|
<button
|
|
type="button"
|
|
className="baby-object-runtime__back"
|
|
data-baby-object-runtime-control="true"
|
|
onClick={onBack}
|
|
aria-label="返回"
|
|
title="返回"
|
|
>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</button>
|
|
) : null}
|
|
|
|
<div className="baby-object-runtime__subtitle" role="status">
|
|
将物品放入对应的篮子里
|
|
</div>
|
|
|
|
<div className="baby-object-runtime__counter" aria-label="成功次数">
|
|
{progressText}
|
|
</div>
|
|
|
|
{shouldShowGift ? (
|
|
<div
|
|
className={`baby-object-runtime__gift${
|
|
giftBoxAsset ? ' baby-object-runtime__gift--skinned' : ''
|
|
}${
|
|
phase === 'gift-entering'
|
|
? ' baby-object-runtime__gift--entering'
|
|
: ''
|
|
}${
|
|
phase === 'gift-opening'
|
|
? ' baby-object-runtime__gift--opening baby-object-runtime__gift--open'
|
|
: ''
|
|
}`}
|
|
aria-label="礼物盒"
|
|
>
|
|
{giftBoxAsset ? (
|
|
<ResolvedAssetImage
|
|
src={giftBoxAsset.imageSrc}
|
|
alt="礼物盒"
|
|
className="baby-object-runtime__gift-image"
|
|
/>
|
|
) : (
|
|
<Gift className="baby-object-runtime__gift-icon" />
|
|
)}
|
|
</div>
|
|
) : null}
|
|
|
|
{shouldShowSmoke ? (
|
|
<div
|
|
className={`baby-object-runtime__smoke${
|
|
smokeAsset ? ' baby-object-runtime__smoke--skinned' : ''
|
|
}${
|
|
phase === 'item-appearing'
|
|
? ' baby-object-runtime__smoke--releasing'
|
|
: ''
|
|
}`}
|
|
data-testid="baby-object-smoke-effect"
|
|
aria-hidden="true"
|
|
/>
|
|
) : null}
|
|
|
|
{introShowcase ? (
|
|
<div
|
|
className={`baby-object-runtime__intro-item baby-object-runtime__intro-item--${introShowcase.side}${
|
|
introShowcase.isFlying
|
|
? ' baby-object-runtime__intro-item--flying'
|
|
: ''
|
|
}`}
|
|
data-testid="baby-object-intro-item"
|
|
aria-live="polite"
|
|
>
|
|
<ResolvedAssetImage
|
|
src={introShowcase.item.imageSrc}
|
|
alt={introShowcase.item.itemName}
|
|
className="baby-object-runtime__intro-item-image"
|
|
/>
|
|
<span className="baby-object-runtime__intro-item-name">
|
|
{introShowcase.item.itemName}
|
|
</span>
|
|
</div>
|
|
) : null}
|
|
|
|
<div
|
|
className={`baby-object-runtime__item${
|
|
shouldShowCurrentItem ? ' baby-object-runtime__item--visible' : ''
|
|
}${heldPoint ? ' baby-object-runtime__item--held' : ''}${
|
|
phase === 'item-appearing'
|
|
? ' baby-object-runtime__item--appearing'
|
|
: ''
|
|
}${
|
|
phase === 'correct'
|
|
? ` baby-object-runtime__item--to-${lastTargetSide ?? 'left'}`
|
|
: phase === 'wrong'
|
|
? ` baby-object-runtime__item--wrong-${lastTargetSide ?? 'left'}`
|
|
: ''
|
|
}`}
|
|
data-testid="baby-object-current-item"
|
|
aria-live="polite"
|
|
style={
|
|
heldPoint
|
|
? ({
|
|
'--baby-object-held-x': `${heldPoint.x * 100}%`,
|
|
'--baby-object-held-y': `${heldPoint.y * 100}%`,
|
|
} as CSSProperties)
|
|
: undefined
|
|
}
|
|
>
|
|
{shouldShowCurrentItem ? (
|
|
<>
|
|
<ResolvedAssetImage
|
|
src={currentItem.imageSrc}
|
|
alt={currentItem.itemName}
|
|
className="baby-object-runtime__item-image"
|
|
/>
|
|
<span className="baby-object-runtime__item-name">
|
|
{currentItem.itemName}
|
|
</span>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="baby-object-runtime__hands" aria-hidden="true">
|
|
{(['left', 'right'] as const).map((hand) => {
|
|
const point = runtimeHands[hand];
|
|
const isHoldingHand = heldItem?.hand === hand;
|
|
if (!point) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key={hand}
|
|
className={`baby-object-runtime__hand baby-object-runtime__hand--${hand}${
|
|
isHoldingHand
|
|
? ` baby-object-runtime__hand--holding baby-object-runtime__hand--holding-${hand}-corner`
|
|
: ''
|
|
}`}
|
|
data-testid={`baby-object-${hand}-hand`}
|
|
style={
|
|
{
|
|
'--baby-object-hand-x': `${point.x * 100}%`,
|
|
'--baby-object-hand-y': `${point.y * 100}%`,
|
|
} as CSSProperties
|
|
}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{feedbackText ? (
|
|
<div
|
|
className={`baby-object-runtime__feedback baby-object-runtime__feedback--${phase}`}
|
|
>
|
|
{feedbackText}
|
|
</div>
|
|
) : null}
|
|
|
|
{isComplete ? (
|
|
<div className="baby-object-runtime__complete" role="dialog">
|
|
<PartyPopper className="h-8 w-8" />
|
|
<div>恭喜你！小朋友！</div>
|
|
<div className="baby-object-runtime__complete-actions">
|
|
<button type="button" onClick={resetRuntime}>
|
|
<RotateCcw className="h-4 w-4" />
|
|
再来一次
|
|
</button>
|
|
<button type="button" onClick={onNextLevel}>
|
|
<SkipForward className="h-4 w-4" />
|
|
下一关
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="baby-object-runtime__baskets">
|
|
{(['left', 'right'] as const).map((side) => {
|
|
const basketItem =
|
|
round?.baskets[side] ?? draft.itemAssets[side === 'left' ? 0 : 1];
|
|
const isOptionReady = isBasketOptionReadyInIntro(side, phase);
|
|
|
|
return (
|
|
<div
|
|
key={side}
|
|
className={`baby-object-runtime__basket baby-object-runtime__basket--${side}${
|
|
phase === 'correct' && lastTargetSide === side
|
|
? ' baby-object-runtime__basket--correct'
|
|
: ''
|
|
}`}
|
|
aria-label={`${side === 'left' ? '左侧' : '右侧'}篮子 ${basketItem.itemName}`}
|
|
>
|
|
<div
|
|
className={`baby-object-runtime__basket-option${
|
|
isOptionReady
|
|
? ' baby-object-runtime__basket-option--ready'
|
|
: ''
|
|
}`}
|
|
>
|
|
<div className="baby-object-runtime__basket-icon">
|
|
<ResolvedAssetImage
|
|
src={basketItem.imageSrc}
|
|
alt={basketItem.itemName}
|
|
className="baby-object-runtime__basket-image"
|
|
/>
|
|
</div>
|
|
<span className="baby-object-runtime__basket-name">
|
|
{basketItem.itemName}
|
|
</span>
|
|
</div>
|
|
<div
|
|
className={`baby-object-runtime__basket-body${
|
|
basketAsset
|
|
? ' baby-object-runtime__basket-body--skinned'
|
|
: ''
|
|
}`}
|
|
>
|
|
{basketAsset ? (
|
|
<ResolvedAssetImage
|
|
src={basketAsset.imageSrc}
|
|
alt=""
|
|
className="baby-object-runtime__basket-shell-image"
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default BabyObjectMatchRuntimeShell;
|