Spaces:

MatteoScript
/

InnovationLab

Running

File size: 33,083 Bytes

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>INNOVATION RUN - Matteo Bergamelli</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet">
    <style>
        :root { --neon-green: #00ff41; --legacy-gold: #ffb700; --error-red: #ff0055; --bg-dark: #0a0a0a; }
        body { background: #0a0a0a; color: #e0e0e0; font-family: 'JetBrains Mono', monospace; overflow: hidden; user-select: none; touch-action: none; position: fixed;}
        canvas { display: block; width: 100%; height: 100%; }
        
        .scanlines { background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)); background-size: 100% 4px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; }
        .ui-panel { backdrop-filter: blur(5px); background: rgba(20, 20, 20, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.2s; }
        
        .btn { background: var(--neon-green); color: #000; padding: 20px 50px; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 4px; box-shadow: 0 0 20px rgba(0, 255, 65, 0.4); transition: 0.2s; border: none; }
        .btn:hover { transform: scale(1.05); background: #fff; box-shadow: 0 0 40px rgba(0, 255, 65, 0.6); }
        
        .flow-container { width: 200px; height: 12px; background: #333; border-radius: 6px; overflow: hidden; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 20; border: 2px solid #555; }
        .flow-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #ffb700, #00ff41); transition: width 0.1s linear; }
        .flow-text { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; color: #fff; text-transform: uppercase; font-weight: bold; text-shadow: 0 2px 4px #000; width: 100%; text-align: center; }
        
        .floating-message { 
            position: absolute; 
            font-weight: 800; 
            font-size: 1.40rem; 
            text-align: left; 
            pointer-events: none; 
            text-shadow: 2px 2px 0px #000; 
            z-index: 50; 
            white-space: nowrap; 
            animation: floatRightUp 1.8s cubic-bezier(0.23, 1, 0.32, 1) forwards; 
        }

        @keyframes floatRightUp { 
            0% { opacity: 0; transform: translate(0, 20px) scale(0.5); } 
            10% { opacity: 1; transform: translate(20px, -20px) scale(1.2); } 
            70% { opacity: 1; transform: translate(40px, -80px) scale(1); } 
            100% { opacity: 0; transform: translate(60px, -120px) scale(0.9); } 
        }

        .motivational-banner { position: absolute; top: 20%; width: 100%; text-align: center; font-size: 1.9rem; font-weight: 800; color: #fff; text-shadow: 0 0 20px var(--neon-green); pointer-events: none; z-index: 40; opacity: 0; transition: all 0.5s; letter-spacing: 2px; }
        .combo-display { position: absolute; top: 45%; right: 8%; font-size: 2.3rem; font-weight: 900; color: #fff; text-shadow: 4px 4px 0px #ff0055; opacity: 0; transition: all 0.3s; z-index: 45; transform: rotate(-10deg); text-align: right; pointer-events: none; font-style: italic; }
        .hidden { display: none !important; }
    </style>
</head>
<body>

<div id="game-container" style="position: relative; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%); overflow: hidden;">
    <div class="scanlines"></div>
    <canvas id="gameCanvas"></canvas>
    
    <div id="motivator" class="motivational-banner"></div>
    <div id="combo" class="combo-display"></div>

    <div style="position: absolute; top: 0; left: 0; width: 100%; padding: 1rem; display: flex; justify-content: space-between; z-index: 20; pointer-events: none;">
        <div class="ui-panel" style="padding: 0.5rem 1rem; border-radius: 0.25rem;">
            <div style="font-size: 10px; color: #999;" id="lbl-phase">FASE PROGETTO</div>
            <div id="phase-display" style="color: #00ff41; font-weight: bold; font-size: 1.125rem;"></div>
        </div>
        <div class="ui-panel" style="padding: 0.5rem 1rem; border-radius: 0.25rem; text-align: right;">
            <div style="font-size: 10px; color: #999;" id="lbl-metrics">KPI</div>
            <div style="color: white; font-size: 0.875rem;">
                <span id="lbl-score">PUNTI</span>: <span id="score-display" style="color: #00ff41; font-weight: bold;">0</span> | 
                <span id="lbl-legacy">LEGACY</span>: <span id="legacy-display" style="color: #ffb700; font-weight: bold;">0</span>%
            </div>
        </div>
    </div>

    <div class="flow-text" id="flow-label"></div>
    <div class="flow-container"><div id="flow-bar" class="flow-bar"></div></div>

    <div id="start-screen" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 30; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); padding: 1rem;">
        
        <div style="background: #111; border: 1px solid #444; padding: 2rem; border-radius: 0.5rem; max-width: 40rem; width: 100%; margin-bottom: 2rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);">
            <div style="display: flex; flex-direction: column; gap: 1.5rem; font-size: 1.1rem;">
                <div style="display: flex; align-items: center;">
                    <span id="icon-legacy" style="font-size: 2.8rem; margin-right: 1rem;"></span>
                    <div><span id="title-legacy" style="color: #ffb700; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-legacy" style="color: #999; font-size: 1.2rem; margin: 0;"></p></div>
                </div>
                <div style="display: flex; align-items: center;">
                    <span id="icon-ai" style="font-size: 2.8rem; margin-right: 1rem;"></span>
                    <div><span id="title-ai" style="color: #00ff41; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-ai" style="color: #999; font-size: 1.2rem; margin: 0;"></p></div>
                </div>
                <div style="display: flex; align-items: center;">
                    <span id="icon-obs" style="font-size: 2.8rem; margin-right: 1rem;"></span>
                    <div><span id="title-obs" style="color: #ff0055; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-obs" style="color: #999; font-size: 1.2rem; margin: 0;"></p></div>
                </div>
                <div style="display: flex; align-items: center;">
                    <span style="font-size: 2.8rem; margin-right: 1rem;">⚡</span>
                    <div><span id="title-bar" style="color: white; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-bar" style="color: #999; font-size: 1.2rem; margin: 0;"></p></div>
                </div>
            </div>
        </div>

        <button id="btn-start" class="btn" onclick="initGame()"></button>
        <p id="controls-hint" style="margin-top: 1.5rem; font-size: 1rem; color: #ccc; animation: pulse 2s infinite; font-weight: bold;"></p>
    </div>

    <div id="game-over" class="hidden" style="position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; z-index: 40; background: rgba(0,0,0,0.95);">
        
        <h2 id="go-title" style="font-size: 2.25rem; font-weight: bold; color: white; margin-bottom: 1.5rem; text-align: center;"></h2>
        
        <div style="text-align: center; font-size: 1.45rem; color: #ccc; margin-bottom: 2.5rem; background: #1a1a1a; padding: 2.5rem; border: 1px solid #444; border-radius: 0.5rem; max-width: 35rem; width: 100%;">
            <p id="go-reason" style="color: #ff0055; font-weight: bold; margin-bottom: 1.5rem; font-size: 1.7rem;"></p>
            
            <div style="display: flex; justify-content: space-between; margin-bottom: 0.8rem;"><span>MVP Score:</span><span id="final-score" style="color: #00ff41; font-weight: bold;">0</span></div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 1.5rem;"><span>Modernizzazione:</span><span id="final-legacy" style="color: #ffb700; font-weight: bold;">0%</span></div>
            <hr style="border-color: #444; margin: 1.5rem 0;">
            
            <p id="death-quote" style="font-style: italic; color: #999; font-size: 1.2rem;"></p>
        </div>
        <button id="btn-restart" class="btn" onclick="initGame()"></button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    
    // 1. Previene il "Pinch to Zoom" (Pizzico con due dita) su tutto il documento
    document.addEventListener('touchmove', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault(); // Blocca se ci sono più di 1 dito
        }
    }, { passive: false });

    // 2. Previene il doppio tap veloce (Zoom) su tutto il documento
    let lastTouchEnd = 0;
    document.addEventListener('touchend', function (event) {
        const now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);

    // 3. Gestione specifica per il contenitore del gioco (Massima priorità)
    const gameContainer = document.querySelector('.game-zoom-container');
    if (gameContainer) {
        gameContainer.addEventListener('touchmove', function(e) {
            // Impedisce qualsiasi movimento della pagina mentre si gioca
            e.preventDefault();
        }, { passive: false });
    }
});
/**
 * ==========================================================================================
 * ⚙️ CONFIGURAZIONE DI GIOCO - MATTEO INNOVATION LAB EDITION 
 * ==========================================================================================
 */
const GAME_CONFIG = {
    SPEED: {
        INITIAL: 5.8,        
        MAX: 14.0,           
        ACCELERATION: 0.0007,
        BOOST: 3.5           
    },
    GRAVITY: 0.45,
    JUMP_FORCE: -10.8,
    
    TEXTS: {
        TITLE: "Innovation Run",
        SUBTITLE: "// Missione: Crea un PoC visionario OMNICANALE", 
        LBL_PHASE: "STATUS MENTALE",
        LBL_METRICS: "LIVELLO HYPE",
        LBL_SCORE: "STIMA DEL CAPO",
        LBL_LEGACY: "BUG RISOLTI",
        START_BTN: "Corri verso l'innovazione",
        RESTART_BTN: "CTRL+Z E RIPROVA",
        CONTROLS: "Premi SPAZIO per saltare i problemi | GIÙ per schivare le riunioni",
        BAR_EMPTY: "CERCA ISPIRAZIONE...",
        BAR_FULL: "🔥 MODALITÀ GENIO ATTIVA! 🔥" 
    },

    JUMP_MESSAGES: [
        "SALTO DI QUALITÀ!",
        "SKIP MEETING!",
        "BYPASS!",
        "NEXT LEVEL!",
        "ELEVATION!",
        "QUOTA RAGGIUNTA!",
        "CLOUD JUMP!",
        "SORPASSO!",
        "HOP!",
        "AGILE JUMP!",
        "SCALABILITÀ!"
    ],

    ENTITIES: {
        LEGACY: {
            CHAR: '☕', 
            COLOR: '#FFC107', // Giallo Oro
            TITLE: "CAFFÈ DOPPIO", 
            DESC: "Senza questo non si compila. [+10 Punti]",
            MSG: [
                "CAFFÈ DOPPIO!", 
                "ENERGIA PURA!", 
                "COMPILAZIONE OK!", 
                "BUG-IORNO!", 
                "FOCUS ON!",
                "ESPRESSO DI CODICE!",
                "REFILL DI SINAPSI!",
                "BREAK INNOVATION LAB",
                "SHOT DI CREATIVITÀ!",
                "CPU AL 100%, DEV ANCHE!",
                "SYNC-CAFFÈ CON IL TEAM!",
                "MEETING-READY MODE!",
                "LATENZA MENTALE AZZERATA!",
                "ONIVERSE FUEL!",
                "IDEA RICARICATA!",
                "POC-ACCINO TIME!",
                "DEBUG CON AROMA ARABICA!",
                "IL GANTT ORA HA SENSO!",
                "OMNICAPPUCCINO APPROVED!"
            ]
        },
        AI: {
            CHAR: '🤖', 
            COLOR: '#00D4FF', // Azzurro Ciano
            TITLE: "VERTEX AI", 
            DESC: "Non ti sostituisce, ti AMPLIFICA. [GOD MODE]",
            MSG: [
                "GEMINI MI AMPLIFICA!", 
                "COPILOT ATTIVO!", 
                "INTELLIGENZA++", 
                "SALTO NEL FUTURO!", 
                "HYPE BOOST!",
                "PROMPT IN ONIVERSE STYLE!",
                "LLM ALLINEATO!",
                "DEPLOYATO SU VERTEX!",
                "DASHBOARD PARLANTE!",
                "RAG ATTIVATO!",
                "INSIGHT IN REAL-TIME!",
                "PROTOTIPO READY!",
                "AI++",
                "È USCITO IL NUOVO GEMINI!",
                "FINETUNING DI GEMMA",
                "DALLO USE CASE AL WOW CASE!",
                "REALTA' AUMENTATA ON!"
            ]

        },
        OBSTACLE: {
            CHAR: '🧱', 
            COLOR: '#FF3D00', // Rosso Arancio
            TITLE: "OLD STYLE", 
            DESC: "'Si è sempre fatto così', 'Costa troppo'. SALTALA!",
            MSG: [
                "NON TI SENTO!", 
                "BYE BYE SILOS!", 
                "INNOVAZIONE VERA!", 
                "BUROCRAZIA KO!",
                "RIUNIONE SENZA AGENDA IN VISTA!",
                "SCOPE CREEP IN ARRIVO!",
                "SLIDE AL POSTO DI CODICE!",
                "\"METTIAMOLO NEL PROSSIMO QUARTO\"",
                "E-MAIL A 32 DESTINATARI!",
                "TICKET APERTO DAL 2012!",
                "APPROVAZIONE A TRE LIVELLI!",
                "CAMBIO REQUISITI LAST MINUTE!",
                "DOCUMENTAZIONE INESISTENTE!",
                "PASSWORD SCRITTA SU POST-IT!",
                "EXCEL SALVATO SUL DESKTOP!",
                "INTERFACCIA NON RESPONSIVE!",
                "MEETING CHE POTEVA ESSERE UNA CHAT!",
                "CHAOS MONKEY ORGANIZZATIVO!",
            ]
        },
        BAR: {
            TITLE: "BARRA DELL'INNOVAZIONE",
            DESC: "Riempi la barra per far approvare il budget."
        }
    },

    MOTIVATIONAL: [
        "MA SUL MIO PC FUNZIONA!",
        "È COLPA DELLA CACHE!",
        "CHI HA TOCCATO IL SERVER?!",
        "PUSHATO IN PRODUZIONE!",
        "NON È UN BUG, È UNA FEATURE!",
        "HO COMMENTATO IL CODICE",
        "STACCA E RIATTACCA!",
        "PIÙ PYTHON, MENO PPTX!",
        "OMNICHANNEL A VITA!",
        "DA QUI A PROTOTIPO È UN ATTIMO!",
        "MAKE IT WORK, THEN MAKE IT WOW!",
        "L'OMNICANALE NON DORME MAI!",
        "IL PROBLEMA GIUSTO VALE ORO.",
        "DOMANDE GIUSTE", 
        "IDEE GENIALI A GO GO",
        "PENSALA IN SCALA ONIVERSE.",
        "SE PUÒ ESSERE AUTOMATIZZATO, FALLO!",
        "OGNI BUG RACCONTA UNA STORIA.",
        "MVP O NIENTE.",
        "DATI, NON OPINIONI.",
        "PIÙ TEST, MENO ALIBI.",
        "UN PROTOTIPO VALE 100 SLIDE.",
        "DA DOSSOBUONO AL FUTURO",
    ],

    COMBO_PHRASES: [
        "DAJE DEV!",
        "CODICE POETICO!",
        "MIRACOLO TECNICO!",
        "SENIOR DEV AURA!",
        "ANGULAR GOAL!",
        "ZERO CONFLITTI GIT!",
        "MVP LEGGENDARIO!",
        "FERMATEMI!",
        "QUESTO È IL FUTURO!", 
        "BRIVIDO AI!", 
        "DOSSOBUONO POWER!",
        "OMNICHANNEL COMBO x10!",
        "FLOW STATE ATTIVATO!",
        "FRONT-END DA VETRINA ONIVERSE!",
        "BACK-END CHE NON MOLLA!",
        "PIPELINE DA CHAMPIONS LEAGUE!",
        "UX SPAZIALE!",
        "SCALABILITÀ LIKE A BOSS!",
        "LATENZA? NON PERVENUTA!",
        "REFACTORING ELEGANTE!",
        "SPRINT PERFETTO!",
        "PoC DA APPLAUSO!",
        "ROADMAP ALLINEATA AL CODICE!",
    ],

    GAME_OVER_TITLES: [
        "SCHERMATA BLU",
        "TI HANNO MESSO IN UN'ALTRA CALL",
        "HAI CANCELLATO IL DATABASE",
        "IL WI-FI TI HA TRADITO",
        "IL SERVER VA IN VACANZA",
        "SLIDE INFINITE, TEMPO FINITO",
        "MEETING CHE NON FINISCE",
        "MERGE FALLITO",
        "CONFLITTO DI PRIORITÀ CRITICO",
        "TASK AGGIUNTO IN EXCEL",
        "LOGIN BLOCCATO",
        "SESSIONE SCADUTA NEL MOMENTO SBAGLIATO",
        "WI-FI DELLO STORE IN TILT",
        "SERVER DOWN DURANTE LA DEMO",
        "CRON JOB IMPAZZITO",
        "TIMEOUT ESISTENZIALE DEL DEV"
    ],
    GAME_OVER_REASONS: [
        "Sei finito in un tunnel di burocrazia.",
        "Hai accettato una riunione venerdì alle 17:30.",
        "Il Legacy Code ha avuto la meglio.",
        "Ti sei dimenticato la WHERE nel DELETE * FROM...",
        "Ti sei perso tra troppi file Excel di tracking.",
        "Un merge conflict ti ha fatto perdere il ritmo.",
        "Hai aperto la mail sbagliata in diretta con il capo.",
        "Hai sottovalutato la demo in ambiente reale store.",
        "La user journey era più lunga del previsto.",
        "La call \"da 10 minuti\" è durata un'ora.",
        "Il PoC ha funzionato… ma solo in locale.",
        "Hai deployato sulla branch sbagliata.",
        "Il budget è finito prima della feature chiave.",
        "Hai dimenticato di allineare business e IT.",
        "I log erano verbosi, ma non sul problema giusto.",
        "La sandbox non era così isolata come pensavi.",
        "Un redirect ti ha portato nel limbo dell'autenticazione.",
        "La checklist di go-live era rimasta in bozza.",
        "Hai chiuso il tab con la documentazione proprio sul più bello."
    ],
    DEATH_QUOTES: [
        "\"Tranquillo, il backup è... aspetta, c'era un backup vero?\"",
        "\"Vabbè, diciamo che era solo un test di carico.\"",
        "\"Se nessuno se ne è accorto, non è successo niente.\"",
        "\"Prova a dare la colpa allo stagista.\"",
        "\"Riavvia il router e prega.\"",
        "\"In teoria l'architettura era perfetta… in pratica un po' meno.\"",
        "\"Il PoC era visionario, il firewall un po' di più.\"",
        "\"Secondo me in demo funzionava meglio.\"",
        "\"Scrivi pure 'da migliorare' nel retrospettivo.\"",
        "\"Mettiamo 'comportamento atteso da chiarire' nel ticket.\"",
        "\"Se lo raccontiamo bene diventa un caso studio.\"",
        "\"È colpa dell'ambiente, non del Dev.\"",
        "\"L'importante è che in PowerPoint sembri tutto stabile.\"",
        "\"Chiamiamolo 'fail veloce' e sembriamo agili.\"",
        "\"Al massimo lo vendiamo come esperienza immersiva imprevista.\"",
        "\"Mettiamo un feature flag e nessuno si farà male.\"",
        "\"Se il log non parla, il Dev sospira.\"",
        "\"Tranquilli, la prossima iterazione sarà quella buona. Forse.\""
    ],

    PHASES: [
        { score: 0, name: "ULTIMO ARRIVATO" },
        { score: 150, name: "QUELLO BRAVO COL PC" },
        { score: 400, name: "HACKER DI PROVINCIA" },
        { score: 700, name: "VISIONARIO TECH" },
        { score: 1200, name: "RE DELL'INNOVATION LAB 👑" }
    ]
};

/* ================= ENGINE START ================= */
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const GRAVITY = GAME_CONFIG.GRAVITY;
const JUMP = GAME_CONFIG.JUMP_FORCE;
const DOUBLE_JUMP = GAME_CONFIG.JUMP_FORCE * 0.9;
const GROUND_H = 80;

let state = { playing: false, speed: GAME_CONFIG.SPEED.INITIAL, score: 0, legacy: 0, flow: 50, frame: 0, phaseIdx: 0, shake: 0, combo: 0 };
let player = { x: 80, y: 0, w: 48, h: 48, dy: 0, grounded: false, canDouble: false, amplified: 0, stretch: 1 };
let entities = [], particles = [], bgStars = [];

const dom = {
    start: document.getElementById('start-screen'),
    over: document.getElementById('game-over'),
    score: document.getElementById('score-display'),
    legacy: document.getElementById('legacy-display'),
    phase: document.getElementById('phase-display'),
    bar: document.getElementById('flow-bar'),
    barLabel: document.getElementById('flow-label'),
    finalScore: document.getElementById('final-score'),
    finalLegacy: document.getElementById('final-legacy'),
    deathQuote: document.getElementById('death-quote'),
    motivator: document.getElementById('motivator'),
    combo: document.getElementById('combo'),
    goTitle: document.getElementById('go-title'),
    goReason: document.getElementById('go-reason')
};

function setupUI() {
    document.getElementById('lbl-phase').innerText = GAME_CONFIG.TEXTS.LBL_PHASE;
    document.getElementById('lbl-metrics').innerText = GAME_CONFIG.TEXTS.LBL_METRICS;
    document.getElementById('lbl-score').innerText = GAME_CONFIG.TEXTS.LBL_SCORE;
    document.getElementById('lbl-legacy').innerText = GAME_CONFIG.TEXTS.LBL_LEGACY;
    document.getElementById('btn-start').innerText = GAME_CONFIG.TEXTS.START_BTN;
    document.getElementById('btn-restart').innerText = GAME_CONFIG.TEXTS.RESTART_BTN;
    document.getElementById('controls-hint').innerText = GAME_CONFIG.TEXTS.CONTROLS;

    document.getElementById('icon-legacy').innerText = GAME_CONFIG.ENTITIES.LEGACY.CHAR;
    document.getElementById('title-legacy').innerText = GAME_CONFIG.ENTITIES.LEGACY.TITLE;
    document.getElementById('desc-legacy').innerText = GAME_CONFIG.ENTITIES.LEGACY.DESC;

    document.getElementById('icon-ai').innerText = GAME_CONFIG.ENTITIES.AI.CHAR;
    document.getElementById('title-ai').innerText = GAME_CONFIG.ENTITIES.AI.TITLE;
    document.getElementById('desc-ai').innerText = GAME_CONFIG.ENTITIES.AI.DESC;

    document.getElementById('icon-obs').innerText = GAME_CONFIG.ENTITIES.OBSTACLE.CHAR;
    document.getElementById('title-obs').innerText = GAME_CONFIG.ENTITIES.OBSTACLE.TITLE;
    document.getElementById('desc-obs').innerText = GAME_CONFIG.ENTITIES.OBSTACLE.DESC;

    document.getElementById('title-bar').innerText = GAME_CONFIG.ENTITIES.BAR.TITLE;
    document.getElementById('desc-bar').innerText = GAME_CONFIG.ENTITIES.BAR.DESC;
}

function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; state.groundY = canvas.height - GROUND_H; }
window.addEventListener('resize', resize);
setupUI();
resize();

for(let i=0; i<80; i++) bgStars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: Math.random() * 2 });

