Update app.py

app.py

@@ -13,76 +13,110 @@ 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-for-metaverse'
+app.config['SECRET_KEY'] = 'your-very-secret-key-here'
 socketio = SocketIO(app, async_mode='threading')
 
 REPO_ID = "flpolprojects/Clients"
-HF_TOKEN = os.getenv("HF_TOKEN")
+HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
+HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
 
-DB_FILE = os.path.join(app.root_path, 'metaverse_db.json')
+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')
 
-def load_db():
+def load_json(file_path, default={}):
     try:
-        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("Репозиторий или файл не найден. Используется/создается локальная версия.")
+        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
     except Exception as e:
-        print(f"Ошибка при скачивании с Hugging Face Hub: {e}. Используется/создается локальная версия.")
+        print(f"Непредвиденная ошибка при загрузке: {e}")
+        return default
 
+def save_json(file_path, data):
     try:
-        with open(DB_FILE, 'r', encoding='utf-8') as f:
-            return json.load(f)
-    except (FileNotFoundError, json.JSONDecodeError):
-        return {'users': {}, 'rooms': {}}
-
-def save_db(data):
-    try:
-        with open(DB_FILE, 'w', encoding='utf-8') as f:
+        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 в {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'] = {}
+        print(f"Ошибка сохранения JSON в {file_path}: {e}")
+    except Exception as e:
+        print(f"Непредвиденная ошибка при сохранении: {e}")
 
+def upload_db_to_hf():
+    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}")
+
+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(300)
-        print("Выполняется периодическое сохранение...")
-        save_db(db)
+
+rooms = load_json(ROOMS_DB)
+users = load_json(USERS_DB)
+games_data = {}
 
 def generate_token():
-    return ''.join(random.choices(string.ascii_letters + string.digits, k=16))
+    return ''.join(random.choices(string.ascii_letters + string.digits, k=15))
 
 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:
@@ -94,16 +128,15 @@ def index():
         password = request.form.get('password')
 
         if action == 'register':
-            if username in db['users']:
+            if username in users:
                 return "Пользователь уже существует", 400
-            db['users'][username] = {'password': hash_password(password)}
-            save_db(db)
+            users[username] = {'password': hash_password(password), 'rooms': []}
+            save_json(USERS_DB, users)
             session['username'] = username
             return redirect(url_for('dashboard'))
 
         elif action == 'login':
-            user = db['users'].get(username)
-            if user and user['password'] == hash_password(password):
+            if username in users and users[username]['password'] == hash_password(password):
                 session['username'] = username
                 return redirect(url_for('dashboard'))
             return "Неверный логин или пароль", 401
@@ -114,22 +147,25 @@ def index():
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Metaverse Login</title>
+    <title>Room</title>
      <style>
         :root {
-            --primary-color: #007bff;
-            --secondary-color: #0056b3;
-            --background-color: #1a1a1d;
-            --surface-color: #2c2c34;
-            --text-color: #f0f0f0;
+            --primary-color: #6200ee;
+            --secondary-color: #3700b3;
+            --background-color: #ffffff;
+            --surface-color: #f5f5f5;
+            --text-color: #333333;
+            --error-color: #b00020;
             --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;
@@ -139,88 +175,112 @@ def index():
             background-color: var(--surface-color);
             padding: 2rem;
             border-radius: var(--border-radius);
-            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
+            box-shadow: var(--box-shadow);
             width: 90%;
             max-width: 400px;
             text-align: center;
         }
         h1 {
-            font-size: 2.5rem;
+            font-size: 2rem;
             margin-bottom: 1.5rem;
             color: var(--primary-color);
-            text-shadow: 0 0 10px var(--primary-color);
         }
         input, button {
             display: block;
             width: 100%;
-            padding: 0.85rem;
-            margin-bottom: 1.2rem;
-            border: 1px solid #444;
-            background-color: #333;
-            color: var(--text-color);
+            padding: 0.75rem;
+            margin-bottom: 1rem;
+            border: 1px solid #ccc;
             border-radius: var(--border-radius);
             font-size: 1rem;
             box-sizing: border-box;
-            transition: all 0.3s ease;
+            transition: border-color 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);
-            transform: translateY(-2px);
-            box-shadow: 0 2px 8px rgba(0,123,255,0.5);
+        }
+        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;
+            }
         }
     </style>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
 </head>
 <body>
     <div class="container">
