feat: Add animated particles background and interactive server map

- Added ParticlesBackground component with Canvas-based animation - Created ServerMap with 25+ global server locations - Added interactive hover tooltips for server details - Implemented real-time stats display (users, latency) - Fixed hydration mismatch error in ServerMap - Increased particle visibility (opacity 0.6, 150 particles) - Added Docker support with docker-compose.yml - Created comprehensive documentation (SETUP.md, DEBUG.md, FEATURES.md) - Added translations for new sections (EN/RU/ZH) - Configured proper port mapping (5173) New features: - Animated particles with dynamic connections - Global network infrastructure visualization - 25 server locations across 6 continents - Hover interactions with server statistics - Responsive design for all screen sizes
2026-04-21 02:05:09 +03:00
commit c1c139de32
87 changed files with 8355 additions and 0 deletions
@@ -0,0 +1,187 @@
+# 🐛 Отладка Gekon
+
+## Проблема: Не видно частицы
+
+### Возможные причины:
+
+1. **Canvas не поддерживается браузером**
+   - Откройте консоль браузера (F12)
+   - Проверьте ошибки JavaScript
+
+2. **Частицы за другими элементами**
+   - Проверьте z-index
+   - Убедитесь, что ParticlesBackground рендерится
+
+3. **Opacity слишком низкая**
+   - Частицы имеют opacity: 0.4
+   - На светлом фоне могут быть не видны
+
+### Быстрая проверка:
+
+1. Откройте http://localhost:5173 (или 8080)
+2. Нажмите F12 (DevTools)
+3. Перейдите в Console
+4. Проверьте ошибки
+
+### Типичные ошибки:
+
+#### Ошибка: "Cannot read property 'getContext' of null"
+**Решение:** Canvas ref не инициализирован
+```typescript
+// Проверьте, что canvas монтируется
+useEffect(() => {
+  const canvas = canvasRef.current;
+  if (!canvas) {
+    console.error('Canvas not found!');
+    return;
+  }
+  // ...
+}, []);
+```
+
+#### Ошибка: "ResizeObserver loop limit exceeded"
+**Решение:** Это предупреждение, можно игнорировать
+
+#### Частицы не видны
+**Решение 1:** Увеличьте opacity
+```typescript
+// В ParticlesBackground.tsx, строка ~60
+ctx.fillStyle = `rgba(16, 185, 129, ${particle.opacity * 2})`; // Увеличили в 2 раза
+```
+
+**Решение 2:** Увеличьте размер частиц
+```typescript
+// В ParticlesBackground.tsx, строка ~40
+size: Math.random() * 4 + 2, // Было: * 2 + 1
+```
+
+**Решение 3:** Увеличьте количество
+```typescript
+// В ParticlesBackground.tsx, строка ~35
+const particleCount = Math.min(200, ...); // Было: 100
+```
+
+### Проверка рендеринга:
+
+Добавьте console.log в ParticlesBackground:
+
+```typescript
+useEffect(() => {
+  console.log('ParticlesBackground mounted!');
+  const canvas = canvasRef.current;
+  if (!canvas) {
+    console.error('Canvas not found!');
+    return;
+  }
+  console.log('Canvas found:', canvas.width, 'x', canvas.height);
+  console.log('Particles count:', particlesRef.current.length);
+  // ...
+}, []);
+```
+
+### Проверка в браузере:
+
+1. Откройте DevTools (F12)
+2. Elements tab
+3. Найдите `<canvas>` элемент
+4. Проверьте стили:
+   - `position: absolute`
+   - `inset: 0`
+   - `opacity: 0.4`
+   - `z-index` не перекрыт
+
+### Временное решение (для теста):
+
+Сделайте частицы очень заметными:
+
+```typescript
+// В ParticlesBackground.tsx
+// Строка ~60 - увеличьте opacity
+ctx.fillStyle = `rgba(16, 185, 129, 1)`; // Полная непрозрачность
+
+// Строка ~40 - увеличьте размер
+size: Math.random() * 10 + 5, // Большие частицы
+
+// Строка ~35 - больше частиц
+const particleCount = 200;
+```
+
+### Проверка карты серверов:
+
+Если карта не работает:
+
+1. Откройте консоль (F12)
+2. Проверьте ошибки в ServerMap
+3. Убедитесь, что hover работает
+
+**Типичная проблема:** Tooltips не показываются
+```typescript
+// Проверьте z-index в ServerMap.tsx
+// Tooltip должен иметь z-10
+className="... z-10 ..."
+```
+
+### Перезапуск с чистого листа:
+
+```bash
+# Остановите Docker
+wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose down"
+
+# Удалите volumes
+wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose down -v"
+
+# Пересоберите
+wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose up --build"
+```
+
+### Проверка портов:
+
+Текущий порт может быть 8080 вместо 5173:
+- Попробуйте http://localhost:8080
+- Или http://localhost:5173
+
+### Логи Docker:
+
+```bash
+# Смотрите логи в реальном времени
+wsl bash -c "cd gekon-speed-boost-3ba17197-main && docker compose logs -f"
+```
+
+### Если ничего не помогает:
+
+1. Откройте http://localhost:8080 (или 5173)
+2. Нажмите F12
+3. Скопируйте все ошибки из Console
+4. Проверьте Network tab - все ли файлы загружаются
+
+---
+
+## Быстрый тест частиц:
+
+Добавьте в консоль браузера:
+
+```javascript
+// Проверка Canvas API
+const canvas = document.querySelector('canvas');
+if (canvas) {
+  console.log('Canvas found!', canvas.width, canvas.height);
+  const ctx = canvas.getContext('2d');
+  ctx.fillStyle = 'red';
+  ctx.fillRect(100, 100, 200, 200); // Красный квадрат для теста
+} else {
+  console.error('Canvas NOT found!');
+}
+```
+
+Если увидите красный квадрат - Canvas работает, проблема в коде частиц.
+Если нет - Canvas не рендерится.
+
+---
+
+**Текущий статус:**
+- ✅ Docker запущен
+- ✅ Vite работает
+- ❓ Частицы - нужна проверка
+- ❓ Карта - нужна проверка
+
+**Порт:** http://localhost:8080 или http://localhost:5173