111 lines
3.9 KiB
TypeScript
111 lines
3.9 KiB
TypeScript
import { useMemo, useState } from 'react';
|
|
|
|
import type {
|
|
DragPuzzlePieceRequest,
|
|
SwapPuzzlePiecesRequest,
|
|
} from '../packages/shared/src/contracts/puzzleRuntimeSession';
|
|
import type { PuzzleWorkSummary } from '../packages/shared/src/contracts/puzzleWorkSummary';
|
|
import { PuzzleRuntimeShell } from './components/puzzle-runtime/PuzzleRuntimeShell';
|
|
import {
|
|
applyLocalPuzzleFreezeTime,
|
|
advanceLocalPuzzleLevel,
|
|
dragLocalPuzzlePiece,
|
|
setLocalPuzzlePaused,
|
|
startLocalPuzzleRun,
|
|
swapLocalPuzzlePieces,
|
|
} from './services/puzzle-runtime/puzzleLocalRuntime';
|
|
|
|
const PLACEHOLDER_PUZZLE_IMAGE =
|
|
'data:image/svg+xml;utf8,' +
|
|
encodeURIComponent(`
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1280">
|
|
<defs>
|
|
<linearGradient id="sky" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#fef3c7" />
|
|
<stop offset="0.45" stop-color="#fb7185" />
|
|
<stop offset="1" stop-color="#312e81" />
|
|
</linearGradient>
|
|
<radialGradient id="glow" cx="42%" cy="34%" r="46%">
|
|
<stop offset="0" stop-color="#ffffff" stop-opacity="0.78" />
|
|
<stop offset="1" stop-color="#ffffff" stop-opacity="0" />
|
|
</radialGradient>
|
|
</defs>
|
|
<rect width="720" height="1280" fill="url(#sky)" />
|
|
<circle cx="310" cy="318" r="210" fill="url(#glow)" />
|
|
<path d="M0 860 C118 808 226 894 348 828 C474 760 594 824 720 774 V1280 H0 Z" fill="#1e1b4b" opacity="0.9" />
|
|
<path d="M0 1010 C142 954 282 1040 428 974 C552 918 638 938 720 904 V1280 H0 Z" fill="#111827" opacity="0.78" />
|
|
<path d="M86 310 C184 242 302 252 376 334 C460 426 574 386 646 310" fill="none" stroke="#fff7ed" stroke-width="16" stroke-linecap="round" opacity="0.72" />
|
|
<path d="M128 610 h464" stroke="#ffffff" stroke-width="14" stroke-linecap="round" opacity="0.3" />
|
|
<path d="M174 704 h372" stroke="#ffffff" stroke-width="10" stroke-linecap="round" opacity="0.22" />
|
|
</svg>`);
|
|
|
|
function buildPlaceholderPuzzleWork(): PuzzleWorkSummary {
|
|
return {
|
|
workId: 'placeholder-puzzle-work',
|
|
profileId: 'placeholder-puzzle-profile',
|
|
ownerUserId: 'placeholder-user',
|
|
sourceSessionId: null,
|
|
authorDisplayName: '占位作者',
|
|
levelName: '暮色群山',
|
|
summary: '用于直达玩法调试的本地占位拼图。',
|
|
themeTags: ['占位', '风景', '调试'],
|
|
coverImageSrc: PLACEHOLDER_PUZZLE_IMAGE,
|
|
coverAssetId: null,
|
|
publicationStatus: 'published',
|
|
updatedAt: new Date(0).toISOString(),
|
|
publishedAt: new Date(0).toISOString(),
|
|
playCount: 0,
|
|
likeCount: 0,
|
|
publishReady: true,
|
|
};
|
|
}
|
|
|
|
export default function PuzzlePlaygroundApp() {
|
|
const placeholderWork = useMemo(() => buildPlaceholderPuzzleWork(), []);
|
|
const [run, setRun] = useState(() => startLocalPuzzleRun(placeholderWork));
|
|
|
|
const handleSwapPieces = (payload: SwapPuzzlePiecesRequest) => {
|
|
setRun((currentRun) => swapLocalPuzzlePieces(currentRun, payload));
|
|
};
|
|
|
|
const handleDragPiece = (payload: DragPuzzlePieceRequest) => {
|
|
setRun((currentRun) => dragLocalPuzzlePiece(currentRun, payload));
|
|
};
|
|
|
|
const handleRestart = () => {
|
|
setRun(startLocalPuzzleRun(placeholderWork));
|
|
};
|
|
|
|
const handleAdvanceNextLevel = () => {
|
|
setRun((currentRun) => advanceLocalPuzzleLevel(currentRun));
|
|
};
|
|
|
|
const handlePauseChange = async (paused: boolean) => {
|
|
setRun((currentRun) => setLocalPuzzlePaused(currentRun, paused));
|
|
};
|
|
|
|
const handleUseProp = async (
|
|
propKind: 'hint' | 'reference' | 'freezeTime',
|
|
) => {
|
|
setRun((currentRun) =>
|
|
propKind === 'freezeTime'
|
|
? applyLocalPuzzleFreezeTime(currentRun)
|
|
: setLocalPuzzlePaused(currentRun, propKind === 'reference'),
|
|
);
|
|
};
|
|
|
|
return (
|
|
<PuzzleRuntimeShell
|
|
run={run}
|
|
isBusy={false}
|
|
error={null}
|
|
onBack={handleRestart}
|
|
onSwapPieces={handleSwapPieces}
|
|
onDragPiece={handleDragPiece}
|
|
onAdvanceNextLevel={handleAdvanceNextLevel}
|
|
onPauseChange={handlePauseChange}
|
|
onUseProp={handleUseProp}
|
|
/>
|
|
);
|
|
}
|