function initGame() {
    Object.assign(state, { playing: true, speed: GAME_CONFIG.SPEED.INITIAL, score: 0, legacy: 0, flow: 50, frame: 0, phaseIdx: 0, shake: 0, combo: 0 });
    Object.assign(player, { y: state.groundY - player.h, dy: 0, grounded: true, amplified: 0, stretch: 1, w: 48, h: 48 });
    entities = []; particles = [];
    
    dom.start.style.display = 'none';
    dom.over.classList.add('hidden');
    dom.over.style.display = 'none'; 
    dom.motivator.style.opacity = 0;
    dom.combo.style.opacity = 0;
    
    dom.phase.innerText = GAME_CONFIG.PHASES[0].name;

    updateHUD(); 
    requestAnimationFrame(loop);
}

function jump() {
    if (!state.playing) return;
    if (player.grounded) { 
        player.dy = JUMP; 
        player.grounded = false; 
        player.stretch = 1.3; 
        player.canDouble = state.flow >= 25; 
        explosion(player.x + player.w/2, player.y + player.h, 5, '#fff'); 
    }
    else if (player.canDouble) { 
        player.dy = DOUBLE_JUMP; 
        player.canDouble = false; 
        player.stretch = 1.2; 
        state.flow = Math.max(0, state.flow - 25); 
        explosion(player.x + player.w/2, player.y + player.h, 15, '#00ff41'); 
        
        let msg = GAME_CONFIG.JUMP_MESSAGES[Math.floor(Math.random() * GAME_CONFIG.JUMP_MESSAGES.length)];
        floatText(msg, player.x + 40, player.y - 40, '#00ff41'); 
    }
    updateHUD();
}

