Update app.py

app.py

@@ -83,17 +83,49 @@ def download_db_from_hf():
                         json.dump({}, f)
             except Exception as e:
                 print(f"Ошибка при скачивании файла {repo_path}: {e}")
+
     except Exception as e:
         print(f"Ошибка при скачивании файлов с Hugging Face Hub: {e}")
 
 def periodic_backup():
     while True:
         upload_db_to_hf()
-        time.sleep(300)
+        time.sleep(15)
 
 rooms = load_json(ROOMS_DB)
 users = load_json(USERS_DB)
-games_data = {}
+games_data = load_json(GAMES_DB, default={
+    "crocodile": {
+        "name": "Крокодил",
+        "description": "Один игрок показывает слово жестами.",
+        "min_players": 2,
+        "max_players": 10,
+        "state": {}
+    },
+    "alias": {
+        "name": "Alias",
+        "description": "Один игрок объясняет слово.",
+        "min_players": 2,
+        "max_players": 10,
+        "state": {}
+    },
+     "mafia": {
+        "name": "Мафия",
+        "description": "Мафия против мирных жителей.",
+        "min_players": 4,
+        "max_players": 10,
+        "state": {}
+    },
+    "durak": {
+        "name": "Дурак",
+        "description": "Карточная игра.",
+        "min_players": 2,
+        "max_players": 6,
+        "state": {}
+    }
+})
+save_json(GAMES_DB, games_data)
+
 
 def generate_token():
     return ''.join(random.choices(string.ascii_letters + string.digits, k=15))
@@ -258,15 +290,7 @@ def dashboard():
         action = request.form.get('action')
         if action == 'create':
             token = generate_token()
-            rooms[token] = {
-                'users': [session['username']],
-                'guests': [],
-                'max_users': 10,
-                'admin': session['username'],
-                'youtube_url': None,
-                'youtube_state': {'isPlaying': False, 'currentTime': 0, 'last_sync_time': time.time()},
-                'players': {}
-            }
+            rooms[token] = {'users': [session['username']], 'max_users': 10, 'admin': session['username'], 'current_game': None, 'guests': []}
             users[session['username']]['rooms'].append(token)
             save_json(ROOMS_DB, rooms)
             save_json(USERS_DB, users)
@@ -395,70 +419,31 @@ def dashboard():
 
 @app.route('/logout', methods=['POST'])
 def logout():
-    username = session.get('username')
-    if username and username in users:
-        rooms_to_check = list(users[username].get('rooms', []))
-        for room_token in rooms_to_check:
-            if room_token in rooms:
-                if username in rooms[room_token].get('users', []):
-                    rooms[room_token]['users'].remove(username)
-                if username in rooms[room_token].get('players', {}):
-                    del rooms[room_token]['players'][username]
-
-                if not rooms[room_token]['users'] and not rooms[room_token]['guests']:
-                    del rooms[room_token]
-                    socketio.close_room(room_token)
-                elif rooms[room_token].get('admin') == username:
-                    if rooms[room_token]['users']:
-                        rooms[room_token]['admin'] = rooms[room_token]['users'][0]
-                    elif rooms[room_token]['guests']:
-                        # This case is tricky, guest cannot be admin. Maybe delete room.
-                        del rooms[room_token]
-                        socketio.close_room(room_token)
-                    else:
-                        del rooms[room_token]
-                        socketio.close_room(room_token)
-
-                socketio.emit('user_left', {'username': username}, room=room_token)
-                save_json(ROOMS_DB, rooms)
-
-        users[username]['rooms'] = []
-        save_json(USERS_DB, users)
     session.pop('username', None)
     return redirect(url_for('index'))
 
 
-
 @app.route('/room/<token>')
 def room(token):
     if 'username' not in session and 'guest_id' not in session:
-        is_guest_link = True
-    else:
-        is_guest_link = False
+        return redirect(url_for('index'))
 
     if token not in rooms:
         return redirect(url_for('dashboard'))
 
-    is_admin = False
-    username = None
-    is_guest = False
-
-    if 'username' in session and session['username'] in rooms[token].get('users', []):
-        username = session['username']
-        is_admin = rooms[token]['admin'] == username
+    is_admin = rooms[token]['admin'] == session.get('username')
+    
+    if 'username' in session:
+      username = session['username']
+      is_guest = False
     elif 'guest_id' in session:
         username = session['guest_id']
         is_guest = True
         if username not in rooms[token]['guests']:
-             if len(rooms[token]['users']) + len(rooms[token]['guests']) < rooms[token]['max_users']:
-                rooms[token]['guests'].append(username)
-                save_json(ROOMS_DB, rooms)
-             else:
-                return "Комната переполнена", 403
-    elif is_guest_link:
-        return redirect(url_for('guest_login', token=token))
+            rooms[token]['guests'].append(username)
+            save_json(ROOMS_DB, rooms)
     else:
