Refactor: Modularize PokemonDetail CSS and add documentation

src/App.css

@@ -1,19 +1,13 @@
-.App {
-  text-align: center;
-
-  background-image: url('resources/background.jpg');
-  background-size: cover;
+body {
+    background-color: white;
+    color: black;
+    margin: 0;
+    font-family: sans-serif;
 }
 
-
-.App-header {
-
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-
+.app-layout {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}

src/App.js

@@ -1,33 +1,78 @@
+import React, { useState } from 'react';
 import './App.css';
-import PokemonCard from './components/PokemonCard';
+import { GAME_PHASES } from './utils/constants';
+
+// --- IMPORTS DE PANTALLAS ---
+import RegisterScreen from './screens/register/RegisterScreen';
+import SelectionScreen from './screens/selection/SelectionScreen';
+import PageLabel from './components/PageLabel';
+import BattleScreen from './screens/battle/BattleScreen';
 
 function App() {
-  return (
-    <div className="App">
-      <div className="App-header">
-
-        {
-          <PokemonCard
-            name={"Bulbasaur"}
-            image={"https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/001.png"}
-            hp={100}
-            maxHp={100}
-            type={"verdura"}
-          />
-        }
-        {
-          <PokemonCard
-            name={"Pikachu" }
-            image={"https://upload.wikimedia.org/wikipedia/en/thumb/a/a6/Pok%C3%A9mon_Pikachu_art.png/250px-Pok%C3%A9mon_Pikachu_art.png"}
-            hp={100}
-            maxHp={100}
-            type={"tomas edison"}
-          />
-        }
-
-      </div>
-    </div>
-  );
+    const [phase, setPhase] = useState(GAME_PHASES.REGISTER);
+    const [players, setPlayers] = useState(null);
+    const [teams, setTeams] = useState(null);
+
+    const handleRegisterComplete = (playerData) => {
+        setPlayers(playerData);
+        setPhase(GAME_PHASES.SELECTION);
+    };
+
+    const handleBattleStart = (teamData) => {
+        setTeams(teamData);
+        setPhase(GAME_PHASES.BATTLE);
+    };
+
+    // --- NUEVO: Volver a selección sin borrar jugadores ---
+    const handleBackToSelection = () => {
+        // Solo cambiamos la fase, 'players' se mantiene en memoria
+        setPhase(GAME_PHASES.SELECTION);
+    };
+
+    const handleReset = () => {
+        setPlayers(null); // Aquí sí borramos todo
+        setTeams(null);
+        setPhase(GAME_PHASES.REGISTER);
+    };
+
+    return (
+        <div className="app-layout" style={{ backgroundImage: "url('background_register.png')" }}>
+
+            <div className="game-viewport">
+                {/* FASE 1: REGISTRO */}
+                {phase === GAME_PHASES.REGISTER && (
+                    <RegisterScreen onComplete={handleRegisterComplete} />
+                )}
+
+                {/* FASE 2: SELECCIÓN */}
+                {phase === GAME_PHASES.SELECTION && (
+                    <SelectionScreen
+                        players={players}
+                        onBattleStart={handleBattleStart}
+                        onReset={handleReset}
+                    />
+                )}
+
+                {/* FASE 3: BATALLA */}
+                {phase === GAME_PHASES.BATTLE && (
+                    <div style={{ width: '100%', height: '100%' }}>
+                        <PageLabel
+                            title={"--- CHOOSE YOUR TEAM ---"}
+                            subtitle={"First Generation Pokedex "}
+                        />
+
+                        {/* Pasamos la nueva función onBack */}
+                        <BattleScreen
+                            players={players}
+                            teams={teams}
+                            onBack={handleBackToSelection}
+                            onReset={handleReset}
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
 }
 
-export default App;
+export default App;

src/components/ActionButton.css

@@ -0,0 +1,67 @@
+/*ESTILO GENERAL PARA TODOS LOS ACTION-BUTTONS QUE DECLAREMOSe*/
+.btn-action {
+    /*Damos espacio tanto arriba, abajo, y en los laterales */
+    padding: 14px 24px;
+    /*Quitamos el borde*/
+    border: none;
+    /* Forma de píldora (como Start/Select o botones A/B) */
+    border-radius: 50px;
+    margin-top: 10px;
+    /* TIPOGRAFÍA */
+    font-family: 'Press Start 2P', cursive, sans-serif;
+    font-size: 0.85rem;
+    font-weight: bold;
+    letter-spacing: 1px;
+    cursor: pointer;
+    /* EFECTO PLÁSTICO 3D (El truco Nintendo) */
+    /* Sombra 1 (inset blanco): Brillo superior (luz) */
+    /* Sombra 2 (inset negro): Sombra inferior (volumen) */
+    /* Sombra 3 (externa): La sombra que proyecta el botón en la carcasa */
+    box-shadow:
+        inset 0px 4px 0px rgba(255, 255, 255, 0.4),
+        inset 0px -4px 0px rgba(0, 0, 0, 0.2),
+        0px 6px 0px rgba(0, 0, 0, 0.3);
+
+}
+
+.btn-action:disabled {
+    background-color: #9ea7b4;
+    border: none;
+    /* Gris plástico viejo */
+    color: #6a737d;
+    cursor: not-allowed;
+    transform: translateY(4px);
+    /* Se queda hundido */
+    /* Reutilizo la escala de sombras*/
+    box-shadow:
+        inset 0px 4px 0px rgba(255, 255, 255, 0.4),
+        inset 0px -4px 0px rgba(0, 0, 0, 0.2),
+        0px 6px 0px rgba(0, 0, 0, 0.3);
+}
+
+/* --- COLORES --- */
+/* PRIMARY: El Botón "A" (Rojo Gameboy Clásico) */
+.primary {
+    background-color: #c6616b;
+    color: white;
+    text-shadow: 2px 2px 0px #a13d47;
+    /* Texto con relieve */
+}
+
+/* Un pequeño ajuste al hover para dar feedback */
+.primary:hover:not(:disabled) {
+    background-color: #a13d47;
+}
+
+/* SECONDARY: El Botón "Start/Select" o Gameboy Screen (Verde/Gris) */
+.secondary {
+    background-color: #333333;
+    /* Gris oscuro D-PAD */
+    color: #f0f0f0;
+    border: 2px solid #555;
+    /* Un borde sutil para diferenciar */
+}
+
+.secondary:hover:not(:disabled) {
+    background-color: #444444;
+}

src/components/ActionButton.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './ActionButton.css';
+
+//Componente reutilizable botón que permite pasar por props
+//un nombre de botón, una función onClick, un estado y variantes de color
+function ActionButton({ label, onClick, disabled, variant = 'primary' }) {
+    return (
+        <button 
+            onClick={onClick} 
+            disabled={disabled}
+            className={`btn-action ${variant}`}
+        >
+            {label}
+        </button>
+    );
+}
+export default ActionButton;

src/components/PageLabel.css

@@ -0,0 +1,38 @@
+.retro-image-label {
+    /* AHORA: Aumenta este valor. Prueba con 40px, 50px, etc. */
+    border: 25px solid transparent;
+    border-image-slice: 60 fill;
+    /* Ancho máximo*/
+    width: 100%;
+
+    max-width: 700px;
+    /* Centrado horizontal en la página */
+    margin: 20px auto;
+    /* Alineación del contenido (el texto) dentro del marco */
+    display: flex;
+    justify-content: center;
+}
+
+
+.page-label-container {
+    text-align: center;
+
+    margin-bottom: 2rem;
+    margin-top: 2rem;
+
+    color: black;
+}
+
+.page-label-text {
+    font-size: 1.5rem;
+    text-shadow: 3px 3px #ffefff;
+    text-transform: uppercase;
+    margin: 0;
+    font-family: 'Press Start 2P', cursive;
+}
+
+.page-label-subtitle {
+    color: black;
+    font-size: 0.8rem;
+    margin-top: 10px;
+}

src/components/PageLabel.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import './PageLabel.css';
+
+function PageLabel({ title, subtitle }) {
+    return (
+        <div className='retro-image-label' style={{ borderImageSource: "url('label.png')" }}>
+            <div className="page-label-container" >
+                <h1 className="page-label-text">{title}</h1>
+                {subtitle && <p className="page-label-subtitle">{subtitle}</p>}
+            </div>
+        </div>
+    );
+}
+export default PageLabel;