window.addEventListener('keydown', e => { 
    if (e.code === 'Space' || e.code === 'ArrowUp') { e.preventDefault(); jump(); } 
    if (e.code === 'ArrowDown' && !player.grounded) { player.dy += 6; player.stretch = 0.7; } 
});
window.addEventListener('touchstart', e => { e.preventDefault(); jump(); }, {passive: false});
window.addEventListener('mousedown', jump);

function loop() {
    if (!state.playing) return;
    
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    if (state.shake > 0) { 
        ctx.translate((Math.random()-0.5)*state.shake, (Math.random()-0.5)*state.shake); 
        state.shake *= 0.9; 
        if(state.shake < 0.5) state.shake = 0; 
    }
    
    ctx.fillStyle = '#0a0a0a'; ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    if (state.speed < GAME_CONFIG.SPEED.MAX) state.speed += GAME_CONFIG.SPEED.ACCELERATION;
    let currentSpd = state.speed + (player.amplified > 0 ? GAME_CONFIG.SPEED.BOOST : 0);

    ctx.fillStyle = '#fff';
    bgStars.forEach(s => { 
        s.x -= currentSpd * 0.15; 
        if(s.x < 0) s.x = canvas.width; 
        ctx.globalAlpha = 0.4; 
        ctx.fillRect(s.x, s.y, s.size, s.size); 
    });
    ctx.globalAlpha = 1;

    ctx.strokeStyle = '#222'; ctx.lineWidth = 1; ctx.beginPath();
    let offset = (state.frame * currentSpd * 0.4) % 100;
    for (let i = 0; i < canvas.width + 100; i += 100) { 
        ctx.moveTo(i - offset, state.groundY); 
        ctx.lineTo(i - offset - 150, canvas.height); 
    }
    ctx.stroke();

    updatePlayer();
    manageEntities(currentSpd);
    drawParticles();

    // SHADOW LOGIC: White if amplified, else dark gray
    ctx.shadowBlur = 10; 
    ctx.shadowColor = player.amplified > 0 ? '#ffffff' : '#444'; 
    
    ctx.fillStyle = '#111'; ctx.fillRect(0, state.groundY, canvas.width, canvas.height - state.groundY);
    ctx.strokeStyle = '#00ff41'; ctx.lineWidth = 4; ctx.beginPath();
    ctx.moveTo(0, state.groundY); ctx.lineTo(canvas.width, state.groundY); ctx.stroke(); ctx.shadowBlur = 0;

    if (state.frame % 600 === 0 && state.frame > 100) showMotivation();
    
    if (player.amplified > 0) { 
        player.amplified--; 
        if (player.amplified === 0) floatText("GOD MODE OFF", player.x + 40, player.y - 50, '#aaa'); 
    }

    state.frame++; 
    requestAnimationFrame(loop);
}

