90 lines
3.3 KiB
TypeScript
90 lines
3.3 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 {
|
|
advanceLocalPuzzleLevel,
|
|
dragLocalPuzzlePiece,
|
|
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 960 960">
|
|
<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="960" height="960" fill="url(#sky)" />
|
|
<circle cx="312" cy="282" r="210" fill="url(#glow)" />
|
|
<path d="M0 680 C170 610 278 724 424 650 C574 574 704 612 960 512 V960 H0 Z" fill="#1e1b4b" opacity="0.9" />
|
|
<path d="M0 766 C178 710 320 794 492 732 C642 678 780 708 960 652 V960 H0 Z" fill="#111827" opacity="0.78" />
|
|
<path d="M160 356 C238 298 326 304 388 376 C456 456 550 436 626 374 C710 306 824 330 882 410" fill="none" stroke="#fff7ed" stroke-width="18" stroke-linecap="round" opacity="0.72" />
|
|
<path d="M204 502 h552" stroke="#ffffff" stroke-width="16" stroke-linecap="round" opacity="0.3" />
|
|
<path d="M268 566 h424" stroke="#ffffff" stroke-width="12" 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,
|
|
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));
|
|
};
|
|
|
|
return (
|
|
<PuzzleRuntimeShell
|
|
run={run}
|
|
onBack={handleRestart}
|
|
onSwapPieces={handleSwapPieces}
|
|
onDragPiece={handleDragPiece}
|
|
onAdvanceNextLevel={handleAdvanceNextLevel}
|
|
/>
|
|
);
|
|
}
|