82 const [cookieAndTeaMode, setCookieAndTeaMode] = useState(false);
83
84 // Fetch images from backend instead of blob storage directly
85 useEffect(() => {
86 // Set default background color in case image doesn't load
87 if (document.body) {
88 document.body.style.backgroundColor = "#2D1700"; // Dark brown leather color
89 }
90
91 // Fetch avatar image
92 fetch("/api/images/stevens.jpg")
93 .then((response) => {
94 if (response.ok) return response.blob();
95 throw new Error("Failed to load avatar image");
96 })
97 .then((imageBlob) => {
98 const url = URL.createObjectURL(imageBlob);
99 setAvatarUrl(url);
100 })
104
105 // Fetch wood background
106 fetch("/api/images/wood.jpg")
107 .then((response) => {
108 if (response.ok) return response.blob();
109 throw new Error("Failed to load wood background");
110 })
111 .then((imageBlob) => {
112 const url = URL.createObjectURL(imageBlob);
113 setWoodUrl(url);
114
115 // Apply wood background to body
116 if (document.body) {
117 document.body.style.backgroundImage = `url(${url})`;
118 }
119 })
362 return {
363 position: SCENE_ELEMENTS.DESK_SITTING,
364 image: ASSETS.STEVENS_FRONT,
365 highlightElement: SCENE_ELEMENTS.DESK,
366 animationClass: "no-animation",
372 return {
373 position: SCENE_ELEMENTS.DESK_SITTING,
374 image: ASSETS.STEVENS_FRONT,
375 highlightElement: null,
376 animationClass: "no-animation",
387 y: SCENE_ELEMENTS.MAILBOX.y - 20,
388 },
389 image: ASSETS.STEVENS_BACK,
390 highlightElement: SCENE_ELEMENTS.MAILBOX,
391 animationClass: "walk-to-mailbox",
398 y: SCENE_ELEMENTS.CALENDAR.y + 30,
399 },
400 image: ASSETS.STEVENS_BACK,
401 highlightElement: SCENE_ELEMENTS.CALENDAR,
402 animationClass: "walk-to-calendar",
409 y: SCENE_ELEMENTS.TELEGRAM.y + 10,
410 },
411 image: ASSETS.STEVENS_BACK,
412 highlightElement: SCENE_ELEMENTS.TELEGRAM,
413 animationClass: "walk-to-telegram",
417 return {
418 position: SCENE_ELEMENTS.OUTSIDE,
419 image: ASSETS.STEVENS_FRONT,
420 highlightElement: null,
421 animationClass: "walk-to-outside",
425 return {
426 position: SCENE_ELEMENTS.DESK_SITTING,
427 image: ASSETS.STEVENS_FRONT,
428 highlightElement: SCENE_ELEMENTS.DESK,
429 animationClass: "walk-to-desk",
623 box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4),
624 0 3px 8px rgba(0, 0, 0, 0.5);
625 image-rendering: pixelated;
626 cursor: pointer;
627 transition: transform 0.2s;
634 .notebook-pages {
635 background-color: #f8f1e0;
636 background-image: linear-gradient(#d6c6a5 1px, transparent 1px);
637 background-size: 100% 16px;
638 box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
639 image-rendering: pixelated;
640 }
641
652
653 .pixel-character {
654 image-rendering: pixelated;
655 position: absolute;
656 transition: left 0.7s ease-in-out, top 0.7s ease-in-out;
763 className="w-[512px] h-[512px] mx-auto relative"
764 style={{
765 backgroundImage: `url(${ASSETS.BACKGROUND})`,
766 backgroundSize: "cover",
767 backgroundPosition: "center",
768 imageRendering: "pixelated",
769 }}
770 >
799 {/* Stevens character */}
800 <img
801 src={stevensState.image}
802 alt="Stevens"
803 className={`pixel-character ${
