import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; // Estilos globales const styles = { button: { padding: '12px 24px', backgroundColor: '#2196F3', color: 'white', border: 'none', borderRadius: '25px', cursor: 'pointer', fontSize: '16px', transition: 'all 0.3s ease', boxShadow: '0 4px 6px rgba(0,0,0,0.1)', margin: '20px', '&:hover': { backgroundColor: '#1976D2', transform: 'translateY(-2px)', } }, container: { background: 'linear-gradient(135deg, #1e3c72 0%, #2a5298 100%)', minHeight: '100vh', color: 'white', padding: '20px' } }; const WelcomeScreen = ({ onStart }) => { const [name, setName] = useState(''); return (

FotoMaestro AI

setName(e.target.value)} style={{ padding: '15px 20px', fontSize: '16px', width: '300px', borderRadius: '25px', border: '2px solid rgba(255,255,255,0.3)', backgroundColor: 'rgba(255,255,255,0.1)', color: 'white', outline: 'none', margin: '20px', textAlign: 'center' }} />

); }; const Tutorial = ({ onNext }) => { return (

La Regla de los Tercios

{[...Array(9)].map((_, i) => (

))}

En artes visuales como la pintura, la fotografía, el diseño y el cine, la regla de los tercios es una forma de composición para ordenar objetos dentro de la imagen. Esta regla divide una imagen en nueve partes diferentes, utilizando dos líneas imaginarias paralelas y equiespaciadas de forma horizontal y dos más de las mismas características de forma vertical, y recomienda utilizar los puntos de intersección de estas líneas para distribuir los objetos de la escena.

); }; const Level1 = ({ onComplete }) => { const [position, setPosition] = useState({ x: 300, y: 200 }); const [feedback, setFeedback] = useState(''); const handleClick = (e) => { const rect = e.target.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; setPosition({ x, y }); // Check if the horizon is close to the third lines const height = rect.height; const thirdLine1 = height * 0.33; const thirdLine2 = height * 0.66; if (Math.abs(y - thirdLine1) < 20 || Math.abs(y - thirdLine2) < 20) { setFeedback('¡Excelente! El horizonte está en la línea de tercios.'); } else { setFeedback('Intenta colocar el horizonte en una de las líneas horizontales.'); } }; return (

Nivel 1: La Playa al Atardecer

Coloca el horizonte en una de las líneas horizontales

{feedback}

{/* Líneas guía de tercios */}

{/* Línea del horizonte ajustable */}

); }; const GameComplete = ({ playerName, onRestart }) => { return (

¡Felicidades {playerName}!

Has completado los niveles básicos de composición.

Ahora puedes seguir explorando y mejorando tus fotos con lo aprendido.

); }; const Level2 = ({ onComplete }) => { const [position, setPosition] = useState({ x: 300, y: 200 }); const [isDragging, setIsDragging] = useState(false); const handleMouseDown = () => { setIsDragging(true); }; const handleMouseMove = (e) => { if (isDragging) { const rect = e.currentTarget.getBoundingClientRect(); const x = e.clientX - rect.left - 50; // 50 is half the width of the starfish const y = e.clientY - rect.top - 45; // 45 is half the height of the starfish // Constrain the object within the frame const boundedX = Math.max(0, Math.min(x, 500)); // Adjusted for starfish width const boundedY = Math.max(0, Math.min(y, 310)); // Adjusted for starfish height setPosition({ x: boundedX, y: boundedY }); } }; const handleMouseUp = () => { setIsDragging(false); }; return (

Nivel 2: Posiciona el Objeto

Arrastra el objeto a uno de los puntos de intersección de la cuadrícula

{/* Grid lines */}

{/* Draggable object */}

); }; const FinalLevel = ({ onComplete }) => { const [cameraPosition, setCameraPosition] = useState({ x: 0, y: 0 }); const [hasShot, setHasShot] = useState(false); const [feedback, setFeedback] = useState(''); const handleMouseMove = (e) => { const rect = e.currentTarget.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width; const y = (e.clientY - rect.top) / rect.height; setCameraPosition({ x, y }); }; const takePhoto = () => { setHasShot(true); // Verificar si la composición sigue la regla de los tercios const isGoodComposition = ( (Math.abs(cameraPosition.x - 0.33) < 0.1 || Math.abs(cameraPosition.x - 0.66) < 0.1) && (Math.abs(cameraPosition.y - 0.33) < 0.1 || Math.abs(cameraPosition.y - 0.66) < 0.1) ); if (isGoodComposition) { setFeedback('¡Excelente composición! Has aplicado correctamente la regla de los tercios.'); } else { setFeedback('Intenta de nuevo. Recuerda usar los puntos de intersección de la cuadrícula.'); } }; return (

Nivel Final: Captura la Composición Perfecta

1. Mueve el cursor sobre la imagen para posicionar el visor rojo

2. Coloca el visor en uno de los puntos de intersección de la cuadrícula

3. Cuando estés listo, presiona el botón "Tomar Foto" para capturar la imagen

{/* Cuadrícula de tercios */}

{Array(9).fill(null).map((_, i) => (

))}

{/* Visor de cámara */}

{feedback && (

{feedback}

)}

); }; const Level3 = ({ onComplete }) => { const [position, setPosition] = useState({ x: 300, y: 200 }); const [feedback, setFeedback] = useState(''); const handleClick = (e) => { const rect = e.target.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; setPosition({ x, y }); // Check if the vertical line is centered const width = rect.width; const centerLine = width * 0.5; if (Math.abs(x - centerLine) < 20) { setFeedback('¡Excelente! Las líneas guían la mirada hacia el centro.'); } else { setFeedback('Intenta alinear la línea vertical con el centro de la imagen.'); } }; return (

Nivel 3: Simetría y Líneas Guía

Alinea la perspectiva para que las líneas guíen hacia el centro

{feedback}

{/* Línea guía vertical */}

{/* Líneas guía de composición */}

); }; const App = () => { const [gameState, setGameState] = useState('welcome'); const [playerName, setPlayerName] = useState(''); const handleStart = (name) => { setPlayerName(name); setGameState('tutorial'); }; const renderCurrentScreen = () => { switch(gameState) { case 'welcome': return ; case 'tutorial': return setGameState('level1')} />; case 'level1': return setGameState('level2')} />; case 'level2': return setGameState('level3')} />; case 'level3': return setGameState('finalLevel')} />; case 'finalLevel': return setGameState('complete')} />; case 'complete': return setGameState('welcome')} />; default: return ; } }; return (

{renderCurrentScreen()}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();