function updatePlayer() {
    player.dy += GRAVITY; player.y += player.dy;
    
    if (player.y + player.h > state.groundY) {
        if (!player.grounded) { 
            player.stretch = 0.7; 
            explosion(player.x + player.w/2, state.groundY, 8, '#aaa'); 
        }
        player.y = state.groundY - player.h; player.dy = 0; player.grounded = true;
    }
    player.stretch += (1 - player.stretch) * 0.1;

    let drawH = player.h * player.stretch, drawW = player.w * (1/player.stretch);
    let drawX = player.x + (player.w - drawW)/2, drawY = player.y + (player.h - drawH);
    
    // PLAYER COLOR LOGIC: White if amplified, else Neon Green
    ctx.fillStyle = player.amplified > 0 ? '#ffffff' : '#00ff41';
    
    if (state.frame % 3 === 0) particles.push({ x: drawX, y: drawY, w: drawW, h: drawH, life: 0.6, type: 'trail', color: ctx.fillStyle });
    
    ctx.shadowColor = ctx.fillStyle; ctx.shadowBlur = 20; 
    ctx.fillRect(drawX, drawY, drawW, drawH);
    ctx.fillStyle = '#000'; ctx.fillRect(drawX + drawW*0.6, drawY + drawH*0.2, drawW*0.3, 5); ctx.shadowBlur = 0;
}