-        return redirect(url_for('index'))
+        return redirect(url_for('guest_login', token=token))
 
     return render_template_string('''
 <!DOCTYPE html>
@@ -468,640 +453,995 @@ def room(token):
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <title>Метавселенная - Комната {{ token }}</title>
     <style>
-        body { margin: 0; overflow: hidden; background-color: #000; }
-        #world { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
-        #ui-container {
-            position: fixed;
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            background-color: #111;
+            color: #fff;
+        }
+        canvas {
+            display: block;
+        }
+        #blocker {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.7);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            font-size: 24px;
+            cursor: pointer;
+        }
+        #instructions {
+            width: 50%;
+            background: rgba(20,20,20,0.8);
+            padding: 20px;
+            border-radius: 10px;
+        }
+        .video-chat-overlay {
+            position: absolute;
             top: 10px;
-            left: 10px;
-            color: white;
-            font-family: sans-serif;
-            z-index: 100;
+            right: 10px;
+            width: 250px;
+            background: rgba(0,0,0,0.5);
+            border-radius: 8px;
+            padding: 5px;
             display: flex;
             flex-direction: column;
-            gap: 10px;
+            gap: 5px;
+            max-height: 90vh;
+            overflow-y: auto;
         }
-        #ui-container button, #ui-container input {
-            padding: 8px 12px;
-            background-color: rgba(0,0,0,0.5);
-            color: white;
-            border: 1px solid white;
+        .video-container {
+            position: relative;
+        }
+        video {
+            width: 100%;
             border-radius: 5px;
-            cursor: pointer;
         }
-        #joystick-container {
-            position: fixed;
-            bottom: 20px;
-            left: 20px;
-            width: 150px;
-            height: 150px;
-            z-index: 100;
-            display: none;
+        .user-indicator {
+            position: absolute;
+            bottom: 5px;
+            left: 5px;
+            background: rgba(0,0,0,0.6);
+            color: white;
+            padding: 2px 5px;
+            border-radius: 3px;
+            font-size: 12px;
         }
-        #youtube-container {
-            position: fixed;
+        #crosshair {
+            position: absolute;
             top: 50%;
             left: 50%;
+            width: 10px;
+            height: 10px;
+            border: 1px solid white;
+            border-radius: 50%;
             transform: translate(-50%, -50%);
-            width: 80vw;
-            max-width: 800px;
-            height: 45vw;
-            max-height: 450px;
-            background-color: #000;
-            border: 2px solid #fff;
-            border-radius: 10px;
-            z-index: 200;
-            display: none;
-            flex-direction: column;
         }
-        #youtube-container #youtube-player { width: 100%; height: 100%; }
-        #youtube-container .close-btn {
+        .hotspot-prompt {
             position: absolute;
-            top: -30px;
-            right: 0;
-            background: white;
-            color: black;
-            border: none;
-            border-radius: 50%;
-            width: 25px;
-            height: 25px;
-            cursor: pointer;
-            font-weight: bold;
+            bottom: 20%;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0,0,0,0.7);
+            padding: 10px 20px;
+            border-radius: 5px;
+            font-size: 16px;
+            display: none;
         }
-        .touch-surface {
-            position: fixed;
+        .modal-overlay {
+            position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            z-index: 99;
+            background: rgba(0,0,0,0.8);
             display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
         }
-        .info-popup {
-            position: fixed;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            background-color: rgba(0,0,0,0.7);
-            color: white;
-            padding: 15px;
+        .modal-content {
+            background: #222;
+            padding: 20px;
+            border-radius: 10px;
+            max-width: 90%;
+            max-height: 90%;
+            overflow-y: auto;
+            position: relative;
+        }
+        .modal-close {
+            position: absolute;
+            top: 10px;
+            right: 15px;
+            font-size: 24px;
+            cursor: pointer;
+        }
+        #youtube-player-container {
+            width: 80vw;
+            height: 45vw;
+            max-width: 1280px;
+            max-height: 720px;
+        }
+        #game-display {
+            padding: 20px;
+            background-color: #333;
             border-radius: 10px;
-            z-index: 150;
-            display: none;
             text-align: center;
+            width: 80vw;
+            max-width: 600px;
+        }
+        .game-input, .game-button {
+            padding: 10px;
+            margin: 5px;
+            border-radius: 5px;
+            border: 1px solid #555;
+            background: #444;
+            color: #fff;
+        }
+        #mobile-controls {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 40%;
+            display: none;
+            z-index: 10;
+        }
+        #joystick-zone {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            width: 120px;
+            height: 120px;
+            background: rgba(255,255,255,0.2);
+            border-radius: 50%;
+        }
+        #joystick-thumb {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            background: rgba(255,255,255,0.4);
+            border-radius: 50%;
+            top: 30px;
+            left: 30px;
+        }
+        #look-zone {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            width: 50%;
+            height: 100%;
+        }
+        .leave-button {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            padding: 10px 15px;
+            background: #f44336;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            z-index: 20;
         }
-        .info-popup.show { display: block; }
     </style>
 </head>
 <body>
-    <div id="world"></div>
-
-    <div id="ui-container">
-        <button id="leave-button">Покинуть комнату</button>
-        <button id="copy-link-button">Копировать ссылку</button>
-        {% if is_admin %}
-            <div style="display: flex; gap: 5px;">
-                <input type="text" id="youtube-url-input" placeholder="Ссылка YouTube">
-                <button id="set-youtube-url">Загрузить</button>
-            </div>
-        {% endif %}
+    <div id="blocker">
+        <div id="instructions">
+            <p style="font-size: 36px;">Нажмите, чтобы войти в метавселенную</p>
+            <p>Движение: W, A, S, D<br/>Осмотр: Мышь<br/>Взаимодействие: E</p>
+            <p>На мобильных устройствах используйте джойстик и правую часть экрана</p>
+        </div>
     </div>
     
-    <div id="joystick-container"></div>
-    <div class="touch-surface"></div>
+    <div class="video-chat-overlay" id="video-grid"></div>
+    <div id="crosshair">+</div>
+    <div class="hotspot-prompt" id="hotspot-prompt">Нажмите [E] для взаимодействия</div>
+    
+    <div class="modal-overlay" id="youtube-modal">
+        <div class="modal-content">
+            <span class="modal-close" id="youtube-close">×</span>
+            <div id="youtube-player-container"></div>
+        </div>
+    </div>
 
-    <div id="youtube-container">
-        <button class="close-btn" onclick="hideYoutubePlayer()">X</button>
-        <div id="youtube-player"></div>
+    <div class="modal-overlay" id="info-modal">
+        <div class="modal-content">
+            <span class="modal-close" id="info-close">×</span>
+            <p id="info-text"></p>
+        </div>
     </div>
     
-    <div id="info-popup">
-        <p>Подойдите к экрану, чтобы посмотреть видео</p>
+    <div class="modal-overlay" id="game-modal">
+        <div class="modal-content">
+            <span class="modal-close" id="game-close">×</span>
+            <div id="game-display">
+                <h2></h2>
+                <p id="game-description"></p>
+                <div id="game-content"></div>
+            </div>
+        </div>
+    </div>
+
+    <div id="mobile-controls">
+        <div id="joystick-zone">
+            <div id="joystick-thumb"></div>
+        </div>
+        <div id="look-zone"></div>
     </div>
 
+    <button class="leave-button" onclick="leaveRoom()">Покинуть комнату</button>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js"></script>
-    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
+    <script src="https://www.youtube.com/iframe_api"></script>
     <script type="importmap">
     {
         "imports": {
-            "three": "https://unpkg.com/three@0.157.0/build/three.module.js",
-            "three/addons/": "https://unpkg.com/three@0.157.0/examples/jsm/"
+            "three": "https://unpkg.com/three@0.165.0/build/three.module.js",
+            "three/addons/": "https://unpkg.com/three@0.165.0/examples/jsm/"
         }
     }
     </script>
-    <script src="https://cdn.jsdelivr.net/npm/nipplejs@0.10.1/dist/nipplejs.min.js"></script>
-    <script src="https://www.youtube.com/iframe_api"></script>
-
     <script type="module">
         import * as THREE from 'three';
+        import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
 
         const socket = io();
         const token = '{{ token }}';
         const username = '{{ username }}';
         const is_guest = {{ is_guest|tojson }};
         const isAdmin = {{ is_admin|tojson }};
-
-        let scene, camera, renderer, audioListener;
-        let player, playerVelocity = new THREE.Vector3();
-        let controls = { forward: false, backward: false, left: false, right: false };
-        let peers = {};
-        const clock = new THREE.Clock();
+        
+        let camera, scene, renderer, controls;
+        const objects = [];
+        let raycaster;
+
+        let moveForward = false;
+        let moveBackward = false;
+        let moveLeft = false;
+        let moveRight = false;
+        let canJump = false;
+
+        let prevTime = performance.now();
+        const velocity = new THREE.Vector3();
+        const direction = new THREE.Vector3();
+
+        const players = {};
+        let localStream;
+        const peers = {};
         const iceConfig = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
         
+        const hotspots = [
+            { pos: new THREE.Vector3(5, 1.5, -10), type: 'youtube', data: 'dQw4w9WgXcQ', name: 'Секретное видео' },
+            { pos: new THREE.Vector3(-8, 1.5, -8), type: 'info', data: 'Добро пожаловать в нашу метавселенную! Исследуйте мир и общайтесь с друзьями.', name: 'Приветствие' },
+            { pos: new THREE.Vector3(0, 1.5, 10), type: 'game', data: 'crocodile', name: 'Играть в Крокодила' }
+        ];
+        let currentHotspot = null;
         let youtubePlayer;
-        let youtubeHotspot, youtubeScreen;
-        let isYoutubePlayerReady = false;
-        let isYoutubeVisible = false;
+        
+        const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+
+        init();
+        animate();
 
         function init() {
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.y = 1.6;
+
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x87ceeb);
-            scene.fog = new THREE.Fog(0x87ceeb, 0, 100);
+            scene.fog = new THREE.Fog(0x87ceeb, 0, 75);
 
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            
-            audioListener = new THREE.AudioListener();
-            camera.add(audioListener);
+            const light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 0.9);
+            light.position.set(0.5, 1, 0.75);
+            scene.add(light);
+
+            const dirLight = new THREE.DirectionalLight(0xffffff, 0.7);
+            dirLight.position.set(-1, 1.75, 1);
+            dirLight.position.multiplyScalar(30);
+            scene.add(dirLight);
+
+            raycaster = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3(0, -1, 0), 0, 10);
+
+            const mapSize = 20;
+            const floorGeometry = new THREE.PlaneGeometry(mapSize*2, mapSize*2, 100, 100);
+            const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x4a7d2c });
+            const floor = new THREE.Mesh(floorGeometry, floorMaterial);
+            floor.rotation.x = -Math.PI / 2;
+            scene.add(floor);
             
+            const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
+            const mapLayout = [
+                "####################",
+                "#                  #",
+                "#  ####      ####  #",
+                "#  #  #      #  #  #",
+                "#  ####      ####  #",
+                "#                  #",
+                "#      ######      #",
+                "#      #    #      #",
+                "#      #    #      #",
+                "#      ######      #",
+                "#                  #",
+                "#                  #",
+                "#  ####      ####  #",
+                "#  #  #      #  #  #",
+                "#  #  #      #  #  #",
+                "#  ####      ####  #",
+                "#                  #",
+                "#                  #",
+                "#                  #",
+                "####################",
+            ];
+
+            for(let z=0; z<mapLayout.length; z++) {
+                for(let x=0; x<mapLayout[z].length; x++) {
+                    if (mapLayout[z][x] === '#') {
+                        const wallMaterial = new THREE.MeshStandardMaterial({ color: 0x888888 });
+                        const wall = new THREE.Mesh(boxGeometry, wallMaterial);
+                        wall.position.set(x - mapSize/2 + 0.5, 0.5, z - mapSize/2 + 0.5);
+                        scene.add(wall);
+                        objects.push(wall);
+                        const wallTop = new THREE.Mesh(boxGeometry, wallMaterial);
+                        wallTop.position.set(x - mapSize/2 + 0.5, 1.5, z - mapSize/2 + 0.5);
+                        scene.add(wallTop);
+                        objects.push(wallTop);
+                    }
+                }
+            }
+
+            hotspots.forEach(hotspot => {
+                const hotspotGeometry = new THREE.CylinderGeometry(0.5, 0.5, 0.1, 32);
+                const hotspotMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, transparent: true, opacity: 0.7 });
+                const hotspotMesh = new THREE.Mesh(hotspotGeometry, hotspotMaterial);
+                hotspotMesh.position.copy(hotspot.pos);
+                scene.add(hotspotMesh);
+                hotspot.mesh = hotspotMesh;
+            });
+
             renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.setPixelRatio(window.devicePixelRatio);
-            renderer.shadowMap.enabled = true;
-            document.getElementById('world').appendChild(renderer.domElement);
-
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
-            scene.add(ambientLight);
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.body.appendChild(renderer.domElement);
 
-            const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
-            dirLight.position.set(50, 50, 50);
-            dirLight.castShadow = true;
-            dirLight.shadow.mapSize.width = 2048;
-            dirLight.shadow.mapSize.height = 2048;
-            scene.add(dirLight);
+            if (isMobile) {
+                initMobileControls();
+            } else {
+                initPointerLock();
+            }
 
-            const ground = new THREE.Mesh(
-                new THREE.BoxGeometry(200, 1, 200),
-                new THREE.MeshLambertMaterial({ color: 0x4d9c4b })
-            );
-            ground.receiveShadow = true;
-            ground.position.y = -0.5;
-            scene.add(ground);
-            
-            youtubeHotspot = new THREE.Object3D();
-            youtubeHotspot.position.set(0, 0, -20);
-            scene.add(youtubeHotspot);
-
-            const screenBack = new THREE.Mesh(
-                new THREE.BoxGeometry(16.2, 9.2, 0.5),
-                new THREE.MeshLambertMaterial({ color: 0x333333 })
-            );
-            screenBack.position.y = 5.5;
-            youtubeHotspot.add(screenBack);
-
-            youtubeScreen = new THREE.Mesh(
-                new THREE.PlaneGeometry(16, 9),
-                new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.DoubleSide })
-            );
-            youtubeScreen.position.y = 5.5;
-            youtubeScreen.position.z = 0.26;
-            youtubeHotspot.add(youtubeScreen);
-            
-            createPlayer();
-            
-            initControls();
-            
-            animate();
-        }
-        
-        function createPlayer() {
-            const head = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshLambertMaterial({ color: 0xffdbac }));
-            head.position.y = 1.5;
-            head.castShadow = true;
-            
-            const body = new THREE.Mesh(new THREE.BoxGeometry(1, 1.5, 0.5), new THREE.MeshLambertMaterial({ color: 0x0000ff }));
-            body.position.y = 0.25;
-            body.castShadow = true;
+            document.addEventListener('keydown', onKeyDown);
+            document.addEventListener('keyup', onKeyUp);
+            window.addEventListener('resize', onWindowResize);
             
-            player = new THREE.Group();
-            player.add(head);
-            player.add(body);
-            player.position.set(0, 0.5, 5);
-            scene.add(player);
-            camera.position.set(0, 5, 10);
-            camera.lookAt(player.position);
+            document.getElementById('hotspot-prompt').addEventListener('click', interactWithHotspot);
+            document.getElementById('youtube-close').addEventListener('click', closeYoutubeModal);
+            document.getElementById('info-close').addEventListener('click', closeInfoModal);
+            document.getElementById('game-close').addEventListener('click', closeGameModal);
         }
         
-        function initControls() {
-            document.addEventListener('keydown', (e) => {
-                switch(e.code) {
-                    case 'KeyW': controls.forward = true; break;
-                    case 'KeyS': controls.backward = true; break;
-                    case 'KeyA': controls.left = true; break;
-                    case 'KeyD': controls.right = true; break;
-                }
+        function initPointerLock() {
+            const blocker = document.getElementById('blocker');
+            const instructions = document.getElementById('instructions');
+            controls = new PointerLockControls(camera, document.body);
+
+            instructions.addEventListener('click', function () {
+                controls.lock();
             });
-            document.addEventListener('keyup', (e) => {
-                 switch(e.code) {
-                    case 'KeyW': controls.forward = false; break;
-                    case 'KeyS': controls.backward = false; break;
-                    case 'KeyA': controls.left = false; break;
-                    case 'KeyD': controls.right = false; break;
-                }
+
+            controls.addEventListener('lock', function () {
+                instructions.style.display = 'none';
+                blocker.style.display = 'none';
             });
 
-            let isPointerLocked = false;
-            document.addEventListener('pointerlockchange', () => {
-                isPointerLocked = document.pointerLockElement === renderer.domElement;
+            controls.addEventListener('unlock', function () {
+                blocker.style.display = 'flex';
+                instructions.style.display = '';
             });
-            renderer.domElement.addEventListener('click', () => {
-                if (!isPointerLocked) renderer.domElement.requestPointerLock();
+            scene.add(controls.getObject());
+        }
+
+        function initMobileControls() {
+            document.getElementById('blocker').addEventListener('click', () => {
+                 document.getElementById('blocker').style.display = 'none';
             });
-            document.addEventListener('mousemove', (e) => {
-                if(isPointerLocked) {
-                    player.rotation.y -= e.movementX * 0.002;
-                    camera.rotation.x -= e.movementY * 0.002;
-                    camera.rotation.x = Math.max(-Math.PI/2, Math.min(Math.PI/2, camera.rotation.x));
+            document.getElementById('mobile-controls').style.display = 'block';
+
+            const joystickZone = document.getElementById('joystick-zone');
+            const joystickThumb = document.getElementById('joystick-thumb');
+            const lookZone = document.getElementById('look-zone');
+
+            let joystickActive = false;
+            let joystickStart = { x: 0, y: 0 };
+            const joystickCenter = { x: joystickZone.offsetLeft + 60, y: joystickZone.offsetTop + 60 };
+            
+            joystickZone.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                joystickActive = true;
+                joystickStart.x = e.touches[0].clientX;
+                joystickStart.y = e.touches[0].clientY;
+            }, { passive: false });
+
+            joystickZone.addEventListener('touchmove', (e) => {
+                e.preventDefault();
+                if (!joystickActive) return;
+                let dx = e.touches[0].clientX - joystickStart.x;
+                let dy = e.touches[0].clientY - joystickStart.y;
+                let dist = Math.sqrt(dx * dx + dy * dy);
+                let angle = Math.atan2(dy, dx);
+                
+                if (dist > 30) {
+                    dx = Math.cos(angle) * 30;
+                    dy = Math.sin(angle) * 30;
                 }
+                
+                joystickThumb.style.transform = `translate(${dx}px, ${dy}px)`;
+
+                moveForward = dy > 10;
+                moveBackward = dy < -10;
+                moveLeft = dx < -10;
+                moveRight = dx > 10;
+            }, { passive: false });
+
+            joystickZone.addEventListener('touchend', (e) => {
+                joystickActive = false;
+                joystickThumb.style.transform = 'translate(0,0)';
+                moveForward = moveBackward = moveLeft = moveRight = false;
             });
             
-            if ('ontouchstart' in window) {
-                document.getElementById('joystick-container').style.display = 'block';
-                const touchSurface = document.querySelector('.touch-surface');
-                touchSurface.style.display = 'block';
+            let lookActive = false;
+            let lookStart = { x: 0, y: 0 };
+
+            lookZone.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                lookActive = true;
+                lookStart.x = e.touches[0].clientX;
+                lookStart.y = e.touches[0].clientY;
+            }, { passive: false });
+            
+            lookZone.addEventListener('touchmove', (e) => {
+                e.preventDefault();
+                if (!lookActive) return;
+                let dx = e.touches[0].clientX - lookStart.x;
+                let dy = e.touches[0].clientY - lookStart.y;
                 
-                const joystick = nipplejs.create({
-                    zone: document.getElementById('joystick-container'),
-                    mode: 'static',
-                    position: { left: '85px', bottom: '85px' },
-                    color: 'white'
-                });
+                camera.rotation.y -= dx * 0.002;
+                camera.rotation.x -= dy * 0.002;
+                camera.rotation.x = Math.max(-Math.PI/2, Math.min(Math.PI/2, camera.rotation.x));
 
-                joystick.on('move', (evt, data) => {
-                    const angle = data.angle.radian;
-                    controls.forward = Math.sin(angle) > 0.1;
-                    controls.backward = Math.sin(angle) < -0.1;
-                    controls.left = Math.cos(angle) < -0.1;
-                    controls.right = Math.cos(angle) > 0.1;
-                });
-                
-                joystick.on('end', () => {
-                    controls.forward = false;
-                    controls.backward = false;
-                    controls.left = false;
-                    controls.right = false;
-                });
+                lookStart.x = e.touches[0].clientX;
+                lookStart.y = e.touches[0].clientY;
 
-                let touchStartX, touchStartY;
-                touchSurface.addEventListener('touchstart', (e) => {
-                    if (e.touches.length === 1) {
-                         touchStartX = e.touches[0].clientX;
-                         touchStartY = e.touches[0].clientY;
-                    }
-                }, {passive: false});
-
-                touchSurface.addEventListener('touchmove', (e) => {
-                    if (e.touches.length === 1) {
-                        e.preventDefault();
-                        const dx = e.touches[0].clientX - touchStartX;
-                        const dy = e.touches[0].clientY - touchStartY;
-                        
-                        player.rotation.y -= dx * 0.005;
-                        camera.rotation.x -= dy * 0.005;
-                        camera.rotation.x = Math.max(-Math.PI/2, Math.min(Math.PI/2, camera.rotation.x));
-
-                        touchStartX = e.touches[0].clientX;
-                        touchStartY = e.touches[0].clientY;
-                    }
-                }, {passive: false});
-            }
+            }, { passive: false });
+
+            lookZone.addEventListener('touchend', () => {
+                lookActive = false;
+            });
         }
         
-        function updatePlayer(delta) {
-            const speed = 10.0;
-            const direction = new THREE.Vector3();
-
-            if (controls.forward) direction.z = -1;
-            if (controls.backward) direction.z = 1;
-            if (controls.left) direction.x = -1;
-            if (controls.right) direction.x = 1;
-
-            if (direction.length() > 0) {
-                direction.normalize().applyQuaternion(player.quaternion);
-                playerVelocity.add(direction.multiplyScalar(speed * delta));
-            }
-            
-            player.position.add(playerVelocity);
-            playerVelocity.multiplyScalar(1 - 8.0 * delta);
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
 
-            const cameraOffset = new THREE.Vector3(0, 4, 8);
-            cameraOffset.applyQuaternion(player.quaternion);
-            camera.position.lerp(player.position.clone().add(cameraOffset), 0.1);
-            
-            const lookAtTarget = player.position.clone().add(new THREE.Vector3(0, 2, 0));
-            camera.lookAt(lookAtTarget);
+        function onKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowUp':
+                case 'KeyW':
+                    moveForward = true;
+                    break;
+                case 'ArrowLeft':
+                case 'KeyA':
+                    moveLeft = true;
+                    break;
+                case 'ArrowDown':
+                case 'KeyS':
+                    moveBackward = true;
+                    break;
+                case 'ArrowRight':
+                case 'KeyD':
+                    moveRight = true;
+                    break;
+                case 'Space':
+                    if (canJump === true) velocity.y += 350;
+                    canJump = false;
+                    break;
+                case 'KeyE':
+                    interactWithHotspot();
+                    break;
+            }
+        }
 
-            checkHotspots();
+        function onKeyUp(event) {
+            switch (event.code) {
+                case 'ArrowUp':
+                case 'KeyW':
+                    moveForward = false;
+                    break;
+                case 'ArrowLeft':
+                case 'KeyA':
+                    moveLeft = false;
+                    break;
+                case 'ArrowDown':
+                case 'KeyS':
+                    moveBackward = false;
+                    break;
+                case 'ArrowRight':
+                case 'KeyD':
+                    moveRight = false;
+                    break;
+            }
         }
         
-        function checkHotspots() {
-            const distance = player.position.distanceTo(youtubeHotspot.position);
-            const popup = document.getElementById('info-popup');
-            if (distance < 10) {
-                if (!isYoutubeVisible) {
-                    popup.classList.add('show');
+        function animate() {
+            requestAnimationFrame(animate);
+            const time = performance.now();
+            
+            let isMoving = false;
+            if (isMobile || controls.isLocked === true) {
+                const delta = (time - prevTime) / 1000;
+                
+                velocity.x -= velocity.x * 10.0 * delta;
+                velocity.z -= velocity.z * 10.0 * delta;
+                velocity.y -= 9.8 * 100.0 * delta;
+
+                direction.z = Number(moveForward) - Number(moveBackward);
+                direction.x = Number(moveRight) - Number(moveLeft);
+                direction.normalize();
+
+                if (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta;
+                if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta;
+
+                if (isMobile) {
+                    camera.translateX(velocity.x * delta);
+                    camera.translateZ(velocity.z * delta);
+                } else {
+                    controls.moveRight(-velocity.x * delta);
+                    controls.moveForward(-velocity.z * delta);
                 }
-                if (distance < 5 && !isYoutubeVisible) {
-                    showYoutubePlayer();
+                
+                if (Math.abs(velocity.x) > 0.1 || Math.abs(velocity.z) > 0.1) {
+                    isMoving = true;
                 }
-            } else {
-                popup.classList.remove('show');
-                if (isYoutubeVisible) {
-                    hideYoutubePlayer();
+
+                if (isMobile) {
+                    camera.position.y += (velocity.y * delta);
+                    if (camera.position.y < 1.6) {
+                        velocity.y = 0;
+                        camera.position.y = 1.6;
+                        canJump = true;
+                    }
+                } else {
+                    controls.getObject().position.y += (velocity.y * delta);
+                    if (controls.getObject().position.y < 1.6) {
+                        velocity.y = 0;
+                        controls.getObject().position.y = 1.6;
+                        canJump = true;
+                    }
                 }
-            }
-        }
 
-        function animate() {
-            requestAnimationFrame(animate);
-            const delta = clock.getDelta();
-            
-            if (player) {
-                updatePlayer(delta);
-                socket.emit('player_moved', {
-                    token,
-                    position: player.position,
-                    rotation: player.rotation,
-                });
+                checkHotspots();
             }
+
+            prevTime = time;
             
-            for (const id in peers) {
-                const peer = peers[id];
-                if (peer.mesh && peer.targetPosition && peer.targetRotation) {
-                    peer.mesh.position.lerp(peer.targetPosition, 0.1);
-                    peer.mesh.quaternion.slerp(new THREE.Quaternion().setFromEuler(peer.targetRotation), 0.1);
+            for (const id in players) {
+                if (players[id].mesh && players[id].target) {
+                    players[id].mesh.position.lerp(players[id].target.pos, 0.1);
+                    players[id].mesh.quaternion.slerp(players[id].target.quat, 0.1);
                 }
             }
 
             renderer.render(scene, camera);
         }
-
-        window.addEventListener('resize', () => {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        });
         
-        function addPeer(id) {
-            if(peers[id] || id === username) return;
-            
-            const head = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshLambertMaterial({ color: 0xffdbac }));
-            head.position.y = 1.5;
-            head.castShadow = true;
-            
-            const body = new THREE.Mesh(new THREE.BoxGeometry(1, 1.5, 0.5), new THREE.MeshLambertMaterial({ color: 0xff0000 }));
-            body.position.y = 0.25;
-            body.castShadow = true;
-            
-            const peerMesh = new THREE.Group();
-            peerMesh.add(head);
-            peerMesh.add(body);
-            scene.add(peerMesh);
-
-            const nameTexture = new THREE.CanvasTexture(createTextCanvas(id));
-            const nameSprite = new THREE.Sprite(new THREE.SpriteMaterial({ map: nameTexture, transparent: true }));
-            nameSprite.position.y = 3.0;
-            nameSprite.scale.set(3, 1.5, 1);
-            peerMesh.add(nameSprite);
-
-            const videoPlane = new THREE.Mesh(
-                new THREE.PlaneGeometry(2, 1.125),
-                new THREE.MeshBasicMaterial({ color: 0x111111, side: THREE.DoubleSide })
-            );
-            videoPlane.position.y = 4.2;
-            peerMesh.add(videoPlane);
-            
-            peers[id] = { 
-                mesh: peerMesh,
-                videoPlane: videoPlane,
-                targetPosition: new THREE.Vector3(),
-                targetRotation: new THREE.Euler(),
-                pc: new RTCPeerConnection(iceConfig)
-            };
-            
-            const peerConnection = peers[id].pc;
-            
-            navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
-                 stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));
-            }).catch(e => console.error("getUserMedia error", e));
-
-            peerConnection.ontrack = (event) => {
-                const stream = event.streams[0];
-                if (stream.getVideoTracks().length > 0) {
-                    const videoEl = document.createElement('video');
-                    videoEl.srcObject = stream;
-                    videoEl.muted = true;
-                    videoEl.play();
-                    const videoTexture = new THREE.VideoTexture(videoEl);
-                    peers[id].videoPlane.material.map = videoTexture;
-                    peers[id].videoPlane.material.needsUpdate = true;
-                }
-                if (stream.getAudioTracks().length > 0) {
-                    const peerAudio = new THREE.PositionalAudio(audioListener);
-                    peerAudio.setMediaStreamSource(stream);
-                    peerAudio.setRefDistance(1);
-                    peerAudio.setRolloffFactor(1);
-                    peers[id].mesh.add(peerAudio);
-                    peerAudio.play();
-                }
-            };
-            
-            peerConnection.onicecandidate = event => {
-                if (event.candidate) {
-                    socket.emit('signal', { to: id, from: username, token, signal: { type: 'candidate', candidate: event.candidate }});
+        function checkHotspots() {
+            let playerPos = isMobile ? camera.position : controls.getObject().position;
+            let closestHotspot = null;
+            let minDistance = 2;
+
+            hotspots.forEach(hotspot => {
+                const distance = playerPos.distanceTo(hotspot.pos);
+                if (distance < minDistance) {
+                    closestHotspot = hotspot;
+                    minDistance = distance;
                 }
-            };
+            });
+
+            const prompt = document.getElementById('hotspot-prompt');
+            if (closestHotspot) {
+                prompt.style.display = 'block';
+                prompt.textContent = `Нажмите [E] чтобы: ${closestHotspot.name}`;
+                currentHotspot = closestHotspot;
+            } else {
+                prompt.style.display = 'none';
+                currentHotspot = null;
+            }
         }
 
-        function removePeer(id) {
-            if (peers[id]) {
-                if(peers[id].pc) peers[id].pc.close();
-                if(peers[id].mesh) scene.remove(peers[id].mesh);
-                delete peers[id];
+        function interactWithHotspot() {
+            if (!currentHotspot) return;
+            if(!isMobile) controls.unlock();
+
+            switch(currentHotspot.type) {
+                case 'youtube':
+                    openYoutubeModal(currentHotspot.data);
+                    break;
+                case 'info':
+                    openInfoModal(currentHotspot.data);
+                    break;
+                case 'game':
+                    if (isAdmin) {
+                       openGameModal(currentHotspot.data);
+                    } else {
+                       openInfoModal('Только администратор может начать игру.');
+                    }
+                    break;
+            }
+        }
+
+        function openYoutubeModal(videoId) {
+            document.getElementById('youtube-modal').style.display = 'flex';
+            if (youtubePlayer) {
+                youtubePlayer.loadVideoById(videoId);
+            } else {
+                 youtubePlayer = new YT.Player('youtube-player-container', {
+                    height: '100%',
+                    width: '100%',
+                    videoId: videoId,
+                    events: { 'onReady': (e) => e.target.playVideo() }
+                });
+            }
+        }
+
+        function closeYoutubeModal() {
+            document.getElementById('youtube-modal').style.display = 'none';
+            if (youtubePlayer && typeof youtubePlayer.stopVideo === 'function') {
+                youtubePlayer.stopVideo();
             }
         }
         
-        function createTextCanvas(text) {
-            const canvas = document.createElement('canvas');
-            const context = canvas.getContext('2d');
-            canvas.width = 256;
-            canvas.height = 128;
-            context.fillStyle = 'rgba(0, 0, 0, 0.7)';
-            context.fillRect(0, 20, canvas.width, 88);
-            context.fillStyle = 'white';
-            context.font = 'bold 32px sans-serif';
-            context.textAlign = 'center';
-            context.textBaseline = 'middle';
-            context.fillText(text, canvas.width / 2, canvas.height / 2);
-            return canvas;
-        }
-
-        document.getElementById('leave-button').onclick = () => {
-            window.location.href = is_guest ? `/guest_login/${token}` : '/dashboard';
-        };
-
-        document.getElementById('copy-link-button').onclick = () => {
-            navigator.clipboard.writeText(window.location.href).then(() => alert('Ссылка скопирована!'));
-        };
-
-        if(isAdmin) {
-            document.getElementById('set-youtube-url').onclick = () => {
-                const url = document.getElementById('youtube-url-input').value;
-                if (url) {
-                    socket.emit('set_youtube_url', { token, url });
-                }
-            };
+        function openInfoModal(text) {
+            document.getElementById('info-text').textContent = text;
+            document.getElementById('info-modal').style.display = 'flex';
+        }
+
+        function closeInfoModal() {
+            document.getElementById('info-modal').style.display = 'none';
         }
         
-        window.onYouTubeIframeAPIReady = () => {
-            youtubePlayer = new YT.Player('youtube-player', {
-                height: '100%',
-                width: '100%',
-                playerVars: { 'playsinline': 1 },
-                events: {
-                    'onReady': () => { isYoutubePlayerReady = true; socket.emit('request_youtube_state', { token }); },
-                    'onStateChange': onPlayerStateChange
-                }
-            });
-        };
+        function openGameModal(gameId) {
+            document.getElementById('game-modal').style.display = 'flex';
+            startGame(gameId);
+        }
+
+        function closeGameModal() {
+            document.getElementById('game-modal').style.display = 'none';
+        }
         
-        let isHandlingSync = false;
-        function onPlayerStateChange(event) {
-            if (isHandlingSync) { isHandlingSync = false; return; }
-            let action = null;
-            if (event.data == YT.PlayerState.PLAYING) action = 'play';
-            else if (event.data == YT.PlayerState.PAUSED) action = 'pause';
-            if (action) {
-                socket.emit('youtube_state_change', {
-                    token, action, time: event.target.getCurrentTime()
+        setInterval(() => {
+            if (isMobile || (controls && controls.isLocked)) {
+                let playerPos = isMobile ? camera.position : controls.getObject().position;
+                let playerRot = isMobile ? camera.quaternion : controls.getObject().quaternion;
+                socket.emit('player_move', { 
+                    token: token, 
+                    username: username,
+                    pos: playerPos.toArray(),
+                    quat: playerRot.toArray()
                 });
             }
+        }, 100);
+
+        function addPlayer(id) {
+            if (players[id] || id === username) return;
+            const playerGroup = new THREE.Group();
+
+            const bodyMaterial = new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff });
+            const body = new THREE.Mesh(new THREE.BoxGeometry(0.8, 1.2, 0.5), bodyMaterial);
+            body.position.y = 0.6;
+            
+            const headMaterial = new THREE.MeshStandardMaterial({ color: 0xffdbac });
+            const head = new THREE.Mesh(new THREE.BoxGeometry(0.4, 0.4, 0.4), headMaterial);
+            head.position.y = 1.4;
+
+            const nameCanvas = document.createElement('canvas');
+            const context = nameCanvas.getContext('2d');
+            context.font = "Bold 40px Arial";
+            context.fillStyle = "rgba(255,255,255,0.95)";
+            context.fillText(id, 0, 40);
+            const nameTexture = new THREE.CanvasTexture(nameCanvas);
+            const nameSpriteMaterial = new THREE.SpriteMaterial({ map: nameTexture });
+            const nameSprite = new THREE.Sprite(nameSpriteMaterial);
+            nameSprite.position.y = 2.0;
+            nameSprite.scale.set(2, 1, 1);
+            
+            playerGroup.add(body);
+            playerGroup.add(head);
+            playerGroup.add(nameSprite);
+
+            scene.add(playerGroup);
+            players[id] = { mesh: playerGroup, target: { pos: new THREE.Vector3(), quat: new THREE.Quaternion() } };
         }
-        
-        function showYoutubePlayer() {
-            if (!isYoutubePlayerReady) return;
-            document.getElementById('youtube-container').style.display = 'flex';
-            isYoutubeVisible = true;
-            if (document.pointerLockElement) document.exitPointerLock();
+
+        function removePlayer(id) {
+            if (players[id]) {
+                scene.remove(players[id].mesh);
+                delete players[id];
+            }
         }
         
-        window.hideYoutubePlayer = () => {
-            document.getElementById('youtube-container').style.display = 'none';
-            isYoutubeVisible = false;
-            if (youtubePlayer && typeof youtubePlayer.pauseVideo === 'function') {
-                youtubePlayer.pauseVideo();
-            }
-        };
-
         socket.on('connect', () => {
-            socket.emit('join', { token, username, is_guest });
+            console.log('Connected to server!');
+            if (username || is_guest) {
+                socket.emit('join', { token, username, is_guest });
+            }
         });
 
-        socket.on('init_room', (data) => {
-            for (const id in data.players) {
-                if (id !== username) {
-                    addPeer(id);
-                    peers[id].targetPosition = new THREE.Vector3().fromArray(data.players[id].position);
-                    peers[id].targetRotation = new THREE.Euler().fromArray(data.players[id].rotation);
-                }
+        socket.on('player_moved', (data) => {
+            if (data.username === username) return;
+            if (!players[data.username]) {
+                addPlayer(data.username);
+            }
+            if(players[data.username]) {
+                players[data.username].target.pos.fromArray(data.pos);
+                players[data.username].target.quat.fromArray(data.quat);
             }
         });
 
-        socket.on('user_joined', async (data) => {
-            if (data.username === username) return;
-            addPeer(data.username);
-            const peerConnection = peers[data.username].pc;
-            const offer = await peerConnection.createOffer();
-            await peerConnection.setLocalDescription(offer);
-            socket.emit('signal', { to: data.username, from: username, token, signal: peerConnection.localDescription });
+        socket.on('init_users', (data) => {
+            const allUsers = [...data.users, ...data.guests];
+            allUsers.forEach(user => addPlayer(user));
         });
         
-        socket.on('user_left', (data) => {
-            removePeer(data.username);
+        socket.on('user_joined', (data) => {
+            addPlayer(data.username);
         });
 
-        socket.on('player_moved', (data) => {
-            if(data.id !== username && peers[data.id]) {
-                peers[data.id].targetPosition.set(data.position.x, data.position.y, data.position.z);
-                peers[data.id].targetRotation.set(data.rotation._x, data.rotation._y, data.rotation._z, data.rotation._order);
-            }
+        socket.on('user_left', (data) => {
+            removePlayer(data.username);
         });
 
-        socket.on('signal', async (data) => {
+        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
+            .then(stream => {
+                localStream = stream;
+                addVideoStream(stream, username, true);
+            })
+            .catch(err => {
+                console.error("Ошибка доступа к медиаустройствам:", err);
+            });
+            
+        function addVideoStream(stream, user, isLocal = false) {
+            const videoGrid = document.getElementById('video-grid');
+            const videoContainer = document.createElement('div');
+            videoContainer.classList.add('video-container');
+
+            const video = document.createElement('video');
+            video.srcObject = stream;
+            video.dataset.user = user;
+            video.setAttribute('playsinline', '');
+            video.setAttribute('autoplay', '');
+            if (isLocal) video.muted = true;
+            
+            const nameTag = document.createElement('div');
+            nameTag.classList.add('user-indicator');
+            nameTag.textContent = user;
+            
+            videoContainer.appendChild(video);
+            videoContainer.appendChild(nameTag);
+            videoGrid.appendChild(videoContainer);
+            video.play();
+        }
+
+        socket.on('signal', data => {
             if (data.from === username) return;
-            if (!peers[data.from]) addPeer(data.from);
-
-            const peerConnection = peers[data.from].pc;
-            if (data.signal.type === 'offer') {
-                await peerConnection.setRemoteDescription(new RTCSessionDescription(data.signal));
-                const answer = await peerConnection.createAnswer();
-                await peerConnection.setLocalDescription(answer);
-                socket.emit('signal', { to: data.from, from: username, token, signal: peerConnection.localDescription });
-            } else if (data.signal.type === 'answer') {
-                await peerConnection.setRemoteDescription(new RTCSessionDescription(data.signal));
-            } else if (data.signal.type === 'candidate') {
-                if (peerConnection.remoteDescription) {
-                    await peerConnection.addIceCandidate(new RTCIceCandidate(data.signal.candidate));
-                }
-            }
+            handleSignal(data.from, data.signal);
         });
         
-        socket.on('set_youtube_url', (data) => {
-            if (isYoutubePlayerReady && data.videoId) {
-                isHandlingSync = true;
-                youtubePlayer.cueVideoById(data.videoId);
-                const videoMaterial = new THREE.MeshBasicMaterial({ map: new THREE.VideoTexture(youtubePlayer.getIframe()) });
-                youtubeScreen.material = videoMaterial;
+        function handleSignal(from, signal) {
+            if (!peers[from]) {
+                createPeerConnection(from, false);
             }
-        });
+            peers[from].signal(signal);
+        }
+
+        function createPeerConnection(remoteUser, initiator) {
+            const peer = new SimplePeer({
+                initiator: initiator,
+                trickle: false,
+                stream: localStream,
+                config: iceConfig
+            });
+
+            peer.on('signal', signal => {
+                socket.emit('signal', { to: remoteUser, from: username, token, signal });
+            });
+
+            peer.on('stream', stream => {
+                addVideoStream(stream, remoteUser);
+            });
+
+            peer.on('close', () => {
+                const videoElement = document.querySelector(`video[data-user="${remoteUser}"]`);
+                if (videoElement) videoElement.parentElement.remove();
+                delete peers[remoteUser];
+            });
+            
+            peers[remoteUser] = peer;
+        }
         
-        socket.on('youtube_state_change', (data) => {
-            if (isYoutubePlayerReady) {
-                isHandlingSync = true;
-                if (Math.abs(youtubePlayer.getCurrentTime() - data.time) > 1.5) {
-                    youtubePlayer.seekTo(data.time, true);
-                }
-                if (data.action === 'play') youtubePlayer.playVideo();
-                else if (data.action === 'pause') youtubePlayer.pauseVideo();
+        function leaveRoom() {
+            socket.emit('leave', { token, username, is_guest });
+            window.location.href = is_guest ? '/guest_login/' + token : '/dashboard';
+        }
+        window.leaveRoom = leaveRoom;
+
+
+        // Game Logic Integration
+        function startGame(gameId) {
+            console.log('Starting game:', gameId);
+            document.getElementById('game-display').style.display = 'block';
+            document.getElementById('game-content').innerHTML = '';
+            socket.emit('start_game', { token, game_id: gameId });
+        }
+        window.startGame = startGame;
+
+        socket.on('game_started', (data) => {
+            const gameId = data.game_id;
+            const gameInfo = {{ games_data|tojson }}[gameId];
+            const gameDisplay = document.getElementById('game-display');
+            gameDisplay.style.display = 'block';
+            document.getElementById('game-description').innerText = gameInfo.description;
+            gameDisplay.querySelector('h2').innerText = gameInfo.name;
+
+            const gameContent = document.getElementById('game-content');
+            gameContent.innerHTML = '';
+
+            if (gameId === 'crocodile' || gameId === 'alias'){
+                initWordGame(gameId, gameContent);
+            } else if(gameId === 'mafia'){
+                initMafia(gameContent, gameInfo);
             }
         });
-        
-        socket.on('youtube_initial_state', (data) => {
-            if (isYoutubePlayerReady && data.videoId) {
-                isHandlingSync = true;
-                youtubePlayer.cueVideoById(data.videoId, data.time);
-                const iframe = youtubePlayer.getIframe();
-                const videoTexture = new THREE.VideoTexture(iframe);
-                const videoMaterial = new THREE.MeshBasicMaterial({ map: videoTexture });
-                youtubeScreen.material = videoMaterial;
-
-                setTimeout(() => {
-                    isHandlingSync = true;
-                    if (data.isPlaying) youtubePlayer.playVideo();
-                    else youtubePlayer.pauseVideo();
-                }, 1000);
+
+        function initWordGame(gameId, gameContent) {
+            let elements = `
+                <input type="text" id="${gameId}-word-input" placeholder="Введите слово (только админ)" class="game-input">
+                <button id="start-turn-button" class="game-button">Начать ход</button>
+                <input type="text" id="${gameId}-guess-input" placeholder="Ваша догадка" class="game-input">
+                <button id="${gameId}-guess-button" class="game-button">Угадать</button>
+                <div id="${gameId}-result"></div>
+                <div id="${gameId}-timer"></div>
+            `;
+            gameContent.innerHTML = elements;
+
+            const wordInput = document.getElementById(`${gameId}-word-input`);
+            const startTurnButton = document.getElementById('start-turn-button');
+            const guessInput = document.getElementById(`${gameId}-guess-input`);
+            const guessButton = document.getElementById(`${gameId}-guess-button`);
+            
+            wordInput.style.display = isAdmin ? 'block' : 'none';
+            startTurnButton.style.display = isAdmin ? 'block' : 'none';
+
+            startTurnButton.onclick = () => {
+                const word = wordInput.value.trim();
+                if (word) {
+                    socket.emit('set_game_state', {token, game_id: gameId, state: { word: word, presenter: null, guesses: [], timer: 60, isRunning: true }});
+                    wordInput.value = '';
+                }
+            };
+
+            guessButton.onclick = () => {
+                const guess = guessInput.value.trim();
+                if (guess) {
+                    socket.emit('game_action', { token, game_id: gameId, action: 'guess', value: guess, user: username });
+                    guessInput.value = '';
+                }
+            };
+        }
+
+        function initMafia(gameContent, gameInfo) {
+             let elements = `
+                <button id="start-mafia-button" class="game-button">Начать игру (только админ)</button>
+                <div id="mafia-result"></div>
+                <input type="text" id="mafia-vote-input" placeholder="За кого голосуете?" class="game-input">
+                <button id="mafia-vote-button" class="game-button">Голосовать</button>
+            `;
+            gameContent.innerHTML = elements;
+            
+            const startButton = document.getElementById('start-mafia-button');
+            const voteInput = document.getElementById('mafia-vote-input');
+            const voteButton = document.getElementById('mafia-vote-button');
+            
+            startButton.style.display = isAdmin ? 'block' : 'none';
+            startButton.onclick = () => socket.emit('set_game_state', { token, game_id: 'mafia', state: { roles: {}, phase: 'night', votes: {}, isRunning: true, killed: null } });
+            
+            voteButton.onclick = () => {
+                const vote = voteInput.value.trim();
+                if (vote) {
+                    socket.emit('game_action', { token, game_id: 'mafia', action: 'vote', value: vote, user: username });
+                    voteInput.value = '';
+                }
+            };
+        }
+
+        socket.on('update_game_state', (data) => {
+            const gameId = data.game_id;
+            const gameState = data.state;
+
+            if (gameId === 'crocodile' || gameId === 'alias'){
+                updateWordGameState(gameId, gameState);
+            } else if (gameId === 'mafia') {
+                updateMafiaState(gameState);
             }
         });
-        
-        window.addEventListener('beforeunload', () => {
-            socket.emit('leave', { token, username, is_guest });
-        });
 
-        init();
+        function updateWordGameState(gameId, gameState) {
+            const resultDiv = document.getElementById(`${gameId}-result`);
+            const timerDiv = document.getElementById(`${gameId}-timer`);
+            const guessInput = document.getElementById(`${gameId}-guess-input`);
+            const guessButton = document.getElementById(`${gameId}-guess-button`);
+            if (!resultDiv) return;
+
+            resultDiv.innerHTML = '';
+            if(gameState.presenter) {
+                resultDiv.innerHTML += `<p>Ведущий: ${gameState.presenter}</p>`;
+            }
+            if (username === gameState.presenter) {
+                 resultDiv.innerHTML += `<p>Ваше слово: <strong>${gameState.word}</strong></p>`;
+            }
+            gameState.guesses.forEach(g => {
+                resultDiv.innerHTML += `<p>${g.user}: ${g.value} (${g.result})</p>`;
+            });
+            timerDiv.textContent = `Время: ${gameState.timer}`;
+            
+            const isGameOver = !gameState.isRunning || gameState.timer <= 0;
+            guessInput.disabled = isGameOver || username === gameState.presenter;
+            guessButton.disabled = isGameOver || username === gameState.presenter;
+            
+            if (isGameOver && gameState.word) {
+                resultDiv.innerHTML += `<p>Игра окончена! Загаданное слово было: <strong>${gameState.word}</strong></p>`;
+            }
+        }
 
+        function updateMafiaState(gameState) {
+            const resultDiv = document.getElementById('mafia-result');
+            const voteInput = document.getElementById('mafia-vote-input');
+            const voteButton = document.getElementById('mafia-vote-button');
+            if (!resultDiv) return;
+            
+            resultDiv.innerHTML = '';
+            if (gameState.roles && gameState.roles[username]) {
+                resultDiv.innerHTML += `<p>Ваша роль: ${gameState.roles[username]}</p>`;
+            }
+             resultDiv.innerHTML += `<p>Фаза: ${gameState.phase === 'day' ? 'День' : 'Ночь'}</p>`;
+            if (gameState.phase === 'day') {
+                if (gameState.killed) {
+                    resultDiv.innerHTML += `<p>Ночью был убит: ${gameState.killed}</p>`;
+                }
+                resultDiv.innerHTML += `<p>Идет голосование. Живые игроки: ${gameState.players.join(', ')}</p>`;
+                voteInput.disabled = false;
+                voteButton.disabled = false;
+            } else {
+                resultDiv.innerHTML += `<p>Мафия выбирает жертву. Мирные спят.</p>`;
+                voteInput.disabled = true;
+                voteButton.disabled = true;
+            }
+            if (gameState.winner) {
+                resultDiv.innerHTML += `<h2>Игра окончена! Победили: ${gameState.winner}</h2>`;
+            }
+        }
     </script>
 </body>
 </html>
-''', token=token, session=session, is_admin=is_admin, is_guest=is_guest, username=username)
+''', token=token, session=session, is_admin=is_admin, games_data=games_data, username=username, is_guest=is_guest)
+
 
 @app.route('/join_as_guest/<token>', methods=['GET'])
 def join_as_guest(token):
@@ -1111,7 +1451,7 @@ def join_as_guest(token):
     guest_id = 'Гость_' + ''.join(random.choices(string.digits, k=4))
     session['guest_id'] = guest_id
 
-    if 'username' in session:
+    if 'username' in session: 
         session.pop('username')
 
     return redirect(url_for('room', token=token))
@@ -1142,13 +1482,7 @@ def guest_login(token):
                 h1 { color: var(--primary-color); margin-bottom: 20px; }
                 p { margin-bottom: 20px; }
                 a { padding: 12px 25px; background-color: var(--primary-color); color: white; text-decoration: none; border-radius: 5px; font-size: 1.1rem; transition: background-color 0.3s ease; }
-                @media (prefers-color-scheme: dark) {
-                    :root {
-                        --background-color: #121212;
-                        --surface-color: #1e1e1e;
-                        --text-color: #ffffff;
-                    }
-                }
+                a:hover { background-color: #388E3C; }
             </style>
         </head>
         <body>
@@ -1156,127 +1490,239 @@ def guest_login(token):
                 <h1>Вход в комнату как Гость</h1>
                 <p>Вы можете войти в комнату <strong>{{ token }}</strong> как гость. Ваше имя будет автоматически сгенерировано.</p>
                 <a href="{{ url_for('join_as_guest', token=token) }}">Войти в комнату как гость</a>
+                 <p style="margin-top: 20px;"><a href="{{ url_for('index') }}">Или войти/зарегистрироваться</a></p>
             </div>
         </body>
         </html>
     ''', token=token)
 
