улучши промты для стабильности игры
проработай занава логику
проработай интерфейс
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DnD Adventure Game in Элендриэль</title>
    <style>body {
    font-family: 'Arial', sans-serif;
    background-color: #2b2b2b; /* Темный фон */
    color: #e0e0e0; /* Светлый цвет текста */
    margin: 0;
    padding: 20px;
    transition: background-color 0.5s; /* Плавный переход фона */
}

header {
    text-align: center;
    margin-bottom: 20px;
}

h1 {
    color: #f39c12; /* Цвет заголовка */
}

button {
    margin: 5px;
    padding: 12px 24px;
    font-size: 16px;
    background-color: #27ae60; /* Зеленый фон кнопок */
    color: white; /* Белый цвет текста */
    border: none;
    border-radius: 5px; /* Скругленные углы */
    cursor: pointer; /* Указатель при наведении */
    transition: background-color 0.3s, transform 0.3s; /* Плавные переходы */
}

button:hover {
    background-color: #219653; /* Темнее при наведении */
    transform: scale(1.05); /* Увеличение размера при наведении */
}

#eventLog {
    margin: 20px 0;
    padding: 15px;
    background-color: #34495e; /* Цвет фона для лога событий */
    border: 1px solid #2980b9; /* Синий цвет границы */
    border-radius: 5px; /* Скругленные углы */
    height: 300px;
    overflow-y: auto;
    animation: fadeIn 0.5s; /* Анимация появления */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#actionButtons {
    margin: 20px 0;
}

.inventory,
#shop {
    margin-top: 50px;
    background-color: #8e44ad; /* Фон для инвентаря и магазина */
    border: 1px solid #9b59b6; /* Светлая граница */
    border-radius: 5px; /* Скругленные углы */
    padding: 10px;
}

#inventory h2,
#shop h2 {
    color: #f1c40f; /* Цвет заголовка для инвентаря и магазина */
}

#inventoryList,
#shopItems {
    list-style-type: none;
    padding: 0;
}

#inventoryList li,
#shopItems li {
    padding: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2ecc71; /* Цвет элементов списка */
    margin: 5px 0;
    border-radius: 3px; /* Скругленные углы для элементов списка */
    transition: background-color 0.3s; /* Плавный переход цвета */
}

#inventoryList li:hover,
#shopItems li:hover {
    background-color: #27ae60; /* Темнее при наведении */
}

@media (min-width: 600px) {
    body {
        padding: 40px; /* Увеличенный отступ на больших экранах */
    }
      }</style>