function manageEntities(spd) {
    let minGap = 500 - (spd * 8); 
    let last = entities[entities.length-1];
    
    if (!last || (canvas.width - last.x > minGap)) {
        if (Math.random() > 0.97) return;
        
        let typeKey = 'OBSTACLE';
        let rand = Math.random();
        if (rand > 0.6) typeKey = 'LEGACY';
        if (rand > 0.92) typeKey = 'AI';
        
        let conf = GAME_CONFIG.ENTITIES[typeKey];
        let h = typeKey === 'OBSTACLE' ? 50 : 40, y = state.groundY - h;
        if (typeKey === 'AI') y -= Math.random() * 80; 
        
        entities.push({ type: typeKey, conf: conf, x: canvas.width, y: y, w: 40, h: h, active: true });
    }

    for (let i = entities.length - 1; i >= 0; i--) {
        let e = entities[i]; 
        e.x -= spd;
        if (e.type !== 'OBSTACLE') e.y += Math.sin(state.frame * 0.08) * 0.7; 
        
        if (e.active) {
            ctx.strokeStyle = e.conf.COLOR; ctx.lineWidth = 3;
            if (e.type === 'LEGACY') ctx.setLineDash([5,5]); else ctx.setLineDash([]);
            ctx.strokeRect(e.x, e.y, e.w, e.h);
            ctx.font = "28px Arial"; ctx.textAlign = "center";
            ctx.fillText(e.conf.CHAR, e.x + e.w/2, e.y + e.h/2 + 10);
            
            if (rectHit(player.x, player.y, player.w, player.h, e.x, e.y, e.w, e.h)) handleHit(e);
        }
        if (e.x + e.w < 0) entities.splice(i, 1);
    }
}

