kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
521 lines
17 KiB
TypeScript
521 lines
17 KiB
TypeScript
import { ArrowLeft, CircleHelp, Loader2, RotateCcw, Share2 } from 'lucide-react';
|
|
import {
|
|
type PointerEvent,
|
|
useCallback,
|
|
useEffect,
|
|
useRef,
|
|
useState,
|
|
} from 'react';
|
|
|
|
import type {
|
|
BigFishAssetSlotResponse,
|
|
BigFishRuntimeEntityResponse,
|
|
BigFishRuntimeSnapshotResponse,
|
|
SubmitBigFishInputRequest,
|
|
} from '../../../packages/shared/src/contracts/bigFish';
|
|
import { buildPublicWorkStagePath } from '../../routing/appPageRoutes';
|
|
import { CopyFeedbackButton } from '../common/CopyFeedbackButton';
|
|
import { UnifiedModal } from '../common/UnifiedModal';
|
|
import { useCopyFeedback } from '../common/useCopyFeedback';
|
|
import { ResolvedAssetImage } from '../ResolvedAssetImage';
|
|
|
|
type TouchOrigin = {
|
|
pointerId: number;
|
|
x: number;
|
|
y: number;
|
|
};
|
|
|
|
type TouchSample = TouchOrigin;
|
|
|
|
type BigFishRuntimeShellProps = {
|
|
run: BigFishRuntimeSnapshotResponse | null;
|
|
assetSlots?: BigFishAssetSlotResponse[];
|
|
shareTitle?: string | null;
|
|
sharePublicWorkCode?: string | null;
|
|
isBusy?: boolean;
|
|
error?: string | null;
|
|
embedded?: boolean;
|
|
onBack: () => void;
|
|
onRestart?: () => void;
|
|
onSubmitInput: (payload: SubmitBigFishInputRequest) => void;
|
|
};
|
|
|
|
function clamp(value: number, min: number, max: number) {
|
|
return Math.max(min, Math.min(max, value));
|
|
}
|
|
|
|
function normalizeVector(x: number, y: number) {
|
|
const length = Math.hypot(x, y);
|
|
if (length <= 0.001) {
|
|
return { x: 0, y: 0 };
|
|
}
|
|
const capped = Math.min(1, length);
|
|
return {
|
|
x: (x / length) * capped,
|
|
y: (y / length) * capped,
|
|
};
|
|
}
|
|
|
|
function resolveDirectionFromSample(previous: TouchSample, current: TouchSample) {
|
|
const deadZone = 4;
|
|
const deltaX = current.x - previous.x;
|
|
const deltaY = current.y - previous.y;
|
|
if (!Number.isFinite(deltaX) || !Number.isFinite(deltaY)) {
|
|
return { x: 0, y: 0 };
|
|
}
|
|
if (Math.hypot(deltaX, deltaY) < deadZone) {
|
|
return { x: 0, y: 0 };
|
|
}
|
|
return normalizeVector(deltaX, deltaY);
|
|
}
|
|
|
|
function projectEntity(
|
|
entity: BigFishRuntimeEntityResponse,
|
|
run: BigFishRuntimeSnapshotResponse,
|
|
) {
|
|
const viewportWidth = 360;
|
|
const viewportHeight = 640;
|
|
const worldWidth = 420;
|
|
const worldHeight = 760;
|
|
const x =
|
|
viewportWidth / 2 +
|
|
((entity.position.x - run.cameraCenter.x) / worldWidth) * viewportWidth;
|
|
const y =
|
|
viewportHeight / 2 +
|
|
((entity.position.y - run.cameraCenter.y) / worldHeight) * viewportHeight;
|
|
|
|
return {
|
|
left: `${clamp(x, -40, viewportWidth + 40)}px`,
|
|
top: `${clamp(y, -40, viewportHeight + 40)}px`,
|
|
width: `${Math.max(22, entity.radius * 2.2)}px`,
|
|
height: `${Math.max(22, entity.radius * 2.2)}px`,
|
|
};
|
|
}
|
|
|
|
function findBigFishAssetSlot(
|
|
slots: BigFishAssetSlotResponse[],
|
|
assetKind: string,
|
|
level?: number,
|
|
motionKey?: string,
|
|
) {
|
|
return slots.find((slot) => {
|
|
if (slot.assetKind !== assetKind || slot.status !== 'ready') {
|
|
return false;
|
|
}
|
|
if (level !== undefined && slot.level !== level) {
|
|
return false;
|
|
}
|
|
if (motionKey !== undefined && slot.motionKey !== motionKey) {
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
}
|
|
|
|
function resolveRuntimeEntityAsset(
|
|
entity: BigFishRuntimeEntityResponse,
|
|
assetSlots: BigFishAssetSlotResponse[],
|
|
) {
|
|
return (
|
|
findBigFishAssetSlot(assetSlots, 'level_motion', entity.level, 'move_swim') ??
|
|
findBigFishAssetSlot(assetSlots, 'level_motion', entity.level, 'idle_float') ??
|
|
findBigFishAssetSlot(assetSlots, 'level_main_image', entity.level)
|
|
);
|
|
}
|
|
|
|
function resolveSettlementCopy(run: BigFishRuntimeSnapshotResponse) {
|
|
if (run.status === 'won') {
|
|
return {
|
|
title: '通关完成',
|
|
message: `已成长到 Lv.${run.playerLevel}，本轮生态征服完成。`,
|
|
tone: 'from-emerald-300/28 via-cyan-300/18 to-white/10',
|
|
};
|
|
}
|
|
if (run.status === 'failed') {
|
|
return {
|
|
title: '本轮失败',
|
|
message: '己方鱼群已经耗尽，重新调整路线再来一次。',
|
|
tone: 'from-rose-300/30 via-orange-300/16 to-white/10',
|
|
};
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function BigFishRuleModal({
|
|
open,
|
|
onClose,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}) {
|
|
return (
|
|
<UnifiedModal
|
|
open={open}
|
|
title="玩法规则"
|
|
onClose={onClose}
|
|
size="sm"
|
|
zIndexClassName="z-[140]"
|
|
panelClassName="rounded-[1.25rem]"
|
|
bodyClassName="px-4 py-3 sm:px-5 sm:py-4"
|
|
>
|
|
<div className="space-y-3 text-sm leading-6 text-[var(--platform-text-base)]">
|
|
<div className="rounded-2xl bg-cyan-50 px-4 py-3 text-cyan-950">
|
|
拖动屏幕改变方向，角色会按固定速度移动。
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<div>低级或同级野生实体会被收编。</div>
|
|
<div>更高级野生实体会吃掉碰到的己方实体。</div>
|
|
<div>3 个同级己方实体会自动合成更高一级。</div>
|
|
<div>拥有最高等级实体后通关，己方实体归零后失败。</div>
|
|
</div>
|
|
</div>
|
|
</UnifiedModal>
|
|
);
|
|
}
|
|
|
|
function BigFishEntityDot({
|
|
entity,
|
|
run,
|
|
owned,
|
|
assetSlots,
|
|
}: {
|
|
entity: BigFishRuntimeEntityResponse;
|
|
run: BigFishRuntimeSnapshotResponse;
|
|
owned: boolean;
|
|
assetSlots: BigFishAssetSlotResponse[];
|
|
}) {
|
|
const projected = projectEntity(entity, run);
|
|
const isLeader = run.leaderEntityId === entity.entityId;
|
|
const assetSlot = resolveRuntimeEntityAsset(entity, assetSlots);
|
|
const entityImageSrc = assetSlot?.assetUrl?.trim() || null;
|
|
|
|
return (
|
|
<div
|
|
className={`absolute -translate-x-1/2 -translate-y-1/2 transition-all ${
|
|
entityImageSrc
|
|
? owned
|
|
? isLeader
|
|
? 'drop-shadow-[0_10px_16px_rgba(8,47,73,0.45)]'
|
|
: 'drop-shadow-[0_8px_12px_rgba(8,47,73,0.32)]'
|
|
: entity.level > run.playerLevel
|
|
? 'drop-shadow-[0_8px_12px_rgba(127,29,29,0.36)]'
|
|
: 'drop-shadow-[0_8px_12px_rgba(6,78,59,0.3)]'
|
|
: owned
|
|
? isLeader
|
|
? 'border-cyan-100 bg-cyan-300 shadow-cyan-950/30'
|
|
: 'border-cyan-100/70 bg-cyan-500/88 shadow-cyan-950/24'
|
|
: entity.level > run.playerLevel
|
|
? 'border-rose-100/70 bg-rose-500/88 shadow-rose-950/24'
|
|
: 'border-emerald-100/70 bg-emerald-400/88 shadow-emerald-950/20'
|
|
}`}
|
|
style={projected}
|
|
>
|
|
{entityImageSrc ? (
|
|
<>
|
|
<ResolvedAssetImage
|
|
src={entityImageSrc}
|
|
alt={`Lv.${entity.level} 实体`}
|
|
className={`h-full w-full object-contain ${
|
|
owned && isLeader ? 'scale-110' : ''
|
|
}`}
|
|
/>
|
|
</>
|
|
) : null}
|
|
<span className="absolute inset-0 flex items-center justify-center text-[0.62rem] font-black text-white [text-shadow:0_1px_2px_rgba(2,6,23,0.9)]">
|
|
{entity.level}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function BigFishRuntimeShell({
|
|
run,
|
|
assetSlots = [],
|
|
shareTitle = null,
|
|
sharePublicWorkCode = null,
|
|
isBusy = false,
|
|
error = null,
|
|
embedded = false,
|
|
onBack,
|
|
onRestart,
|
|
onSubmitInput,
|
|
}: BigFishRuntimeShellProps) {
|
|
const stageRef = useRef<HTMLDivElement | null>(null);
|
|
const [touchOrigin, setTouchOrigin] = useState<TouchOrigin | null>(null);
|
|
const currentTouchRef = useRef<TouchSample | null>(null);
|
|
const lastTouchSampleRef = useRef<TouchSample | null>(null);
|
|
const [isRuleModalOpen, setIsRuleModalOpen] = useState(false);
|
|
const { copyState: shareState, copyText: copyShareText } = useCopyFeedback();
|
|
const [stick, setStick] = useState({ x: 0, y: 0 });
|
|
const stickRef = useRef(stick);
|
|
|
|
useEffect(() => {
|
|
stickRef.current = stick;
|
|
}, [stick]);
|
|
|
|
const submitDirection = useCallback((direction: SubmitBigFishInputRequest) => {
|
|
setStick(direction);
|
|
onSubmitInput(direction);
|
|
}, [onSubmitInput]);
|
|
|
|
useEffect(() => {
|
|
if (run?.status !== 'running') {
|
|
return undefined;
|
|
}
|
|
|
|
const timer = window.setInterval(() => {
|
|
const current = stickRef.current;
|
|
// 即使没有方向输入也持续回传当前状态，让后端持续推进刷怪、清理与胜负裁决。
|
|
onSubmitInput(current);
|
|
}, 220);
|
|
|
|
return () => {
|
|
window.clearInterval(timer);
|
|
};
|
|
}, [onSubmitInput, run?.status]);
|
|
|
|
useEffect(() => {
|
|
if (run?.status !== 'running' || !touchOrigin) {
|
|
return undefined;
|
|
}
|
|
|
|
const timer = window.setInterval(() => {
|
|
const current = currentTouchRef.current;
|
|
const previous = lastTouchSampleRef.current;
|
|
if (!current || !previous || current.pointerId !== previous.pointerId) {
|
|
return;
|
|
}
|
|
|
|
const sampledDirection = resolveDirectionFromSample(previous, current);
|
|
lastTouchSampleRef.current = { ...current };
|
|
if (sampledDirection.x === 0 && sampledDirection.y === 0) {
|
|
return;
|
|
}
|
|
submitDirection(sampledDirection);
|
|
}, 100);
|
|
|
|
return () => {
|
|
window.clearInterval(timer);
|
|
};
|
|
}, [run?.status, submitDirection, touchOrigin]);
|
|
const sharePublicWork = () => {
|
|
const publicWorkCode = sharePublicWorkCode?.trim();
|
|
if (!publicWorkCode) {
|
|
return;
|
|
}
|
|
|
|
const sharePath = buildPublicWorkStagePath(
|
|
'big-fish-runtime',
|
|
publicWorkCode,
|
|
);
|
|
const shareUrl =
|
|
typeof window === 'undefined'
|
|
? sharePath
|
|
: new URL(sharePath, window.location.origin).href;
|
|
const title = shareTitle?.trim() || '大鱼吃小鱼';
|
|
const shareText = `邀请你来玩《${title}》\n作品号：${publicWorkCode}\n${shareUrl}`;
|
|
|
|
void copyShareText(shareText);
|
|
};
|
|
|
|
const beginTouchControl = (event: PointerEvent<HTMLDivElement>) => {
|
|
if (event.target instanceof HTMLElement && event.target.closest('button')) {
|
|
return;
|
|
}
|
|
if (!Number.isFinite(event.clientX) || !Number.isFinite(event.clientY)) {
|
|
return;
|
|
}
|
|
event.currentTarget.setPointerCapture?.(event.pointerId);
|
|
setTouchOrigin({
|
|
pointerId: event.pointerId,
|
|
x: event.clientX,
|
|
y: event.clientY,
|
|
});
|
|
currentTouchRef.current = {
|
|
pointerId: event.pointerId,
|
|
x: event.clientX,
|
|
y: event.clientY,
|
|
};
|
|
lastTouchSampleRef.current = { ...currentTouchRef.current };
|
|
};
|
|
|
|
const updateTouchControl = (event: PointerEvent<HTMLDivElement>) => {
|
|
if (!touchOrigin || touchOrigin.pointerId !== event.pointerId) {
|
|
return;
|
|
}
|
|
if (!Number.isFinite(event.clientX) || !Number.isFinite(event.clientY)) {
|
|
return;
|
|
}
|
|
currentTouchRef.current = {
|
|
pointerId: event.pointerId,
|
|
x: event.clientX,
|
|
y: event.clientY,
|
|
};
|
|
};
|
|
|
|
const endTouchControl = (event: PointerEvent<HTMLDivElement>) => {
|
|
if (!touchOrigin || touchOrigin.pointerId !== event.pointerId) {
|
|
return;
|
|
}
|
|
setTouchOrigin(null);
|
|
currentTouchRef.current = null;
|
|
lastTouchSampleRef.current = null;
|
|
};
|
|
|
|
if (!run) {
|
|
return (
|
|
<div
|
|
className={`${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex items-center justify-center bg-slate-950 text-white`}
|
|
>
|
|
<div className="flex items-center gap-2 rounded-full bg-white/10 px-5 py-3 text-sm">
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|
正在进入玩法
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const statusLabel =
|
|
run.status === 'won' ? '通关' : run.status === 'failed' ? '失败' : '进行中';
|
|
const settlementCopy = resolveSettlementCopy(run);
|
|
const backgroundAsset =
|
|
findBigFishAssetSlot(assetSlots, 'stage_background')?.assetUrl?.trim() || null;
|
|
|
|
return (
|
|
<div
|
|
className={`${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex justify-center bg-slate-950 text-white`}
|
|
>
|
|
<div
|
|
ref={stageRef}
|
|
className="relative h-full w-full max-w-[430px] touch-none overflow-hidden bg-[radial-gradient(circle_at_50%_20%,rgba(34,211,238,0.2),transparent_28%),radial-gradient(circle_at_20%_80%,rgba(16,185,129,0.18),transparent_26%),linear-gradient(180deg,#082f49,#020617)]"
|
|
onPointerDown={beginTouchControl}
|
|
onPointerMove={updateTouchControl}
|
|
onPointerUp={endTouchControl}
|
|
onPointerCancel={endTouchControl}
|
|
>
|
|
{backgroundAsset ? (
|
|
<ResolvedAssetImage
|
|
src={backgroundAsset}
|
|
alt="大鱼吃小鱼场地背景"
|
|
className="absolute inset-0 h-full w-full object-cover"
|
|
/>
|
|
) : null}
|
|
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,rgba(8,47,73,0.2),rgba(2,6,23,0.6))]" />
|
|
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[length:32px_32px] opacity-30" />
|
|
|
|
<div className="absolute left-0 top-0 z-20 flex w-full items-center justify-between px-4 py-4">
|
|
<button
|
|
type="button"
|
|
onClick={onBack}
|
|
className="pointer-events-auto inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/28 backdrop-blur"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</button>
|
|
<div className="flex items-center gap-2">
|
|
{sharePublicWorkCode?.trim() ? (
|
|
<CopyFeedbackButton
|
|
state={shareState}
|
|
onClick={sharePublicWork}
|
|
idleLabel="分享作品"
|
|
copiedLabel="分享内容已复制"
|
|
failedLabel="分享内容复制失败"
|
|
idleIcon={<Share2 className="h-4 w-4" />}
|
|
copiedIcon={<Share2 className="h-4 w-4" />}
|
|
showLabel={false}
|
|
className="pointer-events-auto inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/28 text-white backdrop-blur"
|
|
/>
|
|
) : null}
|
|
<button
|
|
type="button"
|
|
aria-label="查看规则"
|
|
title="查看规则"
|
|
onClick={() => setIsRuleModalOpen(true)}
|
|
className="pointer-events-auto inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/28 text-white backdrop-blur"
|
|
>
|
|
<CircleHelp className="h-4 w-4" />
|
|
</button>
|
|
<div className="rounded-full bg-black/28 px-4 py-2 text-xs font-bold backdrop-blur">
|
|
Lv.{run.playerLevel}/{run.winLevel} · {statusLabel}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute left-1/2 top-1/2 h-[640px] w-[360px] -translate-x-1/2 -translate-y-1/2">
|
|
{run.wildEntities.map((entity) => (
|
|
<BigFishEntityDot
|
|
key={entity.entityId}
|
|
entity={entity}
|
|
run={run}
|
|
owned={false}
|
|
assetSlots={assetSlots}
|
|
/>
|
|
))}
|
|
{run.ownedEntities.map((entity) => (
|
|
<BigFishEntityDot
|
|
key={entity.entityId}
|
|
entity={entity}
|
|
run={run}
|
|
owned
|
|
assetSlots={assetSlots}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{settlementCopy ? (
|
|
<div className="absolute inset-0 z-40 flex items-center justify-center px-5">
|
|
<div
|
|
className={`w-full max-w-[20rem] rounded-[1.5rem] border border-white/24 bg-gradient-to-br ${settlementCopy.tone} p-6 text-center shadow-2xl shadow-slate-950/45 backdrop-blur-xl`}
|
|
>
|
|
<div className="text-3xl font-black text-white [text-shadow:0_2px_12px_rgba(2,6,23,0.6)]">
|
|
{settlementCopy.title}
|
|
</div>
|
|
<div className="mt-3 text-sm font-semibold leading-6 text-white/82">
|
|
{settlementCopy.message}
|
|
</div>
|
|
<div className="mt-5 grid grid-cols-2 gap-2">
|
|
{run.status === 'failed' && onRestart ? (
|
|
<button
|
|
type="button"
|
|
disabled={isBusy}
|
|
onClick={onRestart}
|
|
className="inline-flex h-11 items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-bold text-slate-950 shadow-lg shadow-slate-950/20 disabled:opacity-45"
|
|
>
|
|
<RotateCcw className="h-4 w-4" />
|
|
重来
|
|
</button>
|
|
) : null}
|
|
<button
|
|
type="button"
|
|
onClick={onBack}
|
|
className={`inline-flex h-11 items-center justify-center gap-2 rounded-full border border-white/30 bg-black/24 px-4 text-sm font-bold text-white backdrop-blur ${
|
|
run.status === 'failed' && onRestart ? '' : 'col-span-2'
|
|
}`}
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
退出
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="pointer-events-none absolute bottom-6 right-4 z-30 max-w-[13rem] space-y-2 text-right text-xs text-white/72">
|
|
{isBusy ? <div>同步中...</div> : null}
|
|
{error ? <div className="text-rose-200">{error}</div> : null}
|
|
{run.eventLog.slice(-3).map((event) => (
|
|
<div key={event} className="rounded-full bg-black/22 px-3 py-1">
|
|
{event}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<BigFishRuleModal
|
|
open={isRuleModalOpen}
|
|
onClose={() => setIsRuleModalOpen(false)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BigFishRuntimeShell;
|