+
+@socketio.on('connect')
+def handle_connect():
+    print(f"Client connected: {request.sid}")
+
+@socketio.on('disconnect')
+def handle_disconnect_custom():
+    print(f"Client disconnected: {request.sid}")
+
 @socketio.on('join')
 def handle_join(data):
     token = data['token']
     username = data['username']
-    is_guest = data.get('is_guest', False)
+    join_room(token)
+    
+    if token not in rooms:
+        return
 
-    if token in rooms:
-        join_room(token)
-        
-        initial_position = [random.uniform(-10, 10), 0.5, random.uniform(-10, 10)]
-        initial_rotation = [0, 0, 0, 'XYZ']
-        
-        rooms[token]['players'][username] = {
-            'position': initial_position,
-            'rotation': initial_rotation
-        }
+    all_users = rooms[token]['users'] + rooms[token]['guests']
+    emit('init_users', {'users': rooms[token]['users'], 'guests': rooms[token]['guests']}, to=request.sid)
 
-        if is_guest:
-            if username not in rooms[token]['guests']:
-                rooms[token]['guests'].append(username)
-        else:
-            if username not in rooms[token]['users']:
-              rooms[token]['users'].append(username)
-        
-        save_json(ROOMS_DB, rooms)
-        
-        emit('init_room', {'players': rooms[token]['players']}, to=request.sid)
-        emit('user_joined', {'username': username, 'state': rooms[token]['players'][username]}, room=token, include_self=False)
+    emit('user_joined', {
+        'username': username,
+        'users': rooms[token]['users'],
+        'guests': rooms[token]['guests']
+    }, room=token, include_self=False)
+    
+    if rooms[token]['current_game']:
+        game_id = rooms[token]['current_game']
+        emit('game_started', {'game_id': game_id}, to=request.sid)
+        if token in games_data.get(game_id, {}).get('state', {}):
+            emit('update_game_state', {'game_id': game_id, 'state': games_data[game_id]['state'][token]}, to=request.sid)
 
 @socketio.on('leave')
 def handle_leave(data):
     token = data['token']
     username = data['username']
     is_guest = data.get('is_guest', False)