function rectHit(x1, y1, w1, h1, x2, y2, w2, h2) { return x2 < x1 + w1 && x2 + w2 > x1 && y2 < y1 + h1 && y2 + h2 > y1; }

function handleHit(e) {
    e.active = false;
    let msgList = e.conf.MSG;
    let randomMsg = Array.isArray(msgList) ? msgList[Math.floor(Math.random() * msgList.length)] : msgList;

    if (e.type === 'OBSTACLE') {
        if (player.amplified > 0) {
            state.shake = 20; 
            // White explosion for destruction in God Mode
            explosion(e.x + e.w/2, e.y + e.h/2, 25, '#ffffff');
            floatText(randomMsg, e.x + 80, e.y - 20, '#fff'); 
            state.score += 15; state.combo++;
            showCombo();
        } else {
            gameOver();
        }
    } else {
        explosion(e.x + e.w/2, e.y + e.h/2, 12, e.conf.COLOR);
        floatText(randomMsg, e.x + 80, e.y - 40, e.conf.COLOR);
        
        if (e.type === 'LEGACY') { 
            state.legacy += 10; state.score += 10; 
            state.flow = Math.min(100, state.flow + 25); 
            state.combo++; 
        }
        if (e.type === 'AI') { 
            player.amplified = 600; 
            state.score += 50; state.shake = 8; 
            showMotivation(); 
            state.combo += 3; 
        }
        showCombo(); updateHUD();
    }
}

