feat(mobile): Add responsive layout, mobile Drawer menu, and touch gestures
- Add viewport-fit=cover & mobile slide-out Drawer navigation menu - Add @media screen rules (<=768px and landscape <=540px) - Add Touch Drag & Drop planting and continuous swipe-to-collect - Add Vibration API haptic feedback for planting, collecting, and explosions - Add automated responsive test assertions in test_game.py (242/242 PASS)
This commit is contained in:
1 parent
6457a8904e
commit
82654d8f64
4 files changed
+433
-22
No files matched your search
+32
-10
@@ -2,7 +2,7 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<title>Plants vs. Zombies — Игра онлайн на ai.qpid.pro</title>
|
||||
<meta name="description" content="Полный клон Plants vs. Zombies на Canvas: день, ночь, бассейн, туман, крыша, боулинг, магазин Дэйва, Зомбосс.">
|
||||
<link rel="manifest" href="manifest.json">
|
||||
@@ -16,32 +16,54 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="game-wrapper">
|
||||
<!-- Clean Flexbox Top Navigation Bar (No collisions) -->
|
||||
<!-- Clean Responsive Top Navigation Bar -->
|
||||
<header class="top-nav-bar">
|
||||
<div class="nav-left">
|
||||
<button id="btn-menu" class="nav-btn" title="Выйти в главное меню">🏠 Меню</button>
|
||||
<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 id="user-profile-badge" class="profile-badge">
|
||||
<span id="badge-user-name">👤 Гость</span>
|
||||
<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>
|
||||
</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" title="Ускорить игру">⚡ 1x</button>
|
||||
<button id="btn-music" class="nav-btn" title="Включить/выключить музыку">🎵 Музыка</button>
|
||||
<button id="btn-mute" class="nav-btn" title="Включить/выключить звук">🔊 Звук</button>
|
||||
<button id="btn-mobile-drawer" class="nav-btn btn-drawer-toggle" title="Открыть меню разделов">☰ Разделы</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Mobile Slide-out Drawer Menu -->
|
||||
<div id="drawer-backdrop" class="drawer-backdrop hidden"></div>
|
||||
<aside id="mobile-drawer" class="mobile-drawer hidden">
|
||||
<div class="drawer-header">
|
||||
<h2>🌻 Разделы игры</h2>
|
||||
<button id="btn-drawer-close" class="btn-drawer-close" title="Закрыть меню">✕</button>
|
||||
</div>
|
||||
<div class="drawer-body">
|
||||
<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>
|
||||
<button id="btn-drawer-almanac" class="drawer-item">📖 Пригородный Альманах</button>
|
||||
<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-bugreport" class="drawer-item btn-drawer-bug">🐛 Баг-репорты и Чат</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div id="game-container">
|
||||
<!-- Main Game Canvas -->
|
||||
<canvas id="gameCanvas" width="900" height="600"></canvas>
|
||||
|
||||
Reference in new issue
Block a user