+    leave_room(token)
 
     if token in rooms:
-        leave_room(token)
-
-        if username in rooms[token].get('players', {}):
-            del rooms[token]['players'][username]
+        if is_guest:
+            if username in rooms[token]['guests']:
+                rooms[token]['guests'].remove(username)
+        else:
+            if username in rooms[token]['users']:
+                rooms[token]['users'].remove(username)
         
-        if is_guest and username in rooms[token].get('guests', []):
-            rooms[token]['guests'].remove(username)
-        elif not is_guest and username in rooms[token].get('users', []):
-            rooms[token]['users'].remove(username)
-
         if not rooms[token]['users'] and not rooms[token]['guests']:
             del rooms[token]
         else:
-            if rooms[token].get('admin') == username and rooms[token]['users']:
-                rooms[token]['admin'] = rooms[token]['users'][0]
+            emit('user_left', {'username': username}, room=token)
         
         save_json(ROOMS_DB, rooms)
-        emit('user_left', {'username': username}, room=token)
 
-@socketio.on('player_moved')
-def handle_player_moved(data):
+@socketio.on('player_move')
+def handle_player_move(data):
     token = data['token']
-    username = session.get('username') or session.get('guest_id')
-    if token in rooms and username in rooms[token]['players']:
-        player_state = rooms[token]['players'][username]
-        player_state['position'] = [data['position']['x'], data['position']['y'], data['position']['z']]
-        player_state['rotation'] = [data['rotation']['_x'], data['rotation']['_y'], data['rotation']['_z'], data['rotation']['_order']]
-        
+    if token in rooms:
         emit('player_moved', {
-            'id': username, 
-            'position': data['position'], 
-            'rotation': data['rotation']
+            'username': data['username'],
+            'pos': data['pos'],
+            'quat': data['quat']
         }, room=token, include_self=False)
 
 @socketio.on('signal')
 def handle_signal(data):