</head>
<body>
    <header>
        <h1>ДНД Приключение в Элендриэль</h1>
        <button id="startGame">Начать игру</button>
    </header>
    <main>
        <div id="eventLog"></div>
        <div id="actionButtons"></div>
        <div class="inventory">
            <h2>Инвентарь:</h2>
            <ul id="inventoryList"></ul>
        </div>
        <div id="shop" style="display: none;">
            <h2>Магазин:</h2>
            <ul id="shopItems"></ul>
            <button id="buyItem">Купить выбранный предмет</button>
        </div>
    </main>
    <script src="script.js">document.addEventListener("DOMContentLoaded", function () {
    let gameActive = false;
    let inventory = [];
    let experience = 0;
    let level = 1;
    let currentLocation = "Амарин"; // Начальная локация
    let playerRace = "человек"; // Заменить на выбор игрока
    let playerClass = "маг"; // Заменить на выбор игрока
    let reputation = 0; // Система репутации

    const shopItems = [
        { name: "Зелье здоровья", price: 10 },
        { name: "Меч", price: 25 },
        { name: "Лук", price: 20 },
        { name: "Щит", price: 30 }
    ];
    
    let selectedItem = null;
    
    const quests = []; // Список квестов

    document.getElementById('startGame').addEventListener('click', startGame);
    document.getElementById('buyItem').addEventListener('click', buyItem);

    function startGame() {
        gameActive = true;
        inventory = []; // Сброс инвентаря
        experience = 0;
        level = 1;
        reputation = 0;
        document.getElementById('inventoryList').innerHTML = '';
        clearEventLog();
        document.getElementById('eventLog').innerHTML = "Игра началась! Нажмите 'Получить событие' для начала приключений.";
        getEvent(); // Генерация первого события
    }

    async function getEvent() {
        if (!gameActive) {
            alert("Сначала начните игру!");
            return;
        }

        const locationDescription = getLocationDescription(currentLocation);
        const activeQuests = quests.filter(q => !q.completed).map(q => q.description).join(", ");

        const response = await fetch('http://localhost:1234/v1/chat/completions', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                model: "model-identifier",
                messages: [
                    { role: "system", content: "Ты исследуешь мир Элендриэля." },
                    { role: "user", content: `Ты находишься в ${currentLocation}. ${locationDescription} У тебя есть квесты: ${activeQuests}. Опиши события вокруг и какие действия я могу предпринять как ${playerRace} ${playerClass}.` }
                ],
                temperature: 0.7,
                max_tokens: 300
            })
        });

        const data = await response.json();
        const eventText = data.choices[0].message.content;

        const [event, ...rawActions] = eventText.split('\n').filter(line => line.trim() !== '');
        const actions = rawActions.map(action => action.replace(/^\d+\.\s/, '').trim());

        document.getElementById('eventLog').innerHTML += `<p>${event}</p>`; // Событие
        generateActionButtons(actions); // Генерация кнопок действий
    }

    function getLocationDescription(location) {
        switch (location) {
            case "Амарин":
                return "Это королевство света, знаменитое своими величественными храмами.";
            case "Скала Гневных Ветров":
                return "Суровое королевство, где морозные ветра бушуют.";
            case "Теневый Лес":
                return "Загадочное место, полное опасностей и магии природы.";
            case "Пески Вечности":
                return "Жаркое и сухое царство, скрывающее древние тайны.";
            case "Страна Кровавых Облаков":
                return "Темное королевство, полное хаоса и беззакония.";
            default:
                return "Неизвестное место.";
        }
    }

    function clearEventLog() {
        document.getElementById('actionButtons').innerHTML = ''; // Очистка кнопок действий
    }

    function generateActionButtons(actions) {
        const actionButtonsDiv = document.getElementById('actionButtons');
        actionButtonsDiv.innerHTML = '';

        actions.forEach(action => {
            const button = document.createElement('button');
            button.innerText = action; // Действие из нейросети
            button.onclick = () => performAction(action); // Назначение действия
            actionButtonsDiv.appendChild(button);
        });
    }

    async function performAction(action) {
        if (!gameActive) {
            alert("Сначала начните игру!");
            return;
        }

        const locationDescription = getLocationDescription(currentLocation);

        const actionResponse = await fetch('http://localhost:1234/v1/chat/completions', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                model: "model-identifier",
                messages: [
                    { role: "system", content: "Ты исследуешь мир Элендриэля, и твои действия имеют последствия." },
                    { role: "user", content: `Я решаю ${action} в ${currentLocation}. ${locationDescription} Каковы последствия этого действия, учитывая, что я ${playerRace} ${playerClass}?` }
                ],
                temperature: 0.7,
                max_tokens: 200
            })
        });

        const actionData = await actionResponse.json();
        const actionText = actionData.choices[0].message.content;
        document.getElementById('eventLog').innerHTML += `<p>${actionText}</p>`; // Добавляем последствия действия к журналу

        // Обработка вознаграждений
        rewardExperience(10); // Пример вознаграждения 
        checkLevelUp(); // Проверка повышения уровня

        await getEvent(); // Получаем новое событие для игрока
    }

    function rewardExperience(points) {
        experience += points;
        document.getElementById('eventLog').innerHTML += `<p>Вы получили ${points} опыта!</p>`;
    }

    function checkLevelUp() {
        if (experience >= level * 100) { // Пример: 100 опыта для повышения уровня
            level++;
            experience -= level * 100; // Снижаем опыт для следующего уровня
            document.getElementById('eventLog').innerHTML += `<p>Поздравляем! Вы достигли уровня ${level}!</p>`;
        }
    }

    function handlePurchase(itemName) {
        const item = shopItems.find(i => i.name === itemName);
        if (item) {
            inventory.push(item.name);
            document.getElementById('inventoryList').innerHTML += `<li>${item.name}</li>`;
        } else {
            alert("Предмет не найден.");
        }
    }

    function visitShop() {
        const shop = document.getElementById('shop');
        const shopList = document.getElementById('shopItems');
        shop.style.display = 'block';
        shopList.innerHTML = '';
        shopItems.forEach(item => {
            const listItem = document.createElement('li');
            listItem.textContent = `${item.name} - Цена: ${item.price}`;
            listItem.onclick = () => selectItem(item);
            shopList.appendChild(listItem);
        });
    }

    function selectItem(item) {
        selectedItem = item;
        alert(`Вы выбрали: ${selectedItem.name}`);
    }

    function buyItem() {
        if (!selectedItem) {
            alert("Сначала выберите предмет для покупки!");
            return;
        }
        inventory.push(selectedItem.name);
        document.getElementById('inventoryList').innerHTML += `<li>${selectedItem.name}</li>`;
        alert(`Вы купили: ${selectedItem.name}`);
        selectedItem = null; // Сбрасываем выбранный предмет
    }
});</script>
</body>
</html>