-        <h1>VOXELVERSE</h1>
+        <h1>Room</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()
-            db['rooms'][token] = {
+            rooms[token] = {
+                'users': [session['username']],
+                'guests': [],
+                'max_users': 10,
                 'admin': session['username'],
-                'players': {},
-                'youtube': {
-                    'url': '',
-                    'state': {'isPlaying': False, 'currentTime': 0, 'last_sync_time': time.time()}
-                },
-                'chat': []
+                'youtube_url': None,
+                'youtube_state': {'isPlaying': False, 'currentTime': 0, 'last_sync_time': time.time()},
+                'players': {}
             }
-            save_db(db)
-            return redirect(url_for('world', token=token))
+            users[session['username']]['rooms'].append(token)
+            save_json(ROOMS_DB, rooms)
+            save_json(USERS_DB, users)
+            return redirect(url_for('room', token=token))
         elif action == 'join':
             token = request.form.get('token')
-            if token in db['rooms']:
-                return redirect(url_for('world', token=token))
-            return "Мир не найден", 404
+            if token in rooms and len(rooms[token]['users']) + len(rooms[token]['guests']) < rooms[token]['max_users']:
+                if session['username'] not in rooms[token]['users']:
+                  rooms[token]['users'].append(session['username'])
+                  users[session['username']]['rooms'].append(token)
+                  save_json(ROOMS_DB, rooms)
+                  save_json(USERS_DB, users)
+                return redirect(url_for('room', token=token))
+            return "Комната не найдена или переполнена", 404
 
     return render_template_string('''
 <!DOCTYPE html>
@@ -231,21 +291,22 @@ def dashboard():
     <title>Панель управления</title>
      <style>
         :root {
-            --primary-color: #007bff;
-            --secondary-color: #0056b3;
-            --background-color: #1a1a1d;
-            --surface-color: #2c2c34;
-            --text-color: #f0f0f0;
-            --accent-color: #dc3545;
+            --primary-color: #6200ee;
+            --secondary-color: #3700b3;
+            --background-color: #ffffff;
+            --surface-color: #f5f5f5;
+            --text-color: #333333;
+            --accent-color: #03dac6;
             --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: 2rem;
+            padding: 0;
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -255,10 +316,11 @@ def dashboard():
             background-color: var(--surface-color);
             padding: 2rem;
             border-radius: var(--border-radius);
-            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
+            box-shadow: var(--box-shadow);
             width: 90%;
-            max-width: 500px;
+            max-width: 400px;
             text-align: center;
+            margin-top: 2rem;
         }
         h1 {
             font-size: 2rem;
@@ -268,36 +330,46 @@ def dashboard():
         input, button {
             display: block;
             width: 100%;
-            padding: 0.85rem;
+            padding: 0.75rem;
             margin-bottom: 1rem;
-            border: 1px solid #444;
-            background-color: #333;
-            color: var(--text-color);
+            border: 1px solid #ccc;
             border-radius: var(--border-radius);
             font-size: 1rem;
             box-sizing: border-box;
-            transition: all 0.3s ease;
+            transition: border-color 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);
-            transform: translateY(-2px);
+        }
+        button:active {
+            opacity: 0.8;
         }
         .logout-button {
             background-color: var(--accent-color);
+            margin-top: 1rem;
+            transition: background-color 0.3s ease;
         }
         .logout-button:hover {
-            background-color: #b22a37;
+            filter: brightness(0.9);
+        }
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --background-color: #121212;
+                --surface-color: #1e1e1e;
+                --text-color: #ffffff;
+            }
         }
     </style>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
@@ -306,44 +378,208 @@ 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="Введите ID мира" required>
-            <button type="submit" name="action" value="join">Войти в мир</button>
+            <input type="text" name="token" placeholder="Введите токен комнаты" required>
+            <button type="submit" name="action" value="join">Войти в комнату</button>
         </form>
-        <form action="/logout" method="post" style="margin-top: 2rem;">
+        <form action="/logout" method="post">
             <button class="logout-button" type="submit">Выйти</button>
         </form>
     </div>
 </body>
 </html>
-''')
+''', session=session)
+
 
 @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('/world/<token>')
-def world(token):
-    if 'username' not in session:
-        return redirect(url_for('index'))
-    if token not in db['rooms']:
+
+
+@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
+
+    if token not in rooms:
         return redirect(url_for('dashboard'))
 
-    username = session['username']
-    is_admin = db['rooms'][token]['admin'] == username
-    
+    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
+    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))
+    else:
+        return redirect(url_for('index'))
+
     return render_template_string('''
 <!DOCTYPE html>
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <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>
+    <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;
+            top: 10px;
+            left: 10px;
+            color: white;
+            font-family: sans-serif;
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        #ui-container button, #ui-container input {
+            padding: 8px 12px;
+            background-color: rgba(0,0,0,0.5);
+            color: white;
+            border: 1px solid white;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        #joystick-container {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            width: 150px;
+            height: 150px;
+            z-index: 100;
+            display: none;
+        }
+        #youtube-container {
+            position: fixed;
+            top: 50%;
+            left: 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 {
+            position: absolute;
+            top: -30px;
+            right: 0;
+            background: white;
+            color: black;
+            border: none;
+            border-radius: 50%;
+            width: 25px;
+            height: 25px;
+            cursor: pointer;
+            font-weight: bold;
+        }
+        .touch-surface {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 99;
+            display: none;
+        }
+        .info-popup {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: rgba(0,0,0,0.7);
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            z-index: 150;
+            display: none;
+            text-align: center;
+        }
+        .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>
+    
+    <div id="joystick-container"></div>
+    <div class="touch-surface"></div>
+
+    <div id="youtube-container">
+        <button class="close-btn" onclick="hideYoutubePlayer()">X</button>
+        <div id="youtube-player"></div>
+    </div>
+    
+    <div id="info-popup">
+        <p>Подойдите к экрану, чтобы посмотреть видео</p>
+    </div>
+
+    <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 type="importmap">
     {
@@ -353,735 +589,694 @@ def world(token):
         }
     }
     </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>
