Update app.py

app.py

@@ -13,140 +13,76 @@ from huggingface_hub.utils import RepositoryNotFoundError
 from urllib.parse import urlparse, parse_qs
 
 app = Flask(__name__)
-app.config['SECRET_KEY'] = 'your-very-secret-key-here'
+app.config['SECRET_KEY'] = 'your-very-secret-key-here-for-metaverse'
 socketio = SocketIO(app, async_mode='threading')
 
 REPO_ID = "flpolprojects/Clients"
-HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
-HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
+HF_TOKEN = os.getenv("HF_TOKEN")
 
-ROOMS_DB = os.path.join(app.root_path, 'rooms.json')
-USERS_DB = os.path.join(app.root_path, 'users.json')
-GAMES_DB = os.path.join(app.root_path, 'games.json')
+DB_FILE = os.path.join(app.root_path, 'metaverse_db.json')
 
-def load_json(file_path, default={}):
+def load_db():
     try:
-        download_db_from_hf()
-        if os.path.exists(file_path):
-            with open(file_path, 'r', encoding='utf-8') as f:
-                return json.load(f)
-        return default
-    except (FileNotFoundError, json.JSONDecodeError) as e:
-        print(f"Ошибка загрузки JSON из {file_path}: {e}")
-        return default
+        if HF_TOKEN:
+            local_path = hf_hub_download(
+                repo_id=REPO_ID,
+                filename="metaverse_db.json",
+                repo_type="dataset",
+                token=HF_TOKEN,
+                local_dir=".",
+                local_dir_use_symlinks=False
+            )
+            print(f"База данных успешно скачана с Hugging Face Hub: {local_path}")
+    except RepositoryNotFoundError:
+        print("Репозиторий или файл не найден. Используется/создается локальная версия.")
     except Exception as e:
-        print(f"Непредвиденная ошибка при загрузке: {e}")
-        return default
+        print(f"Ошибка при скачивании с Hugging Face Hub: {e}. Используется/создается локальная версия.")
 
-def save_json(file_path, data):
     try:
-        with open(file_path, 'w', encoding='utf-8') as f:
-            json.dump(data, f, indent=4, ensure_ascii=False)
-        upload_db_to_hf()
-    except OSError as e:
-        print(f"Ошибка сохранения JSON в {file_path}: {e}")
-    except Exception as e:
-        print(f"Непредвиденная ошибка при сохранении: {e}")
+        with open(DB_FILE, 'r', encoding='utf-8') as f:
+            return json.load(f)
+    except (FileNotFoundError, json.JSONDecodeError):
+        return {'users': {}, 'rooms': {}}
 
-def upload_db_to_hf():
+def save_db(data):
     try:
-        api = HfApi()
-        for file_path, repo_path in [(ROOMS_DB, "rooms.json"), (USERS_DB, "users.json"), (GAMES_DB, "games.json")]:
-            if os.path.exists(file_path):
-                api.upload_file(
-                    path_or_fileobj=file_path,
-                    path_in_repo=repo_path,
-                    repo_id=REPO_ID,
-                    repo_type="dataset",
-                    token=HF_TOKEN_WRITE,
-                    commit_message=f"Backup: {repo_path} ({datetime.now().strftime('%Y-%m-%d %H:%M:%S')})"
-                )
-    except Exception as e:
-        print(f"Ошибка при загрузке файлов на Hugging Face Hub: {e}")
+        with open(DB_FILE, 'w', encoding='utf-8') as f:
+            json.dump(data, f, indent=4, ensure_ascii=False)
+    except OSError as e:
+        print(f"Ошибка сохранения JSON в {DB_FILE}: {e}")
+
+    if HF_TOKEN:
+        try:
+            api = HfApi()
+            api.upload_file(
+                path_or_fileobj=DB_FILE,
+                path_in_repo="metaverse_db.json",
+                repo_id=REPO_ID,
+                repo_type="dataset",
+                token=HF_TOKEN,
+                commit_message=f"Backup: metaverse_db.json ({datetime.now().strftime('%Y-%m-%d %H:%M:%S')})"
+            )
+            print(f"Файл {DB_FILE} успешно загружен на Hugging Face Hub.")
+        except Exception as e:
+            print(f"Ошибка при загрузке файла на Hugging Face Hub: {e}")
+
+db = load_db()
+if 'users' not in db: db['users'] = {}
+if 'rooms' not in db: db['rooms'] = {}
 
-def download_db_from_hf():
-    try:
-        api = HfApi()
-        for file_path, repo_path in [(ROOMS_DB, "rooms.json"), (USERS_DB, "users.json"), (GAMES_DB, "games.json")]:
-            try:
-                hf_hub_download(
-                    repo_id=REPO_ID,
-                    filename=repo_path,
-                    repo_type="dataset",
-                    token=HF_TOKEN_READ,
-                    local_dir=".",
-                    local_dir_use_symlinks=False
-                )
-            except RepositoryNotFoundError:
-                if not os.path.exists(file_path):
-                    with open(file_path, 'w') as f:
-                        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(15)
-
-rooms = load_json(ROOMS_DB)
-users = load_json(USERS_DB)
-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)
+        time.sleep(300)
+        print("Выполняется периодическое сохранение...")
+        save_db(db)
 
 def generate_token():
-    return ''.join(random.choices(string.ascii_letters + string.digits, k=15))
+    return ''.join(random.choices(string.ascii_letters + string.digits, k=16))
 
 def hash_password(password):
     return hashlib.sha256(password.encode('utf-8')).hexdigest()
 
-def get_youtube_id(url):
-    if not url:
-        return None
-    parsed_url = urlparse(url)
-    if parsed_url.hostname in ('www.youtube.com', 'youtube.com'):
-        if parsed_url.path == '/watch':
-            query = parse_qs(parsed_url.query)
-            return query.get('v', [None])[0]
-        elif parsed_url.path.startswith('/embed/'):
-            return parsed_url.path.split('/embed/')[1].split('?')[0]
-        elif parsed_url.path.startswith('/v/'):
-            return parsed_url.path.split('/v/')[1].split('?')[0]
-    elif parsed_url.hostname in ('youtu.be', 'www.youtu.be'):
-        return parsed_url.path[1:].split('?')[0]
-    return None
-
 @app.route('/', methods=['GET', 'POST'])
 def index():
     if 'username' in session:
@@ -158,15 +94,16 @@ def index():
         password = request.form.get('password')
 
         if action == 'register':
-            if username in users:
+            if username in db['users']:
                 return "Пользователь уже существует", 400
-            users[username] = {'password': hash_password(password), 'rooms': []}
-            save_json(USERS_DB, users)
+            db['users'][username] = {'password': hash_password(password)}
+            save_db(db)
             session['username'] = username
             return redirect(url_for('dashboard'))
 
         elif action == 'login':
-            if username in users and users[username]['password'] == hash_password(password):
+            user = db['users'].get(username)
+            if user and user['password'] == hash_password(password):
                 session['username'] = username
                 return redirect(url_for('dashboard'))
             return "Неверный логин или пароль", 401
@@ -177,25 +114,22 @@ def index():
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Room</title>
+    <title>Metaverse Login</title>
      <style>
         :root {
-            --primary-color: #6200ee;
-            --secondary-color: #3700b3;
-            --background-color: #ffffff;
-            --surface-color: #f5f5f5;
-            --text-color: #333333;
-            --error-color: #b00020;
+            --primary-color: #007bff;
+            --secondary-color: #0056b3;
+            --background-color: #1a1a1d;
+            --surface-color: #2c2c34;
+            --text-color: #f0f0f0;
             --font-family: 'Roboto', sans-serif;
             --border-radius: 12px;
-            --box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
         }
         body {
             font-family: var(--font-family);
             background-color: var(--background-color);
             color: var(--text-color);
             margin: 0;
-            padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -205,107 +139,88 @@ def index():
             background-color: var(--surface-color);
             padding: 2rem;
             border-radius: var(--border-radius);
-            box-shadow: var(--box-shadow);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
             width: 90%;
             max-width: 400px;
             text-align: center;
         }
         h1 {
-            font-size: 2rem;
+            font-size: 2.5rem;
             margin-bottom: 1.5rem;
             color: var(--primary-color);
+            text-shadow: 0 0 10px var(--primary-color);
         }
         input, button {
             display: block;
             width: 100%;
-            padding: 0.75rem;
-            margin-bottom: 1rem;
-            border: 1px solid #ccc;
+            padding: 0.85rem;
+            margin-bottom: 1.2rem;
+            border: 1px solid #444;
+            background-color: #333;
+            color: var(--text-color);
             border-radius: var(--border-radius);
             font-size: 1rem;
             box-sizing: border-box;
-            transition: border-color 0.3s ease;
+            transition: all 0.3s ease;
         }
         input:focus {
             outline: none;
             border-color: var(--primary-color);
+            box-shadow: 0 0 8px var(--primary-color);
         }
         button {
             background-color: var(--primary-color);
-            color: white;
             cursor: pointer;
             border: none;
             font-weight: 500;
-            transition: background-color 0.3s ease;
         }
         button:hover {
             background-color: var(--secondary-color);
-        }
-        button:active {
-            opacity: 0.8;
-        }
-        .error-message {
-            color: var(--error-color);
-            margin-top: 0.5rem;
-        }
-        @media (prefers-color-scheme: dark) {
-            :root {
-                --background-color: #121212;
-                --surface-color: #1e1e1e;
-                --text-color: #ffffff;
-            }
+            transform: translateY(-2px);
+            box-shadow: 0 2px 8px rgba(0,123,255,0.5);
         }
     </style>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 </head>
 <body>
     <div class="container">
