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.
This commit is contained in:
@@ -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 (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={cn("absolute inset-0 z-0 overflow-hidden", className)}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={room.sceneImage}
|
||||
alt=""
|
||||
aria-hidden
|
||||
className="absolute inset-[-8%] size-[116%] max-w-none object-cover image-pixelated"
|
||||
style={{
|
||||
transform: `translate3d(${offset.x * SCENE_IMAGE_PARALLAX_SPEED * 10}px, ${offset.y * SCENE_IMAGE_PARALLAX_SPEED * 8}px, 0)`,
|
||||
transition: "transform 0.15s steps(4)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
|
||||
@@ -73,7 +73,16 @@ export function RoomBackgroundPicker({
|
||||
: "opacity-80 hover:-translate-y-0.5",
|
||||
)}
|
||||
>
|
||||
<div className={cn("absolute inset-0", room.previewClassName)} />
|
||||
{room.sceneImage ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={room.sceneImage}
|
||||
alt=""
|
||||
className="absolute inset-0 size-full object-cover image-pixelated"
|
||||
/>
|
||||
) : (
|
||||
<div className={cn("absolute inset-0", room.previewClassName)} />
|
||||
)}
|
||||
<p className="absolute inset-x-0 bottom-0 bg-black/55 px-1.5 py-1 text-left text-[8px] uppercase tracking-wider text-foreground">
|
||||
{room.name}
|
||||
</p>
|
||||
|
||||
@@ -70,7 +70,16 @@ export function RoomStyleSelector({
|
||||
: "border-border/60 hover:border-border",
|
||||
)}
|
||||
>
|
||||
<div className={cn("absolute inset-0", room.previewClassName)} />
|
||||
{room.sceneImage ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={room.sceneImage}
|
||||
alt=""
|
||||
className="absolute inset-0 size-full object-cover image-pixelated"
|
||||
/>
|
||||
) : (
|
||||
<div className={cn("absolute inset-0", room.previewClassName)} />
|
||||
)}
|
||||
{locked ? (
|
||||
<span
|
||||
aria-hidden
|
||||
|
||||
@@ -84,7 +84,7 @@ function ShopItemCard({
|
||||
<img
|
||||
src={item.image_path}
|
||||
alt=""
|
||||
className="size-full object-cover"
|
||||
className="size-full object-cover image-pixelated"
|
||||
/>
|
||||
) : (
|
||||
<div className={cn("size-full", room.previewClassName)} />
|
||||
|
||||
@@ -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 ?? "",
|
||||
|
||||
}));
|
||||
|
||||
|
||||
Reference in New Issue
Block a user