-    emit('signal', data, room=data['token'], to=data['to'])
+    if data['token'] in rooms:
+        emit('signal', {
+            'from': data['from'],
+            'signal': data['signal']
+        }, room=data['to'])
 
-@socketio.on('set_youtube_url')
-def handle_set_youtube_url(data):
+
+@socketio.on('start_game')
+def handle_start_game(data):
     token = data['token']
-    url = data['url']
+    game_id = data['game_id']
     username = session.get('username')
 
     if token in rooms and rooms[token].get('admin') == username:
-        video_id = get_youtube_id(url)
-        if video_id:
-            rooms[token]['youtube_url'] = url
-            rooms[token]['youtube_state'] = {'isPlaying': False, 'currentTime': 0, 'last_sync_time': time.time()}
-            save_json(ROOMS_DB, rooms)
-            emit('set_youtube_url', {'videoId': video_id}, room=token)
+        all_users_in_room = rooms[token]['users'] + rooms[token]['guests']
+        min_p = games_data[game_id]['min_players']
+        max_p = games_data[game_id]['max_players']
+        
+        if not (min_p <= len(all_users_in_room) <= max_p):
+            return
 
-@socketio.on('youtube_state_change')
-def handle_youtube_state_change(data):
-    token = data['token']
-    if token in rooms:
-        state = rooms[token]['youtube_state']
-        state['isPlaying'] = (data['action'] == 'play')
-        state['currentTime'] = data['time']
-        state['last_sync_time'] = time.time()
+        rooms[token]['current_game'] = game_id
+        if game_id not in games_data: games_data[game_id] = {'state': {}}
+        elif 'state' not in games_data[game_id]: games_data[game_id]['state'] = {}
+        
+        games_data[game_id]['state'][token] = {}
         save_json(ROOMS_DB, rooms)