-        <h1>Room</h1>
+        <h1>VOXELVERSE</h1>
         <form method="post">
             <input type="text" name="username" placeholder="Логин" required>
             <input type="password" name="password" placeholder="Пароль" required>
             <button type="submit" name="action" value="login">Войти</button>
-            <button type="submit" name="action" value="register">Зарегистрироваться</button>
+            <button type="submit" name="action" value="register">Регистрация</button>
         </form>
     </div>
 </body>
 </html>
 ''')
 
-
 @app.route('/dashboard', methods=['GET', 'POST'])
 def dashboard():
     if 'username' not in session:
         return redirect(url_for('index'))
 
-    user = users.get(session['username'])
-    if not user:
-        session.pop('username', None)
-        return redirect(url_for('index'))
-
     if request.method == 'POST':
         action = request.form.get('action')
         if action == 'create':
             token = generate_token()
-            rooms[token] = {
-                'players': {},
+            db['rooms'][token] = {
                 'admin': session['username'],
-                'current_game': None,
-                'youtube_url': None,
-                'youtube_state': {'isPlaying': False, 'currentTime': 0, 'last_sync_time': time.time()}
+                'players': {},
+                'youtube': {
+                    'url': '',
+                    'state': {'isPlaying': False, 'currentTime': 0, 'last_sync_time': time.time()}
+                },
+                'chat': []
             }
-            users[session['username']]['rooms'].append(token)
-            save_json(ROOMS_DB, rooms)
-            save_json(USERS_DB, users)
-            return redirect(url_for('room', token=token))
+            save_db(db)
+            return redirect(url_for('world', token=token))
         elif action == 'join':
             token = request.form.get('token')
-            if token in rooms:
-                if session['username'] not in [p['username'] for p in rooms[token]['players'].values()]:
-                  users[session['username']]['rooms'].append(token)
-                  save_json(USERS_DB, users)
-                return redirect(url_for('room', token=token))
-            return "Комната не найдена", 404
+            if token in db['rooms']:
+                return redirect(url_for('world', token=token))
+            return "Мир не найден", 404
 
     return render_template_string('''
 <!DOCTYPE html>
@@ -316,22 +231,21 @@ def dashboard():
     <title>Панель управления</title>
      <style>
         :root {
-            --primary-color: #6200ee;
-            --secondary-color: #3700b3;
-            --background-color: #ffffff;
-            --surface-color: #f5f5f5;
-            --text-color: #333333;
-            --accent-color: #03dac6;
+            --primary-color: #007bff;
+            --secondary-color: #0056b3;
+            --background-color: #1a1a1d;
+            --surface-color: #2c2c34;
+            --text-color: #f0f0f0;
+            --accent-color: #dc3545;
             --font-family: 'Roboto', sans-serif;
             --border-radius: 12px;
-            --box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
         }
         body {
             font-family: var(--font-family);
             background-color: var(--background-color);
             color: var(--text-color);
             margin: 0;
-            padding: 0;
+            padding: 2rem;
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -341,11 +255,10 @@ def dashboard():
             background-color: var(--surface-color);
             padding: 2rem;
             border-radius: var(--border-radius);
-            box-shadow: var(--box-shadow);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
             width: 90%;
-            max-width: 400px;
+            max-width: 500px;
             text-align: center;
-            margin-top: 2rem;
         }
         h1 {
             font-size: 2rem;
@@ -355,46 +268,36 @@ def dashboard():
         input, button {
             display: block;
             width: 100%;
-            padding: 0.75rem;
+            padding: 0.85rem;
             margin-bottom: 1rem;
-            border: 1px solid #ccc;
+            border: 1px solid #444;
+            background-color: #333;
+            color: var(--text-color);
             border-radius: var(--border-radius);
             font-size: 1rem;
             box-sizing: border-box;
-            transition: border-color 0.3s ease;
+            transition: all 0.3s ease;
         }
         input:focus {
             outline: none;
             border-color: var(--primary-color);
+            box-shadow: 0 0 8px var(--primary-color);
         }
         button {
             background-color: var(--primary-color);
-            color: white;
             cursor: pointer;
             border: none;
             font-weight: 500;
-            transition: background-color 0.3s ease;
         }
         button:hover {
             background-color: var(--secondary-color);
-        }
-        button:active {
-            opacity: 0.8;
+            transform: translateY(-2px);
         }
         .logout-button {
             background-color: var(--accent-color);
-            margin-top: 1rem;
-            transition: background-color 0.3s ease;
         }
         .logout-button:hover {
-            filter: brightness(0.9);
-        }
-        @media (prefers-color-scheme: dark) {
-            :root {
-                --background-color: #121212;
-                --surface-color: #1e1e1e;
-                --text-color: #ffffff;
-            }
+            background-color: #b22a37;
         }
     </style>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
@@ -403,673 +306,782 @@ def dashboard():
     <div class="container">
         <h1>Добро пожаловать, {{ session['username'] }}</h1>
         <form method="post">
-            <button type="submit" name="action" value="create">Создать комнату</button>
+            <button type="submit" name="action" value="create">Создать новый мир</button>
         </form>
+        <hr style="border-color: #444; margin: 1.5rem 0;">
         <form method="post">
-            <input type="text" name="token" placeholder="Введите токен комнаты" required>
-            <button type="submit" name="action" value="join">Войти в комнату</button>
+            <input type="text" name="token" placeholder="Введите ID мира" required>
+            <button type="submit" name="action" value="join">Войти в мир</button>
         </form>
-        <form action="/logout" method="post">
+        <form action="/logout" method="post" style="margin-top: 2rem;">
             <button class="logout-button" type="submit">Выйти</button>
         </form>
     </div>
 </body>
 </html>
-''', session=session)
+''')
 
 @app.route('/logout', methods=['POST'])
 def logout():
     session.pop('username', None)
     return redirect(url_for('index'))
 
-@app.route('/room/<token>')
-def room(token):
-    username = session.get('username') or session.get('guest_id')
-    if not username:
-        return redirect(url_for('guest_login', token=token))
-
-    if token not in rooms:
+@app.route('/world/<token>')
+def world(token):
+    if 'username' not in session:
+        return redirect(url_for('index'))
+    if token not in db['rooms']:
         return redirect(url_for('dashboard'))
 
