// App.jsx import React from 'react'; import ReactDOM from 'react-dom/client'; // Load fonts const coolveticaFont = new FontFace( 'Coolvetica', `url('https://play.rosebud.ai/assets/Coolvetica Rg.otf?GVD5')`, { display: 'swap' } ); const coolveticaLightFont = new FontFace( 'CoolveticaLight', `url('https://play.rosebud.ai/assets/Coolvetica Rg It.otf?SOgF')`, { display: 'swap' } ); const monstrousFishFont = new FontFace( 'MonstrousFish', `url('https://play.rosebud.ai/assets/Monstrous Fish.otf?lkWF')`, { display: 'swap' } ); Promise.all([ coolveticaFont.load(), coolveticaLightFont.load(), monstrousFishFont.load() ]) .then((fonts) => { fonts.forEach((font) => { try { document.fonts.add(font); } catch (e) { console.error('Error adding font:', e); } }); }) .catch((error) => { console.error('Error loading fonts:', error); }); // Optional: ChatAIClass definition omitted for brevity. // Only the main UI logic is shown. // ================================================== // Main App Component // ================================================== const App = () => { // Controls whether we see the hero or the gallery const [showGallery, setShowGallery] = React.useState(false); // Overlay states const [selectedItem, setSelectedItem] = React.useState(null); const [showDetails, setShowDetails] = React.useState(false); // Reference for pausing/resuming horizontal scroll const galleryRef = React.useRef(null); // Plush images, quotes, details const plushImages = [ 'knit_plush_01.jpg?NEBU', 'knit_plush_02.jpg?5NkM', 'knit_plush_03.jpg?SMrP', 'knit_plush_04.jpg?zsbp', 'knit_plush_05.jpg?oDtu', 'knit_plush_06.jpg?XJnh', 'knit_plush_07.jpg?EwuK' ]; const quotes = [ "Every stitch tells a story", "Knit with love, wear with pride", "The rhythm of the needles", "Yarn is the thread of creativity", "From skein to masterpiece", "Knit one, purl one, repeat", "Weaving dreams into reality" ]; const details = [ "Hand-knit using premium merino wool (Dark green & pastel tan).", "Traditional cable knitting technique (Pastel orange & pastel blue).", "Intricate lace pattern design (Pastel tan & pastel sage green).", "Fair isle colorwork masterpiece (Pastel brown & very light brown).", "Chunky knit for winter warmth (Pastel gray & cherry red).", "Delicate baby alpaca creation (Brown & milky white).", "Modern geometric knit pattern (Pastel purple & pastel blue)." ]; // Gradients for each plush const plushGradients = [ 'linear-gradient(135deg, #264c26, #f2e4d3)', 'linear-gradient(135deg, #fbd1a2, #b0d9f2)', 'linear-gradient(135deg, #f2e4d3, #cadfc3)', 'linear-gradient(135deg, #d1bfa6, #f5f2eb)', 'linear-gradient(135deg, #d7d7d7, #b30202)', 'linear-gradient(135deg, #6f4e37, #f5f5dc)', 'linear-gradient(135deg, #e1d0f2, #c0daf2)' ]; // Click in the gallery const handleItemClick = (index) => { setSelectedItem(index); setShowDetails(true); if (galleryRef.current) { galleryRef.current.classList.add('paused'); } }; // Close overlay const handleOverlayClick = () => { setShowDetails(false); setSelectedItem(null); if (galleryRef.current) { galleryRef.current.classList.remove('paused'); } }; // Determine background color/gradient if overlay is open const appBackgroundStyle = { width: '100%', height: '100%', minHeight: '100vh', background: selectedItem !== null ? plushGradients[selectedItem] : '#0a0a0a', backgroundSize: selectedItem !== null ? '400% 400%' : 'auto', animation: selectedItem !== null ? 'gradientShift 15s ease infinite' : 'none', transition: 'background 1s ease' }; return (

{/* Sticky Header */}

ForeverYarn

about contact

{/* If we're NOT showing the gallery yet, show the hero screen */} {!showGallery && (

setShowGallery(true)} > {/* Large center image */}

{/* EmilyJohnson text near bottom */}

EmilyJohnson.

)} {/* If we ARE showing the gallery, display it */} {showGallery && (

{plushImages.map((img, index) => (

handleItemClick(index)} > {`Knit

(e.currentTarget.style.transform = 'scale(1.05)')} onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')} />

))}

)} {/* Overlay for details (same logic as before) */} {showDetails && selectedItem !== null && (

“{quotes[selectedItem]}”

{details[selectedItem]}

(Click anywhere to close)

)}

); }; // Render const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render(); // Global CSS (gallery animation, background shift, resets) const styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; styleSheet.innerText = ` /* Basic reset so body can display full content without scroll issues */ html, body { margin: 0; padding: 0; overflow: auto; height: auto; } /* Horizontal sliding of the gallery */ @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-25%); } } .gallery-container { animation: slide 120s linear infinite; } .gallery-container.paused { animation-play-state: paused; } /* Animated gradient shift when a plush is selected */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } `; document.head.appendChild(styleSheet);

About Knitting Portfolio

Other games like this