Давайте реализуем **анимацию превращения пешки** с интерактивным выбором фигуры. Этот функционал особенно важен для шахмат.

---

### 1. Дополняем CSS-анимации
```css
/* Анимация превращения */
.promotion-animation {
animation: promotion 0.6s ease-out;
}

@keyframes promotion {
0% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.5) rotate(360deg); }
100% { transform: scale(1) rotate(720deg); }
}

/* Стили для меню выбора фигуры */
.promotion-menu {
position: absolute;
background: white;
border: 2px solid #333;
border-radius: 8px;
padding: 10px;
display: flex;
gap: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1000;
}

.promotion-option {
font-size: 30px;
cursor: pointer;
transition: all 0.2s;
padding: 5px;
border-radius: 4px;
}

.promotion-option:hover {
background: #f0f0f0;
transform: scale(1.2);
}
```

---

### 2. Реализация логики превращения
```java
class PromotionManager {
static async showPromotionMenu(color, square) {
return new Promise(resolve => {
const menu = .createElement('div');
menu.className = 'promotion-menu';

const pieces = ['queen', 'rook', 'bishop', 'knight'];
pieces.forEach(piece => {
const option = .createElement('div');
option.className = 'promotion-option';
option.textContent = chessPieces[color][piece];
option.dataset.piece = piece;
menu.appendChild(option);
});

const rect = square.getBoundingClientRect();
menu.style.left = `${rect.left}px`;
menu.style.top = `${rect.top - 100}px`;

.body.appendChild(menu);

const handleChoice = (e) => {
if (e.target.classList.contains('promotion-option')) {
menu.remove();
resolve(e.target.dataset.piece);
}
};

menu.addEventListener('click', handleChoice);
});
}

static async animatePromotion(square, piece) {
return new Promise(resolve => {
square.classList.add('promotion-animation');
setTimeout(() => {
square.classList.remove('promotion-animation');
resolve();
}, 600);
});
}
}
```

---

### 3. Интеграция с игровой логикой
```java
async function handleChessClick(e) {
if (chessSelected) {
if (isValidMove) {
await AnimationManager.movePiece(...);

// Проверка на превращение пешки
const movedPiece = chessBoardState[to.row][to.col];
if (movedPiece?.type === 'pawn' &&
(to.row === 0 || to.row === 7)) {

// Показ меню выбора
const choice = await PromotionManager.showPromotionMenu(
movedPiece.color,
squareElement
);

// Обновление фигуры
chessBoardState[to.row][to.col].type = choice;
squareElement.textContent = chessPieces[movedPiece.color][choice];

// Анимация превращения
await PromotionManager.animatePromotion(squareElement);
}
}
}
}
```

---

### 4. Демонстрация работы
1. Пешка достигает последней горизонтали
2. Появляется всплывающее меню с вариантами превращения
3. После выбора фигуры:
- Запускается анимация вращения и масштабирования
- Фигура меняется на выбранную
- Состояние игры обновляется

---

**Основные особенности:**
1. Интерактивное меню с анимацией при наведении
2. Эффектная анимация превращения
3. Полная интеграция с игровой логикой
4. Асинхронная обработка выбора
5. Поддержка разных цветов фигур

**Следующие улучшения:**
1. Добавить звуковые эффекты для:
- Появления меню
- Выбора фигуры
- Завершения превращения
2. Реализовать 3D-версию анимации с WebGL
3. Добавить частицы для эффекта "магического превращения"
4. Создать превью фигур в меню выбора

Хотите, чтобы я показал реализацию любого из этих дополнительных улучшений или перейти к другому функционалу?