-    is_guest = 'guest_id' in session
-    is_admin = not is_guest and rooms[token]['admin'] == username
+    username = session['username']
+    is_admin = db['rooms'][token]['admin'] == username
     
     return render_template_string('''
 <!DOCTYPE html>
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>Метавселенная - Комната {{ token }}</title>
-    <style>
-        :root {
-            --primary-color: #4CAF50;
-            --secondary-color: #388E3C;
-            --background-color: #121212;
-            --surface-color: rgba(30, 30, 30, 0.9);
-            --text-color: #ffffff;
-            --font-family: 'Roboto', sans-serif;
-            --border-radius: 12px;
-            --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
-        }
-        body { margin: 0; overflow: hidden; font-family: var(--font-family); }
-        .hud { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; padding: 10px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
-        .hud-left, .hud-right { display: flex; flex-direction: column; gap: 10px; }
-        .hud-button, .copy-link-button {
-            background-color: var(--surface-color); color: var(--text-color); border: 1px solid var(--primary-color);
-            border-radius: var(--border-radius); padding: 8px 12px; cursor: pointer;
-            font-size: 0.9rem; transition: all 0.2s; pointer-events: all;
+    <title>Voxelverse - {{ token }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
+    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></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/"
         }
-        .hud-button:hover, .copy-link-button:hover { background-color: var(--primary-color); }
-        #admin-panel { background-color: var(--surface-color); padding: 15px; border-radius: var(--border-radius); display: none; flex-direction: column; gap: 10px; }
-        #admin-panel input { width: calc(100% - 20px); }
-        .game-ui-overlay {
-            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
-            background-color: var(--surface-color); color: var(--text-color); padding: 20px; border-radius: var(--border-radius);
-            box-shadow: var(--box-shadow); z-index: 100; display: none;
-            width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; text-align: center;
-        }
-        #game-display h2 { color: var(--primary-color); }
-        #game-content { display: flex; flex-direction: column; align-items: center; gap: 10px; }
-        .game-input { padding: 8px; border: 1px solid #ccc; border-radius: var(--border-radius); font-size: 1rem; width: 80%; }
-        .game-button { background-color: var(--primary-color); color: white; border: none; padding: 10px 15px; cursor: pointer; transition: background-color 0.2s; font-size: 1rem; }
-        .game-button:hover { background-color: var(--secondary-color); }
-        .card { width: 60px; height: 90px; border: 1px solid black; border-radius: 5px; display: inline-block; margin: 2px; text-align: center; font-size: 1rem; background-color: white; user-select: none; color: black; }
-        #youtube-player-container {
-             position: fixed; bottom: 10px; left: 10px; width: 320px; height: 180px;
-             border-radius: var(--border-radius); overflow: hidden; z-index: 20; display: none;
+    }
+    </script>
+    <script src="https://www.youtube.com/iframe_api"></script>
+    <style>
+        body { margin: 0; overflow: hidden; background: #000; color: #fff; font-family: monospace; }
+        canvas { display: block; }
+        #crosshair { position: fixed; top: 50%; left: 50%; width: 4px; height: 4px; background: rgba(255,255,255,0.7); border-radius: 50%; transform: translate(-50%, -50%); }
+        #ui-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
+        #chat-container { position: absolute; bottom: 10px; left: 10px; width: 350px; height: 200px; background: rgba(0,0,0,0.5); border-radius: 8px; display: flex; flex-direction: column; pointer-events: all; }
+        #chat-messages { flex-grow: 1; overflow-y: auto; padding: 10px; font-size: 14px; }
+        #chat-messages p { margin: 0 0 5px 0; }
+        #chat-input { width: 100%; border: none; background: rgba(255,255,255,0.2); color: #fff; padding: 10px; box-sizing: border-box; }
+        #joystick-container { position: fixed; bottom: 20px; left: 20px; width: 150px; height: 150px; display: none; pointer-events: all; }
+        #joystick-base { position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.2); border-radius: 50%; }
+        #joystick-thumb { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; background: rgba(255,255,255,0.4); border-radius: 50%; transform: translate(-50%, -50%); }
+        #look-joystick-container { position: fixed; bottom: 20px; right: 20px; width: 150px; height: 150px; display: none; pointer-events: all; }
+        #youtube-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; z-index: 100; pointer-events: all; flex-direction: column; }
+        #youtube-player-container { width: 80%; max-width: 960px; aspect-ratio: 16/9; }
+        #youtube-controls { margin-top: 20px; display: flex; gap: 10px; }
+        .yt-button { padding: 10px 20px; background: #c00; border: none; color: #fff; cursor: pointer; border-radius: 5px; }
+        #yt-url-input { padding: 10px; border-radius: 5px; border: 1px solid #555; background: #333; color: #fff; flex-grow: 1; }
+        #info-popup { position: fixed; top: 10%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); padding: 20px; border-radius: 10px; border: 1px solid #007bff; display: none; pointer-events: all; text-align: center; }
+        @media (hover: none) and (pointer: coarse) {
+            #joystick-container, #look-joystick-container { display: block; }
+            #crosshair { display: none; }
         }
-        #youtube-player { width: 100%; height: 100%; }
     </style>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
-    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.2.0/dist/aframe-extras.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js"></script>
-    <script src="https://www.youtube.com/iframe_api"></script>
 </head>
 <body>
-    <div class="hud">
-        <div class="hud-left">
-            <button class="hud-button" onclick="document.querySelector('a-scene').exitVR()">Выйти из VR</button>
-            <button class="copy-link-button" onclick="copyRoomLink()">Скопировать ссылку</button>
+    <div id="crosshair"></div>
+    <div id="ui-container">
+        <div id="chat-container">
+            <div id="chat-messages"></div>
+            <input type="text" id="chat-input" placeholder="Нажмите Enter для чата...">
         </div>
-        <div class="hud-right">
-            {% if is_admin %}
-            <button class="hud-button" onclick="toggleAdminPanel()">Панель админа</button>
-            <div id="admin-panel">
-                <h4>YouTube</h4>
-                <input type="text" id="youtube-url-input" placeholder="Ссылка на YouTube видео">
-                <button class="hud-button" onclick="setYoutubeUrl()">Загрузить</button>
-                <h4>Игры</h4>
-                <div id="games-list">
-                    {% for game_id, game_info in games_data.items() %}
-                    <button class="game-button" onclick="startGame('{{ game_id }}')">{{ game_info.name }}</button>
-                    {% endfor %}
-                </div>
+        <div id="joystick-container">
+            <div id="joystick-base"></div>
+            <div id="joystick-thumb"></div>
+        </div>
+        <div id="look-joystick-container">
+            <div id="joystick-base"></div>
+            <div id="joystick-thumb"></div>
+        </div>
+        <div id="youtube-overlay">
+            <div id="youtube-player-container"></div>
+            <div id="youtube-controls">
+                {% if is_admin %}
+                <input type="text" id="yt-url-input" placeholder="Вставьте URL видео YouTube">
+                <button class="yt-button" id="yt-load-btn">Загрузить</button>
+                {% endif %}
+                <button class="yt-button" id="yt-close-btn">Закрыть</button>
             </div>
-            {% endif %}
+        </div>
+        <div id="info-popup">
+            <h2>Информация</h2>
+            <p id="info-popup-text"></p>
+            <button id="info-popup-close">Закрыть</button>
         </div>
     </div>
+    <script type="module">
+        import * as THREE from 'three';
+        import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
 
-    <div id="game-display" class="game-ui-overlay">
-        <h2></h2>
-        <p id="game-description"></p>
-        <div id="game-content"></div>
-    </div>
-
-    <div id="youtube-player-container">
-        <div id="youtube-player"></div>
-    </div>
-
-    <a-scene background="color: #ECECEC" renderer="colorManagement: true">
-        <a-assets>
-            <video id="local-video" autoplay playsinline muted style="display:none"></video>
-        </a-assets>
-
-        <a-entity id="player" position="0 1.6 0" movement-controls="speed: 0.15;" look-controls="pointerLockEnabled: true">
-            <a-camera></a-camera>
-        </a-entity>
-        
-        <a-entity id="players-container"></a-entity>
-
-        <a-plane id="youtube-screen" position="0 3 -10" rotation="0 0 0" width="16" height="9" material="shader: flat; color: #111"></a-plane>
-        
-        <a-sky color="#6EBAA7"></a-sky>
-        <a-plane position="0 0 -4" rotation="-90 0 0" width="50" height="50" color="#7BC8A4" shadow></a-plane>
-
-        <a-light type="ambient" color="#BBB"></a-light>
-        <a-light type="directional" position="-1 1 1" intensity="0.6"></a-light>
-    </a-scene>
-
-    <script>
         const socket = io();
         const token = '{{ token }}';
         const username = '{{ username }}';
-        const is_guest = {{ is_guest|tojson }};
         const isAdmin = {{ is_admin|tojson }};
-        const peers = {};
-        const iceConfig = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
-        let localStream;
-        let player;
+
+        let scene, camera, renderer, controls;
+        let player, playerVelocity, playerOnFloor;
+        const remotePlayers = {};
+        const clock = new THREE.Clock();
+        const keys = {};
+        let interactiveObjects = [];
+
+        const MAP_SIZE = 32;
+        const TILE_SIZE = 5;
+        const worldMap = [
+            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,0,0,4,4,4,4,4,4,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,0,0,4,1,1,1,1,1,1,1,4,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1],
+            [1,0,0,4,1,0,0,0,0,0,1,4,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
+            [1,0,0,4,1,0,0,0,0,0,1,4,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
+            [1,0,0,4,1,0,0,5,0,0,1,4,0,0,0,1,0,0,0,1,1,1,1,1,1,0,0,1,0,0,0,1],
+            [1,0,0,4,1,0,0,0,0,0,1,4,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,1,0,0,0,1],
+            [1,0,0,4,1,0,0,0,0,0,1,4,0,0,0,1,0,0,0,1,0,0,0,0,1,0,0,1,0,0,0,1],
+            [1,0,0,4,1,1,1,1,1,1,1,4,0,0,0,1,0,0,0,1,1,1,1,1,1,0,0,1,0,0,0,1],
+            [1,0,0,4,4,4,4,4,4,4,4,4,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,2,2,2,1,1,1,1,1,1],
+            [1,2,2,2,2,2,2,2,2,1,0,0,1,2,2,2,2,2,2,2,2,2,1,2,2,2,1,2,2,2,2,1],
+            [1,2,2,2,2,2,2,2,2,1,0,0,1,2,2,2,2,2,2,2,2,2,1,2,2,2,1,2,2,2,2,1],
+            [1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,2,2,2,1,1,1,1,1,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1],
+            [1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
+            [1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
+            [1,0,0,3,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
+            [1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
+            [1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
+            [1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
+            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
+        ];
+        
+        const hotspots = [
+            { id: 'yt', type: 'youtube', pos: {x: 10 * TILE_SIZE, y: TILE_SIZE * 2, z: 7 * TILE_SIZE}, size: {x: TILE_SIZE*5, y: TILE_SIZE*3, z: 0.2}, rotation: {x: 0, y: Math.PI / 2, z:0}},
+            { id: 'info1', type: 'info', pos: {x: 24 * TILE_SIZE, y: TILE_SIZE * 1.5, z: 3 * TILE_SIZE}, text: 'Добро пожаловать в Voxelverse!'},
+            { id: 'tp1', type: 'teleport', pos: {x: 2 * TILE_SIZE, y: TILE_SIZE * 0.5, z: 2 * TILE_SIZE}, target: {x: 29 * TILE_SIZE, y: TILE_SIZE, z: 29 * TILE_SIZE}}
+        ];
+
+        let ytPlayer;
+        let isYtPlayerReady = false;
         let isHandlingSync = false;
 
-        function copyRoomLink() {
-            navigator.clipboard.writeText(window.location.href).then(() => alert('Ссылка скопирована!'));
+        function init() {
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x87ceeb);
+            scene.fog = new THREE.Fog(0x87ceeb, 0, TILE_SIZE * MAP_SIZE / 2);
+
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(window.devicePixelRatio);
+            renderer.shadowMap.enabled = true;
+            document.body.appendChild(renderer.domElement);
+
+            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(50, 200, 100);
+            dirLight.castShadow = true;
+            dirLight.shadow.camera.top = 180;
+            dirLight.shadow.camera.bottom = -100;
+            dirLight.shadow.camera.left = -120;
+            dirLight.shadow.camera.right = 120;
+            scene.add(dirLight);
+
+            createMap();
+            createPlayer();
+            setupControls();
+            setupSocketListeners();
+            setupUI();
+
+            animate();
         }
 
-        function toggleAdminPanel() {
-            const panel = document.getElementById('admin-panel');
-            panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
-        }
-        
-        function onYouTubeIframeAPIReady() {
-            player = new YT.Player('youtube-player', {
-                events: {
-                    'onReady': onPlayerReady,
-                    'onStateChange': onPlayerStateChange
+        function createMap() {
+            const textures = {
+                grass: new THREE.MeshLambertMaterial({ color: 0x559020 }),
+                stone: new THREE.MeshLambertMaterial({ color: 0x888888 }),
+                water: new THREE.MeshLambertMaterial({ color: 0x3388cc, transparent: true, opacity: 0.7 }),
+                ytScreen: new THREE.MeshBasicMaterial({ color: 0x101010 }),
+                info: new THREE.MeshBasicMaterial({ color: 0xffff00 }),
+                teleport: new THREE.MeshBasicMaterial({ color: 0x9400D3 })
+            };
+            
+            const boxGeo = new THREE.BoxGeometry(TILE_SIZE, TILE_SIZE, TILE_SIZE);
+            
+            for (let z = 0; z < MAP_SIZE; z++) {
+                for (let x = 0; x < MAP_SIZE; x++) {
+                    const tileType = worldMap[z][x];
+                    if (tileType === 2) continue;
+                    let material = textures.stone;
+                    if (tileType === 0) material = textures.grass;
+                    
+                    const mesh = new THREE.Mesh(boxGeo, material);
+                    mesh.position.set(x * TILE_SIZE, -TILE_SIZE / 2, z * TILE_SIZE);
+                    mesh.receiveShadow = true;
+                    scene.add(mesh);
+                }
+            }
+
+            const waterGeo = new THREE.PlaneGeometry(MAP_SIZE * TILE_SIZE, MAP_SIZE * TILE_SIZE);
+            const water = new THREE.Mesh(waterGeo, textures.water);
+            water.rotation.x = -Math.PI / 2;
+            water.position.y = -TILE_SIZE / 4;
+            scene.add(water);
+
+            hotspots.forEach(hotspot => {
+                let object;
+                if(hotspot.type === 'youtube') {
+                    const screenGeo = new THREE.BoxGeometry(hotspot.size.x, hotspot.size.y, hotspot.size.z);
+                    object = new THREE.Mesh(screenGeo, textures.ytScreen);
+                    object.rotation.set(hotspot.rotation.x, hotspot.rotation.y, hotspot.rotation.z);
+                } else if (hotspot.type === 'info') {
+                    const infoGeo = new THREE.BoxGeometry(TILE_SIZE/2, TILE_SIZE/2, TILE_SIZE/2);
+                    object = new THREE.Mesh(infoGeo, textures.info);
+                } else if (hotspot.type === 'teleport') {
+                    const tpGeo = new THREE.CylinderGeometry(TILE_SIZE, TILE_SIZE, 0.5, 32);
+                    object = new THREE.Mesh(tpGeo, textures.teleport);
+                }
+
+                if (object) {
+                    object.position.set(hotspot.pos.x, hotspot.pos.y, hotspot.pos.z);
+                    object.userData = { type: 'hotspot', id: hotspot.id, details: hotspot };
+                    scene.add(object);
+                    interactiveObjects.push(object);
                 }
             });
         }
+        
+        function createPlayer() {
+            const headGeo = new THREE.BoxGeometry(0.8, 0.8, 0.8);
+            const headMat = new THREE.MeshLambertMaterial({ color: 0xffdbac });
+            const head = new THREE.Mesh(headGeo, headMat);
+            head.position.y = 1.3;
+
+            const bodyGeo = new THREE.BoxGeometry(1, 1.5, 0.5);
+            const bodyMat = new THREE.MeshLambertMaterial({ color: 0x335599 });
+            const body = new THREE.Mesh(bodyGeo, bodyMat);
+            body.position.y = 0.25;
+
+            player = new THREE.Group();
+            player.add(head);
+            player.add(body);
+            
+            player.position.set(5 * TILE_SIZE, TILE_SIZE, 5 * TILE_SIZE);
+            player.add(camera);
+            camera.position.set(0, 1.6, 0);
+            scene.add(player);
 
-        function onPlayerReady(event) {
-            socket.emit('request_youtube_state', { token, username });
+            playerVelocity = new THREE.Vector3();
+            playerOnFloor = false;
         }
 
-        function onPlayerStateChange(event) {
-             if (isHandlingSync) { isHandlingSync = false; return; }
-             let action = null;
-             let currentTime = event.target.getCurrentTime();
-             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: currentTime });
-             }
+        function addRemotePlayer(id, data) {
+            const headGeo = new THREE.BoxGeometry(0.8, 0.8, 0.8);
+            const headMat = new THREE.MeshLambertMaterial({ color: data.color || 0xffdbac });
+            const head = new THREE.Mesh(headGeo, headMat);
+            head.position.y = 1.3;
+
+            const bodyGeo = new THREE.BoxGeometry(1, 1.5, 0.5);
+            const bodyMat = new THREE.MeshLambertMaterial({ color: data.bodyColor || 0x993355 });
+            const body = new THREE.Mesh(bodyGeo, bodyMat);
+            body.position.y = 0.25;
+
+            const remotePlayer = new THREE.Group();
+            remotePlayer.add(head);
+            remotePlayer.add(body);
+
+            const nameText = createNameLabel(data.username);
+            nameText.position.y = 2.5;
+            remotePlayer.add(nameText);
+            
+            remotePlayer.position.set(data.pos.x, data.pos.y, data.pos.z);
+            remotePlayer.rotation.set(data.rot.x, data.rot.y, data.rot.z);
+            
+            remotePlayers[id] = { object: remotePlayer, targetPos: new THREE.Vector3(), targetRot: new THREE.Euler() };
+            remotePlayers[id].targetPos.copy(remotePlayer.position);
+            remotePlayers[id].targetRot.copy(remotePlayer.rotation);
+            
+            scene.add(remotePlayer);
         }
-        
-        function setYoutubeUrl() {
-            if (!isAdmin) return;
-            const url = document.getElementById('youtube-url-input').value;
-            socket.emit('set_youtube_url', { token, url });
+
+        function createNameLabel(name) {
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            context.font = 'Bold 40px Arial';
+            const textWidth = context.measureText(name).width;
+            canvas.width = textWidth;
+            canvas.height = 50;
+            context.font = 'Bold 40px Arial';
+            context.fillStyle = 'rgba(255, 255, 255, 0.95)';
+            context.fillText(name, 0, 40);
+            const texture = new THREE.CanvasTexture(canvas);
+            const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
+            const sprite = new THREE.Sprite(spriteMaterial);
+            sprite.scale.set(textWidth / 100, 0.5, 1.0);
+            return sprite;
         }
 
-        function getYouTubeVideoId(url) {
-            if (!url) return null;
-            const regExp = /^.*(youtu.be\\/|v\\/|u\\/\\w\\/|embed\\/|watch\\?v=|&v=)([^#&?]*).*/;
-            const match = url.match(regExp);
-            return (match && match[2].length === 11) ? match[2] : null;
+        function removeRemotePlayer(id) {
+            if (remotePlayers[id]) {
+                scene.remove(remotePlayers[id].object);
+                delete remotePlayers[id];
+            }
         }
 
-        socket.on('connect', () => {
-            navigator.mediaDevices.getUserMedia({ video: true, audio: true })
-                .then(stream => {
-                    localStream = stream;
-                    const localVideo = document.getElementById('local-video');
-                    localVideo.srcObject = stream;
-                    socket.emit('join', { token, username, is_guest });
-                })
-                .catch(err => {
-                    console.error("Ошибка доступа к камере:", err);
-                    socket.emit('join', { token, username, is_guest });
-                });
-        });
+        function setupControls() {
+            controls = new PointerLockControls(camera, renderer.domElement);
+            const blocker = document.body;
+            blocker.addEventListener('click', () => controls.lock());
+
+            document.addEventListener('keydown', (e) => keys[e.code] = true);
+            document.addEventListener('keyup', (e) => keys[e.code] = false);
+
+            const joystick = document.getElementById('joystick-container');
+            const joystickThumb = document.getElementById('joystick-thumb');
+            let joystickActive = false;
+            let joystickStart = { x: 0, y: 0 };
+            let joystickMove = { x: 0, y: 0 };
+
+            joystick.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                joystickActive = true;
+                joystickStart.x = e.touches[0].clientX;
+                joystickStart.y = e.touches[0].clientY;
+            });
+            joystick.addEventListener('touchmove', (e) => {
+                if (!joystickActive) return;
+                const dx = e.touches[0].clientX - joystickStart.x;
+                const dy = e.touches[0].clientY - joystickStart.y;
+                const dist = Math.min(75, Math.hypot(dx, dy));
+                const angle = Math.atan2(dy, dx);
+                joystickMove.x = Math.cos(angle) * dist / 75;
+                joystickMove.y = Math.sin(angle) * dist / 75;
+                joystickThumb.style.transform = `translate(${Math.cos(angle)*dist-30}px, ${Math.sin(angle)*dist-30}px)`;
+            });
+            joystick.addEventListener('touchend', () => {
+                joystickActive = false;
+                joystickMove.x = 0;
+                joystickMove.y = 0;
+                joystickThumb.style.transform = `translate(-50%, -50%)`;
+            });
 
-        socket.on('init_room', (data) => {
-            const playersContainer = document.getElementById('players-container');
-            for (const sid in data.players) {
-                if (sid !== socket.id) {
-                    createPlayerAvatar(sid, data.players[sid]);
+            const lookJoystick = document.getElementById('look-joystick-container');
+            const lookJoystickThumb = document.getElementById('look-joystick-container').querySelector('#joystick-thumb');
+            let lookActive = false;
+            let lookLast = { x: 0, y: 0 };
+            
+            lookJoystick.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                lookActive = true;
+                lookLast.x = e.touches[0].clientX;
+                lookLast.y = e.touches[0].clientY;
+            });
+            lookJoystick.addEventListener('touchmove', (e) => {
+                if (!lookActive) return;
+                const dx = e.touches[0].clientX - lookLast.x;
+                const dy = e.touches[0].clientY - lookLast.y;
+                lookLast.x = e.touches[0].clientX;
+                lookLast.y = e.touches[0].clientY;
+                
+                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));
+            });
+            lookJoystick.addEventListener('touchend', () => { lookActive = false; });
+        }
+
+        function setupUI() {
+            const chatInput = document.getElementById('chat-input');
+            chatInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    if(chatInput.value.trim() !== '') {
+                        socket.emit('chat_message', { token, username, message: chatInput.value });
+                        chatInput.value = '';
+                    }
                 }
-            }
-            if (data.youtube_url) {
-                updateYoutubePlayer(data.youtube_url, data.youtube_state);
-            }
-        });
-
-        socket.on('player_joined', (data) => {
-            if (data.sid !== socket.id) {
-                createPlayerAvatar(data.sid, data.player_data);
-                const peerConnection = createPeerConnection(data.sid);
-                peerConnection.createOffer()
-                    .then(offer => peerConnection.setLocalDescription(offer))
-                    .then(() => {
-                        socket.emit('signal', { to: data.sid, from_sid: socket.id, token, signal: peerConnection.localDescription });
-                    });
-            }
-        });
+            });
 
-        socket.on('player_left', (data) => {
-            const playerEntity = document.getElementById(`player-${data.sid}`);
-            if (playerEntity) {
-                playerEntity.parentNode.removeChild(playerEntity);
-            }
-            if (peers[data.sid]) {
-                peers[data.sid].close();
-                delete peers[data.sid];
-            }
-        });
-        
-        socket.on('signal', data => {
-            let peerConnection = peers[data.from_sid];
-            if (!peerConnection) {
-                peerConnection = createPeerConnection(data.from_sid);
-            }
+            document.getElementById('info-popup-close').addEventListener('click', () => {
+                document.getElementById('info-popup').style.display = 'none';
+            });
             
-            if (data.signal.type === 'offer') {
-                peerConnection.setRemoteDescription(new RTCSessionDescription(data.signal))
-                    .then(() => peerConnection.createAnswer())
-                    .then(answer => peerConnection.setLocalDescription(answer))
-                    .then(() => {
-                        socket.emit('signal', { to: data.from_sid, from_sid: socket.id, token, signal: peerConnection.localDescription });
-                    });
-            } else if (data.signal.type === 'answer') {
-                peerConnection.setRemoteDescription(new RTCSessionDescription(data.signal));
-            } else if (data.signal.type === 'candidate') {
-                peerConnection.addIceCandidate(new RTCIceCandidate(data.signal.candidate));
+            if (isAdmin) {
+                document.getElementById('yt-load-btn').addEventListener('click', () => {
+                    const url = document.getElementById('yt-url-input').value;
+                    socket.emit('set_youtube_url', { token, url });
+                });
             }
-        });
+            document.getElementById('yt-close-btn').addEventListener('click', () => {
+                document.getElementById('youtube-overlay').style.display = 'none';
+                if(ytPlayer && ytPlayer.pauseVideo) ytPlayer.pauseVideo();
+            });
+            
+            window.onYouTubeIframeAPIReady = () => {
+                isYtPlayerReady = true;
+            };
 
-        function createPeerConnection(remoteSid) {
-            const peerConnection = new RTCPeerConnection(iceConfig);
-            peers[remoteSid] = peerConnection;
+            window.addEventListener('resize', onWindowResize);
+            document.addEventListener('click', checkInteraction);
+        }
 
-            if (localStream) {
-                localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
-            }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
 
-            peerConnection.onicecandidate = event => {
-                if (event.candidate) {
-                    socket.emit('signal', { to: remoteSid, from_sid: socket.id, token, signal: { type: 'candidate', candidate: event.candidate } });
-                }
-            };
+        function checkInteraction(event) {
+            if (!controls.isLocked) return;
             
-            peerConnection.ontrack = event => {
-                const remoteVideo = document.createElement('video');
-                remoteVideo.id = `video-${remoteSid}`;
-                remoteVideo.srcObject = event.streams[0];
-                remoteVideo.autoplay = true;
-                remoteVideo.playsinline = true;
-                document.querySelector('a-assets').appendChild(remoteVideo);
-
-                const playerHead = document.querySelector(`#player-${remoteSid} .player-head`);
-                if (playerHead) {
-                    playerHead.setAttribute('material', `shader: flat; src: #video-${remoteSid}`);
+            const raycaster = new THREE.Raycaster();
+            const mouse = new THREE.Vector2(0, 0); // Center of screen
+            raycaster.setFromCamera(mouse, camera);
+
+            const intersects = raycaster.intersectObjects(interactiveObjects);
+            if (intersects.length > 0) {
+                const object = intersects[0].object;
+                const data = object.userData;
+                if(data.type === 'hotspot') {
+                    if (data.id === 'yt') {
+                        document.getElementById('youtube-overlay').style.display = 'flex';
+                        socket.emit('request_youtube_state', { token });
+                    } else if (data.id === 'info1') {
+                        const popup = document.getElementById('info-popup');
+                        document.getElementById('info-popup-text').innerText = data.details.text;
+                        popup.style.display = 'block';
+                    } else if (data.id === 'tp1') {
+                        player.position.set(data.details.target.x, data.details.target.y, data.details.target.z);
+                    }
                 }
-            };
-            return peerConnection;
+            }
         }
 
-        function createPlayerAvatar(sid, playerData) {
-            const playersContainer = document.getElementById('players-container');
-            let playerEntity = document.createElement('a-entity');
-            playerEntity.id = `player-${sid}`;
-            playerEntity.setAttribute('position', playerData.position);
+        function updatePlayer(delta) {
+            if (!controls.isLocked && !joystickActive) return;
+
+            const speed = 10.0;
+            const direction = new THREE.Vector3();
             
-            playerEntity.innerHTML = `
-                <a-box class="player-body" position="0 0.85 0" depth="0.4" height="1.0" width="0.8" color="#555"></a-box>
-                <a-box class="player-head" position="0 1.6 0" height="0.5" width="0.5" depth="0.5" color="#AAA"></a-box>
-                <a-text value="${playerData.username}" position="0 2.0 0" align="center" color="white" width="4"></a-text>
-            `;
-            playersContainer.appendChild(playerEntity);
+            const forward = (keys['KeyW'] || joystickMove.y < -0.1) ? 1 : 0;
+            const backward = (keys['KeyS'] || joystickMove.y > 0.1) ? 1 : 0;
+            const left = (keys['KeyA'] || joystickMove.x < -0.1) ? 1 : 0;
+            const right = (keys['KeyD'] || joystickMove.x > 0.1) ? 1 : 0;
+
+            direction.z = forward - backward;
+            direction.x = left - right;
+            direction.normalize();
+
+            if (controls.isLocked) {
+                controls.moveRight(direction.x * speed * delta);
+                controls.moveForward(direction.z * speed * delta);
+            } else {
+                player.translateX(-direction.x * speed * delta);
+                player.translateZ(-direction.z * speed * delta);
+            }
+
+            player.position.y += playerVelocity.y * delta;
+            
+            if(player.position.y < TILE_SIZE) {
+                playerVelocity.y = 0;
+                player.position.y = TILE_SIZE;
+                playerOnFloor = true;
+            }
+            if(keys['Space'] && playerOnFloor) {
+                playerVelocity.y = 10;
+                playerOnFloor = false;
+            }
+            playerVelocity.y -= 25 * delta;
         }
-        
-        socket.on('update_movement', (data) => {
-            if (data.sid !== socket.id) {
-                const playerEntity = document.getElementById(`player-${data.sid}`);
-                if (playerEntity) {
-                    playerEntity.setAttribute('position', data.position);
-                    const head = playerEntity.querySelector('.player-head');
-                    if (head) {
-                        head.setAttribute('rotation', data.rotation);
-                    }
-                }
+
+        function updateRemotePlayers(delta) {
+            for (const id in remotePlayers) {
+                const p = remotePlayers[id];
+                p.object.position.lerp(p.targetPos, delta * 10);
+                p.object.quaternion.slerp(new THREE.Quaternion().setFromEuler(p.targetRot), delta * 10);
             }
-        });
-        
-        document.querySelector('a-scene').addEventListener('loaded', () => {
-            setInterval(() => {
-                const player = document.getElementById('player');
-                const camera = player.querySelector('a-camera');
-                const position = player.getAttribute('position');
-                const rotation = camera.getAttribute('rotation');
-                socket.emit('update_movement', { token, position, rotation });
-            }, 100);
-        });
-
-        socket.on('set_youtube_url', (data) => {
-            updateYoutubePlayer(data.url);
-        });
-        
-        socket.on('youtube_state_change', (data) => {
-            if (player) {
-                isHandlingSync = true;
-                const videoId = getYouTubeVideoId(player.getVideoUrl());
-                const screen = document.getElementById('youtube-screen');
-                screen.setAttribute('material', `shader: flat; src: #youtube-video-asset-${videoId}`);
-                
-                if (data.action === 'play') {
-                    player.seekTo(data.time, true);
-                    player.playVideo();
-                } else if (data.action === 'pause') {
-                    player.pauseVideo();
-                    player.seekTo(data.time, true);
-                }
+        }
+
+        let lastUpdateTime = 0;
+        function animate() {
+            requestAnimationFrame(animate);
+            const delta = clock.getDelta();
+            
+            updatePlayer(delta);
+            updateRemotePlayers(delta);
+
+            const time = performance.now();
+            if (time > lastUpdateTime + 100) { // 10hz update
+                socket.emit('player_move', {
+                    token: token,
+                    pos: {x: player.position.x, y: player.position.y, z: player.position.z},
+                    rot: {x: camera.rotation.x, y: player.rotation.y, z: camera.rotation.z}
+                });
+                lastUpdateTime = time;
             }
-        });
 
-        socket.on('youtube_initial_state', (data) => {
-            updateYoutubePlayer(data.url, data.state);
-        });
+            renderer.render(scene, camera);
+        }
 
-        function updateYoutubePlayer(url, state = null) {
-            const videoId = getYouTubeVideoId(url);
-            if (!videoId) return;
+        function setupSocketListeners() {
+            socket.on('connect', () => {
+                socket.emit('join_world', {
+                    token: token,
+                    username: username,
+                    pos: {x: player.position.x, y: player.position.y, z: player.position.z},
+                    rot: {x: camera.rotation.x, y: player.rotation.y, z: camera.rotation.z}
+                });
+            });
 
-            document.getElementById('youtube-player-container').style.display = 'block';
+            socket.on('initial_state', (data) => {
+                for (const id in data.players) {
+                    if (id !== socket.id) {
+                        addRemotePlayer(id, data.players[id]);
+                    }
+                }
+                data.chat.forEach(msg => displayChatMessage(msg.username, msg.message));
+            });
 
-            if (!document.getElementById(`youtube-video-asset-${videoId}`)) {
-                const videoAsset = document.createElement('video');
-                videoAsset.id = `youtube-video-asset-${videoId}`;
-                videoAsset.crossOrigin = 'anonymous';
-                document.querySelector('a-assets').appendChild(videoAsset);
-            }
+            socket.on('player_joined', (data) => {
+                if (data.id !== socket.id) {
+                    addRemotePlayer(data.id, data.playerData);
+                }
+            });
+            
+            socket.on('player_left', (id) => {
+                removeRemotePlayer(id);
+            });
 
-            const screen = document.getElementById('youtube-screen');
-            screen.setAttribute('material', `shader: flat; src: #youtube-video-asset-${videoId}`);
+            socket.on('player_moved', (data) => {
+                if (remotePlayers[data.id]) {
+                    remotePlayers[data.id].targetPos.set(data.pos.x, data.pos.y, data.pos.z);
+                    remotePlayers[data.id].targetRot.set(data.rot.x, data.rot.y, data.rot.z);
+                }
+            });
             
-            player.cueVideoById(videoId);
-
-            player.getIframe().onload = () => {
-                const videoEl = document.getElementById(`youtube-video-asset-${videoId}`);
-                const ytVideoEl = player.getIframe().contentDocument.querySelector('video');
-                if (ytVideoEl && videoEl.srcObject !== ytVideoEl.captureStream()) {
-                    videoEl.srcObject = ytVideoEl.captureStream();
-                    videoEl.play();
+            socket.on('new_chat_message', (data) => {
+                displayChatMessage(data.username, data.message);
+            });
+
+            socket.on('set_youtube_url', (data) => {
+                if (isYtPlayerReady && data.url) {
+                    const videoId = getYouTubeVideoId(data.url);
+                    if (videoId) {
+                        if (ytPlayer) {
+                            ytPlayer.loadVideoById(videoId);
+                        } else {
+                            createYtPlayer(videoId);
+                        }
+                    }
                 }
-            }
+            });
 
-            if(state) {
+            socket.on('youtube_state_change', (data) => {
+                if (!ytPlayer) return;
                 isHandlingSync = true;
-                if(state.isPlaying) {
-                    player.seekTo(state.currentTime, true);
-                    player.playVideo();
-                } else {
-                    player.seekTo(state.currentTime, true);
-                    player.pauseVideo();
+                if (data.action === 'play') {
+                    if(Math.abs(ytPlayer.getCurrentTime() - data.time) > 1.5) {
+                        ytPlayer.seekTo(data.time, true);
+                    }
+                    ytPlayer.playVideo();
+                } else if (data.action === 'pause') {
+                    ytPlayer.pauseVideo();
+                    ytPlayer.seekTo(data.time, true);
                 }
-            }
-        }
-
-        function startGame(gameId) {
-            socket.emit('start_game', { token, game_id: gameId });
+            });
+            
+            socket.on('youtube_initial_state', (data) => {
+                if (isYtPlayerReady && data.url) {
+                    const videoId = getYouTubeVideoId(data.url);
+                    if(videoId) {
+                        if(!ytPlayer) createYtPlayer(videoId);
+                        
+                        isHandlingSync = true;
+                        ytPlayer.cueVideoById(videoId, data.time || 0);
+                        if (data.isPlaying) {
+                           setTimeout(()=> ytPlayer.playVideo(), 500);
+                        }
+                    }
+                }
+            });
         }
-
-        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';
-            gameDisplay.querySelector('h2').innerText = gameInfo.name;
-            document.getElementById('game-description').innerText = gameInfo.description;
-            document.getElementById('game-content').innerHTML = '';
-
-            if (gameId === 'crocodile') initCrocodile(gameId);
-            else if (gameId === 'alias') initAlias(gameId);
-            else if (gameId === 'mafia') initMafia(gameId, gameInfo);
-            else if (gameId === 'durak') initDurak(gameId, gameInfo);
-        });
-
-        socket.on('update_game_state', (data) => {
-            const gameId = data.game_id;
-            if (gameId === 'crocodile') updateCrocodileState(data.state);
-            else if (gameId === 'alias') updateAliasState(data.state);
-            else if (gameId === 'mafia') updateMafiaState(data.state);
-            else if (gameId === 'durak') updateDurakState(data.state);
-        });
-
-        function initCrocodile(gameId) {
-            const gameContent = document.getElementById('game-content');
-            gameContent.innerHTML = `
-                <div id="crocodile-presenter-view" style="display:none;">
-                    <p>Вы ведущий! Ваше слово: <b id="crocodile-word"></b></p>
-                </div>
-                <div id="crocodile-guesser-view" style="display:none;">
-                    <input type="text" id="crocodile-guess-input" class="game-input" placeholder="Ваша догадка">
-                    <button id="crocodile-guess-button" class="game-button">Угадать</button>
-                </div>
-                <div id="crocodile-admin-view" style="display:none;">
-                    <input type="text" id="crocodile-word-input" class="game-input" placeholder="Введите слово для игры">
-                    <button id="start-turn-button" class="game-button">Начать ход</button>
-                </div>
-                <div id="crocodile-timer"></div>
-                <div id="crocodile-guesses"></div>
-            `;
-            document.getElementById('start-turn-button').onclick = () => {
-                const word = document.getElementById('crocodile-word-input').value;
-                if(word) socket.emit('game_action', { token, game_id: gameId, action: 'start_turn', word });
-            };
-            document.getElementById('crocodile-guess-button').onclick = () => {
-                const guess = document.getElementById('crocodile-guess-input').value;
-                if(guess) socket.emit('game_action', { token, game_id: gameId, action: 'guess', value: guess, user: username });
-            };
+        
+        function displayChatMessage(user, message) {
+            const messagesDiv = document.getElementById('chat-messages');
+            const p = document.createElement('p');
+            p.innerHTML = `<strong>${user}:</strong> ${message}`;
+            messagesDiv.appendChild(p);
+            messagesDiv.scrollTop = messagesDiv.scrollHeight;
         }
-        function updateCrocodileState(state) {
-            document.getElementById('crocodile-presenter-view').style.display = state.presenter === username ? 'block' : 'none';
-            document.getElementById('crocodile-guesser-view').style.display = state.presenter !== username && state.isRunning ? 'block' : 'none';
-            document.getElementById('crocodile-admin-view').style.display = isAdmin && !state.isRunning ? 'block' : 'none';
-            if(state.presenter === username) document.getElementById('crocodile-word').innerText = state.word;
-            document.getElementById('crocodile-timer').innerText = state.isRunning ? `Время: ${state.timer}` : '';
-            const guessesDiv = document.getElementById('crocodile-guesses');
-            guessesDiv.innerHTML = '<h4>Догадки:</h4>';
-            state.guesses.forEach(g => guessesDiv.innerHTML += `<p>${g.user}: ${g.value} (${g.result})</p>`);
-            if (state.winner) guessesDiv.innerHTML += `<h4>Победил ${state.winner}! Слово: ${state.word}</h4>`;
-            if (state.isTimeUp) guessesDiv.innerHTML += `<h4>Время вышло! Слово: ${state.word}</h4>`;
+        
+        function getYouTubeVideoId(url) {
+            if (!url) return null;
+            let videoId = null;
+            const youtubeRegex = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+            const match = url.match(youtubeRegex);
+            if (match) {
+                videoId = match[1];
+            }
+            return videoId;
         }
 
-        function initAlias(gameId) { initCrocodile(gameId); } // Similar logic
-        function updateAliasState(state) { updateCrocodileState(state); } // Similar logic
-        
-        function initMafia(gameId, gameInfo) {
-            // Simplified logic for brevity, see full logic in previous answer
+        function createYtPlayer(videoId) {
+             ytPlayer = new YT.Player('youtube-player-container', {
+                height: '100%',
+                width: '100%',
+                videoId: videoId,
+                playerVars: { 'autoplay': 0, 'controls': 1 },
+                events: {
+                    'onStateChange': onPlayerStateChange
+                }
+            });
         }
-        function updateMafiaState(state) {}
         
-        function initDurak(gameId, gameInfo) {}
-        function updateDurakState(state) {}
+        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: token,
+                    action: action,
+                    time: event.target.getCurrentTime()
+                });
+            }
+        }
+
+        init();
     </script>
 </body>
 </html>
-''', 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):
-    if token not in rooms:
-        return "Комната не найдена", 404
-    guest_id = 'Гость_' + generate_token()[:6]
-    session['guest_id'] = guest_id
-    if 'username' in session:
-        session.pop('username')
-    return redirect(url_for('room', token=token))
-
-@app.route('/guest_login/<token>')
-def guest_login(token):
-     if token not in rooms:
-         return "Комната не найдена", 404
-     return render_template_string('''
-        <!DOCTYPE html><html><head><title>Вход для гостей</title></head><body>
-        <h1>Вход в комнату как Гость</h1>
-        <a href="{{ url_for('join_as_guest', token=token) }}">Войти как гость</a>
-        <p>Или <a href="/">войдите в свой аккаунт</a>.</p>
-        </body></html>
-    ''', token=token)
-
-@socketio.on('join')
-def handle_join(data):
+''', token=token, username=username, is_admin=is_admin)
+
+@socketio.on('join_world')
+def handle_join_world(data):
     token = data['token']
     username = data['username']
-    is_guest = data.get('is_guest', False)
-    sid = request.sid
-
-    if token in rooms:
-        join_room(token)
-        
-        emit('init_room', {
-            'players': rooms[token]['players'],
-            'youtube_url': rooms[token].get('youtube_url'),
-            'youtube_state': rooms[token].get('youtube_state')
-        }, to=sid)
-
-        x_pos = random.uniform(-10, 10)
-        z_pos = random.uniform(-5, 5)
+    join_room(token)
+    
+    if token in db['rooms']:
+        room = db['rooms'][token]
         
-        player_data = {
+        emit('initial_state', {'players': room['players'], 'chat': room.get('chat', [])}, to=request.sid)
+
+        room['players'][request.sid] = {
             'username': username,
-            'is_guest': is_guest,
-            'position': f"{x_pos} 0 {z_pos}"
+            'pos': data['pos'],
+            'rot': data['rot'],
+            'color': f'#{random.randint(0, 0xFFFFFF):06x}',
+            'bodyColor': f'#{random.randint(0, 0xFFFFFF):06x}'
         }
-        rooms[token]['players'][sid] = player_data
         
-        emit('player_joined', {'sid': sid, 'player_data': player_data}, room=token)
-        save_json(ROOMS_DB, rooms)
+        emit('player_joined', {'id': request.sid, 'playerData': room['players'][request.sid]}, room=token, include_self=False)
+        save_db(db)
 
 @socketio.on('disconnect')
 def handle_disconnect():
-    sid = request.sid
-    for token, room_data in list(rooms.items()):
-        if sid in room_data.get('players', {}):
-            del rooms[token]['players'][sid]
-            emit('player_left', {'sid': sid}, room=token)
-            
-            if not room_data['players']:
-                del rooms[token]
-
-            save_json(ROOMS_DB, rooms)
+    for token, room in db['rooms'].items():
+        if request.sid in room['players']:
+            del room['players'][request.sid]
+            leave_room(token)
+            emit('player_left', request.sid, room=token)
+            save_db(db)
             break
 
-@socketio.on('update_movement')
-def handle_update_movement(data):
+@socketio.on('player_move')
+def handle_player_move(data):
+    token = data['token']
+    if token in db['rooms'] and request.sid in db['rooms'][token]['players']:
+        player_data = db['rooms'][token]['players'][request.sid]
+        player_data['pos'] = data['pos']
+        player_data['rot'] = data['rot']
+        emit('player_moved', {'id': request.sid, 'pos': data['pos'], 'rot': data['rot']}, room=token, include_self=False)
+
+@socketio.on('chat_message')
+def handle_chat_message(data):
     token = data['token']
-    if token in rooms and request.sid in rooms[token]['players']:
-        rooms[token]['players'][request.sid]['position'] = ' '.join(map(str, data['position'].values()))
-        emit('update_movement', {
-            'sid': request.sid,
-            'position': data['position'],
-            'rotation': data['rotation']
-        }, room=token, include_self=False)
+    if token in db['rooms']:
+        message_data = {'username': data['username'], 'message': data['message']}
+        if 'chat' not in db['rooms'][token]:
+            db['rooms'][token]['chat'] = []
+        db['rooms'][token]['chat'].append(message_data)
+        if len(db['rooms'][token]['chat']) > 50:
+            db['rooms'][token]['chat'].pop(0)
         
-@socketio.on('signal')
-def handle_signal(data):
-    emit('signal', {
-        'from_sid': data['from_sid'],
-        'signal': data['signal']
-    }, room=data['to'])
+        emit('new_chat_message', message_data, room=token)
+        save_db(db)
+
+def get_youtube_id(url):
+    if not url: return None
+    parsed_url = urlparse(url)
+    if parsed_url.hostname in ('www.youtube.com', 'youtube.com'):
+        if parsed_url.path == '/watch': return parse_qs(parsed_url.query).get('v', [None])[0]
+        if parsed_url.path.startswith(('/embed/', '/v/')): return parsed_url.path.split('/')[2]
+    elif parsed_url.hostname == 'youtu.be': return parsed_url.path[1:]
+    return None
 
 @socketio.on('set_youtube_url')
 def handle_set_youtube_url(data):
     token = data['token']
     url = data['url']
-    if token in rooms and rooms[token]['admin'] == session.get('username'):
-        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', {'url': url}, room=token)
+    if token in db['rooms'] and db['rooms'][token]['admin'] == session.get('username'):
+        video_id = get_youtube_id(url)
+        if video_id:
+            room = db['rooms'][token]
+            room['youtube']['url'] = url
+            room['youtube']['state'] = {'isPlaying': False, 'currentTime': 0, 'last_sync_time': time.time()}
+            save_db(db)
+            emit('set_youtube_url', {'url': url}, room=token)
 
 @socketio.on('youtube_state_change')
 def handle_youtube_state_change(data):
     token = data['token']
-    if token in rooms:
-        rooms[token]['youtube_state']['isPlaying'] = (data['action'] == 'play')
-        rooms[token]['youtube_state']['currentTime'] = data['time']
-        rooms[token]['youtube_state']['last_sync_time'] = time.time()
-        save_json(ROOMS_DB, rooms)
+    if token in db['rooms']:
+        room = db['rooms'][token]
+        state = room['youtube']['state']
+        state['isPlaying'] = (data['action'] == 'play')
+        state['currentTime'] = data.get('time', 0)
+        state['last_sync_time'] = time.time()
+        save_db(db)
         emit('youtube_state_change', data, room=token, include_self=False)
 
 @socketio.on('request_youtube_state')
 def handle_request_youtube_state(data):
     token = data['token']
-    if token in rooms and rooms[token].get('youtube_url'):
-        state = rooms[token]['youtube_state']
-        elapsed = time.time() - state['last_sync_time']
-        estimated_time = state['currentTime'] + elapsed if state['isPlaying'] else state['currentTime']
-        emit('youtube_initial_state', {
-            'url': rooms[token]['youtube_url'],
-            'state': {'isPlaying': state['isPlaying'], 'currentTime': estimated_time}
-        }, to=request.sid)
-
-@socketio.on('start_game')
-def handle_start_game(data):
-    token = data['token']
-    game_id = data['game_id']
-    username = session.get('username')
-    if token in rooms and rooms[token].get('admin') == username:
-        rooms[token]['current_game'] = game_id
-        if token not in games_data[game_id]['state']:
-             games_data[game_id]['state'][token] = {}
-        
-        player_sids = list(rooms[token]['players'].keys())
-        players = [rooms[token]['players'][sid]['username'] for sid in player_sids]
-        games_data[game_id]['state'][token]['players'] = players
-
-        save_json(ROOMS_DB, rooms)
-        save_json(GAMES_DB, games_data)
-        emit('game_started', {'game_id': game_id}, room=token)
-        emit('update_game_state', {'game_id': game_id, 'state': games_data[game_id]['state'][token]}, room=token)
-
-@socketio.on('game_action')
-def handle_game_action(data):
-    token = data['token']
-    game_id = data.get('game_id')
-    action = data.get('action')
-    user = data.get('user')
-    
-    if not (token in rooms and game_id and rooms[token].get('current_game') == game_id):
-        return
-        
-    state = games_data[game_id]['state'][token]
-    
-    if game_id in ['crocodile', 'alias']:
-        if action == 'start_turn':
-            players = state.get('players', [])
-            if not players: return
-            state['word'] = data.get('word')
-            state['presenter'] = random.choice(players)
-            state['guesses'] = []
-            state['timer'] = 60
-            state['isRunning'] = True
-            state['winner'] = None
-            state['isTimeUp'] = False
-            socketio.start_background_task(target=game_timer, token=token, game_id=game_id)
-        elif action == 'guess' and state.get('isRunning'):
-            value = data.get('value', '').lower()
-            word = state.get('word', '').lower()
-            result = "Угадано!" if value == word else "Неверно"
-            state['guesses'].append({'user': user, 'value': data.get('value'), 'result': result})
-            if result == "Угадано!":
-                state['isRunning'] = False
-                state['winner'] = user
-    
-    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)
-
-def game_timer(token, game_id):
-    with app.app_context():
-        while True:
-            socketio.sleep(1)
-            state = games_data[game_id]['state'].get(token)
-            if not state or not state.get('isRunning'):
-                break
-            
-            state['timer'] -= 1
-            if state['timer'] <= 0:
-                state['isRunning'] = False
-                state['isTimeUp'] = True
-
-            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)
+    if token in db['rooms']:
+        room = db['rooms'][token]
+        yt_data = room.get('youtube', {})
+        if yt_data.get('url'):
+            state = yt_data['state']
+            elapsed = time.time() - state['last_sync_time']
+            estimated_time = state['currentTime'] + elapsed if state['isPlaying'] else state['currentTime']
+            emit('youtube_initial_state', {
+                'url': yt_data['url'],
+                'time': estimated_time,
+                'isPlaying': state['isPlaying']
+            }, to=request.sid)
 
 if __name__ == '__main__':
-    if HF_TOKEN_WRITE and HF_TOKEN_READ:
+    if HF_TOKEN:
         backup_thread = threading.Thread(target=periodic_backup, daemon=True)
         backup_thread.start()
     socketio.run(app, host='0.0.0.0', port=7860, debug=True, allow_unsafe_werkzeug=True)