-        emit('youtube_state_change', data, room=token, include_self=False)
+        save_json(GAMES_DB, games_data)
+        emit('game_started', {'game_id': game_id}, room=token)
+
 
-@socketio.on('request_youtube_state')
-def handle_request_youtube_state(data):
+@socketio.on('set_game_state')
+def handle_set_game_state(data):
     token = data['token']
-    if token in rooms and rooms[token].get('youtube_url'):
-        state = rooms[token]['youtube_state']
-        video_id = get_youtube_id(rooms[token]['youtube_url'])
+    game_id = data['game_id']
+    state = data['state']
+    username = session.get('username')
+
+    if token in rooms and rooms[token].get('admin') == username:
+        if rooms[token]['current_game'] == game_id:
+            all_users = rooms[token]['users'] + rooms[token]['guests']
+            state['players'] = all_users
+            
+            if (game_id == 'crocodile' or game_id == 'alias') and 'presenter' not in state:
+                state['presenter'] = random.choice(all_users) if all_users else None
+            
+            if game_id == 'mafia' and not state.get('roles'):
+                state['roles'] = assign_mafia_roles(all_users)
+
+            games_data[game_id]['state'][token] = state
+            save_json(GAMES_DB, games_data)
+            emit('update_game_state', {'game_id': game_id, 'state': state}, room=token)
+
+            if state.get('isRunning') and (game_id == 'crocodile' or game_id == 'alias'):
+                start_timer(token, game_id)
+
+def assign_mafia_roles(users):
+    num_players = len(users)
+    num_mafia = 1 if num_players < 6 else 2
+    roles_list = ['mafia'] * num_mafia + ['civilian'] * (num_players - num_mafia)
+    random.shuffle(roles_list)
+    return {user: role for user, role in zip(users, roles_list)}
+
+@socketio.on('game_action')
+def handle_game_action(data):
+    token = data['token']
+    game_id = data['game_id']
+    action = data['action']
+    user = data['user']
+    value = data.get('value')
+
+    if token not in rooms or game_id != rooms[token].get('current_game'): return
+    current_state = games_data[game_id]['state'].get(token, {})
+    if not current_state.get('isRunning'): return
+
+    if game_id in ['crocodile', 'alias'] and action == 'guess':
+        if user == current_state.get('presenter'): return
+        result = "Угадано!" if value.lower() == current_state.get('word', '').lower() else "Не угадано"
+        current_state.setdefault('guesses', []).append({'user': user, 'value': value, 'result': result})
+        if result == "Угадано!": current_state['isRunning'] = False
+    
+    elif game_id == 'mafia' and action == 'vote':
+        if current_state['phase'] == 'day':
+            current_state.setdefault('votes', {})[user] = value
+            all_players = current_state.get('players', [])
+            if len(current_state['votes']) == len(all_players):
+                process_mafia_votes(current_state)
+
+    games_data[game_id]['state'][token] = current_state
+    save_json(GAMES_DB, games_data)
+    emit('update_game_state', {'game_id': game_id, 'state': current_state}, room=token)
+
+def process_mafia_votes(state):
+    votes = state.get('votes', {})
+    counts = {}
+    for vote in votes.values(): counts[vote] = counts.get(vote, 0) + 1
+    
+    max_votes = 0
+    voted_out = []
+    for player, num_votes in counts.items():
+        if num_votes > max_votes:
+            max_votes = num_votes
+            voted_out = [player]
+        elif num_votes == max_votes:
+            voted_out.append(player)
+            
+    if len(voted_out) == 1:
+        player_to_remove = voted_out[0]
+        state['players'].remove(player_to_remove)
+        state['killed'] = player_to_remove
         