-    <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; }
-        }
-    </style>
-</head>
-<body>
-    <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 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>
-        </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';
 
         const socket = io();
         const token = '{{ token }}';
         const username = '{{ username }}';
+        const is_guest = {{ is_guest|tojson }};
         const isAdmin = {{ is_admin|tojson }};
 
-        let scene, camera, renderer, controls;
-        let player, playerVelocity, playerOnFloor;
-        const remotePlayers = {};
+        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();
-        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 iceConfig = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
         
-        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;
+        let youtubePlayer;
+        let youtubeHotspot, youtubeScreen;
+        let isYoutubePlayerReady = false;
+        let isYoutubeVisible = false;
 
         function init() {
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x87ceeb);
-            scene.fog = new THREE.Fog(0x87ceeb, 0, TILE_SIZE * MAP_SIZE / 2);
+            scene.fog = new THREE.Fog(0x87ceeb, 0, 100);
 
             camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-
+            
+            audioListener = new THREE.AudioListener();
+            camera.add(audioListener);
+            
             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);
+            document.getElementById('world').appendChild(renderer.domElement);
 
-            const light = new THREE.HemisphereLight(0xeeeeff, 0x777788, 0.9);
-            light.position.set(0.5, 1, 0.75);
-            scene.add(light);
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
+            scene.add(ambientLight);
 
-            const dirLight = new THREE.DirectionalLight(0xffffff, 0.7);
-            dirLight.position.set(50, 200, 100);
+            const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
+            dirLight.position.set(50, 50, 50);
             dirLight.castShadow = true;
-            dirLight.shadow.camera.top = 180;
-            dirLight.shadow.camera.bottom = -100;
-            dirLight.shadow.camera.left = -120;
-            dirLight.shadow.camera.right = 120;
+            dirLight.shadow.mapSize.width = 2048;
+            dirLight.shadow.mapSize.height = 2048;
             scene.add(dirLight);
 
