Football Legacy Manager

by FrozenMaker38
227 lines9.3 KB
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Football Legacy Manager</title>
    <style>
        * { margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; box-sizing: border-box; }
        body { background: #1a2f1a; color: #fff; min-height: 100vh; padding: 20px; }
        .container { max-width: 1200px; margin: 0 auto; }
        h1 { color: #ffd700; text-align: center; margin-bottom: 30px; }
        .panel { background: rgba(0,0,0,0.4); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
        button { background: #2e8b57; color: white; border: none; padding: 10px 18px; border-radius: 8px; cursor: pointer; margin: 5px; font-weight: bold; }
        button:hover { background: #3cb371; }
        button:disabled { background: #555; cursor: not-allowed; }
        input, select { padding: 8px; border-radius: 6px; border: none; margin: 5px; width: 220px; }
        .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin: 15px 0; }
        .stat-card { background: rgba(255,255,255,0.1); padding: 12px; border-radius: 8px; text-align: center; }
        .hidden { display: none; }
        .news { max-height: 150px; overflow-y: auto; margin-top: 10px; }
        .news-item { padding: 6px; border-bottom: 1px solid #444; font-size: 0.9em; }
    </style>
</head>
<body>
<div class="container">
    <h1>🏆 Football Legacy Manager</h1>

    <!-- Pantalla de creación de club -->
    <div id="creacion" class="panel">
        <h2>Crea tu club histórico</h2>
        <div style="margin: 15px 0;">
            <input type="text" id="nombreClub" placeholder="Nombre de tu club" required>
            <input type="text" id="colores" placeholder="Colores del uniforme" required>
            <button onclick="crearClub()">🚀 Empezar carrera</button>
        </div>
    </div>

    <!-- Pantalla principal del juego -->
    <div id="principal" class="panel hidden">
        <div class="stats">
            <div class="stat-card">
                <h4>Club</h4>
                <p id="datoClub">-</p>
            </div>
            <div class="stat-card">
                <h4>Presupuesto</h4>
                <p id="datoPresupuesto">-</p>
            </div>
            <div class="stat-card">
                <h4>Estadio</h4>
                <p id="datoEstadio">-</p>
            </div>
            <div class="stat-card">
                <h4>Liga actual</h4>
                <p id="datoLiga">-</p>
            </div>
            <div class="stat-card">
                <h4>Prestigio</h4>
                <p id="datoPrestigio">-</p>
            </div>
        </div>

        <div style="margin: 20px 0;">
            <button onclick="verPlantilla()">👥 Plantilla</button>
            <button onclick="verEconomia()">💰 Economía</button>
            <button onclick="verEstadio()">🏗️ Estadio</button>
            <button onclick="verCompeticiones()">🏅 Competiciones</button>
            <button onclick="verNoticias()">📰 Noticias</button>
            <button onclick="avanzarTemporada()">⏭️ Avanzar temporada</button>
        </div>

        <!-- Secciones dinámicas -->
        <div id="seccionDatos" class="panel hidden"></div>

        <!-- Noticias -->
        <div id="seccionNoticias" class="panel hidden">
            <h3>Últimas noticias</h3>
            <div id="listaNoticias" class="news"></div>
        </div>
    </div>
</div>

<script>
// Datos base del juego
let juego = {
    club: null,
    presupuesto: 25000000,
    estadio: 15000,
    liga: "Liga Nacional (Nivel 3)",
    prestigio: 100,
    temporada: 2026,
    noticias: [],
    plantilla: [],
    logros: []
};

// Crear club inicial
function crearClub() {
    const nombre = document.getElementById('nombreClub').value.trim();
    const colores = document.getElementById('colores').value.trim();
    
    if(!nombre || !colores) return alert('Completa todos los datos');
    
    juego.club = nombre;
    juego.colores = colores;
    
    // Generar plantilla aleatoria inicial
    for(let i=1; i<=25; i++) {
        juego.plantilla.push({
            nombre: `Jugador ${i}`,
            edad: Math.floor(Math.random()*18)+17,
            valor: Math.floor(Math.random()*3000000)+500000,
            posicion: ['Portero','Defensa','Mediocampista','Delantero'][Math.floor(Math.random()*4)],
            estado: "Disponible"
        });
    }

    // Cambiar de pantalla
    document.getElementById('creacion').classList.add('hidden');
    document.getElementById('principal').classList.remove('hidden');
    actualizarInterfaz();
    agregarNoticia(`¡${juego.club} nace oficialmente! Empieza su carrera en la ${juego.liga}`);
}

// Actualizar todos los datos visibles
function actualizarInterfaz() {
    document.getElementById('datoClub').textContent = juego.club;
    document.getElementById('datoPresupuesto').textContent = new Intl.NumberFormat('es-ES').format(juego.presupuesto) + ' €';
    document.getElementById('datoEstadio').textContent = `Capacidad: ${juego.estadio.toLocaleString()} espectadores`;
    document.getElementById('datoLiga').textContent = juego.liga;
    document.getElementById('datoPrestigio').textContent = juego.prestigio + ' pts';
}

// Agregar noticia al sistema
function agregarNoticia(texto) {
    juego.noticias.unshift({texto, fecha: juego.temporada});
    if(juego.noticias.length > 10) juego.noticias.pop();
}

// Avanzar una temporada completa
function avanzarTemporada() {
    juego.temporada++;
    const ingresos = Math.floor((juego.estadio / 15000) * 8000000) + Math.floor(Math.random() * 5000000);
    const gastos = Math.floor(juego.presupuesto * 0.35);
    
    juego.presupuesto += ingresos - gastos;
    juego.prestigio += Math.floor(Math.random() * 50);

    // Ascenso automático por prestigio
    if(juego.prestigio > 500 && juego.liga.includes("Nivel 3")) juego.liga = "Liga de Ascenso (Nivel 2)";
    if(juego.prestigio > 1200 && juego.liga.includes("Nivel 2")) juego.liga = "Primera División Nacional";
    if(juego.prestigio > 2500) juego.liga = "Liga de Campeones Internacional";

    // Riesgo de bancarrota
    if(juego.presupuesto < 0) {
        agregarNoticia(`⚠️ ALERTA: ${juego.club} tiene deudas! Se venderán jugadores y se reducirá el estadio`);
        juego.estadio = Math.max(5000, juego.estadio - 2000);
        juego.presupuesto += 10000000;
    }

    agregarNoticia(`Temporada ${juego.temporada} finalizada: Ingresos ${ingresos.toLocaleString()}€`);
    actualizarInterfaz();
    alert(`Temporada ${juego.temporada} completada correctamente!`);
}

// Funciones de visualización
function verPlantilla() {
    const sec = document.getElementById('seccionDatos');
    sec.classList.remove('hidden');
    sec.innerHTML = `<h3>Plantilla de ${juego.club} (${juego.plantilla.length} jugadores)</h3>
    <p>Jóvenes promesas en cantera: ${Math.floor(Math.random()*8)+3}</p>
    <button onclick="document.getElementById('seccionDatos').classList.add('hidden')">Cerrar</button>`;
}

function verEconomia() {
    const sec = document.getElementById('seccionDatos');
    sec.classList.remove('hidden');
    sec.innerHTML = `<h3>Economía y Patrocinios</h3>
    <p>Presupuesto actual: ${juego.presupuesto.toLocaleString()} €</p>
    <p>Patrocinadores activos: ${Math.floor(Math.random()*4)+1}</p>
    <p>Ingresos por TV: ~${Math.floor(juego.presupuesto*0.1).toLocaleString()} €/temporada</p>
    <button onclick="document.getElementById('seccionDatos').classList.add('hidden')">Cerrar</button>`;
}

function verEstadio() {
    const sec = document.getElementById('seccionDatos');
    sec.classList.remove('hidden');
    const costoAmpliacion = (juego.estadio * 2);
    sec.innerHTML = `<h3>Estadio - Capacidad: ${juego.estadio.toLocaleString()}</h3>
    <p>Asistencia promedio: ${Math.floor(juego.estadio * 0.65).toLocaleString()} espectadores</p>
    <p>Costo para ampliar a ${juego.estadio + 10000}: ${costoAmpliacion.toLocaleString()} €</p>
    <button onclick="ampliarEstadio(${costoAmpliacion})">Ampliar estadio</button>
    <button onclick="document.getElementById('seccionDatos').classList.add('hidden')">Cerrar</button>`;
}

function ampliarEstadio(costo) {
    if(juego.presupuesto >= costo && juego.estadio < 110000) {
        juego.presupuesto -= costo;
        juego.estadio += 10000;
        agregarNoticia(`🏟️ El estadio de ${juego.club} llega a ${juego.estadio.toLocaleString()} espectadores!`);
        actualizarInterfaz();
        verEstadio();
    } else alert("No tienes suficiente presupuesto o ya tienes el estadio al máximo");
}

function verCompeticiones() {
    const sec = document.getElementById('seccionDatos');
    sec.classList.remove('hidden');
    sec.innerHTML = `<h3>Competiciones activas</h3>
    <p>Participando en: ${juego.liga}</p>
    <p>Copa nacional: Fase de grupos</p>
    <p>Ranking mundial: Puesto ${Math.floor(300 - juego.prestigio / 10)}</p>
    <button onclick="document.getElementById('seccionDatos').classList.add('hidden')">Cerrar</button>`;
}

function verNoticias() {
    const sec = document.getElementById('seccionNoticias');
    sec.classList.remove('hidden');
    document.getElementById('seccionDatos').classList.add('hidden');
    let html = '';
    juego.noticias.forEach(n => html += `<div class="news-item">[${n.fecha}] ${n.texto}</div>`);
    document.getElementById('listaNoticias').innerHTML = html;
}
</script>
</body>
</html>
Game Source: Football Legacy Manager

Creator: FrozenMaker38
Libraries: none
Complexity: complex (227 lines, 9.3 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: football-legacy-manager-frozenmaker38" to link back to the original. Then publish at arcadelab.ai/publish.