1

src/components/platform-entry/PlatformWorkDetailView.tsx

@@ -2,6 +2,7 @@ import {
   ArrowLeft,
   ChevronLeft,
   ChevronRight,
+  CircleHelp,
   Clock3,
   Copy,
   Gamepad2,
@@ -32,6 +33,7 @@ export interface PlatformWorkDetailViewProps {
   authorDisplayName?: string | null;
   isBusy: boolean;
   error: string | null;
+  visibleCoverCount?: number;
   onBack: () => void;
   onLike: () => void;
   onStart: () => void;
@@ -71,6 +73,7 @@ export function PlatformWorkDetailView({
   authorDisplayName,
   isBusy,
   error,
+  visibleCoverCount = 1,
   onBack,
   onLike,
   onStart,
@@ -84,6 +87,9 @@ export function PlatformWorkDetailView({
   const activeCoverSlide =
     coverSlides[activeCoverIndex] ?? coverSlides[0] ?? null;
   const coverImage = activeCoverSlide?.imageSrc ?? '';
+  const unlockedCoverCount = Math.max(1, Math.floor(visibleCoverCount));
+  const isActiveCoverVisible = activeCoverIndex < unlockedCoverCount;
+  const appIconImage = coverSlides[0]?.imageSrc ?? '';
   const hasCoverCarousel = coverSlides.length > 1;
   const publicWorkCode = resolvePlatformPublicWorkCode(entry);
   const normalizedAuthorAvatarUrl = authorAvatarUrl?.trim() ?? '';
@@ -237,8 +243,20 @@ export function PlatformWorkDetailView({
               <ResolvedAssetImage
                 src={coverImage}
                 alt={entry.worldName}
-                className="platform-work-detail__cover-image"
+                className={`platform-work-detail__cover-image${
+                  isActiveCoverVisible
+                    ? ''
+                    : ' platform-work-detail__cover-image--locked'
+                }`}
               />
+              {!isActiveCoverVisible ? (
+                <div
+                  className="platform-work-detail__cover-lock"
+                  aria-hidden="true"
+                >
+                  <CircleHelp className="platform-work-detail__cover-lock-icon" />
+                </div>
+              ) : null}
               {hasCoverCarousel ? (
                 <>
                   <button
@@ -288,9 +306,9 @@ export function PlatformWorkDetailView({
         <section className="platform-work-detail__summary">
           <div className="platform-work-detail__meta-row">
             <div className="platform-work-detail__app-icon">
-              {coverImage ? (
+              {appIconImage ? (
                 <ResolvedAssetImage
-                  src={coverImage}
+                  src={appIconImage}
                   alt=""
                   aria-hidden="true"
                   className="h-full w-full object-cover"