-            createMap();
+            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();
-            setupControls();
-            setupSocketListeners();
-            setupUI();
-
-            animate();
-        }
-
-        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);
+            initControls();
             
-            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);
-                }
-            });
+            animate();
         }
         
         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);
+            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;
+            
             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);
+            player.position.set(0, 0.5, 5);
             scene.add(player);
-
-            playerVelocity = new THREE.Vector3();
-            playerOnFloor = false;
-        }
-
-        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 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 removeRemotePlayer(id) {
-            if (remotePlayers[id]) {
-                scene.remove(remotePlayers[id].object);
-                delete remotePlayers[id];
-            }
+            camera.position.set(0, 5, 10);
+            camera.lookAt(player.position);
         }
-
-        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)`;
+        
+        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;
+                }
             });
-            joystick.addEventListener('touchend', () => {
-                joystickActive = false;
-                joystickMove.x = 0;
-                joystickMove.y = 0;
-                joystickThumb.style.transform = `translate(-50%, -50%)`;
+            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;
+                }
             });
 
-            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;
+            let isPointerLocked = false;
+            document.addEventListener('pointerlockchange', () => {
+                isPointerLocked = document.pointerLockElement === renderer.domElement;
             });
-            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));
+            renderer.domElement.addEventListener('click', () => {
+                if (!isPointerLocked) renderer.domElement.requestPointerLock();
             });
-            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 = '';
-                    }
+            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('info-popup-close').addEventListener('click', () => {
-                document.getElementById('info-popup').style.display = 'none';
-            });
             
-            if (isAdmin) {
-                document.getElementById('yt-load-btn').addEventListener('click', () => {
-                    const url = document.getElementById('yt-url-input').value;
-                    socket.emit('set_youtube_url', { token, url });
+            if ('ontouchstart' in window) {
+                document.getElementById('joystick-container').style.display = 'block';
+                const touchSurface = document.querySelector('.touch-surface');
+                touchSurface.style.display = 'block';
+                
+                const joystick = nipplejs.create({
+                    zone: document.getElementById('joystick-container'),
+                    mode: 'static',
+                    position: { left: '85px', bottom: '85px' },
+                    color: 'white'
                 });
-            }
-            document.getElementById('yt-close-btn').addEventListener('click', () => {
-                document.getElementById('youtube-overlay').style.display = 'none';
-                if(ytPlayer && ytPlayer.pauseVideo) ytPlayer.pauseVideo();
-            });
-            
-            window.onYouTubeIframeAPIReady = () => {
-                isYtPlayerReady = true;
-            };
 
-            window.addEventListener('resize', onWindowResize);
-            document.addEventListener('click', checkInteraction);
-        }
+                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;
+                });
 
-        function onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }
+                let touchStartX, touchStartY;
+                touchSurface.addEventListener('touchstart', (e) => {
+                    if (e.touches.length === 1) {
+                         touchStartX = e.touches[0].clientX;
+                         touchStartY = e.touches[0].clientY;
+                    }
+                }, {passive: false});
 
-        function checkInteraction(event) {
-            if (!controls.isLocked) return;
-            
-            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);
+                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});
             }
         }
-
+        
         function updatePlayer(delta) {
-            if (!controls.isLocked && !joystickActive) return;
-
             const speed = 10.0;
             const direction = new THREE.Vector3();
-            
-            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);
+
+            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);
 
-            player.position.y += playerVelocity.y * delta;
+            const cameraOffset = new THREE.Vector3(0, 4, 8);
+            cameraOffset.applyQuaternion(player.quaternion);
+            camera.position.lerp(player.position.clone().add(cameraOffset), 0.1);
             
-            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;
-        }
+            const lookAtTarget = player.position.clone().add(new THREE.Vector3(0, 2, 0));
+            camera.lookAt(lookAtTarget);
 
-        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);
+            checkHotspots();
+        }
+        
+        function checkHotspots() {
+            const distance = player.position.distanceTo(youtubeHotspot.position);
+            const popup = document.getElementById('info-popup');
+            if (distance < 10) {
+                if (!isYoutubeVisible) {
+                    popup.classList.add('show');
+                }
+                if (distance < 5 && !isYoutubeVisible) {
+                    showYoutubePlayer();
+                }
+            } else {
+                popup.classList.remove('show');
+                if (isYoutubeVisible) {
+                    hideYoutubePlayer();
+                }
             }
         }
 
-        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}
+            if (player) {
+                updatePlayer(delta);
+                socket.emit('player_moved', {
+                    token,
+                    position: player.position,
+                    rotation: player.rotation,
                 });
-                lastUpdateTime = 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);
+                }
             }
 
             renderer.render(scene, camera);
         }
 
-        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}
-                });
-            });
-
-            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));
-            });
-
-            socket.on('player_joined', (data) => {
-                if (data.id !== socket.id) {
-                    addRemotePlayer(data.id, data.playerData);
-                }
-            });
+        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;
             
-            socket.on('player_left', (id) => {
-                removeRemotePlayer(id);
-            });
-
-            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);
-                }
-            });
+            const head = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshLambertMaterial({ color: 0xffdbac }));
+            head.position.y = 1.5;
+            head.castShadow = true;
             
-            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);
-                        }
-                    }
+            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;
                 }
-            });
-
-            socket.on('youtube_state_change', (data) => {
-                if (!ytPlayer) return;
-                isHandlingSync = true;
-                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);
+                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();
                 }
-            });
+            };
             
-            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);
-                        }
-                    }
+            peerConnection.onicecandidate = event => {
+                if (event.candidate) {
+                    socket.emit('signal', { to: id, from: username, token, signal: { type: 'candidate', candidate: event.candidate }});
                 }
-            });
+            };
         }
-        
-        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 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 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 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;
         }
 
-        function createYtPlayer(videoId) {
-             ytPlayer = new YT.Player('youtube-player-container', {
+        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 });
+                }
+            };
+        }
+        
+        window.onYouTubeIframeAPIReady = () => {
+            youtubePlayer = new YT.Player('youtube-player', {
                 height: '100%',
                 width: '100%',
-                videoId: videoId,
-                playerVars: { 'autoplay': 0, 'controls': 1 },
+                playerVars: { 'playsinline': 1 },
                 events: {
+                    'onReady': () => { isYoutubePlayerReady = true; socket.emit('request_youtube_state', { token }); },
                     'onStateChange': onPlayerStateChange
                 }
             });
-        }
+        };
         
+        let isHandlingSync = false;
         function onPlayerStateChange(event) {
-            if (isHandlingSync) {
-                isHandlingSync = false;
-                return;
-            }
+            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 (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()
+                    token, action, time: event.target.getCurrentTime()
                 });
             }
         }
+        
+        function showYoutubePlayer() {
+            if (!isYoutubePlayerReady) return;
+            document.getElementById('youtube-container').style.display = 'flex';
+            isYoutubeVisible = true;
+            if (document.pointerLockElement) document.exitPointerLock();
+        }
+        
+        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 });
+        });
+
+        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('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('user_left', (data) => {
+            removePeer(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('signal', async (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));
+                }
+            }
+        });
+        
+        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;
+            }
+        });
+        
+        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();
+            }
+        });
+        
+        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);
+            }
+        });
+        
+        window.addEventListener('beforeunload', () => {
+            socket.emit('leave', { token, username, is_guest });
+        });
 
         init();
+
     </script>
 </body>
 </html>
-''', token=token, username=username, is_admin=is_admin)
+''', token=token, session=session, is_admin=is_admin, is_guest=is_guest, username=username)
+
+@app.route('/join_as_guest/<token>', methods=['GET'])
+def join_as_guest(token):
+    if token not in rooms:
+        return "Комната не найдена", 404
+
+    guest_id = 'Гость_' + ''.join(random.choices(string.digits, k=4))
+    session['guest_id'] = guest_id
 
-@socketio.on('join_world')
-def handle_join_world(data):
+    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 lang="ru">
+        <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Вход для гостей</title>
+            <style>
+                 :root {
+                    --primary-color: #4CAF50;
+                    --background-color: #f0f0f0;
+                    --surface-color: #ffffff;
+                    --text-color: #333333;
+                    --border-radius: 12px;
+                    --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
+                }
+                body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: var(--background-color); color: var(--text-color); }
+                .container { text-align: center; padding: 30px; border: 1px solid #ccc; border-radius: var(--border-radius); background-color: var(--surface-color); box-shadow: var(--box-shadow); }
+                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;
+                    }
+                }
+            </style>
+        </head>
+        <body>
+            <div class="container">
+                <h1>Вход в комнату как Гость</h1>
+                <p>Вы можете войти в комнату <strong>{{ token }}</strong> как гость. Ваше имя будет автоматически сгенерировано.</p>
+                <a href="{{ url_for('join_as_guest', token=token) }}">Войти в комнату как гость</a>
+            </div>
+        </body>
+        </html>
+    ''', token=token)
+
+@socketio.on('join')
+def handle_join(data):
     token = data['token']
     username = data['username']
-    join_room(token)
-    
-    if token in db['rooms']:
-        room = db['rooms'][token]
+    is_guest = data.get('is_guest', False)
+
+    if token in rooms:
+        join_room(token)
         
-        emit('initial_state', {'players': room['players'], 'chat': room.get('chat', [])}, to=request.sid)
-
-        room['players'][request.sid] = {
-            'username': username,
-            'pos': data['pos'],
-            'rot': data['rot'],
-            'color': f'#{random.randint(0, 0xFFFFFF):06x}',
-            'bodyColor': f'#{random.randint(0, 0xFFFFFF):06x}'
+        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
         }
+
+        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('player_joined', {'id': request.sid, 'playerData': room['players'][request.sid]}, room=token, include_self=False)
-        save_db(db)
-
-@socketio.on('disconnect')
-def handle_disconnect():
-    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('player_move')
-def handle_player_move(data):
+        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)
+
+@socketio.on('leave')
+def handle_leave(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):
+    username = data['username']
+    is_guest = data.get('is_guest', False)
+
+    if token in rooms:
+        leave_room(token)
+
+        if username in rooms[token].get('players', {}):
+            del rooms[token]['players'][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]
+        
+        save_json(ROOMS_DB, rooms)
+        emit('user_left', {'username': username}, room=token)
+
+@socketio.on('player_moved')
+def handle_player_moved(data):
     token = data['token']
-    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)
+    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']]
         
-        emit('new_chat_message', message_data, room=token)
-        save_db(db)
+        emit('player_moved', {
+            'id': username, 
+            'position': data['position'], 
+            'rotation': data['rotation']
+        }, room=token, include_self=False)
 
-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('signal')
+def handle_signal(data):
+    emit('signal', data, room=data['token'], to=data['to'])
 
 @socketio.on('set_youtube_url')
 def handle_set_youtube_url(data):
     token = data['token']
     url = data['url']
-    if token in db['rooms'] and db['rooms'][token]['admin'] == session.get('username'):
+    username = session.get('username')
+
+    if token in rooms and rooms[token].get('admin') == 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)
+            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)
 
 @socketio.on('youtube_state_change')
 def handle_youtube_state_change(data):
     token = data['token']
-    if token in db['rooms']:
-        room = db['rooms'][token]
-        state = room['youtube']['state']
+    if token in rooms:
+        state = rooms[token]['youtube_state']
         state['isPlaying'] = (data['action'] == 'play')
-        state['currentTime'] = data.get('time', 0)
+        state['currentTime'] = data['time']
         state['last_sync_time'] = time.time()
-        save_db(db)
+        save_json(ROOMS_DB, rooms)
         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 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 token in rooms and rooms[token].get('youtube_url'):
+        state = rooms[token]['youtube_state']
+        video_id = get_youtube_id(rooms[token]['youtube_url'])
+        
+        elapsed = time.time() - state['last_sync_time']
+        estimated_time = state['currentTime'] + elapsed if state['isPlaying'] else state['currentTime']
+        
+        emit('youtube_initial_state', {
+            'videoId': video_id,
+            'time': estimated_time,
+            'isPlaying': state['isPlaying']
+        }, to=request.sid)
 
 if __name__ == '__main__':
-    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)
+    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)