feat(ui): Minimalist top navigation bar with Drawer slider, Pause & Speed controls

BUG_REPORTS.md

@@ -3,14 +3,15 @@
 > Данный файл обновляется автоматически при поступлении новых баг-репортов из игры.
 > При каждом обновлении и новой итерации разработки ассистент анализирует этот список.
 
-**Всего репортов:** 12 | **Последнее обновление:** 2026-09-16 11:20:33
+**Всего репортов:** 13 | **Последнее обновление:** 2026-09-17 09:57:15
 
 | ID | Дата | Автор | Категория | Статус | Описание | Ответ / Фикс |
 |:---:|:---:|:---|:---:|:---:|:---|:---|
+| 13 | 2026-09-17 09:57 | Klitr | 🎨 UI | 🔴 Новый | Здоровье зомби не видно за границей игрового поля | — |
 | 12 | 2026-09-16 11:20 | Admin | 🔴 Баг | ✅ Исправлено | Боулинг не работает, баг как и у Рогалика | Исправлено в v2.5: устранен ReferenceError в zombie.draw, налажен спавн и рикошет шаров боулинга. |
 | 11 | 2026-09-16 11:19 | Admin | 🔴 Баг | ✅ Исправлено | "Я Зомби" Аналогичная проблема как и в режиме Зомбосс | Исправлено в v2.5: таймер заставки и состояние волны теперь корректно обновляются без раннего выхода из цикла. |
-| 10 | 2026-09-16 11:19 | Admin | 🔴 Баг | ✅ Исправлено | Режим Зомбос не работает, не проходит начальная заставка... игра не начинается | Исправлено в v2.5: убран ранний return из WaveSystem.update, блокировавший отсчет заставки и запуск битвы с боссом. |
+| 10 | 2026-09-16 11:19 | Admin | 🔴 Баг | ✅ Исправлено | Режим Зомбос не работает, не проходит начальная заставка... игра не начинается | Исправлено в v2.5: убран ранний return из WaveSystem.update, блокировавший отсчет начальной заставки и запуск битвы с боссом. |
-| 9 | 2026-09-16 11:18 | Admin | 🔴 Баг | ✅ Исправлено | Достижения не засчитываются, нужно их сохранять | Исправлено в v2.5: исправлено затирание данных в PvZAuth.saveUserData (теперь выполняется merge), добавлен fallback в localStorage для гостей, подключены триггеры nut_wall и ice_age. |
+| 9 | 2026-09-16 11:18 | Admin | 🔴 Баг | ✅ Исправлено | Достижения не засчитываются, нужно их сохранять | Исправлено в v2.5: исправлено затирание объекта данных в PvZAuth.saveUserData (теперь выполняется merge), добавлен fallback в localStorage для гостей, подключены триггеры nut_wall и ice_age. |
 | 8 | 2026-09-16 11:18 | Admin | 🔴 Баг | ✅ Исправлено | Рогалик. Режим имеет такой же баг как и режим выживания. | Исправлено в v2.5: устранен вылет при отрисовке зомби; исправлена ссылка на allCards при драфте семян; корректная инициализация колоды этажа. |
 | 7 | 2026-09-16 11:08 | Admin | 🔴 Баг | ✅ Исправлено | Дзен сад не работает, улитка бегает и начинает крутится на месте (зависает) растения ничего не дают, фича не работает | Исправлено в v2.5: (1) устранено бесконечное дрожание направления улитки за счет пошагового приближения; (2) сбор монет на полу; (3) инструмент 'лейка' активен по умолчанию; (4) фоновое созревание и начисление монет. |
 | 6 | 2026-09-16 11:07 | Admin | 🔴 Баг | ✅ Исправлено | Не происходит смена режима, после выхода в главное меню, надо перезагружать страницу. Баг. | Исправлено в v2.5: переключение режимов в меню теперь синхронно обновляет currentMode, закрывает все фоновые модалы, сбрасывает колоды и музыку, инициализируя корректный уровень для выбранного режима. |

game/css/style.css

