From 8c0603475fcbf935baa2a5bb4c08c96d39350d7e Mon Sep 17 00:00:00 2001 From: Harkamal Randhawa Date: Sun, 24 May 2026 05:11:16 -0600 Subject: [PATCH] Use shop SVG assets for paid room previews so thumbnail and LCD match. ParallaxRoomBackground renders sceneImage with pixelated cover for room-night and room-forest instead of mismatched CSS layers. --- components/pet/parallax-room-background.tsx | 23 ++++++++++++++ components/pet/room-background-picker.tsx | 11 ++++++- components/pet/room-style-selector.tsx | 11 ++++++- components/shop/shop-content.tsx | 2 +- lib/room-backgrounds.ts | 33 +++++++-------------- 5 files changed, 54 insertions(+), 26 deletions(-) diff --git a/components/pet/parallax-room-background.tsx b/components/pet/parallax-room-background.tsx index 0b45358..10b59b9 100644 --- a/components/pet/parallax-room-background.tsx +++ b/components/pet/parallax-room-background.tsx @@ -14,6 +14,8 @@ type ParallaxRoomBackgroundProps = { interactive?: boolean; }; +const SCENE_IMAGE_PARALLAX_SPEED = 0.15; + export function ParallaxRoomBackground({ roomId, className, @@ -46,6 +48,27 @@ export function ParallaxRoomBackground({ }; }, [interactive]); + if (room.sceneImage) { + return ( +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + +
+ ); + } + return (
-
+ {room.sceneImage ? ( + // eslint-disable-next-line @next/next/no-img-element + + ) : ( +
+ )}

{room.name}

diff --git a/components/pet/room-style-selector.tsx b/components/pet/room-style-selector.tsx index 534a12b..27abb04 100644 --- a/components/pet/room-style-selector.tsx +++ b/components/pet/room-style-selector.tsx @@ -70,7 +70,16 @@ export function RoomStyleSelector({ : "border-border/60 hover:border-border", )} > -
+ {room.sceneImage ? ( + // eslint-disable-next-line @next/next/no-img-element + + ) : ( +
+ )} {locked ? ( ) : (
diff --git a/lib/room-backgrounds.ts b/lib/room-backgrounds.ts index 631e557..d52d142 100644 --- a/lib/room-backgrounds.ts +++ b/lib/room-backgrounds.ts @@ -32,6 +32,9 @@ export type RoomBackground = { previewClassName: string; + /** Full-scene SVG used for shop thumbnail and in-app preview parity. */ + sceneImage?: string; + layers: RoomBackgroundLayer[]; }; @@ -100,19 +103,11 @@ export const ROOM_BACKGROUNDS: RoomBackground[] = [ free: false, - previewClassName: "bg-gradient-to-b from-indigo-950 via-violet-900 to-slate-900", + previewClassName: "bg-gradient-to-b from-[#1e1b4b] via-[#4c1d95] to-[#0f172a]", - layers: [ + sceneImage: "/shop/room-night.svg", - { id: "sky", className: "bg-gradient-to-b from-indigo-950 via-violet-900 to-slate-900", speed: 0.1 }, - - { id: "stars", className: "bg-[radial-gradient(circle_at_7%_11%,rgba(255,255,255,0.7)_1px,transparent_1px),radial-gradient(circle_at_14%_26%,rgba(255,255,255,0.95)_1.5px,transparent_1.5px),radial-gradient(circle_at_21%_7%,rgba(255,255,255,0.6)_1px,transparent_1px),radial-gradient(circle_at_29%_41%,rgba(255,255,255,1)_1.5px,rgba(255,255,255,0.25)_2.5px,transparent_3.5px),radial-gradient(circle_at_36%_14%,rgba(255,255,255,0.8)_1px,transparent_1px),radial-gradient(circle_at_43%_54%,rgba(255,255,255,0.65)_1px,transparent_1px),radial-gradient(circle_at_51%_19%,rgba(255,255,255,0.9)_1.5px,transparent_1.5px),radial-gradient(circle_at_57%_66%,rgba(255,255,255,0.7)_1px,transparent_1px),radial-gradient(circle_at_64%_33%,rgba(255,255,255,0.55)_1px,transparent_1px),radial-gradient(circle_at_11%_56%,rgba(255,255,255,1)_1.5px,rgba(255,255,255,0.2)_2.5px,transparent_3.5px),radial-gradient(circle_at_18%_71%,rgba(255,255,255,0.75)_1px,transparent_1px),radial-gradient(circle_at_26%_47%,rgba(255,255,255,0.6)_1px,transparent_1px),radial-gradient(circle_at_34%_76%,rgba(255,255,255,0.85)_1px,transparent_1px),radial-gradient(circle_at_41%_30%,rgba(255,255,255,0.7)_1px,transparent_1px),radial-gradient(circle_at_47%_86%,rgba(255,255,255,0.65)_1px,transparent_1px),radial-gradient(circle_at_54%_10%,rgba(255,255,255,0.95)_1.5px,transparent_1.5px),radial-gradient(circle_at_61%_44%,rgba(255,255,255,0.5)_1px,transparent_1px),radial-gradient(circle_at_69%_73%,rgba(255,255,255,0.8)_1px,transparent_1px),radial-gradient(circle_at_84%_39%,rgba(255,255,255,0.9)_1.5px,transparent_1.5px),radial-gradient(circle_at_91%_13%,rgba(255,255,255,0.7)_1px,transparent_1px),radial-gradient(circle_at_87%_60%,rgba(255,255,255,0.6)_1px,transparent_1px),radial-gradient(circle_at_5%_36%,rgba(255,255,255,0.75)_1px,transparent_1px),radial-gradient(circle_at_73%_51%,rgba(255,255,255,0.55)_1px,transparent_1px)] opacity-80", speed: 0.3 }, - - { id: "moon", className: "bg-[radial-gradient(circle_at_78%_18%,rgba(255,255,220,0.95)_0%,rgba(255,255,220,0.15)_8%,transparent_20%)]", speed: 0.2 }, - - { id: "ground", className: "bg-[linear-gradient(to_top,#111827_0%,#111827_35%,transparent_35%)]", speed: 0.6 }, - - ], + layers: [], }, @@ -124,19 +119,11 @@ export const ROOM_BACKGROUNDS: RoomBackground[] = [ free: false, - previewClassName: "bg-gradient-to-b from-emerald-900 via-green-900 to-lime-950", + previewClassName: "bg-gradient-to-b from-[#064e3b] via-[#14532d] to-[#052e16]", - layers: [ + sceneImage: "/shop/room-forest.svg", - { id: "sky", className: "bg-gradient-to-b from-emerald-950 via-green-900 to-lime-950", speed: 0.14 }, - - { id: "mist", className: "bg-[radial-gradient(circle_at_30%_60%,rgba(180,255,200,0.25)_0%,transparent_45%),radial-gradient(circle_at_70%_40%,rgba(180,255,200,0.18)_0%,transparent_40%)]", speed: 0.4 }, - - { id: "trees", className: "bg-[repeating-linear-gradient(90deg,rgba(0,0,0,0.35)_0_14px,transparent_14px_28px)] opacity-50", speed: 0.55 }, - - { id: "floor", className: "bg-[linear-gradient(to_top,#14532d_0%,#14532d_30%,transparent_30%)]", speed: 0.7 }, - - ], + layers: [], }, @@ -236,7 +223,7 @@ export function getShopRoomBackgrounds() { price: room.id === "room-night" ? 40 : 50, - image_path: room.id === "room-night" ? "/shop/room-night.svg" : "/shop/room-forest.svg", + image_path: room.sceneImage ?? "", }));