-        elapsed = time.time() - state['last_sync_time']
-        estimated_time = state['currentTime'] + elapsed if state['isPlaying'] else state['currentTime']
+        remaining_mafia = sum(1 for p in state['players'] if state['roles'].get(p) == 'mafia')
+        remaining_civilians = len(state['players']) - remaining_mafia
         
-        emit('youtube_initial_state', {
-            'videoId': video_id,
-            'time': estimated_time,
-            'isPlaying': state['isPlaying']
-        }, to=request.sid)
+        if remaining_mafia == 0:
+            state['winner'] = 'Мирные'
+            state['isRunning'] = False
+        elif remaining_mafia >= remaining_civilians:
+            state['winner'] = 'Мафия'
+            state['isRunning'] = False
+            
+    state['phase'] = 'night'
+    state['votes'] = {}
+
+
+def start_timer(token, game_id):
+    def timer_loop():
+        with app.app_context():
+            while True:
+                state = games_data[game_id]['state'].get(token)
+                if not state or not state.get('isRunning') or state.get('timer', 0) <= 0:
+                    if state:
+                        state['isRunning'] = False
+                        games_data[game_id]['state'][token] = state
+                        save_json(GAMES_DB, games_data)
+                        socketio.emit('update_game_state', {'game_id': game_id, 'state': state}, room=token)
+                    break
+                
+                state['timer'] -= 1
+                games_data[game_id]['state'][token] = state
+                save_json(GAMES_DB, games_data)
+                socketio.emit('update_game_state', {'game_id': game_id, 'state': state}, room=token)
+                socketio.sleep(1)
+    socketio.start_background_task(timer_loop)
 
 if __name__ == '__main__':
