chore: update docs

Author: ilyar

.vscode/settings.json

@@ -95,5 +95,8 @@
   // Git settings
   "git.enableSmartCommit": false,
   "git.confirmSync": false,
-  "git.autofetch": true
+  "git.autofetch": true,
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
+  }
 }

README.md

@@ -13,8 +13,44 @@ The application will run on `http://localhost:3000`
 
 ## Build Commands
 
-```bash 
+```bash
 npm test        # Run test suite
 npm run build   # Create production build
 npm run release # Deploy to GitHub Pages
 ```
+
+## Relay Symbiotic
+
+```mermaid
+graph TB
+    subgraph "🎮 Client Layer"
+        Player[👤 Player]
+        GameUI[🎯 Game Interface<br/>Craft • Battle • Trade]
+    end
+
+    subgraph "⚡ Off-Chain Layer (Gasless)"
+        API[📡 Game API<br/>HTTP/WebSocket]
+        Validators[🔗 Validator Network<br/>Symbiotic Consensus]
+    end
+
+    subgraph "⛓️ On-Chain Layer (Settlement)"
+        Contracts[📜 Smart Contracts<br/>GameManager + MANA Token]
+    end
+
+    Player -->|"Play Game"| GameUI
+    GameUI -.->|"🆓 NO GAS FEES"| API
+    API -->|"Validate & Batch"| Validators
+    Validators -->|"Consensus + Proof"| Contracts
+
+    Contracts -.->|"State Updates"| Validators
+    Validators -.->|"Real-time"| API
+    API -.->|"Live Updates"| GameUI
+
+    style Player fill:#ff9999
+    style GameUI fill:#ffcc99
+    style API fill:#99ccff
+    style Validators fill:#99ff99
+    style Contracts fill:#cc99ff
+```
+
+See more [elemgame relay symbiotic](https://github.com/elemgame/elemgame-relay-symbiotic)

business-plan-presentation.html

@@ -199,7 +199,7 @@
     <div class="container">
         <div class="header">
             <h1>🧪 Elemental Arena - Interactive UX/UI Test</h1>
-            <p>Комплексное тестирование пользовательского интерфейса</p>
+            <p>Comprehensive User Interface Testing</p>
         </div>
 
         <div class="test-controls">

interactive_test.html

@@ -1172,7 +1172,7 @@
       data-aos="fade-right"
       data-aos-delay="300"
     >
-      Войти через соцсети
+      Login via Social Media
     </button>
 
     <!-- Social Media Icons -->
@@ -1557,4 +1557,3 @@
     </script>
   </body>
 </html>
-АЗДЕЛИВ ИХПЛА

public/start.html

@@ -94,8 +94,8 @@ const App: React.FC = () => {
     name: string;
     emoji: string;
   } | null>(null);
-  const [musicEnabled, setMusicEnabled] = useState(false); // Начинаем с выключенной
-  const [userInteracted, setUserInteracted] = useState(false); // Флаг пользовательского взаимодействия
+  const [musicEnabled, setMusicEnabled] = useState(false); // Start with music disabled
+  const [userInteracted, setUserInteracted] = useState(false); // User interaction flag
 
   const [rulesPageOpen, setRulesPageOpen] = useState(false);
   const [musicVolume, setMusicVolume] = useState(0.2);

src/App.tsx

@@ -13,7 +13,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
   const [currentTrack, setCurrentTrack] = useState(0);
   const [isLoaded, setIsLoaded] = useState(false);
 
-  // Список фэнтези треков (мемоизированный для оптимизации)
+  // List of fantasy tracks (memoized for optimization)
   const tracks = useMemo(
     () => [`${process.env.PUBLIC_URL}/audio/forest.ogg`],
     []
@@ -29,15 +29,15 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
       });
 
       audioRef.current.addEventListener('ended', () => {
-        // Переключаемся на следующий трек
+        // Switch to next track
         setCurrentTrack(prev => {
           const nextTrack = (prev + 1) % tracks.length;
           return nextTrack >= 0 && nextTrack < tracks.length ? nextTrack : 0;
         });
       });
 
       audioRef.current.addEventListener('error', _e => {
-        // Пробуем следующий трек при ошибке
+        // Try next track on error
         setCurrentTrack(prev => {
           const nextTrack = (prev + 1) % tracks.length;
           return nextTrack >= 0 && nextTrack < tracks.length ? nextTrack : 0;
@@ -68,27 +68,27 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
     }
   }, [currentTrack, tracks]);
 
-  // Обновляем громкость при изменении volume
+  // Update volume when volume prop changes
   useEffect(() => {
     if (audioRef.current) {
-      audioRef.current.volume = Math.max(0, Math.min(1, volume)); // Ограничиваем значения от 0 до 1
+      audioRef.current.volume = Math.max(0, Math.min(1, volume)); // Limit values from 0 to 1
     }
   }, [volume]);
 
-  // Управляем воспроизведением
+  // Control playback
   useEffect(() => {
     if (audioRef.current && isLoaded) {
       if (isPlaying) {
         audioRef.current.play().catch(_error => {
-          // Ошибка воспроизведения - игнорируем
+          // Playback error - ignore
         });
       } else {
         audioRef.current.pause();
       }
     }
   }, [isPlaying, isLoaded]);
 
-  return null; // Этот компонент не рендерит ничего видимого
+  return null; // This component doesn't render anything visible
 };
 
 export default AudioPlayer;

src/components/AudioPlayer.tsx

@@ -656,8 +656,8 @@ const BattleComponent: React.FC<BattleComponentProps> = ({
               aria-label="Fight without elemental protection"
             >
               <div className='no-elemental-icon'>⚔️</div>
-              <div className='no-elemental-text'>Без элементаля</div>
-              <div className='no-elemental-subtext'>Нет защиты</div>
+              <div className='no-elemental-text'>Without Elemental</div>
+              <div className='no-elemental-subtext'>No Protection</div>
             </button>
 
             {ownedElementals.map((elemental, index) => {
@@ -830,16 +830,16 @@ const BattleComponent: React.FC<BattleComponentProps> = ({
               aria-label="Fight without elemental protection"
             >
               <div className='no-elemental-icon'>⚔️</div>
-              <div className='no-elemental-text'>Без элементаля</div>
-              <div className='no-elemental-subtext'>Нет защиты</div>
+              <div className='no-elemental-text'>Without Elemental</div>
+              <div className='no-elemental-subtext'>No Protection</div>
             </button>
           </div>
         )}
 
         {ownedElementals.length === 0 && (
           <div className='no-elementals-info' role='alert' aria-live='polite'>
             <p style={{ textAlign: 'center', color: 'var(--text-muted)', fontSize: 'var(--font-size-sm)', marginTop: '1rem' }}>
-              💡 У вас нет {ELEMENTS[selectedElement].name} элементалей. Сражайтесь без защиты или попробуйте другой элемент!
+              💡 You don't have any {ELEMENTS[selectedElement].name} elementals. Fight without protection or try another element!
             </p>
             <button
               className='secondary-btn'

src/components/BattleComponent.tsx

@@ -11,11 +11,11 @@ const LoadingTransition: React.FC<LoadingTransitionProps> = ({
   const [currentTip, setCurrentTip] = useState(0);
 
   const tips = [
-    '🔥 Выбирайте элементы стратегически!',
-    '💎 Собирайте редких элементалей!',
-    '⚡ Изучайте слабости противников!',
-    '🎯 Развивайте своих элементалей!',
-    '💰 Управляйте маной мудро!',
+    '🔥 Choose elements strategically!',
+    '💎 Collect rare elementals!',
+    '⚡ Study opponent weaknesses!',
+    '🎯 Develop your elementals!',
+    '💰 Manage mana wisely!',
   ];
 
   useEffect(() => {
@@ -72,8 +72,8 @@ const LoadingTransition: React.FC<LoadingTransitionProps> = ({
 
       {/* Loading text */}
       <div className='loading-text'>
-        <h2>Загрузка игры...</h2>
-        <div className='loading-subtitle'>Готовьтесь к эпическим битвам!</div>
+        <h2>Loading game...</h2>
+        <div className='loading-subtitle'>Prepare for epic battles!</div>
       </div>
 
       {/* Progress bar */}

src/components/LoadingTransition.tsx

@@ -270,7 +270,7 @@ const StartPage: React.FC<StartPageProps> = ({ onStartGame }) => {
       delay: 0.3,
     });
 
-    (button as HTMLElement).textContent = 'Запуск...';
+    (button as HTMLElement).textContent = 'Starting...';
     button.classList.add('start-loading-pulse');
 
     // Create particle burst effect
@@ -378,7 +378,7 @@ const StartPage: React.FC<StartPageProps> = ({ onStartGame }) => {
         data-aos='fade-right'
         data-aos-delay='300'
       >
-        Войти через соцсети
+        Login via Social Media
       </button>
 
       {/* Social Media Icons */}