init with react+axum+spacetimedb

src/PuzzlePlaygroundApp.tsx

@@ -0,0 +1,89 @@
+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}
+    />
+  );
+}