+    if not os.path.exists(os.path.join(app.root_path, 'rooms.json')):
+        with open(os.path.join(app.root_path, 'rooms.json'), 'w') as f: json.dump({}, f)
+    if not os.path.exists(os.path.join(app.root_path, 'users.json')):
+        with open(os.path.join(app.root_path, 'users.json'), 'w') as f: json.dump({}, f)
+    if not os.path.exists(os.path.join(app.root_path, 'games.json')):
+        save_json(GAMES_DB, games_data)
+        
     backup_thread = threading.Thread(target=periodic_backup, daemon=True)
-    backup_thread.start()
-    socketio.run(app, host='0.0.0.0', port=7860, debug=False, allow_unsafe_werkzeug=True)
+    #backup_thread.start()
+    
+    # ВАЖНО: для работы WebRTC нужен HTTPS. Werkzeug создает самоподписанный сертификат.
+    # Вам нужно будет разрешить его в браузере (на странице "Дополнительно" -> "Перейти на сайт (небезопасно)").
+    # Для продакшена используйте полноценный веб-сервер (Nginx) с настоящими SSL-сертификатами.
+    try:
+        socketio.run(app, host='0.0.0.0', port=7860, debug=True, allow_unsafe_werkzeug=True, ssl_context='adhoc')
+    except TypeError:
+        socketio.run(app, host='0.0.0.0', port=7860, debug=True, allow_unsafe_werkzeug=True)