import React, { useState, useEffect, useRef } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; const App = () => { const mountRef = useRef(null); const [catFact, setCatFact] = useState(''); const [isLoading, setIsLoading] = useState(false); const [catImage, setCatImage] = useState(null); const [breedInfo, setBreedInfo] = useState(null); const [isVisible, setIsVisible] = useState(true); const [showContent, setShowContent] = useState(false); const timeoutRef = useRef(null); const animationRef = useRef(null); const lastUpdate = useRef(0); const [currentCat, setCurrentCat] = useState(0); const catAnimations = [ ` /\\___/\\ ( ◕ ω ◕ ) ( ◡ ◡ ) U U `, ` /\\___/\\ ( ◕ ω ◕ ) ( - ω- ) U U `, ` /\\___/\\ ( ◕ ω ◕ ) ( ▽ ▽ ) U U `, ` /\\___/\\ ( ◕ ω ◕ ) ( ♡ ♡ ) U U ` ]; const fetchCatData = async () => { console.log('Button clicked - Starting fetchCatData'); if (timeoutRef.current) { clearTimeout(timeoutRef.current); } // Fade out current content if it exists if (catFact) { setShowContent(false); // Wait for fade out transition await new Promise(resolve => setTimeout(resolve, 1500)); } setBreedInfo(null); setCatFact(''); const preloadImage = (url) => { return new Promise((resolve, reject) => { const img = new Image(); img.src = url; img.onload = () => resolve(url); img.onerror = reject; }); }; // Start loading setIsLoading(true); try { // Fetch cat fact from Cat Facts API console.log('Fetching cat fact...'); const factResponse = await fetch('https://catfact.ninja/fact'); const factData = await factResponse.json(); console.log('Cat fact received:', factData); setCatFact(factData.fact); // Fetch cat image and breed info from The Cat API console.log('Fetching cat image...'); const imageResponse = await fetch('https://api.thecatapi.com/v1/images/search?has_breeds=1', { headers: { 'Content-Type': 'application/json' } }); if (!imageResponse.ok) { throw new Error('Failed to fetch cat image'); } const imageData = await imageResponse.json(); console.log('Cat image received:', imageData); if (imageData && imageData[0]) { // Preload the image before showing it await preloadImage(imageData[0].url); setCatImage(imageData[0].url); if (imageData[0].breeds && imageData[0].breeds[0]) { setBreedInfo({ name: imageData[0].breeds[0].name, temperament: imageData[0].breeds[0].temperament }); } } // Reset cat animation counter setCurrentCat(0); // Show new content with timeout console.log('Showing new content'); setShowContent(true); // Set timeout to hide content after 10 seconds console.log('Setting 15-second timeout'); timeoutRef.current = setTimeout(() => { console.log('Timeout triggered - hiding content'); setShowContent(false); // Delayed cleanup after transition completes setTimeout(() => { setCatImage(null); setBreedInfo(null); setCatFact(''); }, 1500); // Match transition duration }, 15000); } catch (error) { console.error('Error in fetchCatData:', error); setCatFact('Failed to fetch cat fact. Try again!'); } setIsLoading(false); }; // Remove initial fetch effect entirely // Scene and animation setup useEffect(() => { const scene = new THREE.Scene(); const aspect = window.innerWidth / window.innerHeight; const camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setClearColor('#000000', 1); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Create text sprite for cat ASCII art const canvas = document.createElement('canvas'); canvas.width = 512; canvas.height = 512; const context = canvas.getContext('2d'); const texture = new THREE.CanvasTexture(canvas); const material = new THREE.SpriteMaterial({ map: texture, transparent: true }); const sprite = new THREE.Sprite(material); sprite.scale.set(3, 3, 1); sprite.position.set(0, 0, 0); // Center horizontally and vertically (x: 0, y: 0) scene.add(sprite); const updateSize = () => { const width = window.innerWidth; const height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); // Adjust sprite scale based on screen size const isMobile = width < 768; sprite.scale.set(isMobile ? 2 : 3, isMobile ? 2 : 3, 1); }; window.addEventListener('resize', updateSize); updateSize(); // Function to update texture with new ASCII art const updateCatTexture = (ascii) => { context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = '#ffffff'; context.font = '24px monospace'; context.textAlign = 'center'; context.textBaseline = 'middle'; const lines = ascii.split('\n'); const lineHeight = 30; const startY = canvas.height/2 - (lines.length * lineHeight)/2; lines.forEach((line, i) => { context.fillText(line, canvas.width/2, startY + i * lineHeight); }); texture.needsUpdate = true; }; camera.position.z = 5; // Animation const animate = () => { animationRef.current = requestAnimationFrame(animate); // Update cat animation every second const currentTime = Math.floor(Date.now() / 500); if (currentTime !== lastUpdate.current) { lastUpdate.current = currentTime; updateCatTexture(catAnimations[currentCat]); } // More noticeable animation sprite.position.y = 0 + Math.sin(Date.now() * 0.002) * 0.3; // Add base Y position of 0 sprite.position.x = 0; // Keep X position centered sprite.rotation.z = Math.sin(Date.now() * 0.001) * 0.1; renderer.render(scene, camera); }; animate(); // Cleanup return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current); } if (timeoutRef.current) { clearTimeout(timeoutRef.current); } mountRef.current.removeChild(renderer.domElement); material.dispose(); texture.dispose(); renderer.dispose(); }; }, []); // Remove currentCat dependency // Separate effect for cat animation updates useEffect(() => { console.log('Setting up cat animation interval'); const interval = setInterval(() => { setCurrentCat((prev) => { const next = (prev + 1) % catAnimations.length; console.log(`Updating cat animation to frame ${next}`); return next; }); }, 300); // Faster animation return () => clearInterval(interval); }, []); return (

{catFact}

{breedInfo && (

Breed: {breedInfo.name} - {breedInfo.temperament}

)}

); }; const styles = ` button:hover { background-color: #f0f0f0 !important; transform: scale(1.05) !important; box-shadow: 0 0 30px rgba(255, 255, 255, 0.5) !important; } button:active { transform: scale(0.95) !important; background-color: #e0e0e0 !important; } `; // Add viewport meta tag for mobile const viewportMeta = document.createElement('meta'); viewportMeta.name = 'viewport'; viewportMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; document.head.appendChild(viewportMeta); const styleSheet = document.createElement("style"); styleSheet.innerText = ` ${styles} @media (max-width: 768px) { button:hover { transform: scale(1.02) !important; } button:active { transform: scale(0.98) !important; } } `; document.head.appendChild(styleSheet); const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();