feat(jump-hop): redesign sling platform gameplay

src/components/jump-hop-result/JumpHopResultView.tsx

@@ -2,18 +2,22 @@ import {
   ArrowLeft,
   Loader2,
   Play,
-  RefreshCcw,
   Send,
   Shuffle,
 } from 'lucide-react';
-import { type CSSProperties, useMemo, useState } from 'react';
+import { type CSSProperties, useState } from 'react';
 
 import type {
   JumpHopDraftResponse,
   JumpHopPath,
-  JumpHopPlatform,
+  JumpHopTileAsset,
   JumpHopWorkProfileResponse,
 } from '../../../packages/shared/src/contracts/jumpHop';
+import {
+  formatJumpHopDurationLabel,
+  selectJumpHopTileAsset,
+} from '../../services/jump-hop/jumpHopRuntimeModel';
+import { useJumpHopLeaderboard } from '../../services/jump-hop/useJumpHopLeaderboard';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 
 type JumpHopResultViewProps = {
@@ -34,7 +38,6 @@ type JumpHopResultViewProps = {
   onEdit: () => void;
   onStartTestRun: () => void;
   onPublish: () => void;
-  onRegenerateCharacter: () => void;
   onRegenerateTiles: () => void;
 };
 
@@ -44,43 +47,6 @@ function isJumpHopWorkProfile(
   return 'summary' in profile;
 }
 
-type MiniMapPlatform = {
-  platform: JumpHopPlatform;
-  index: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  isStart: boolean;
-  isFinish: boolean;
-};
-
-const difficultyToneByValue: Record<
-  JumpHopPath['difficulty'],
-  { accent: string; soft: string; label: string }
-> = {
-  advanced: {
-    accent: '#df7f40',
-    soft: 'rgba(249, 115, 22, 0.16)',
-    label: '进阶',
-  },
-  challenge: {
-    accent: '#b64a35',
-    soft: 'rgba(182, 98, 63, 0.16)',
-    label: '挑战',
-  },
-  easy: {
-    accent: '#14b8a6',
-    soft: 'rgba(20, 184, 166, 0.16)',
-    label: '轻松',
-  },
-  standard: {
-    accent: '#2563eb',
-    soft: 'rgba(37, 99, 235, 0.16)',
-    label: '标准',
-  },
-};
-
 const tileToneByType: Record<string, string> = {
   accent: '#c4b5fd',
   bonus: '#fde68a',
@@ -90,155 +56,191 @@ const tileToneByType: Record<string, string> = {
   target: '#fecdd3',
 };
 
-function isFiniteNumber(value: unknown): value is number {
-  return typeof value === 'number' && Number.isFinite(value);
+const JUMP_HOP_TAONIER_CHARACTER_IMAGE_SRC =
+  '/branding/jump-hop-taonier-character.png';
+
+function JumpHopDefaultCharacterPreview() {
+  return (
+    <div className="relative grid aspect-[1/1] place-items-center overflow-hidden bg-[linear-gradient(180deg,#eff6ff_0%,#fff7ed_100%)]">
+      <div className="absolute inset-x-[18%] bottom-[14%] h-[14%] rounded-full bg-slate-900/12 blur-[2px]" />
+      <img
+        src={JUMP_HOP_TAONIER_CHARACTER_IMAGE_SRC}
+        alt=""
+        draggable={false}
+        className="relative z-10 h-[78%] w-[78%] object-contain drop-shadow-[0_12px_18px_rgba(146,64,14,0.2)]"
+        data-testid="jump-hop-result-character-logo"
+      />
+    </div>
+  );
 }
 
-function normalizePathPlatforms(path: JumpHopPath | null | undefined) {
-  const platforms = path?.platforms ?? [];
-  if (platforms.length === 0) {
-    return [];
+function JumpHopTilePoolPreview({
+  tileAssets,
+  tileAtlasAsset,
+  tileAtlasFallbackSrc,
+}: {
+  tileAssets: JumpHopTileAsset[];
+  tileAtlasAsset?: JumpHopDraftResponse['tileAtlasAsset'] | null;
+  tileAtlasFallbackSrc?: string | null;
+}) {
+  const visibleTiles = tileAssets.slice(0, 25);
+  const atlasSrc =
+    tileAtlasAsset?.imageSrc?.trim() || tileAtlasFallbackSrc?.trim() || '';
+  const atlasRefreshKey = tileAtlasAsset?.assetObjectId || atlasSrc;
+  if (visibleTiles.length > 0) {
+    return (
+      <div className="grid aspect-[1/1] grid-cols-5 gap-1 bg-white/78 p-2">
+        {visibleTiles.map((tile, index) => (
+          <div
+            key={tile.tileId ?? `${tile.sourceAtlasCell}-${index}`}
+            className="grid min-h-0 place-items-center overflow-hidden rounded-[0.45rem] border border-white/80 bg-slate-50"
+          >
+            {tile.imageSrc ? (
+              <ResolvedAssetImage
+                src={tile.imageSrc}
+                refreshKey={tile.assetObjectId}
+                alt=""
+                className="h-full w-full object-contain"
+              />
+            ) : (
+              <span
+                className="h-4 w-4 rounded-full"
+                style={{
+                  background:
+                    tileToneByType[tile.tileType] ?? tileToneByType.normal,
+                }}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    );
   }
 
-  const coordinatePlatforms = platforms.filter(
-    (platform) => isFiniteNumber(platform.x) && isFiniteNumber(platform.y),
-  );
-  const shouldUseCoordinates = coordinatePlatforms.length >= 2;
-  const xValues = shouldUseCoordinates
-    ? coordinatePlatforms.map((platform) => platform.x)
-    : [];
-  const yValues = shouldUseCoordinates
-    ? coordinatePlatforms.map((platform) => platform.y)
-    : [];
-  const minX = Math.min(...xValues);
-  const maxX = Math.max(...xValues);
-  const minY = Math.min(...yValues);
-  const maxY = Math.max(...yValues);
-  const xRange = Math.max(maxX - minX, 1);
-  const yRange = Math.max(maxY - minY, 1);
-  const denominator = Math.max(platforms.length - 1, 1);
-
-  return platforms.map((platform, index): MiniMapPlatform => {
-    const sequenceRatio = index / denominator;
-    const hasCoordinates =
-      shouldUseCoordinates &&
-      isFiniteNumber(platform.x) &&
-      isFiniteNumber(platform.y);
-    const x = hasCoordinates
-      ? 12 + ((platform.x - minX) / xRange) * 76
-      : 12 + sequenceRatio * 76;
-    const y = hasCoordinates
-      ? 14 + ((platform.y - minY) / yRange) * 72
-      : 50 + Math.sin(sequenceRatio * Math.PI * 2.3) * 18;
-
-    return {
-      platform,
-      index,
-      x,
-      y,
-      width: Math.min(Math.max(platform.width || 54, 42), 82),
-      height: Math.min(Math.max(platform.height || 42, 34), 68),
-      isStart: index === 0 || platform.tileType === 'start',
-      isFinish:
-        index === path?.finishIndex ||
-        platform.tileType === 'finish' ||
-        platform.tileType === 'target',
-    };
-  });
-}
-
-function JumpHopPathMiniMap({ path }: { path: JumpHopPath }) {
-  const platforms = useMemo(() => normalizePathPlatforms(path), [path]);
-  const tone =
-    difficultyToneByValue[path.difficulty] ?? difficultyToneByValue.standard;
-  const pathPoints = platforms
-    .map((platform) => `${platform.x},${platform.y}`)
-    .join(' ');
-
-  if (platforms.length === 0) {
-    return null;
+  if (atlasSrc) {
+    return (
+      <ResolvedAssetImage
+        src={atlasSrc}
+        refreshKey={atlasRefreshKey}
+        alt=""
+        className="aspect-[1/1] w-full object-cover"
+      />
+    );
   }
 
   return (
-    <div
-      className="relative aspect-[1/1] w-full overflow-hidden bg-[linear-gradient(180deg,#f8fbff_0%,#eef8ff_100%)]"
-      style={
-        {
-          '--jump-hop-path-accent': tone.accent,
-          '--jump-hop-path-soft': tone.soft,
-        } as CSSProperties
-      }
-    >
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_24%_18%,rgba(255,255,255,0.92),transparent_28%),radial-gradient(circle_at_75%_78%,rgba(125,211,252,0.24),transparent_32%)]" />
-      <svg
-        viewBox="0 0 100 100"
-        className="absolute inset-0 h-full w-full"
-        aria-hidden="true"
-      >
-        <polyline
-          points={pathPoints}
-          fill="none"
-          stroke="var(--jump-hop-path-soft)"
-          strokeWidth="11"
-          strokeLinecap="round"
-          strokeLinejoin="round"
+    <div className="grid aspect-[1/1] grid-cols-5 gap-1 bg-white/78 p-2">
+      {Array.from({ length: 25 }).map((_, index) => (
+        <span
+          key={index}
+          className="rounded-[0.45rem] border border-white/80"
+          style={{
+            background:
+              Object.values(tileToneByType)[index % Object.values(tileToneByType).length],
+          }}
         />
-        <polyline
-          points={pathPoints}
-          fill="none"
-          stroke="var(--jump-hop-path-accent)"
-          strokeWidth="2.6"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeDasharray="4 4"
-        />
-      </svg>
-      {platforms.map((item) => {
-        const tileTone =
-          tileToneByType[item.platform.tileType] ?? tileToneByType.normal;
-        const scoreBoost =
-          isFiniteNumber(item.platform.scoreValue) &&
-          item.platform.scoreValue > 1;
-        const style = {
-          left: `${item.x}%`,
-          top: `${item.y}%`,
-          width: `${item.width}%`,
-          height: `${item.height}%`,
-          background: tileTone,
-          borderColor: item.isFinish ? tone.accent : 'rgba(255,255,255,0.92)',
-          zIndex: 10 + item.index,
-        } as CSSProperties;
+      ))}
+    </div>
+  );
+}
 
+function JumpHopFirstPlatformsPreview({
+  path,
+  tileAssets,
+}: {
+  path: JumpHopPath | null | undefined;
+  tileAssets: JumpHopTileAsset[];
+}) {
+  const platforms = (path?.platforms ?? []).slice(0, 3);
+
+  return (
+    <div className="relative aspect-[1/1] overflow-hidden bg-[linear-gradient(180deg,#f8fbff_0%,#eef8ff_100%)]">
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_30%,rgba(255,255,255,0.92),transparent_34%)]" />
+      {platforms.map((platform, index) => {
+        const asset = selectJumpHopTileAsset(
+          tileAssets,
+          path?.seed,
+          index,
+          platform.platformId,
+        );
+        const style = {
+          left: `${50 + (index - 1) * 24}%`,
+          top: `${68 - index * 22}%`,
+          width: `${34 - index * 3}%`,
+          zIndex: 10 + index,
+        } as CSSProperties;
         return (
           <div
-            key={
-              item.platform.platformId ||
-              `${item.index}-${item.platform.tileType}`
-            }
-            className="absolute grid max-h-9 max-w-11 min-h-6 min-w-7 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-[0.72rem] border-2 shadow-[0_8px_18px_rgba(15,23,42,0.13)]"
+            key={platform.platformId || index}
+            className="absolute aspect-[1.16/1] -translate-x-1/2 -translate-y-1/2"
             style={style}
           >
-            <span
-              className="h-2.5 w-2.5 rounded-full"
-              style={{
-                background:
-                  item.isStart || item.isFinish ? tone.accent : '#ffffff',
-                boxShadow: scoreBoost ? `0 0 0 4px ${tone.soft}` : undefined,
-              }}
-            />
-            {item.isStart || item.isFinish ? (
-              <span className="absolute -top-2.5 rounded-full bg-slate-950/78 px-1.5 py-0.5 text-[0.58rem] font-black leading-none text-white">
-                {item.isStart ? '起' : '终'}
-              </span>
-            ) : null}
+            <div className="absolute inset-x-[12%] bottom-[-6%] h-[22%] rounded-full bg-slate-900/14 blur-[3px]" />
+            {asset?.imageSrc ? (
+              <ResolvedAssetImage
+                src={asset.imageSrc}
+                refreshKey={asset.assetObjectId}
+                alt=""
+                className="relative h-full w-full object-contain"
+              />
+            ) : (
+              <div
+                className="relative h-full w-full rounded-[18%] border-2 border-white/90 shadow-[0_10px_22px_rgba(15,23,42,0.14)]"
+                style={{
+                  background:
+                    tileToneByType[platform.tileType] ?? tileToneByType.normal,
+                }}
+              />
+            )}
           </div>
         );
       })}
-      <div className="absolute left-2 top-2 rounded-full border border-white/80 bg-white/82 px-2 py-1 text-[0.62rem] font-black text-[var(--platform-text-strong)] shadow-sm">
-        {tone.label}
+      {platforms.length === 0 ? (
+        <div className="absolute inset-0 grid place-items-center text-sm font-bold text-[var(--platform-text-soft)]">
+          路径
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function JumpHopResultLeaderboard({
+  profileId,
+}: {
+  profileId?: string | null;
+}) {
+  const { leaderboard, isLoading, error } = useJumpHopLeaderboard(profileId);
+  const items = leaderboard?.items ?? [];
+
+  return (
+    <div className="mt-4 rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/70 p-3">
+      <div className="flex items-center justify-between gap-2">
+        <div className="text-sm font-black text-[var(--platform-text-strong)]">
+          排行榜
+        </div>
+        {isLoading ? (
+          <Loader2 className="h-4 w-4 animate-spin text-[var(--platform-text-soft)]" />
+        ) : null}
       </div>
-      <div className="absolute bottom-2 right-2 rounded-full border border-white/80 bg-white/82 px-2 py-1 text-[0.62rem] font-black text-[var(--platform-text-base)] shadow-sm">
-        {platforms.length}
+      <div className="mt-3 grid gap-2">
+        {items.slice(0, 5).map((entry) => (
+          <div
+            key={`${entry.rank}-${entry.playerId}`}
+            className="grid grid-cols-[1.8rem_minmax(0,1fr)_auto_auto] items-center gap-2 rounded-[0.75rem] bg-white/70 px-2 py-2 text-xs font-bold text-[var(--platform-text-base)]"
+          >
+            <span className="text-[var(--platform-text-soft)]">
+              {entry.rank}
+            </span>
+            <span className="truncate">{entry.playerId}</span>
+            <span>{entry.successfulJumpCount} 跳</span>
+            <span>{formatJumpHopDurationLabel(entry.durationMs)}</span>
+          </div>
+        ))}
+        {items.length === 0 ? (
+          <div className="rounded-[0.75rem] bg-white/60 px-2 py-2 text-xs font-bold text-[var(--platform-text-soft)]">
+            {error ?? '暂无成绩'}
+          </div>
+        ) : null}
       </div>
     </div>
   );
@@ -252,7 +254,6 @@ export function JumpHopResultView({
   onEdit,
   onStartTestRun,
   onPublish,
-  onRegenerateCharacter,
   onRegenerateTiles,
 }: JumpHopResultViewProps) {
   const [isPublishing, setIsPublishing] = useState(false);
@@ -264,12 +265,13 @@ export function JumpHopResultView({
     path: NonNullable<JumpHopDraftResponse['path']>;
   };
   const path = isWorkProfile ? profile.path : safeDraft.path;
-  const characterAsset = isWorkProfile
-    ? profile.characterAsset
-    : safeDraft.characterAsset;
   const tileAtlasAsset = isWorkProfile
     ? profile.tileAtlasAsset
     : safeDraft.tileAtlasAsset;
+  const tileAssets = isWorkProfile ? profile.tileAssets : safeDraft.tileAssets;
+  const profileId = isWorkProfile
+    ? profile.summary.profileId
+    : safeDraft.profileId;
   const titleSource = isWorkProfile
     ? profile.summary.workTitle
     : profile.workTitle;
@@ -278,15 +280,12 @@ export function JumpHopResultView({
     : profile.workDescription;
   const title = titleSource?.trim() || safeDraft.workTitle.trim() || '跳一跳';
   const summary = summarySource?.trim() || safeDraft.workDescription.trim();
-  const pathPlatforms = normalizePathPlatforms(path);
-  const canRenderPathMiniMap = pathPlatforms.length > 0;
   const hasAssets = Boolean(
-    profile.characterImageSrc?.trim() ||
-      profile.tileAtlasImageSrc?.trim() ||
+    profile.tileAtlasImageSrc?.trim() ||
       profile.pathPreviewImageSrc?.trim() ||
-      characterAsset?.imageSrc?.trim() ||
       tileAtlasAsset?.imageSrc?.trim() ||
-      canRenderPathMiniMap,
+      tileAssets.length > 0 ||
+      path?.platforms.length,
   );
 
   const handlePublish = async () => {
@@ -310,15 +309,6 @@ export function JumpHopResultView({
           返回
         </button>
         <div className="flex gap-2">
-          <button
-            type="button"
-            onClick={onRegenerateCharacter}
-            disabled={isBusy}
-            className="platform-button platform-button--ghost min-h-0 px-3 py-2 text-sm"
-          >
-            <RefreshCcw className="h-4 w-4" />
-            角色
-          </button>
           <button
             type="button"
             onClick={onRegenerateTiles}
@@ -343,69 +333,25 @@ export function JumpHopResultView({
           ) : null}
           <div className="mt-4 grid gap-3 sm:grid-cols-3">
             <div className="overflow-hidden rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/80">
-              {profile.characterImageSrc || characterAsset?.imageSrc ? (
-                <ResolvedAssetImage
-                  src={
-                    ('characterImageSrc' in profile
-                      ? profile.characterImageSrc
-                      : null) ??
-                    characterAsset?.imageSrc ??
-                    ''
-                  }
-                  alt="角色图"
-                  className="aspect-[1/1] w-full object-cover"
-                />
-              ) : (
-                <div className="grid aspect-[1/1] place-items-center text-sm text-[var(--platform-text-soft)]">
-                  角色
-                </div>
-              )}
+              <JumpHopDefaultCharacterPreview />
             </div>
             <div className="overflow-hidden rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/80">
-              {profile.tileAtlasImageSrc || tileAtlasAsset?.imageSrc ? (
-                <ResolvedAssetImage
-                  src={
-                    ('tileAtlasImageSrc' in profile
-                      ? profile.tileAtlasImageSrc
-                      : null) ??
-                    tileAtlasAsset?.imageSrc ??
-                    ''
-                  }
-                  alt="地块图"
-                  className="aspect-[1/1] w-full object-cover"
-                />
-              ) : (
-                <div className="grid aspect-[1/1] place-items-center text-sm text-[var(--platform-text-soft)]">
-                  地块
-                </div>
-              )}
+              <JumpHopTilePoolPreview
+                tileAssets={tileAssets}
+                tileAtlasAsset={tileAtlasAsset}
+                tileAtlasFallbackSrc={
+                  ('tileAtlasImageSrc' in profile
+                    ? profile.tileAtlasImageSrc
+                    : null) ??
+                  null
+                }
+              />
             </div>
             <div className="overflow-hidden rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/80">
-              {path && canRenderPathMiniMap ? (
-                <JumpHopPathMiniMap path={path} />
-              ) : 'pathPreviewImageSrc' in profile &&
-                profile.pathPreviewImageSrc ? (
-                <ResolvedAssetImage
-                  src={profile.pathPreviewImageSrc}
-                  alt="路径预览"
-                  className="aspect-[1/1] w-full object-cover"
-                />
-              ) : path ? (
-                <div className="grid aspect-[1/1] place-items-center px-3 text-center">
-                  <div>
-                    <div className="text-3xl font-black text-[var(--platform-text-strong)]">
-                      {path.platforms.length}
-                    </div>
-                    <div className="mt-1 text-xs font-bold tracking-[0.16em] text-[var(--platform-text-soft)]">
-                      {path.difficulty}
-                    </div>
-                  </div>
-                </div>
-              ) : (
-                <div className="grid aspect-[1/1] place-items-center text-sm text-[var(--platform-text-soft)]">
-                  路径
-                </div>
-              )}
+              <JumpHopFirstPlatformsPreview
+                path={path}
+                tileAssets={tileAssets}
+              />
             </div>
           </div>
           {!hasAssets ? (
@@ -419,6 +365,7 @@ export function JumpHopResultView({
           <div className="text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]">
             结果操作
           </div>
+          <JumpHopResultLeaderboard profileId={profileId} />
           {error ? (
             <div className="platform-banner platform-banner--danger mt-3 rounded-2xl text-sm leading-6">
               {error}