function explosion(x, y, count, color) {
    for(let i=0; i<count; i++) particles.push({ x, y, vx: (Math.random() - 0.5) * 10, vy: (Math.random() - 0.5) * 10, life: 1.0, color, type: 'spark' });
}

function drawParticles() {
    for(let i=particles.length-1; i>=0; i--) {
        let p = particles[i];
        if (p.type === 'trail') { 
            ctx.fillStyle = p.color; ctx.globalAlpha = p.life * 0.5; 
            ctx.fillRect(p.x, p.y, p.w, p.h); 
            ctx.globalAlpha = 1; p.life -= 0.04; 
        } else { 
            p.x += p.vx; p.y += p.vy; p.vy += 0.3; p.life -= 0.015; 
            ctx.fillStyle = p.color; ctx.globalAlpha = p.life; 
            ctx.fillRect(p.x, p.y, 5, 5); ctx.globalAlpha = 1; 
        }
        if (p.life <= 0) particles.splice(i, 1);
    }
}

function floatText(txt, x, y, col) {
    let el = document.createElement('div'); 
    el.className = 'floating-message';
    el.innerText = txt; 
    el.style.left = (x + 60) + 'px'; 
    el.style.top = y + 'px'; 
    el.style.color = col;
    document.body.appendChild(el); 
    setTimeout(() => el.remove(), 4000);
}

