<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPG Clicker Game</title>
    <style>
        body {
            font-family: 'Georgia', serif;
            margin: 0;
            padding: 0;
            background-color: #2d2d2d;
            text-align: center;
            color: #f0e6d2;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .game-container {
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
        }

        header h1 {
            font-size: 36px;
            margin-bottom: 15px;
            color: #FFD700;
        }

        main {
            display: flex;
            flex-direction: column;
            margin-top: 20px;
        }

        .battle-container {
            display: flex;
            height: 70%;
            margin-bottom: 10px;
            justify-content: space-between;
        }

        .map {
            width: 70%;
            background-color: #282828;
            border-radius: 12px;
            border: 3px solid #444;
        }

        .battle-area {
            width: 28%;
            background-color: #333;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        }

        .enemy img {
            max-width: 80%;
            height: auto;
            border-radius: 10px;
        }

        .health-bar {
            width: 100%;
            background-color: #555;
            height: 20px;
            border-radius: 10px;
            margin-top: 10px;
        }

        #enemy-health {
            background-color: #f00;
            height: 100%;
            border-radius: 10px;
        }

        .info-container {
            display: flex;
            justify-content: space-between;
            height: 30%;
            margin-top: 10px;
        }

        .character-info,
        .upgrades {
            width: 45%;
            background-color: #444;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
        }

        h3 {
            margin-bottom: 10px;
            font-size: 22px;
            color: #FFD700;
        }

        .stat-box {
            background-color: #4b4b4b;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
            margin-bottom: 10px;
        }

        button {
            background-color: #FFD700;
            border: none;
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
            transition: all 0.3s ease;
            color: #2d2d2d;
        }

        button:hover {
            background-color: #d4af37;
        }

        button:focus {
            outline: none;
        }

        footer button {
            font-size: 16px;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="game-container">
        <header>
            <h1>RPG Clicker Game</h1>
        </header>

        <main class="main-content">
            <div class="left-panel">
                <div class="character-info">
                    <h2 id="character-name">Hero</h2>
                    <div class="stat-box">
                        <p>Level: <span id="level">1</span></p>
                        <p>HP: <span id="character-hp">100</span>/100</p>
                        <p>Attack Power: <span id="attack-power">10</span></p>
                    </div>
                </div>
                <div class="upgrades">
                    <h3>Upgrades</h3>
                    <div class="upgrade-box">
                        <button id="upgrade-attack">Upgrade Attack (Cost: <span id="upgrade-cost">10</span>)</button>
                    </div>
                    <div class="upgrade-box">
                        <button id="upgrade-health">Upgrade Health (Cost: <span
                                id="upgrade-health-cost">15</span>)</button>
                    </div>
                </div>
            </div>

            <div class="battle-area">
                <div class="map-container">
                    <div class="map" id="map-container"></div>
                </div>
                <div class="enemy">
                    <img id="enemy-image" src="" alt="Enemy" style="max-height: 200px;">
                    <div class="health-bar">
                        <div id="enemy-health"></div>
                    </div>
                    <p id="enemy-hp">HP: 5/5</p>
                    <button id="attack-button">Press K to Attack!</button>
                </div>
            </div>
        </main>

        <footer>
            <div class="stats-footer">
                <div class="footer-info">
                    <p>Gold: <span id="gold">0</span></p>
                    <p>Time Left: <span id="timer">30</span>s</p>
                </div>
            </div>
        </footer>
    </div>

    <script>let level = 1;
        let timer = 30;
        let enemyHP = 5;
        let maxHP = 5;
        let isBoss = false;
        let timerInterval;
        let isKeyPressed = false;
        let attackPower = 10;
        let characterHP = 100;
        let gold = 0;
        let upgradeCost = 10;
        let upgradeHealthCost = 15;

        const levelElement = document.getElementById('level');
        const timerElement = document.getElementById('timer');
        const enemyHPElement = document.getElementById('enemy-hp');
        const enemyHealthBar = document.getElementById('enemy-health');
        const attackButton = document.getElementById('attack-button');
        const mapContainer = document.getElementById('map-container');
        const enemyImage = document.getElementById('enemy-image');
        const goldElement = document.getElementById('gold');
        const upgradeButton = document.getElementById('upgrade-button');
        const upgradeCostElement = document.getElementById('upgrade-cost');
        const upgradeHealthButton = document.getElementById('upgrade-health');
        const upgradeHealthCostElement = document.getElementById('upgrade-health-cost');

        document.addEventListener('keydown', (event) => {
            if ((event.key === 'k' || event.key === 'K') && !isKeyPressed) {
                isKeyPressed = true;
                attackEnemy();
            }
        });

        document.addEventListener('keyup', (event) => {
            if (event.key === 'k' || event.key === 'K') {
                isKeyPressed = false;
            }
        });

        upgradeButton.addEventListener('click', () => {
            if (gold >= upgradeCost) {
                gold -= upgradeCost;
                attackPower += 5;
                upgradeCost = Math.floor(upgradeCost * 1.5);
                updateUI();
            }
        });

        upgradeHealthButton.addEventListener('click', () => {
            if (gold >= upgradeHealthCost) {
                gold -= upgradeHealthCost;
                characterHP += 20;
                upgradeHealthCost = Math.floor(upgradeHealthCost * 1.5);
                updateUI();
            }
        });

        function startGame() {
            updateUI();
            startTimer();
            loadAssets();
        }

        function attackEnemy() {
            if (enemyHP > 0) {
                enemyHP -= attackPower;
                if (enemyHP < 0) enemyHP = 0;
                updateUI();
                if (enemyHP === 0) {
                    gold += isBoss ? 20 : 10;
                    nextLevel();
                }
            }
        }

        function updateUI() {
            enemyHPElement.textContent = `HP: ${enemyHP}/${maxHP}`;
            enemyHealthBar.style.width = `${(enemyHP / maxHP) * 100}%`;
            levelElement.textContent = level;
            timerElement.textContent = timer;
            goldElement.textContent = gold;
            document.getElementById('character-hp').textContent = characterHP;
            document.getElementById('attack-power').textContent = attackPower;
            document.getElementById('upgrade-cost').textContent = upgradeCost;
            upgradeHealthCostElement.textContent = upgradeHealthCost;
        }

        function loadAssets() {
            loadImage(`/enemies/enemy${isBoss ? 'boss' : level % 5 + 1}`, enemyImage);
            loadImage(`/maps/map${Math.ceil(level / 5)}`, null, true);
        }

        function loadImage(basePath, element, isBackground = false) {
            const fileFormats = ['png', 'jpg', 'jpeg', 'webp', 'gif'];
            for (let format of fileFormats) {
                const url = `${basePath}.${format}`;
                const img = new Image();
                img.onload = () => {
                    if (isBackground) {
                        document.body.style.backgroundImage = `url(${url})`;
                    } else if (element) {
                        element.src = url;
                    }
                };
                img.src = url;
            }
        }

        function nextLevel() {
            level++;
            timer = 30;
            isBoss = level % 10 === 0;
            maxHP = generateRandomHP(isBoss);
            enemyHP = maxHP;
            loadAssets();
            updateUI();
        }

        function generateRandomHP(isBoss) {
            const baseHP = isBoss ? 50 + level * 10 : 10 + level * 5;
            const variation = Math.floor(Math.random() * 10) - 5;
            return Math.max(baseHP + variation, 1);
        }

        function startTimer() {
            clearInterval(timerInterval);
            timerInterval = setInterval(() => {
                timer--;
                updateUI();
                if (timer <= 0) {
                    timer = 30;
                    updateUI();
                }
            }, 1000);
        }

        startGame();
    </script>
</body>

</html>