@@ -28,19 +28,19 @@ body {
   max-width: 98vw;
 }
 
-/* Clean Flexbox Top Navigation Bar (Adaptive & Responsive) */
+/* Minimalist Clean Top Navigation Bar */
 .top-nav-bar {
   width: 100%;
   background: linear-gradient(to bottom, #3e2723, #2a160c);
   border: 3px solid #5d4037;
   border-bottom: 2px solid #231209;
   border-radius: 10px 10px 0 0;
-  padding: 4px 8px;
+  padding: 4px 10px;
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.5);
   z-index: 10;
   box-sizing: border-box;
@@ -50,23 +50,27 @@ body {
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
-  gap: 4px;
+  gap: 6px;
 }
 
-.desktop-nav-links {
+.btn-menu-main {
-  display: flex;
+  background: linear-gradient(135deg, #e65100, #bf360c) !important;
-  align-items: center;
+  color: #fff !important;
-  gap: 4px;
+  border-color: #ffb74d !important;
+  font-size: 12px !important;
+  padding: 5px 12px !important;
+  box-shadow: 0 2px 6px rgba(230, 81, 0, 0.4) !important;
 }
 
-.btn-drawer-toggle {
+.btn-menu-main:hover {
-  display: none;
+  background: linear-gradient(135deg, #f57c00, #d84315) !important;
-  background: #ff8f00;
+  border-color: #ffe082 !important;
-  color: #fff;
+  transform: translateY(-1px);
-  border-color: #ffd54f;
 }
-.btn-drawer-toggle:hover {
+
-  background: #ffa000;
+.btn-icon-nav {
+  padding: 4px 10px;
+  font-size: 11px;
 }
 
 .nav-btn {
@@ -93,16 +97,6 @@ body {
   transform: translateY(1px);
 }
 
-.btn-bug-nav {
-  border-color: #4fc3f7;
-  color: #e1f5fe;
-}
-
-.btn-bug-nav:hover {
-  background: #0277bd;
-  border-color: #81d4fa;
-}
-
 /* User Profile Badge */
 .profile-badge {
   display: flex;

game/index.html

@@ -16,44 +16,48 @@
 </head>
 <body>
   <div id="game-wrapper">
-    <!-- Clean Responsive Top Navigation Bar -->
+    <!-- Minimalist Clean Top Navigation Bar -->
     <header class="top-nav-bar">
       <div class="nav-left">
-        <button id="btn-menu" class="nav-btn" title="Выйти в главное меню">🏠 Меню</button>
+        <button id="btn-main-menu-drawer" class="nav-btn btn-menu-main" title="Открыть меню разделов">☰ Меню</button>
-        <div id="user-profile-badge" class="profile-badge">
+        <div id="user-profile-badge" class="profile-badge cursor-pointer" title="Управление профилем">
           <span id="badge-user-name">👤 Гость</span>
-          <button id="btn-auth-open" class="btn-mini" title="Управление профилем">Войти</button>
+          <button id="btn-auth-open" class="btn-mini" title="Профиль / Авторизация">Войти</button>
-          <button id="btn-auth-logout-nav" class="btn-mini btn-logout-mini hidden" title="Выйти из профиля в гостевой режим">Выйти</button>
+          <button id="btn-auth-logout-nav" class="btn-mini btn-logout-mini hidden" title="Выйти из аккаунта">Выйти</button>
-        </div>
-        <div class="desktop-nav-links">
-          <button id="btn-campaign-open" class="nav-btn" title="Карта Кампании: 25 уровней и 5 биомов">🗺️ Кампания</button>
-          <button id="btn-workshop" class="nav-btn" title="Сад-Мастерская: прокачка растений и перки">🧪 Мастерская</button>
-          <button id="btn-zengarden" class="nav-btn" title="Дзен-Сад: пассивный доход и улитка Стинки">🪴 Дзен-Сад</button>
-          <button id="btn-almanac" class="nav-btn" title="Пригородный Альманах растений и зомби">📖 Альманах</button>
-          <button id="btn-achievements" class="nav-btn" title="Зал Достижений и Трофеев">🏆 Достижения</button>
-          <button id="btn-tree" class="nav-btn" title="Древо Мудрости и Секретные Чит-коды">🌳 Древо</button>
-          <button id="btn-leaderboard" class="nav-btn" title="Доска Почёта и Рекорды">🏅 Рекорды</button>
-          <button id="btn-bugreport" class="nav-btn btn-bug-nav" title="Чат баг-репортов и предложений">🐛 Баги</button>
         </div>
       </div>
       <div class="nav-right">
-        <button id="btn-theme" class="nav-btn" title="Смена темы оформления (Классика, Киберпанк, Ретро, Зима)">🎨 Классика</button>
+        <button id="btn-speed" class="nav-btn btn-icon-nav" title="Скорость игры (1x / 2x)">⚡ 1x</button>
-        <button id="btn-speed" class="nav-btn" title="Ускорить игру">⚡ 1x</button>
+        <button id="btn-pause" class="nav-btn btn-pause btn-icon-nav" title="Пауза / Продолжить (Пробел)">⏸️ Пауза</button>
-        <button id="btn-pause" class="nav-btn btn-pause" title="Пауза / Продолжить (Пробел)">⏸️ Пауза</button>
+        <button id="btn-mute" class="nav-btn btn-icon-nav" title="Включить / выключить звук">🔊 Звук</button>
-        <button id="btn-music" class="nav-btn" title="Включить/выключить музыку">🎵 Музыка</button>
+      </div>
-        <button id="btn-mute" class="nav-btn" title="Включить/выключить звук">🔊 Звук</button>
+
-        <button id="btn-mobile-drawer" class="nav-btn btn-drawer-toggle" title="Открыть меню разделов">☰ Разделы</button>
+      <!-- Hidden trigger targets for backwards compatibility & tests -->
+      <div style="display: none;">
+        <button id="btn-menu"></button>
+        <button id="btn-campaign-open"></button>
+        <button id="btn-workshop"></button>
+        <button id="btn-zengarden"></button>
+        <button id="btn-almanac"></button>
+        <button id="btn-achievements"></button>
+        <button id="btn-tree"></button>
+        <button id="btn-leaderboard"></button>
+        <button id="btn-bugreport"></button>
+        <button id="btn-theme"></button>
+        <button id="btn-music"></button>
+        <button id="btn-mobile-drawer"></button>
       </div>
     </header>
 
-    <!-- Mobile Slide-out Drawer Menu -->
+    <!-- Slide-out Drawer Menu with All Game Activities -->
     <div id="drawer-backdrop" class="drawer-backdrop hidden"></div>
     <aside id="mobile-drawer" class="mobile-drawer hidden">
       <div class="drawer-header">
-        <h2>🌻 Разделы игры</h2>
+        <h2>🌻 Меню игры</h2>
         <button id="btn-drawer-close" class="btn-drawer-close" title="Закрыть меню">✕</button>
       </div>
       <div class="drawer-body">
+        <button id="btn-drawer-main-screen" class="drawer-item">🏠 Главный экран (Режимы)</button>
         <button id="btn-drawer-campaign" class="drawer-item">🗺️ Карта Кампании (25 уровней)</button>
         <button id="btn-drawer-workshop" class="drawer-item">🧪 Сад-Мастерская (Крафт и перки)</button>
         <button id="btn-drawer-zengarden" class="drawer-item">🪴 Дзен-Сад (Пассивный доход)</button>
@@ -61,6 +65,8 @@
         <button id="btn-drawer-achievements" class="drawer-item">🏆 Зал Достижений и Трофеев</button>
         <button id="btn-drawer-tree" class="drawer-item">🌳 Древо Мудрости и Чит-коды</button>
         <button id="btn-drawer-leaderboard" class="drawer-item">🏅 Доска Рекордов</button>
+        <button id="btn-drawer-theme" class="drawer-item">🎨 Тема оформления: <span id="drawer-theme-label" style="color: #81d4fa; margin-left: auto;">Классика</span></button>
+        <button id="btn-drawer-music" class="drawer-item">🎵 Фоновая музыка: <span id="drawer-music-label" style="color: #a5d6a7; margin-left: auto;">Вкл</span></button>
         <button id="btn-drawer-bugreport" class="drawer-item btn-drawer-bug">🐛 Баг-репорты и Чат</button>
       </div>
     </aside>

game/js/game.js

@@ -726,9 +726,10 @@ window.GameEngine = class GameEngine {
   }
 
   bindUI() {
-    // Mobile Drawer Handlers
+    // Mobile / Main Drawer Handlers
     const mobileDrawer = document.getElementById('mobile-drawer');
     const drawerBackdrop = document.getElementById('drawer-backdrop');
+    const btnMainMenuDrawer = document.getElementById('btn-main-menu-drawer');
     const btnDrawerOpen = document.getElementById('btn-mobile-drawer');
     const btnDrawerClose = document.getElementById('btn-drawer-close');
 
@@ -743,11 +744,45 @@ window.GameEngine = class GameEngine {
       if (drawerBackdrop) drawerBackdrop.classList.add('hidden');
     };
 
+    if (btnMainMenuDrawer) btnMainMenuDrawer.addEventListener('click', openDrawer);
     if (btnDrawerOpen) btnDrawerOpen.addEventListener('click', openDrawer);
     if (btnDrawerClose) btnDrawerClose.addEventListener('click', closeDrawer);
     if (drawerBackdrop) drawerBackdrop.addEventListener('click', closeDrawer);
 
-    // Mobile Drawer Items delegation to corresponding modal open triggers
+    // Main Screen action from Drawer
+    const btnDrawerMain = document.getElementById('btn-drawer-main-screen');
+    if (btnDrawerMain) {
+      btnDrawerMain.addEventListener('click', () => {
+        closeDrawer();
+        this.openMainMenu();
+      });
+    }
+
+    // Theme & Music actions from Drawer
+    const btnDrawerTheme = document.getElementById('btn-drawer-theme');
+    const drawerThemeLabel = document.getElementById('drawer-theme-label');
+    if (btnDrawerTheme) {
+      btnDrawerTheme.addEventListener('click', () => {
+        const themeNames = { classic: 'Классика', cyberpunk: 'Киберпанк', retro8bit: 'Ретро 8-bit', winter: 'Зима' };
+        const keys = Object.keys(themeNames);
+        const nextIndex = (keys.indexOf(this.currentTheme) + 1) % keys.length;
+        this.applyTheme(keys[nextIndex]);
+        if (drawerThemeLabel) drawerThemeLabel.textContent = themeNames[this.currentTheme];
+        this.triggerHaptic(15);
+      });
+    }
+
+    const btnDrawerMusic = document.getElementById('btn-drawer-music');
+    const drawerMusicLabel = document.getElementById('drawer-music-label');
+    if (btnDrawerMusic) {
+      btnDrawerMusic.addEventListener('click', () => {
+        const isPlaying = window.PvZAudio ? window.PvZAudio.toggleMusic() : false;
+        if (drawerMusicLabel) drawerMusicLabel.textContent = isPlaying ? 'Вкл' : 'Выкл';
+        this.triggerHaptic(15);
+      });
+    }
+
+    // Drawer Items delegation to corresponding modal open triggers
     const drawerActions = [
       { id: 'btn-drawer-campaign', target: 'btn-campaign-open' },
       { id: 'btn-drawer-workshop', target: 'btn-workshop' },

reports/bugs.json

@@ -106,5 +106,14 @@
     "status": "исправлено",
     "timestamp": "2026-09-16 11:20",
     "adminReply": "Исправлено в v2.5: устранен ReferenceError в zombie.draw, налажен спавн и рикошет шаров боулинга."
+  },
+  {
+    "id": 13,
+    "author": "Klitr",
+    "category": "visual",
+    "text": "Здоровье зомби не видно за границей игрового поля",
+    "status": "новый",
+    "timestamp": "2026-09-17 09:57",
+    "adminReply": null
   }
 ]