Update index.html

index.html

@@ -50,25 +50,64 @@
             transition: max-height 0.3s ease-out;
         }
         .settings-panel.open {
-            max-height: 500px; /* Увеличено для вместимости содержимого */
+            max-height: 1000px; /* Увеличено для вместимости содержимого, особенно для "Моих персонажей" */
         }
-        /* Анимация для рулетки */
-        .roulette-spinning .roulette-char-card {
-            animation: spin-animation 0.1s linear infinite;
+        /* Улучшенная анимация для рулетки */
+        .roulette-item-spin {
+            animation: spin-in-place 0.2s ease-in-out infinite alternate;
         }
-        @keyframes spin-animation {
-            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
-            50% { transform: translateY(-5px) rotate(2deg); opacity: 0.8; }
-            100% { transform: translateY(0) rotate(0deg); opacity: 1; }
+        @keyframes spin-in-place {
+            0% { transform: scale(0.9) rotate(-2deg); opacity: 0.7; }
+            100% { transform: scale(1.1) rotate(2deg); opacity: 1; }
         }
-        .roulette-item-enter {
+
+        /* Более объемная и живая анимация выпадения персонажа */
+        .roulette-item-final-enter {
             opacity: 0;
-            transform: scale(0.8);
+            transform: scale(0.7) translateY(50px) rotateX(-90deg);
+            filter: blur(5px);
+            box-shadow: 0 0 0 rgba(0,0,0,0);
         }
-        .roulette-item-enter-active {
+        .roulette-item-final-enter-active {
+            opacity: 1;
+            transform: scale(1) translateY(0) rotateX(0deg);
+            filter: blur(0);
+            transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
+                        transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55),
+                        filter 0.6s ease-out,
+                        box-shadow 0.6s ease-out;
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+
+        .player-char-card {
+            position: relative;
+            cursor: pointer;
+            border: 2px solid transparent;
+            transition: border-color 0.2s;
+        }
+        .player-char-card.selected {
+            border-color: #DCA852;
+        }
+        .player-char-card .remove-btn {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            background-color: red;
+            color: white;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 0.8rem;
+            font-weight: bold;
+            cursor: pointer;
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+        .player-char-card:hover .remove-btn {
             opacity: 1;
-            transform: scale(1);
-            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
         }
     </style>
 </head>
@@ -88,7 +127,7 @@
                     </svg>
                 </button>
             </div>
-            <h1 class="text-4xl md:text-5xl font-bold text-[#4A4A4A] dark:text-[#e2e8f0] mb-2">Рулетка Отрядов Genshin Impact</h1>
+            <h1 class="text-4xl md:text-5xl font-bold text-[#4A4A4A] dark:text-[#e2e8f0] mb-2">Random Team</h1>
             <p class="text-lg text-[#6B6B6B] dark:text-[#a0aec0] max-w-2xl mx-auto">
                 Сгенерируйте случайный отряд из четырех персонажей Genshin Impact!
             </p>
@@ -97,7 +136,7 @@
         <main>
             <div id="settings-panel" class="settings-panel bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg mb-6">
                 <h3 class="text-xl font-bold mb-4 dark:text-white">Настройки рулетки</h3>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                     <div>
                         <label for="team-size" class="block text-sm font-medium mb-2 dark:text-gray-300">Количество персонажей в отряде</label>
                         <select id="team-size" class="w-full p-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
@@ -116,6 +155,21 @@
                         </select>
                     </div>
                 </div>
+
+                <h3 class="text-xl font-bold mb-4 dark:text-white">Мои персонажи</h3>
+                <p class="text-sm text-[#6B6B6B] dark:text-[#a0aec0] mb-4">
+                    Выберите персонажей, которыми вы владеете, чтобы рулетка использовала только их. Если ни один не выбран, будут использоваться все персонажи.
+                </p>
+                <div class="mb-4">
+                    <input type="text" id="character-search" placeholder="Поиск персонажей..." class="w-full p-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white">
+                </div>
+                <div id="player-characters-selection" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3 mb-6 max-h-60 overflow-y-auto pr-2">
+                    </div>
+                <div class="text-center">
+                    <button id="clear-player-characters" class="bg-red-500 text-white font-bold py-2 px-4 rounded-lg text-sm shadow-md hover:bg-red-600 transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-red-500/50 hidden">
+                        Очистить выбранных персонажей
+                    </button>
+                </div>
             </div>
 
             <section id="roulette-section" class="mb-16 bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg">
@@ -129,14 +183,30 @@
                     <p id="roulette-placeholder" class="text-[#888] dark:text-gray-400">Ваш случайный отряд появится здесь.</p>
                     <div id="roulette-loader" class="loader hidden"></div>
                 </div>
+
+                <div id="save-team-section" class="mt-6 p-4 bg-[#FDF8F0] dark:bg-gray-800 rounded-xl shadow-sm hidden">
+                    <h3 class="text-lg font-semibold mb-3 dark:text-white">Сохранить этот отряд</h3>
+                    <div class="flex flex-col sm:flex-row gap-3">
+                        <input type="text" id="team-name-input" placeholder="Название отряда (необязательно)" class="flex-grow p-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
+                        <button id="save-team-button" class="bg-[#A089D0] text-white font-bold py-2 px-6 rounded-lg shadow-md hover:bg-[#8e7abf] transition-transform duration-200 ease-in-out hover:scale-105">
+                            Сохранить
+                        </button>
+                    </div>
+                </div>
+
             </section>
 
             <section id="history-section" class="bg-[#EFEAE4] dark:bg-gray-700 p-6 rounded-2xl shadow-lg">
                 <div class="flex justify-between items-center mb-8">
                     <h2 class="text-3xl font-bold text-[#4A4A4A] dark:text-white">История Отрядов</h2>
-                    <button id="clear-history-button" class="bg-[#A089D0] text-white font-bold py-2 px-4 rounded-lg text-sm shadow-md hover:bg-[#8e7abf] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#A089D0]/50 hidden">
-                        Очистить
-                    </button>
+                    <div class="flex gap-2">
+                        <button id="clear-history-button" class="bg-[#A089D0] text-white font-bold py-2 px-4 rounded-lg text-sm shadow-md hover:bg-[#8e7abf] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#A089D0]/50 hidden">
+                            Очистить
+                        </button>
+                        <button id="view-full-history-button" class="bg-[#DCA852] text-white font-bold py-2 px-4 rounded-lg text-sm shadow-md hover:bg-[#c3914a] transition-transform duration-200 ease-in-out hover:scale-105 focus:outline-none focus:ring-4 focus:ring-[#DCA852]/50 hidden">
+                            Вся история
+                        </button>
+                    </div>
                 </div>
                 <div id="history-content" class="flex flex-col gap-6">
                     <p id="history-placeholder" class="text-center text-[#888] dark:text-gray-400">История ваших отрядов будет отображаться здесь.</p>
@@ -154,7 +224,7 @@
     <div id="confirm-modal" class="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center hidden p-4">
         <div class="bg-[#FDF8F0] dark:bg-gray-800 rounded-2xl w-full max-w-sm shadow-2xl relative text-center p-6 transform transition-all duration-300 scale-95 opacity-0" id="confirm-modal-content">
             <h3 class="text-2xl font-bold mb-4 text-[#4A4A4A] dark:text-white">Подтверждение</h3>
-            <p id="confirm-modal-message" class="text-lg text-[#6B6B6B] dark:text-gray-300 mb-6">Вы уверены, что хотите очистить историю?</p>
+            <p id="confirm-modal-message" class="text-lg text-[#6B6B6B] dark:text-gray-300 mb-6"></p>
             <div class="flex justify-around gap-4">
                 <button id="confirm-modal-cancel" class="bg-[#A089D0] text-white font-bold py-2 px-6 rounded-lg hover:bg-[#8e7abf]">Отмена</button>
                 <button id="confirm-modal-ok" class="bg-red-500 text-white font-bold py-2 px-6 rounded-lg hover:bg-red-600">Очистить</button>
@@ -178,10 +248,10 @@
                 { "name": "Беннет", "icon": "https://game-cdn.appsample.com/gim/items/bennett.png" },
                 { "name": "Кандакия", "icon": "https://game-cdn.appsample.com/gim/items/candace.png" },
                 { "name": "Шарлотта", "icon": "https://game-cdn.appsample.com/gim/items/charlotte.png" },
-                { "name": "Часца", "icon": "https://game-cdn.appsample.com/gim/items/chasca.png" },
-                { "name": "Чиори", "icon": "https://game-cdn.appsample.com/gim/items/chiori.png" },
+                { "name": "Часка", "icon": "https://game-cdn.appsample.com/gim/items/chasca.png" },
+                { "name": "Тиори", "icon": "https://game-cdn.appsample.com/gim/items/chiori.png" },
                 { "name": "Чун Юнь", "icon": "https://game-cdn.appsample.com/gim/items/chongyun.png" },
-                { "name": "Сителла", "icon": "https://game-cdn.appsample.com/gim/items/citlali.png" },
+                { "name": "Ситлали", "icon": "https://game-cdn.appsample.com/gim/items/citlali.png" },
                 { "name": "Клоринда", "icon": "https://game-cdn.appsample.com/gim/items/clorinde.png" },
                 { "name": "Коллеи", "icon": "https://game-cdn.appsample.com/gim/items/collei.png" },
                 { "name": "Сайно", "icon": "https://game-cdn.appsample.com/gim/items/cyno.png" },
@@ -216,7 +286,7 @@
                 { "name": "Сара", "icon": "https://game-cdn.appsample.com/gim/items/kujou_sara.png" },
                 { "name": "Шинобу", "icon": "https://game-cdn.appsample.com/gim/items/kuki_shinobu.png" },
                 { "name": "Лань Янь", "icon": "https://game-cdn.appsample.com/gim/items/lan_yan.png" },
-                { "name": "Лайла", "icon": "https://game-cdn.appsample.com/gim/items/layla.png" },
+                { "name": "Лейла", "icon": "https://game-cdn.appsample.com/gim/items/layla.png" },
                 { "name": "Лиза", "icon": "https://game-cdn.appsample.com/gim/items/lisa.png" },
                 { "name": "Линнет", "icon": "https://game-cdn.appsample.com/gim/items/lynette.png" },
                 { "name": "Лини", "icon": "https://game-cdn.appsample.com/gim/items/lyney.png" },
@@ -232,15 +302,15 @@
                 { "name": "Ноэлль", "icon": "https://game-cdn.appsample.com/gim/items/noelle.png" },
                 { "name": "Оророн", "icon": "https://game-cdn.appsample.com/gim/items/ororon.png" },
                 { "name": "Ци Ци", "icon": "https://game-cdn.appsample.com/gim/items/qiqi.png" },
-                { "name": "Райдэн Сёгун", "icon": "https://game-cdn.appsample.com/gim/items/raiden_shogun.png" },
+                { "name": "Райдэн", "icon": "https://game-cdn.appsample.com/gim/items/raiden_shogun.png" },
                 { "name": "Рэйзор", "icon": "https://game-cdn.appsample.com/gim/items/razor.png" },
-                { "name": "Розария", "icon": "https://game-cdn.appsample.com/gim/items/rosaria.png" },
-                { "name": "Сангономия Кокоми", "icon": "https://game-cdn.appsample.com/gim/items/sangonomiya_kokomi.png" },
+                { "name": "Розалья", "icon": "https://game-cdn.appsample.com/gim/items/rosaria.png" },
+                { "name": "Кокоми", "icon": "https://game-cdn.appsample.com/gim/items/sangonomiya_kokomi.png" },
                 { "name": "Саю", "icon": "https://game-cdn.appsample.com/gim/items/sayu.png" },
-                { "name": "Сетусы", "icon": "https://game-cdn.appsample.com/gim/items/sethos.png" },
+                { "name": "Сетус", "icon": "https://game-cdn.appsample.com/gim/items/sethos.png" },
                 { "name": "Шэнь Хэ", "icon": "https://game-cdn.appsample.com/gim/items/shenhe.png" },
-                { "name": "Сиканоин Хэйдзо", "icon": "https://game-cdn.appsample.com/gim/items/shikanoin_heizou.png" },
-                { "name": "Сигевинн", "icon": "https://game-cdn.appsample.com/gim/items/sigewinne.png" },
+                { "name": "Хэйдзо", "icon": "https://game-cdn.appsample.com/gim/items/shikanoin_heizou.png" },
+                { "name": "Сиджвин", "icon": "https://game-cdn.appsample.com/gim/items/sigewinne.png" },
                 { "name": "Сахароза", "icon": "https://game-cdn.appsample.com/gim/items/sucrose.png" },
                 { "name": "Тарталья", "icon": "https://game-cdn.appsample.com/gim/items/tartaglia.png" },
                 { "name": "Тома", "icon": "https://game-cdn.appsample.com/gim/items/thoma.png" },
@@ -248,11 +318,11 @@
                 { "name": "Вареса", "icon": "https://game-cdn.appsample.com/gim/items/varesa.png" },
                 { "name": "Венти", "icon": "https://game-cdn.appsample.com/gim/items/venti.png" },
                 { "name": "Странник", "icon": "https://game-cdn.appsample.com/gim/items/wanderer.png" },
-                { "name": "Райотсли", "icon": "https://game-cdn.appsample.com/gim/items/wriothesley.png" },
+                { "name": "Ризли", "icon": "https://game-cdn.appsample.com/gim/items/wriothesley.png" },
                 { "name": "Сяо", "icon": "https://game-cdn.appsample.com/gim/items/xiao.png" },
                 { "name": "Сян Линь", "icon": "https://game-cdn.appsample.com/gim/items/xiangling.png" },
                 { "name": "Сянь Юнь", "icon": "https://game-cdn.appsample.com/gim/items/xianyun.png" },
-                { "name": "Силонен", "icon": "https://game-cdn.appsample.com/gim/items/xilonen.png" },
+                { "name": "Шилонен", "icon": "https://game-cdn.appsample.com/gim/items/xilonen.png" },
                 { "name": "Син Цю", "icon": "https://game-cdn.appsample.com/gim/items/xingqiu.png" },
                 { "name": "Синь Янь", "icon": "https://game-cdn.appsample.com/gim/items/xinyan.png" },
                 { "name": "Яэ Мико", "icon": "https://game-cdn.appsample.com/gim/items/yae_miko.png" },
@@ -261,7 +331,7 @@
                 { "name": "Е Лань", "icon": "https://game-cdn.appsample.com/gim/items/yelan.png" },
                 { "name": "Ёимия", "icon": "https://game-cdn.appsample.com/gim/items/yoimiya.png" },
                 { "name": "Юнь Цзинь", "icon": "https://game-cdn.appsample.com/gim/items/yun_jin.png" },
-                { "name": "Юмемидзуки Мидзуки", "icon": "https://game-cdn.appsample.com/gim/items/yumemizuki_mizuki.png" },
+                { "name": "Мидзуки", "icon": "https://game-cdn.appsample.com/gim/items/yumemizuki_mizuki.png" },
                 { "name": "Чжун Ли", "icon": "https://game-cdn.appsample.com/gim/items/zhongli.png" }
             ];
 
@@ -287,7 +357,9 @@
             // Состояние приложения
             let allCharacters = [...LOCAL_CHARACTERS];
             let historyTeams = JSON.parse(localStorage.getItem(`${currentUserUID}_genshinTeamsHistory`)) || [];
+            let playerCharacters = JSON.parse(localStorage.getItem(`${currentUserUID}_playerCharacters`)) || [];
             let isSpinning = false;
+            let currentGeneratedTeam = []; // Для сохранения сгенерированного отряда перед именованием
 
             // Элементы DOM
             const spinButton = document.getElementById('spin-button');
@@ -307,6 +379,14 @@
             const confirmModalMessage = document.getElementById('confirm-modal-message');
             const confirmModalCancel = document.getElementById('confirm-modal-cancel');
             const confirmModalOk = document.getElementById('confirm-modal-ok');
+            const playerCharactersSelection = document.getElementById('player-characters-selection');
+            const characterSearchInput = document.getElementById('character-search');
+            const clearPlayerCharactersButton = document.getElementById('clear-player-characters');
+            const saveTeamSection = document.getElementById('save-team-section');
+            const teamNameInput = document.getElementById('team-name-input');
+            const saveTeamButton = document.getElementById('save-team-button');
+            const viewFullHistoryButton = document.getElementById('view-full-history-button');
+
 
             // Инициализация темы
             function initTheme() {
@@ -331,53 +411,10 @@
                 settingsPanel.classList.toggle('open');
             }
 
-            // Попытка загрузки персонажей из API
-            async function tryFetchCharacters() {
-                try {
-                    // Используем setTimeout для имитации задержки загрузки, чтобы показать лоадер
-                    setTimeout(async () => {
-                        rouletteLoader.classList.remove('hidden');
-                        roulettePlaceholder.classList.add('hidden');
-                        spinButton.disabled = true;
-
-                        // Имитация загрузки из API (реальный CORS запрос без прокси не пройдет)
-                        // В реальном приложении этот fetch будет работать, если API разрешит CORS
-                        // const response = await fetch('https://akasha.cv/api/filters/characters/?type=profile');
-                        // if (!response.ok) throw new Error('Ошибка загрузки данных');
-                        // const data = await response.json();
-                        // if (data && data.data && data.data[0] && data.data[0].options) {
-                        //     allCharacters = data.data[0].options.map(char => ({
-                        //         name: char.name,
-                        //         icon: char.icon
-                        //     }));
-                        //     console.log('Загружено персонажей из API:', allCharacters.length);
-                        // } else {
-                        //     throw new Error('Неверный формат данных');
-                        // }
-                        
-                        // В текущей реализации всегда используем локальные данные, т.к. CORS не позволяет
-                        allCharacters = [...LOCAL_CHARACTERS];
-                        console.log('Используем локальные данные персонажей:', allCharacters.length);
-
-                        rouletteLoader.classList.add('hidden');
-                        spinButton.disabled = false;
-                        roulettePlaceholder.classList.remove('hidden'); // Показываем плейсхолдер после загрузки
-                    }, 500); // Небольшая задержка для имитации загрузки
-                } catch (error) {
-                    console.error('Ошибка загрузки персонажей:', error);
-                    allCharacters = [...LOCAL_CHARACTERS];
-                    console.log('Используем локальные данные персонажей (из-за ошибки загрузки):', allCharacters.length);
-                    rouletteLoader.classList.add('hidden');
-                    spinButton.disabled = false;
-                    roulettePlaceholder.classList.remove('hidden'); // Показываем плейсхолдер после загрузки
-                }
-            }
-
             // Создание карточки персонажа
-            function createCharacterCard(character, isRoulette = false) {
+            function createCharacterCard(character) {
                 const card = document.createElement('div');
                 card.className = `flex flex-col items-center p-2 rounded-lg bg-white dark:bg-gray-700 shadow-sm text-center flex-shrink-0 w-[100px] sm:w-[120px] md:w-[130px] lg:w-[140px]`;
-                if (isRoulette) card.classList.add('roulette-char-card');
 
                 card.innerHTML = `
                     <img src="${character.icon}" alt="${character.name}" 
@@ -388,40 +425,140 @@
                 return card;
             }
 
+            // Создание карточки персонажа для выбора (в секции "Мои персонажи")
+            function createPlayerCharacterSelectionCard(character) {
+                const card = document.createElement('div');
+                card.className = `player-char-card flex flex-col items-center p-1 rounded-lg bg-white dark:bg-gray-800 shadow-sm text-center cursor-pointer relative`;
+                card.setAttribute('data-name', character.name);
+
+                const isSelected = playerCharacters.some(c => c.name === character.name);
+                if (isSelected) {
+                    card.classList.add('selected');
+                }
+
+                card.innerHTML = `
+                    <img src="${character.icon}" alt="${character.name}" 
+                         class="w-12 h-12 rounded-full mb-1 object-cover border-2 border-transparent"
+                         onerror="this.onerror=null;this.src='https://placehold.co/48x48/EFEAE4/4A4A4A?text=N/A'">
+                    <p class="font-medium text-xs truncate w-full dark:text-white">${character.name}</p>
+                    ${isSelected ? '<button class="remove-btn" title="Удалить">&times;</button>' : ''}
+                `;
+
+                const img = card.querySelector('img');
+                if (isSelected) {
+                    img.classList.remove('border-transparent');
+                    img.classList.add('border-[#DCA852]');
+                }
+
+                card.addEventListener('click', (event) => {
+                    if (event.target.classList.contains('remove-btn')) {
+                        removePlayerCharacter(character.name);
+                    } else {
+                        togglePlayerCharacter(character);
+                    }
+                });
+
+                return card;
+            }
+
+            // Рендеринг списка персонажей для выбора
+            function renderPlayerCharactersSelection(filter = '') {
+                playerCharactersSelection.innerHTML = '';
+                const filteredCharacters = allCharacters.filter(char => 
+                    char.name.toLowerCase().includes(filter.toLowerCase())
+                );
+
+                filteredCharacters.forEach(char => {
+                    playerCharactersSelection.appendChild(createPlayerCharacterSelectionCard(char));
+                });
+                updateClearPlayerCharactersButtonVisibility();
+            }
+
+            // Добавление/удаление персонажа из списка игрока
+            function togglePlayerCharacter(character) {
+                const index = playerCharacters.findIndex(c => c.name === character.name);
+                if (index > -1) {
+                    playerCharacters.splice(index, 1);
+                } else {
+                    playerCharacters.push(character);
+                }
+                localStorage.setItem(`${currentUserUID}_playerCharacters`, JSON.stringify(playerCharacters));
+                renderPlayerCharactersSelection(characterSearchInput.value); // Перерисовываем с текущим фильтром
+                updateClearPlayerCharactersButtonVisibility();
+            }
+
+            // Удаление персонажа из списка игрока по имени
+            function removePlayerCharacter(characterName) {
+                playerCharacters = playerCharacters.filter(c => c.name !== characterName);
+                localStorage.setItem(`${currentUserUID}_playerCharacters`, JSON.stringify(playerCharacters));
+                renderPlayerCharactersSelection(characterSearchInput.value);
+                updateClearPlayerCharactersButtonVisibility();
+            }
+
+            // Очистка всех персонажей игрока
+            function clearPlayerCharacters() {
+                playerCharacters = [];
+                localStorage.removeItem(`${currentUserUID}_playerCharacters`);
+                renderPlayerCharactersSelection('');
+                hideConfirmModal();
+            }
+
+            // Обновление видимости кнопки "Очистить выбранных персонажей"
+            function updateClearPlayerCharactersButtonVisibility() {
+                if (playerCharacters.length > 0) {
+                    clearPlayerCharactersButton.classList.remove('hidden');
+                } else {
+                    clearPlayerCharactersButton.classList.add('hidden');
+                }
+            }
+
             // Отображение результата рулетки с плавной анимацией
-            function renderRouletteResult(team) {
+            async function renderRouletteResult(team) {
                 rouletteResult.innerHTML = '';
                 roulettePlaceholder.classList.add('hidden');
 
-                team.forEach((char, index) => {
-                    const card = createCharacterCard(char, true);
+                for (let i = 0; i < team.length; i++) {
+                    const char = team[i];
+                    const card = createCharacterCard(char);
+                    card.classList.add('roulette-item-final-enter');
+
                     rouletteResult.appendChild(card);
-                    
-                    // Анимация появления с задержкой
-                    setTimeout(() => {
-                        card.classList.add('show');
-                    }, index * 150); // Уменьшил задержку для более быстрого появления
-                });
+
+                    await new Promise(resolve => setTimeout(resolve, 50)); 
+                    card.classList.add('roulette-item-final-enter-active');
+
+                    await new Promise(resolve => setTimeout(resolve, 200)); 
+                }
             }
 
-            // Отображение истории
+            // Отображение истории (только последние 3)
             function renderHistory() {
                 historyContent.innerHTML = '';
                 
                 if (historyTeams.length === 0) {
                     historyPlaceholder.classList.remove('hidden');
                     clearHistoryButton.classList.add('hidden');
+                    viewFullHistoryButton.classList.add('hidden');
                 } else {
                     historyPlaceholder.classList.add('hidden');
                     clearHistoryButton.classList.remove('hidden');
+                    if (historyTeams.length > 3) { // Показываем кнопку "Вся история", если команд больше 3
+                        viewFullHistoryButton.classList.remove('hidden');
+                    } else {
+                        viewFullHistoryButton.classList.add('hidden');
+                    }
+
+                    // Показываем только последние 3 отряда на главной странице
+                    const teamsToShow = historyTeams.slice(0, 3);
                     
-                    historyTeams.forEach((team, index) => {
+                    teamsToShow.forEach((team, index) => {
                         const teamElement = document.createElement('div');
                         teamElement.className = 'bg-[#FDF8F0] dark:bg-gray-800 rounded-xl p-4 shadow-sm border border-[#EFEAE4] dark:border-gray-600';
                         
                         const title = document.createElement('h3');
                         title.className = 'text-lg font-semibold mb-3 dark:text-white';
-                        title.textContent = `Отряд ${historyTeams.length - index} (${new Date(team.date).toLocaleString()})`;
+                        // Испол��зуем сохраненное имя, если оно есть, иначе генерируем
+                        title.textContent = team.name ? team.name : `Отряд ${historyTeams.length - index} (${new Date(team.date).toLocaleString()})`;
                         teamElement.appendChild(title);
                         
                         const charsContainer = document.createElement('div');
@@ -437,16 +574,17 @@
                 }
             }
 
-            // Сохранение отряда в историю
-            function saveTeamToHistory(team) {
+            // Сохранение отряда в историю с возможностью добавления имени
+            function saveTeamToHistory(team, teamName = '') {
                 historyTeams.unshift({
                     date: new Date().toISOString(),
-                    characters: team
+                    characters: team,
+                    name: teamName // Добавляем имя
                 });
                 
-                // Ограничиваем историю последними 10 отрядами
-                if (historyTeams.length > 10) {
-                    historyTeams = historyTeams.slice(0, 10);
+                // Ограничиваем историю последними 20 отрядами для общей истории (чтобы не было слишком много данных, но достаточно для просмотра)
+                if (historyTeams.length > 20) {
+                    historyTeams = historyTeams.slice(0, 20);
                 }
                 
                 localStorage.setItem(`${currentUserUID}_genshinTeamsHistory`, JSON.stringify(historyTeams));
@@ -463,63 +601,70 @@
 
             // Запуск рулетки
             async function spinRoulette() {
-                if (isSpinning || allCharacters.length < config.teamSize) return;
+                const availableCharsForSpin = playerCharacters.length > 0 ? playerCharacters : allCharacters;
+
+                if (isSpinning || availableCharsForSpin.length < config.teamSize) {
+                    alert(`Недостаточно персонажей для формирования отряда из ${config.teamSize} человек. Доступно: ${availableCharsForSpin.length}`);
+                    return;
+                }
                 
                 isSpinning = true;
                 spinButton.disabled = true;
                 spinButton.textContent = 'Крутим...';
-                rouletteResult.innerHTML = ''; // Очищаем поле результата
+                rouletteResult.innerHTML = '';
                 roulettePlaceholder.classList.add('hidden');
                 rouletteLoader.classList.remove('hidden');
-                rouletteResult.classList.add('roulette-spinning'); // Добавляем класс для анимации вращения
-                
+                saveTeamSection.classList.add('hidden'); // Скрываем секцию сохранения при новом вращении
+                teamNameInput.value = ''; // Очищаем поле ввода имени
+
                 const teamSize = parseInt(teamSizeSelect.value);
-                let availableChars = [...allCharacters];
+                let charsPool = [...availableCharsForSpin];
                 const selectedTeam = [];
                 
-                let spinDurationBase; // Общая базовая продолжительность анимации
+                let spinDurationMs; 
                 switch (animationSpeedSelect.value) {
-                    case 'fast': spinDurationBase = 1000; break; // 1 секунда
-                    case 'slow': spinDurationBase = 3000; break; // 3 секунды
-                    default: spinDurationBase = 2000; // 2 секунды
+                    case 'fast': spinDurationMs = 1500; break; 
+                    case 'slow': spinDurationMs = 4000; break; 
+                    default: spinDurationMs = 2500; 
                 }
 
-                const delayBetweenChars = spinDurationBase / (teamSize * 2); // Задержка между появлением каждого символа
-                const totalSpinTimePerChar = spinDurationBase / teamSize; // Общее время "кручения" для каждого символа
+                const individualSpinTime = spinDurationMs / teamSize;
 
                 for (let i = 0; i < teamSize; i++) {
-                    // Анимируем "прокрутку" перед выбором каждого персонажа
-                    const tempRouletteChars = [];
-                    const numTempChars = 10; // Количество временных символов для прокрутки
-                    for (let j = 0; j < numTempChars; j++) {
-                        const randomChar = availableChars[Math.floor(Math.random() * availableChars.length)];
-                        tempRouletteChars.push(randomChar);
-                    }
-
-                    // Показываем временные символы с быстрой сменой
-                    for (let k = 0; k < numTempChars; k++) {
-                        setTimeout(() => {
-                            rouletteResult.innerHTML = '';
-                            const tempCard = createCharacterCard(tempRouletteChars[k], true);
-                            rouletteResult.appendChild(tempCard);
-                            tempCard.classList.add('roulette-item-enter-active'); // Применяем анимацию появления
-                        }, k * (totalSpinTimePerChar / numTempChars)); // Быстрая смена временных символов
-                    }
-
-                    // Выбираем окончательного персонажа после анимации прокрутки
-                    await new Promise(resolve => setTimeout(resolve, totalSpinTimePerChar)); // Задержка для анимации прокрутки
-
-                    const selectedIndex = Math.floor(Math.random() * availableChars.length);
-                    const selectedChar = availableChars.splice(selectedIndex, 1)[0];
-                    selectedTeam.push(selectedChar);
-
-                    // Очищаем и добавляем выбранного персонажа
-                    rouletteResult.innerHTML = ''; // Очищаем временные символы
-                    const finalCard = createCharacterCard(selectedChar, true);
-                    rouletteResult.appendChild(finalCard);
-                    finalCard.classList.add('show'); // Показываем выбранного персонажа с плавной анимацией
-
-                    await new Promise(resolve => setTimeout(resolve, delayBetweenChars)); // Задержка перед следующим персонажем
+                    const tempRouletteDiv = document.createElement('div');
+                    tempRouletteDiv.className = 'flex flex-col items-center flex-shrink-0 w-[100px] sm:w-[120px] md:w-[130px] lg:w-[140px]';
+                    rouletteResult.appendChild(tempRouletteDiv);
+
+                    let startTime = Date.now();
+                    let animationFrame;
+
+                    const animateSpin = () => {
+                        const elapsedTime = Date.now() - startTime;
+                        if (elapsedTime < individualSpinTime) {
+                            const randomChar = charsPool[Math.floor(Math.random() * charsPool.length)];
+                            tempRouletteDiv.innerHTML = '';
+                            const tempCard = createCharacterCard(randomChar);
+                            tempCard.classList.add('roulette-item-spin');
+                            tempRouletteDiv.appendChild(tempCard);
+                            animationFrame = requestAnimationFrame(animateSpin);
+                        } else {
+                            cancelAnimationFrame(animationFrame);
+                            const selectedIndex = Math.floor(Math.random() * charsPool.length);
+                            const selectedChar = charsPool.splice(selectedIndex, 1)[0];
+                            selectedTeam.push(selectedChar);
+
+                            tempRouletteDiv.innerHTML = ''; 
+                            const finalCard = createCharacterCard(selectedChar);
+                            finalCard.classList.add('roulette-item-final-enter'); 
+                            tempRouletteDiv.appendChild(finalCard);
+                            setTimeout(() => {
+                                finalCard.classList.add('roulette-item-final-enter-active');
+                            }, 10);
+                        }
+                    };
+                    animateSpin();
+
+                    await new Promise(resolve => setTimeout(resolve, individualSpinTime + 100)); 
                 }
                 
                 // Завершение рулетки
@@ -527,10 +672,9 @@
                 spinButton.disabled = false;
                 spinButton.textContent = 'Крутить ещё!';
                 isSpinning = false;
-                rouletteResult.classList.remove('roulette-spinning'); // Удаляем класс анимации вращения
                 
-                // Сохраняем отряд в историю
-                saveTeamToHistory(selectedTeam);
+                currentGeneratedTeam = selectedTeam; // Сохраняем сгенерированный отряд
+                saveTeamSection.classList.remove('hidden'); // Показываем секцию сохранения
             }
 
             // Модальное окно подтверждения
@@ -571,12 +715,35 @@
             themeToggle.addEventListener('click', toggleTheme);
             settingsToggle.addEventListener('click', toggleSettings);
             clearHistoryButton.addEventListener('click', () => {
-                showConfirmModal('Вы уверены, что хотите очистить всю историю отрядов?', clearHistory);
+                showConfirmModal(`UID:${currentUserUID} \r\rВы уверены, что хотите очистить всю историю отрядов?`, clearHistory);
+            });
+            clearPlayerCharactersButton.addEventListener('click', () => {
+                showConfirmModal('Вы уверены, что хотите очистить список ваших персонажей?', clearPlayerCharacters);
             });
             confirmModal.addEventListener('click', (e) => {
                 if (e.target === confirmModal) hideConfirmModal();
             });
             
+            characterSearchInput.addEventListener('input', (e) => {
+                renderPlayerCharactersSelection(e.target.value);
+            });
+
+            saveTeamButton.addEventListener('click', () => {
+                const teamName = teamNameInput.value.trim();
+                if (currentGeneratedTeam.length > 0) {
+                    saveTeamToHistory(currentGeneratedTeam, teamName);
+                    saveTeamSection.classList.add('hidden'); // Скрываем секцию после сохранения
+                    teamNameInput.value = ''; // Очищаем поле
+                    currentGeneratedTeam = []; // Сбрасываем текущий отряд
+                }
+            });
+
+            viewFullHistoryButton.addEventListener('click', () => {
+                // Открываем новую вкладку для полной истории
+                showConfirmModal(`${currentUserUID} ${history-content}`);
+            });
+
+
             // Сохранение настроек при изменении
             teamSizeSelect.addEventListener('change', (e) => {
                 config.teamSize = parseInt(e.target.value);
@@ -594,7 +761,7 @@
 
             // Инициализация приложения
             initTheme();
-            tryFetchCharacters(); // Пытаемся загрузить данные с API, но используем локальные в случае ошибки
+            renderPlayerCharactersSelection(); 
             renderHistory();
         });
     </script>