function showMotivation() {
    let txt = GAME_CONFIG.MOTIVATIONAL[Math.floor(Math.random() * GAME_CONFIG.MOTIVATIONAL.length)];
    dom.motivator.innerText = txt;
    dom.motivator.style.opacity = 1; dom.motivator.style.transform = "scale(1.15)";
    setTimeout(() => { dom.motivator.style.opacity = 0; dom.motivator.style.transform = "scale(1)"; }, 3500);
}

function showCombo() {
    if (state.combo > 1) {
        let phrase = GAME_CONFIG.COMBO_PHRASES[Math.floor(Math.random() * GAME_CONFIG.COMBO_PHRASES.length)];
        dom.combo.innerText = phrase;
        dom.combo.style.opacity = 1; dom.combo.style.transform = 'scale(1.2) rotate(-10deg)';
        setTimeout(() => { dom.combo.style.opacity = 0; dom.combo.style.transform = 'scale(1) rotate(-10deg)'; }, 2000);
    }
}

function updateHUD() {
    dom.score.innerText = state.score; 
    dom.legacy.innerText = state.legacy; 
    dom.bar.style.width = state.flow + '%';
    
    if (state.flow >= 25) { 
        dom.bar.style.boxShadow = '0 0 15px #00ff41'; 
        dom.barLabel.innerText = GAME_CONFIG.TEXTS.BAR_FULL; 
        dom.barLabel.style.color = "#00ff41"; 
    } else { 
        dom.bar.style.boxShadow = 'none'; 
        dom.barLabel.innerText = GAME_CONFIG.TEXTS.BAR_EMPTY; 
        dom.barLabel.style.color = "#aaa"; 
    }
    
    let currentPhaseObj = GAME_CONFIG.PHASES.slice().reverse().find(p => state.score >= p.score);
    if (currentPhaseObj && currentPhaseObj.name !== dom.phase.innerText) {
        dom.phase.innerText = currentPhaseObj.name;
        floatText("FASE: " + currentPhaseObj.name, canvas.width/2, canvas.height/2, '#fff');
    }
}

function gameOver() {
    state.playing = false; 
    dom.finalScore.innerText = state.score; 
    dom.finalLegacy.innerText = state.legacy + "%";
    
    dom.goTitle.innerText = GAME_CONFIG.GAME_OVER_TITLES[Math.floor(Math.random() * GAME_CONFIG.GAME_OVER_TITLES.length)];
    dom.goReason.innerText = GAME_CONFIG.GAME_OVER_REASONS[Math.floor(Math.random() * GAME_CONFIG.GAME_OVER_REASONS.length)];
    dom.deathQuote.innerText = GAME_CONFIG.DEATH_QUOTES[Math.floor(Math.random() * GAME_CONFIG.DEATH_QUOTES.length)];
    
    dom.over.classList.remove('hidden');
    dom.over.style.display = 'flex';
}
</script>
</body>
</html>