Update app.py

app.py

@@ -1,87 +1,85 @@
-# --- START OF FILE app.py ---
-
 import os
 import json
 import time
 from datetime import datetime
 from uuid import uuid4
+from werkzeug.utils import secure_filename
 
-from flask import Flask, render_template_string, request, jsonify, send_file
+from flask import Flask, render_template_string, request, jsonify
 from huggingface_hub import HfApi, hf_hub_download
 from huggingface_hub.utils import RepositoryNotFoundError, HfHubHTTPError
 from dotenv import load_dotenv
-import io
 
 load_dotenv()
 
 app = Flask(__name__)
 app.secret_key = 'level_designer_secret_key_zomboid_5678'
+app.config['UPLOAD_FOLDER'] = 'temp_uploads'
+
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
 
 REPO_ID = "Kgshop/Testai"
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
 
-def get_api():
-    token = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE
+def hf_api_client(write=False):
+    token = HF_TOKEN_WRITE if write else (HF_TOKEN_READ or HF_TOKEN_WRITE)
     if not token:
-        return None, None
-    return HfApi(token=token), token
+        return None
+    return HfApi(token=token)
 
-def upload_project_to_hf(local_path, project_name):
-    if not HF_TOKEN_WRITE:
+def upload_to_hf(local_path, path_in_repo, commit_message):
+    api = hf_api_client(write=True)
+    if not api:
         return False
     try:
-        api = HfApi()
         api.upload_file(
             path_or_fileobj=local_path,
-            path_in_repo=f"pz_projects/{project_name}.json",
+            path_in_repo=path_in_repo,
             repo_id=REPO_ID,
             repo_type="dataset",
-            token=HF_TOKEN_WRITE,
-            commit_message=f"Save PZ project {project_name} at {datetime.now()}"
+            commit_message=commit_message
         )
         return True
     except Exception as e:
-        print(f"Error uploading {project_name} to HF: {e}")
+        print(f"Error uploading to HF: {e}")
         return False
 
 def download_project_from_hf(project_name):
-    api, token = get_api()
-    if not api: return None
+    token_to_use = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE
+    if not token_to_use:
+        return None
     try:
         local_path = hf_hub_download(
             repo_id=REPO_ID,
             filename=f"pz_projects/{project_name}.json",
             repo_type="dataset",
-            token=token,
+            token=token_to_use,
+            local_dir=".",
+            local_dir_use_symlinks=False,
             force_download=True
         )
         with open(local_path, 'r', encoding='utf-8') as f:
             data = json.load(f)
+        if os.path.exists(local_path):
+            os.remove(local_path)
         return data
     except (HfHubHTTPError, RepositoryNotFoundError):
         return None
-    except Exception:
+    except Exception as e:
+        print(f"Error downloading project: {e}")
         return None
 
-def list_projects_from_hf():
-    api, _ = get_api()
-    if not api: return []
-    try:
-        repo_info = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset")
-        project_files = [f.split('/')[-1].replace('.json', '') for f in repo_info if f.startswith('pz_projects/') and f.endswith('.json')]
-        return sorted(project_files)
-    except Exception:
+def list_files_from_hf(path_prefix):
+    api = hf_api_client()
+    if not api:
         return []
-
-def list_textures_from_hf():
-    api, _ = get_api()
-    if not api: return []
     try:
         repo_info = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset")
-        texture_files = [f.split('/')[-1] for f in repo_info if f.startswith('pz_textures/') and (f.endswith('.png') or f.endswith('.jpg'))]
-        return sorted(texture_files)
-    except Exception:
+        files = [f.split('/')[-1] for f in repo_info if f.startswith(path_prefix)]
+        return sorted(files)
+    except Exception as e:
+        print(f"Error listing files from {path_prefix}: {e}")
         return []
 
 EDITOR_TEMPLATE = '''
@@ -96,53 +94,57 @@ EDITOR_TEMPLATE = '''
         canvas { display: block; }
         #ui-container { position: absolute; top: 0; left: 0; height: 100%; z-index: 10; pointer-events: none; display: flex; }
         #ui-panel {
-            background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(5px); padding: 15px; border-right: 1px solid #444;
-            width: 320px; height: 100%; overflow-y: auto; box-sizing: border-box; transition: transform 0.3s ease-in-out;
-            transform: translateX(0); pointer-events: auto;
+            background: rgba(10, 10, 10, 0.85);
+            backdrop-filter: blur(5px);
+            padding: 15px;
+            border-right: 1px solid #444;
+            width: 320px;
+            height: 100%;
+            overflow-y: auto;
+            box-sizing: border-box;
+            transition: transform 0.3s ease-in-out;
+            transform: translateX(0);
+            pointer-events: auto;
         }
         .ui-group { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #333; }
         .ui-group:last-child { border-bottom: none; }
         h3 { margin-top: 0; font-size: 1.2em; color: #00aaff; border-bottom: 1px solid #00aaff; padding-bottom: 5px; margin-bottom: 10px; }
         label { display: block; margin-bottom: 5px; font-size: 0.9em; }
         input[type="text"], input[type="number"], select {
-            width: 100%; padding: 8px; box-sizing: border-box; background: #222; border: 1px solid #555;
-            color: white; border-radius: 4px; margin-bottom: 10px;
+            width: 100%; padding: 8px; box-sizing: border-box; background: #222; border: 1px solid #555; color: white; border-radius: 4px; margin-bottom: 5px;
         }
-        .input-row { display: flex; gap: 10px; }
-        .input-row > * { flex: 1; }
-        .checkbox-label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+        input[type="file"] { padding: 3px; }
         button {
-            width: 100%; padding: 10px; background: #0077cc; border: none; color: white; border-radius: 4px;
-            cursor: pointer; font-weight: bold; margin-top: 10px; transition: background-color 0.2s;
+            width: 100%; padding: 10px; background: #0077cc; border: none; color: white; border-radius: 4px; cursor: pointer; font-weight: bold; margin-top: 10px; transition: background-color 0.2s;
         }
         button:hover { background: #0099ff; }
-        button.play-button { background: #22aa22; } button.play-button:hover { background: #33cc33; }
-        button.danger-button { background: #c00; } button.danger-button:hover { background: #e00; }
-        button.secondary-button { background: #555; } button.secondary-button:hover { background: #777; }
-        .tool-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
+        button:disabled { background: #555; cursor: not-allowed; }
+        button.play-button { background: #22aa22; }
+        button.play-button:hover { background: #33cc33; }
+        button.danger-button { background: #c00; }
+        button.danger-button:hover { background: #e00; }
+        #tool-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
         .tool-item {
-            padding: 10px; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; text-align: center;
-            cursor: pointer; transition: all 0.2s; font-size: 0.9em;
+            padding: 10px; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; text-align: center; cursor: pointer;
+            transition: all 0.2s; font-size: 0.9em;
         }
         .tool-item:hover { background: #3a3a3a; border-color: #666; }
         .tool-item.active { background: #0077cc; border-color: #00aaff; }
         #loading-spinner {
-            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 8px solid #f3f3f3;
-            border-top: 8px solid #3498db; border-radius: 50%; width: 60px; height: 60px;
-            animation: spin 1s linear infinite; display: none; z-index: 100;
+            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
+            border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%;
+            width: 60px; height: 60px; animation: spin 1s linear infinite; display: none; z-index: 100;
         }
-        #blocker { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; z-index: 99; }
+        #blocker { position: fixed; width: 100%; height: 100%; top:0; left:0; background-color: rgba(0,0,0,0.7); display: none; z-index: 50; }
         #instructions { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 14px; cursor: pointer; color: white; }
         #burger-menu {
-            position: absolute; top: 15px; left: 15px; z-index: 20; display: none; width: 30px; height: 22px;
-            cursor: pointer; pointer-events: auto;
+            position: absolute; top: 15px; left: 15px; z-index: 20; display: none; width: 30px; height: 22px; cursor: pointer; pointer-events: auto;
         }
         #burger-menu span { display: block; position: absolute; height: 4px; width: 100%; background: white; border-radius: 2px; opacity: 1; left: 0; transition: .25s ease-in-out; }
         #burger-menu span:nth-child(1) { top: 0px; } #burger-menu span:nth-child(2) { top: 9px; } #burger-menu span:nth-child(3) { top: 18px; }
         #joystick-container {
-            position: absolute; bottom: 30px; left: 30px; width: 120px; height: 120px;
-            background: rgba(128, 128, 128, 0.3); border-radius: 50%; display: none; z-index: 100;
-            pointer-events: auto; user-select: none;
+            position: absolute; bottom: 30px; left: 30px; width: 120px; height: 120px; background: rgba(128, 128, 128, 0.3); border-radius: 50%;
+            display: none; z-index: 100; pointer-events: auto; user-select: none;
         }
         #joystick-handle { position: absolute; top: 30px; left: 30px; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@@ -150,8 +152,7 @@ EDITOR_TEMPLATE = '''
             #ui-panel { transform: translateX(-100%); padding-top: 60px; }
             #ui-panel.open { transform: translateX(0); }
             #burger-menu { display: block; }
-            #joystick-container { width: 100px; height: 100px; }
-            #joystick-handle { width: 50px; height: 50px; top: 25px; left: 25px; }
+            #joystick-container { display: block; }
         }
     </style>
 </head>
@@ -163,53 +164,53 @@ EDITOR_TEMPLATE = '''
                 <h3>Проект</h3>
                 <select id="project-list">
                     <option value="">Выберите проект...</option>
-                    {% for project in projects %}<option value="{{ project }}">{{ project }}</option>{% endfor %}
+                    {% for project in projects %}
+                    <option value="{{ project }}">{{ project }}</option>
+                    {% endfor %}
                 </select>
                 <button id="load-project">Загрузить</button>
                 <hr style="border-color: #333; margin: 15px 0;">
                 <input type="text" id="project-name" placeholder="new-level-01">
                 <button id="save-project">Сохранить</button>
             </div>
+            <div class="ui-group">
+                <h3>Текстуры</h3>
+                <input type="file" id="texture-file-input" accept="image/png, image/jpeg">
+                <button id="upload-texture-btn">Загрузить текстуру</button>
+            </div>
             <div class="ui-group">
                 <h3>Режим</h3>
-                <div class="tool-selector" style="grid-template-columns: 1fr 1fr;">
-                    <div class="tool-item" id="mode-objects">Объекты</div>
-                    <div class="tool-item" id="mode-terrain">Ландшафт</div>
-                </div>
-                 <button id="play-mode-toggle" class="play-button">Играть</button>
+                <button id="play-mode-toggle" class="play-button">Играть</button>
             </div>
-            <div id="objects-panel">
-                <div class="ui-group">
-                    <h3>Инструменты</h3>
-                    <div class="tool-selector" id="tool-selector"></div>
-                     <label for="object-texture-select">Текстура:</label>
-                    <select id="object-texture-select"></select>
-                    <label class="checkbox-label"><input type="checkbox" id="object-collidable" checked> Препятствие</label>
-                    <label class="checkbox-label"><input type="checkbox" id="object-passable"> Проходимый</label>
-                    <p style="font-size: 0.8em; color: #888; margin-top: 10px;">
-                        ЛКМ: Разместить, Shift + ЛКМ: Удалить, ПКМ/Колесо: Вращать
-                    </p>
+            <div id="tool-properties" class="ui-group">
+                <h3>Параметры инструмента</h3>
+                <div id="prop-texture">
+                    <label for="texture-select">Текстура:</label>
+                    <select id="texture-select">
+                        <option value="">Цвет по умолчанию</option>
+                         {% for texture in textures %}
+                        <option value="{{ texture }}">{{ texture }}</option>
+                        {% endfor %}
+                    </select>
                 </div>
-            </div>
-            <div id="terrain-panel" style="display: none;">
-                <div class="ui-group">
-                    <h3>Ландшафт</h3>
-                    <div class="input-row">
-                        <input type="number" id="terrain-width" value="10" placeholder="Ширина">
-                        <input type="number" id="terrain-height" value="10" placeholder="Высота">
-                    </div>
-                    <label for="terrain-texture-select">Текстура:</label>
-                    <select id="terrain-texture-select"></select>
-                    <button id="create-terrain">Создать ландшафт</button>
-                    <button id="delete-terrain" class="danger-button">Удалить выбранный</button>
+                 <div id="prop-terrain-size">
+                    <label for="terrain-width">Ширина (X):</label>
+                    <input type="number" id="terrain-width" value="1" min="1">
+                    <label for="terrain-depth">Глубина (Z):</label>
+                    <input type="number" id="terrain-depth" value="1" min="1">
                 </div>
             </div>
             <div class="ui-group">
+                <h3>Инструменты</h3>
+                <div id="tool-selector"></div>
+                <p style="font-size: 0.8em; color: #888; margin-top: 10px;">
+                    ЛКМ: Разместить<br>ПКМ / Колесо: Вращать<br>Shift + ЛКМ: Удалить
+                </p>
                 <button id="clear-level" class="danger-button">Очистить уровень</button>
             </div>
         </div>
     </div>
-    <div id="blocker"><div id="instructions"><p style="font-size:36px">Нажмите, чтобы играть</p><p>Движение: WASD / Джойстик</p><p>Обзор: Мышь</p><p>Нажмите ESC для выхода</p></div></div>
+    <div id="blocker"><div id="instructions"><p style="font-size:36px">Нажмите, чтобы играть</p><p>Движение: WASD / Джойстик<br>Покинуть режим: ESC</p></div></div>
     <div id="loading-spinner"></div>
     <div id="joystick-container"><div id="joystick-handle"></div></div>
 
@@ -219,58 +220,56 @@ EDITOR_TEMPLATE = '''
     <script type="module">
         import * as THREE from 'three';
         import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-        import { TransformControls } from 'three/addons/controls/TransformControls.js';
 
-        let scene, camera, renderer, orbitControls, transformControls;
-        let raycaster, mouse, placementPlane, previewMesh;
+        let scene, camera, renderer, orbitControls;
+        let raycaster, mouse, placementPlane, gridHelper, previewMesh;
         
-        let isPlayMode = false, editMode = 'objects';
-        let player, playerVelocity = new THREE.Vector3(), playerOnFloor = false;
-        const playerSpeed = 5.0, playerHeight = 1.8;
+        let isPlayMode = false;
+        let player, playerVelocity = new THREE.Vector3();
+        const playerSpeed = 5.0;
         const keyStates = {};
         const clock = new THREE.Clock();
-        
         let collisionObjects = [];
-        let terrainObjects = [];
-        let selectedTerrain = null;
 
-        let currentTool = { type: 'wall_brick', size: [1, 2.5, 0.2] };
+        let currentTool = { category: 'floors', type: 'grass' };
         let currentRotation = 0;
         const gridSize = 1;
-        const levelData = { objects: [], terrain: [] };
-        
-        const textureCache = {};
-        const textureLoader = new THREE.TextureLoader();
+        const levelData = { items: [] };
 
         const joystick = { active: false, center: new THREE.Vector2(), current: new THREE.Vector2(), vector: new THREE.Vector2() };
-
-        const OBJECT_DEFINITIONS = {
-            wall_brick: { size: [1, 2.5, 0.2] },
-            crate: { size: [0.8, 0.8, 0.8] },
-            barrel: { size: [0.4, 0.8, 0.4], geometry: 'cylinder' }
+        
+        const textureLoader = new THREE.TextureLoader();
+        const textureCache = {};
+        const HF_REPO_URL = `https://huggingface.co/datasets/{{ REPO_ID }}/resolve/main/`;
+
+        const ASSETS = {
+            floors: {
+                grass: { color: 0x55902f, size: [gridSize, 0.1, gridSize] },
+                concrete: { color: 0x888888, size: [gridSize, 0.1, gridSize] },
+            },
+            walls: {
+                brick: { color: 0xb55a44, size: [gridSize, 2.5, 0.2], solid: true },
+                concrete: { color: 0xc2c2c2, size: [gridSize, 2.5, 0.2], solid: true },
+                door: { color: 0x8B4513, size: [gridSize, 2.2, 0.2], solid: false },
+            },
+            objects: {
+                crate: { color: 0x966F33, size: [gridSize * 0.8, gridSize * 0.8, gridSize * 0.8], solid: true },
+                barrel: { color: 0x595959, size: [gridSize * 0.4, gridSize * 0.8, 0], geometry: 'cylinder', solid: true },
+            },
+            terrain: {
+                ground: { color: 0x9b7653, size: [gridSize, 0.1, gridSize], isScalable: true }
+            }
         };
-        const TEXTURES = {{ textures|tojson }};
 
-        function getTexture(textureName) {
-            if (textureCache[textureName]) return textureCache[textureName];
-            const texture = textureLoader.load(`/api/texture/${textureName}`);
-            texture.wrapS = THREE.RepeatWrapping;
-            texture.wrapT = THREE.RepeatWrapping;
-            texture.magFilter = THREE.NearestFilter;
-            textureCache[textureName] = texture;
-            return texture;
-        }
+        const instancedMeshes = {};
 
         function init() {
             scene = new THREE.Scene();
             scene.background = new THREE.Color(0x1d2935);
             scene.fog = new THREE.Fog(0x1d2935, 50, 150);
             
-            const aspect = window.innerWidth / window.innerHeight;
-            const frustumSize = 30;
-            camera = new THREE.OrthographicCamera(frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 1, 1000);
-            camera.position.set(50, 50, 50);
-            camera.lookAt(0, 0, 0);
+            camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000);
+            camera.position.set(25, 30, 25);
 
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
@@ -281,26 +280,14 @@ EDITOR_TEMPLATE = '''
 
             orbitControls = new OrbitControls(camera, renderer.domElement);
             orbitControls.enableDamping = true;
-            orbitControls.maxZoom = 5;
-            orbitControls.minZoom = 0.2;
-            
-            transformControls = new TransformControls(camera, renderer.domElement);
-            transformControls.addEventListener('dragging-changed', event => { orbitControls.enabled = !event.value; });
-            transformControls.addEventListener('objectChange', () => {
-                if (selectedTerrain) {
-                    const terrainData = levelData.terrain.find(t => t.id === selectedTerrain.userData.id);
-                    if(terrainData) {
-                        terrainData.position = selectedTerrain.position.toArray();
-                        terrainData.rotation = selectedTerrain.rotation.toArray().slice(0, 3);
-                    }
-                }
-            });
-            scene.add(transformControls);
+            orbitControls.maxPolarAngle = Math.PI / 2.1;
+            orbitControls.minDistance = 10;
+            orbitControls.maxDistance = 100;
 
-            const hemiLight = new THREE.HemisphereLight(0xB1E1FF, 0xB97A20, 0.6);
+            const hemiLight = new THREE.HemisphereLight(0xB1E1FF, 0xB97A20, 0.8);
             scene.add(hemiLight);
 
-            const dirLight = new THREE.DirectionalLight(0xffffff, 1.2);
+            const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
             dirLight.position.set(-30, 50, -30);
             dirLight.castShadow = true;
             dirLight.shadow.mapSize.width = 2048;
@@ -311,7 +298,7 @@ EDITOR_TEMPLATE = '''
             dirLight.shadow.camera.bottom = -50;
             scene.add(dirLight);
 
-            const gridHelper = new THREE.GridHelper(100, 100, 0x444444, 0x444444);
+            gridHelper = new THREE.GridHelper(100, 100, 0x444444, 0x444444);
             scene.add(gridHelper);
 
             const planeGeo = new THREE.PlaneGeometry(100, 100);
@@ -325,55 +312,79 @@ EDITOR_TEMPLATE = '''
             initUI();
             initPlayer();
             initJoystick();
+            initInstancedMeshes();
             
             window.addEventListener('resize', onWindowResize);
             renderer.domElement.addEventListener('pointermove', onPointerMove);
             renderer.domElement.addEventListener('pointerdown', onPointerDown);
-            window.addEventListener('keydown', e => { keyStates[e.code] = true; handleKeyDown(e); });
+            window.addEventListener('keydown', handleKeyDown);
             window.addEventListener('keyup', e => { keyStates[e.code] = false; });
             renderer.domElement.addEventListener('wheel', e => {
-                if(editMode === 'objects' && !isPlayMode) {
-                    e.preventDefault();
-                    rotatePreview(e.deltaY > 0 ? 1 : -1);
-                }
+                if(!isPlayMode) { e.preventDefault(); rotatePreview(e.deltaY > 0 ? 1 : -1); }
             }, { passive: false });
             renderer.domElement.addEventListener('contextmenu', e => e.preventDefault());
 
             animate();
         }
 
+        function getTexture(textureName) {
+            if (!textureName) return null;
+            if (textureCache[textureName]) return textureCache[textureName];
+            
+            const textureUrl = `${HF_REPO_URL}pz_textures/${textureName}`;
+            const texture = textureLoader.load(textureUrl);
+            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+            textureCache[textureName] = texture;
+            return texture;
+        }
+
+        function initInstancedMeshes() {
+            const MAX_COUNT = 10000;
+            for (const category in ASSETS) {
+                for (const type in ASSETS[category]) {
+                    const id = `${category}-${type}`;
+                    const asset = ASSETS[category][type];
+                    let geometry;
+                    if (asset.geometry === 'cylinder') {
+                        geometry = new THREE.CylinderGeometry(asset.size[0], asset.size[0], asset.size[1], 16);
+                    } else {
+                        geometry = new THREE.BoxGeometry(...asset.size);
+                    }
+                    const material = new THREE.MeshStandardMaterial({ color: asset.color });
+                    const mesh = new THREE.InstancedMesh(geometry, material, MAX_COUNT);
+                    mesh.castShadow = true;
+                    mesh.receiveShadow = true;
+                    mesh.count = 0;
+                    instancedMeshes[id] = { mesh, material, geometry };
+                    scene.add(mesh);
+                }
+            }
+        }
+
         function initPlayer() {
-            const playerGeo = new THREE.CapsuleGeometry(0.3, playerHeight - 0.6);
-            playerGeo.translate(0, (playerHeight - 0.6) / 2 + 0.3, 0);
-            const playerMat = new THREE.MeshStandardMaterial({ color: 0x00aaff, visible: false });
+            const playerGeo = new THREE.CylinderGeometry(0.25, 0.25, 1.5, 16);
+            playerGeo.translate(0, 0.75, 0);
+            const playerMat = new THREE.MeshStandardMaterial({ color: 0x00aaff });
             player = new THREE.Mesh(playerGeo, playerMat);
+            player.castShadow = true;
             player.visible = false;
             scene.add(player);
         }
 
         function initUI() {
             const toolSelector = document.getElementById('tool-selector');
-            for (const type in OBJECT_DEFINITIONS) {
-                const item = document.createElement('div');
-                item.className = 'tool-item';
-                item.textContent = type;
-                item.dataset.type = type;
-                item.addEventListener('click', () => selectTool(type));
-                toolSelector.appendChild(item);
+            for (const category in ASSETS) {
+                for (const type in ASSETS[category]) {
+                    const item = document.createElement('div');
+                    item.className = 'tool-item';
+                    item.textContent = `${category.slice(0,1).toUpperCase()}: ${type}`;
+                    item.dataset.category = category;
+                    item.dataset.type = type;
+                    item.addEventListener('click', () => selectTool(category, type));
+                    toolSelector.appendChild(item);
+                }
             }
-
-            const objectTextureSelect = document.getElementById('object-texture-select');
-            const terrainTextureSelect = document.getElementById('terrain-texture-select');
-            TEXTURES.forEach(tex => {
-                const option1 = document.createElement('option');
-                option1.value = option1.textContent = tex;
-                objectTextureSelect.appendChild(option1);
-                const option2 = document.createElement('option');
-                option2.value = option2.textContent = tex;
-                terrainTextureSelect.appendChild(option2);
-            });
-            
-            selectTool(Object.keys(OBJECT_DEFINITIONS)[0]);
+            selectTool('floors', 'grass');
 
             document.getElementById('save-project').addEventListener('click', saveProject);
             document.getElementById('load-project').addEventListener('click', loadProject);
@@ -381,23 +392,10 @@ EDITOR_TEMPLATE = '''
             document.getElementById('clear-level').addEventListener('click', clearLevel);
             document.getElementById('burger-menu').addEventListener('click', () => document.getElementById('ui-panel').classList.toggle('open'));
             document.getElementById('project-list').addEventListener('change', e => document.getElementById('project-name').value = e.target.value);
-            
-            document.getElementById('mode-objects').addEventListener('click', () => setEditMode('objects'));
-            document.getElementById('mode-terrain').addEventListener('click', () => setEditMode('terrain'));
-
-            document.getElementById('create-terrain').addEventListener('click', createTerrain);
-            document.getElementById('delete-terrain').addEventListener('click', deleteSelectedTerrain);
-
-            document.getElementById('blocker').addEventListener('pointerdown', () => {
-                if (isPlayMode) {
-                    document.body.requestPointerLock();
-                }
-            });
-            document.addEventListener('pointerlockchange', () => {
-                if (document.pointerLockElement === document.body) {
-                    blocker.style.display = 'none';
-                } else {
-                    if (isPlayMode) blocker.style.display = 'flex';
+            document.getElementById('upload-texture-btn').addEventListener('click', uploadTexture);
+            document.getElementById('blocker').addEventListener('click', () => {
+                if(isPlayMode) {
+                    document.getElementById('blocker').style.display = 'none';
                 }
             });
         }
@@ -408,16 +406,14 @@ EDITOR_TEMPLATE = '''
             const maxRadius = joystickContainer.clientWidth / 2;
 
             function onTouchStart(event) {
-                event.preventDefault();
+                if (!isPlayMode) return;
                 const touch = event.touches[0];
                 joystick.active = true;
                 joystick.center.set(touch.clientX, touch.clientY);
-                joystickContainer.style.left = `${touch.clientX - maxRadius}px`;
-                joystickContainer.style.top = `${touch.clientY - maxRadius}px`;
             }
             function onTouchMove(event) {
+                if (!isPlayMode || !joystick.active) return;
                 event.preventDefault();
-                if (!joystick.active) return;
                 const touch = event.touches[0];
                 joystick.current.set(touch.clientX, touch.clientY);
                 joystick.vector.copy(joystick.current).sub(joystick.center);
@@ -429,245 +425,197 @@ EDITOR_TEMPLATE = '''
                 joystick.vector.set(0, 0);
                 joystickHandle.style.transform = 'translate(0, 0)';
             }
-            joystickContainer.addEventListener('touchstart', onTouchStart, { passive: false });
-            window.addEventListener('touchmove', onTouchMove, { passive: false });
-            window.addEventListener('touchend', onTouchEnd);
+            renderer.domElement.addEventListener('touchstart', onTouchStart, { passive: false });
+            renderer.domElement.addEventListener('touchmove', onTouchMove, { passive: false });
+            renderer.domElement.addEventListener('touchend', onTouchEnd, { passive: false });
         }
         
-        function setEditMode(mode) {
-            editMode = mode;
-            transformControls.detach();
-            selectedTerrain = null;
-            document.getElementById('objects-panel').style.display = mode === 'objects' ? 'block' : 'none';
-            document.getElementById('terrain-panel').style.display = mode === 'terrain' ? 'block' : 'none';
-            document.getElementById('mode-objects').classList.toggle('active', mode === 'objects');
-            document.getElementById('mode-terrain').classList.toggle('active', mode === 'terrain');
-            previewMesh.visible = mode === 'objects';
-        }
-
-        function selectTool(type) {
-            const definition = OBJECT_DEFINITIONS[type];
-            if (!definition) return;
-            currentTool = { type, size: definition.size };
+        function selectTool(category, type) {
+            currentTool = { category, type };
             document.querySelectorAll('.tool-item').forEach(el => el.classList.remove('active'));
-            const activeEl = document.querySelector(`.tool-item[data-type="${type}"]`);
-            if (activeEl) activeEl.classList.add('active');
+            document.querySelector(`.tool-item[data-category="${category}"][data-type="${type}"]`).classList.add('active');
 
             if (previewMesh) scene.remove(previewMesh);
+            const asset = ASSETS[category][type];
             let geometry;
-            if(definition.geometry === 'cylinder') {
-                geometry = new THREE.CylinderGeometry(definition.size[0], definition.size[0], definition.size[1], 16);
+            if (asset.geometry === 'cylinder') {
+                geometry = new THREE.CylinderGeometry(asset.size[0], asset.size[0], asset.size[1], 16);
             } else {
-                geometry = new THREE.BoxGeometry(...definition.size);
+                let w = asset.isScalable ? parseFloat(document.getElementById('terrain-width').value) : asset.size[0];
+                let d = asset.isScalable ? parseFloat(document.getElementById('terrain-depth').value) : asset.size[2];
+                geometry = new THREE.BoxGeometry(w, asset.size[1], d);
             }
-            const material = new THREE.MeshBasicMaterial({ color: 0x00aaff, transparent: true, opacity: 0.6, wireframe: true });
+            
+            const material = new THREE.MeshBasicMaterial({ color: asset.color, transparent: true, opacity: 0.6 });
             previewMesh = new THREE.Mesh(geometry, material);
             scene.add(previewMesh);
-            setEditMode('objects');
+            updateToolPropertiesPanel();
+        }
+
+        function updateToolPropertiesPanel() {
+            const asset = ASSETS[currentTool.category][currentTool.type];
+            document.getElementById('prop-terrain-size').style.display = asset.isScalable ? 'block' : 'none';
         }
 
         function onWindowResize() {
-            const aspect = window.innerWidth / window.innerHeight;
-            const frustumSize = 30;
-            camera.left = frustumSize * aspect / -2;
-            camera.right = frustumSize * aspect / 2;
-            camera.top = frustumSize / 2;
-            camera.bottom = frustumSize / -2;
+            camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         }
 
         function onPointerMove(event) {
-            if (isPlayMode || editMode !== 'objects') return;
-            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-        }
-
-        function handleKeyDown(event) {
-            if (isPlayMode) return;
-            if (event.code === 'KeyR' && editMode === 'objects') { rotatePreview(1); }
-            if (event.code === 'KeyG' && editMode === 'terrain') { transformControls.setMode("translate"); }
-            if (event.code === 'KeyR' && editMode === 'terrain') { transformControls.setMode("rotate"); }
-            if (event.code === 'Delete' && selectedTerrain) { deleteSelectedTerrain(); }
-        }
-        
-        function onPointerDown(event) {
             if (isPlayMode) return;
             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
             mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
             raycaster.setFromCamera(mouse, camera);
-
-            if (editMode === 'objects') {
-                if (event.target.tagName !== 'CANVAS') return;
-                const intersects = raycaster.intersectObject(placementPlane);
-                if (intersects.length > 0) {
-                    const isRemoving = event.shiftKey;
-                    if (event.button === 2) { rotatePreview(1); return; }
-                    if (event.button !== 0) return;
-                    
-                    const pos = previewMesh.position;
-                    if (isRemoving) {
-                        removeObjectAt(pos);
-                    } else {
-                        addObject();
-                    }
-                    buildLevelFromData();
-                }
-            } else if (editMode === 'terrain') {
-                const intersects = raycaster.intersectObjects(terrainObjects);
-                if (intersects.length > 0 && intersects[0].object !== selectedTerrain) {
-                    selectedTerrain = intersects[0].object;
-                    transformControls.attach(selectedTerrain);
-                } else if (intersects.length === 0) {
-                    selectedTerrain = null;
-                    transformControls.detach();
-                }
-            }
-        }
-        
-        function updatePreviewMesh() {
-            if (isPlayMode || editMode !== 'objects') {
-                previewMesh.visible = false;
-                return;
-            }
-            raycaster.setFromCamera(mouse, camera);
             const intersects = raycaster.intersectObject(placementPlane);
             if (intersects.length > 0) {
                 const point = intersects[0].point;
                 const gridX = Math.round(point.x / gridSize);
                 const gridZ = Math.round(point.z / gridSize);
-                previewMesh.position.set(gridX * gridSize, currentTool.size[1] / 2, gridZ * gridSize);
+                
+                const asset = ASSETS[currentTool.category][currentTool.type];
+                let yPos = asset.size[1] / 2;
+                if (currentTool.category === 'walls') yPos = asset.size[1] / 2;
+                previewMesh.position.set(gridX * gridSize, yPos, gridZ * gridSize);
                 previewMesh.visible = true;
             } else {
                 previewMesh.visible = false;
             }
         }
         
-        function rotatePreview(direction) {
-            currentRotation += (Math.PI / 2) * direction;
-            previewMesh.rotation.y = currentRotation;
+        function handleKeyDown(event) {
+            keyStates[event.code] = true;
+            if (isPlayMode) {
+                if (event.code === 'Escape') togglePlayMode();
+            } else {
+                if (event.code === 'KeyR') rotatePreview(1);
+            }
         }
+        
+        function onPointerDown(event) {
+            if (isPlayMode || !previewMesh.visible) return;
+            if (event.target !== renderer.domElement) return;
 
-        function addObject() {
-            const pos = previewMesh.position;
-            const key = `${pos.x},${pos.y},${pos.z}`;
+            const isRemoving = event.shiftKey;
             
-            levelData.objects = levelData.objects.filter(obj => `${obj.position[0]},${obj.position[1]},${obj.position[2]}` !== key);
+            if (event.button === 2) { rotatePreview(1); return; }
+            if (event.button !== 0) return;
             
-            const newObject = {
-                id: THREE.MathUtils.generateUUID(),
-                type: currentTool.type,
-                position: pos.toArray(),
-                rotation: previewMesh.rotation.toArray().slice(0, 3),
-                texture: document.getElementById('object-texture-select').value,
-                collidable: document.getElementById('object-collidable').checked,
-                passable: document.getElementById('object-passable').checked
-            };
-            levelData.objects.push(newObject);
-        }
+            const pos = previewMesh.position;
+            const key = `${Math.round(pos.x)},${Math.round(pos.z)}`;
 
-        function removeObjectAt(pos) {
-            const key = `${pos.x},${pos.y},${pos.z}`;
-            levelData.objects = levelData.objects.filter(obj => `${obj.position[0]},${obj.position[1]},${obj.position[2]}` !== key);
+            if (isRemoving) {
+                removeItemAt(pos);
+            } else {
+                addItem(pos, currentRotation);
+            }
+            updateLevelGeometry();
         }
         
-        function createTerrain() {
-            const width = parseFloat(document.getElementById('terrain-width').value);
-            const height = parseFloat(document.getElementById('terrain-height').value);
-            const texture = document.getElementById('terrain-texture-select').value;
-            if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0 || !texture) {
-                alert("Неверные параметры для ландшафта."); return;
-            }
-            const terrainData = {
+        function rotatePreview(direction) {
+            currentRotation = (currentRotation + (Math.PI / 2) * direction) % (Math.PI * 2);
+            previewMesh.rotation.y = currentRotation;
+        }
+
+        function addItem(pos, rotation) {
+            const { category, type } = currentTool;
+            const asset = ASSETS[category][type];
+            
+            const itemData = {
                 id: THREE.MathUtils.generateUUID(),
-                size: [width, height],
-                position: [0, 0, 0],
-                rotation: [-Math.PI / 2, 0, 0],
-                texture: texture
+                category,
+                type,
+                x: pos.x, y: pos.y, z: pos.z,
+                rot: rotation,
+                texture: document.getElementById('texture-select').value || null
             };
-            levelData.terrain.push(terrainData);
-            buildLevelFromData();
-        }
 
-        function deleteSelectedTerrain() {
-            if (!selectedTerrain) return;
-            levelData.terrain = levelData.terrain.filter(t => t.id !== selectedTerrain.userData.id);
-            transformControls.detach();
-            selectedTerrain = null;
-            buildLevelFromData();
+            if (asset.isScalable) {
+                itemData.width = parseFloat(document.getElementById('terrain-width').value);
+                itemData.depth = parseFloat(document.getElementById('terrain-depth').value);
+            }
+
+            removeItemAt(pos);
+            levelData.items.push(itemData);
         }
 
-        function clearScene() {
-            while(scene.children.length > 0){ 
-                const obj = scene.children[0];
-                if (obj.isLight || obj.isCamera || obj.isGridHelper || obj === placementPlane || obj === transformControls || obj === player || obj === previewMesh) {
-                     scene.children.splice(0, 1);
-                     continue;
-                }
-                if(obj.geometry) obj.geometry.dispose();
-                if(obj.material) {
-                    if (Array.isArray(obj.material)) {
-                        obj.material.forEach(mat => mat.dispose());
-                    } else {
-                        obj.material.dispose();
-                    }
-                }
-                scene.remove(obj); 
-            }
+        function removeItemAt(pos) {
+            levelData.items = levelData.items.filter(item => {
+                return !(item.x === pos.x && item.z === pos.z);
+            });
         }
         
-        function buildLevelFromData() {
-            clearScene();
+        function updateLevelGeometry() {
+            const dummy = new THREE.Object3D();
             collisionObjects = [];
-            terrainObjects = [];
 
-            levelData.objects.forEach(objData => {
-                const definition = OBJECT_DEFINITIONS[objData.type];
-                if (!definition) return;
+            Object.values(instancedMeshes).forEach(im => {
+                im.mesh.count = 0;
+                im.mesh.instanceMatrix.needsUpdate = true;
+            });
+            const materialCache = {};
+
+            for (const item of levelData.items) {
+                const asset = ASSETS[item.category]?.[item.type];
+                if (!asset) continue;
+
+                const id = `${item.category}-${item.type}`;
+                const instanced = instancedMeshes[id];
+                if (!instanced) continue;
+
+                dummy.position.set(item.x, item.y, item.z);
+                dummy.rotation.set(0, item.rot, 0);
+
+                let w = item.width || asset.size[0];
+                let h = asset.size[1];
+                let d = item.depth || asset.size[2];
+                dummy.scale.set(w / asset.size[0], 1, d / asset.size[2]);
+                
+                dummy.updateMatrix();
                 
-                let geometry;
-                 if(definition.geometry === 'cylinder') {
-                    geometry = new THREE.CylinderGeometry(definition.size[0], definition.size[0], definition.size[1], 16);
+                const matrixIndex = instanced.mesh.count;
+                instanced.mesh.setMatrixAt(matrixIndex, dummy.matrix);
+
+                const matKey = item.texture || 'default';
+                if (!materialCache[matKey]) {
+                    materialCache[matKey] = instanced.material.clone();
+                    if(item.texture) {
+                        const texture = getTexture(item.texture);
+                        materialCache[matKey].map = texture;
+                        texture.repeat.set(w, d);
+                        texture.needsUpdate = true;
+                    }
+                }
+
+                if (!instanced.mesh.material.isArray) {
+                    instanced.mesh.material = [];
+                }
+
+                const matIndex = instanced.mesh.material.findIndex(m => m.uuid === materialCache[matKey].uuid);
+                if (matIndex === -1) {
+                    instanced.mesh.material.push(materialCache[matKey]);
+                    instanced.mesh.geometry.addGroup(matrixIndex, 1, instanced.mesh.material.length - 1);
                 } else {
-                    geometry = new THREE.BoxGeometry(...definition.size);
+                    instanced.mesh.geometry.addGroup(matrixIndex, 1, matIndex);
                 }
-                const material = new THREE.MeshStandardMaterial({ map: getTexture(objData.texture) });
-                const mesh = new THREE.Mesh(geometry, material);
-                mesh.position.fromArray(objData.position);
-                mesh.rotation.fromArray(objData.rotation);
-                mesh.castShadow = true;
-                mesh.receiveShadow = true;
-                scene.add(mesh);
-
-                if (objData.collidable && !objData.passable) {
-                    mesh.updateMatrixWorld();
-                    const box = new THREE.Box3().setFromObject(mesh);
+                
+                instanced.mesh.count++;
+                
+                if (asset.solid) {
+                    const box = new THREE.Box3();
+                    const collisionGeo = new THREE.BoxGeometry(w, h, d);
+                    box.copy(collisionGeo.boundingBox).applyMatrix4(dummy.matrix);
                     collisionObjects.push(box);
                 }
-            });
-
-            levelData.terrain.forEach(terrainData => {
-                const geometry = new THREE.PlaneGeometry(terrainData.size[0], terrainData.size[1]);
-                const texture = getTexture(terrainData.texture);
-                texture.repeat.set(terrainData.size[0] / 2, terrainData.size[1] / 2);
-                const material = new THREE.MeshStandardMaterial({ map: texture });
-                const mesh = new THREE.Mesh(geometry, material);
-                mesh.position.fromArray(terrainData.position);
-                mesh.rotation.fromArray(terrainData.rotation);
-                mesh.receiveShadow = true;
-                mesh.userData.id = terrainData.id;
-                scene.add(mesh);
-                terrainObjects.push(mesh);
-            });
+            }
+            Object.values(instancedMeshes).forEach(im => im.mesh.instanceMatrix.needsUpdate = true);
         }
         
         function clearLevel() {
             if (!confirm("Вы уверены, что хотите полностью очистить уровень?")) return;
-            levelData.objects = [];
-            levelData.terrain = [];
-            transformControls.detach();
-            selectedTerrain = null;
-            buildLevelFromData();
+            levelData.items = [];
+            updateLevelGeometry();
         }
 
         function togglePlayMode() {
@@ -678,32 +626,23 @@ EDITOR_TEMPLATE = '''
             
             if (isPlayMode) {
                 uiContainer.style.display = 'none';
+                gridHelper.visible = false;
                 previewMesh.visible = false;
-                transformControls.detach();
                 orbitControls.enabled = false;
                 player.visible = true;
-                player.position.set(0, playerHeight, 0);
+                player.position.set(0, 1, 0);
                 blocker.style.display = 'flex';
                 joystickContainer.style.display = 'block';
-                camera.isPerspectiveCamera = true;
-                camera.fov = 75;
-                camera.aspect = window.innerWidth / window.innerHeight;
-                camera.near = 0.1;
-                camera.far = 1000;
-                camera.updateProjectionMatrix();
-
             } else {
-                if (document.pointerLockElement === document.body) document.exitPointerLock();
                 uiContainer.style.display = 'flex';
-                setEditMode(editMode);
+                gridHelper.visible = true;
+                previewMesh.visible = true;
                 orbitControls.enabled = true;
                 player.visible = false;
                 blocker.style.display = 'none';
                 joystickContainer.style.display = 'none';
-                camera.isOrthographicCamera = true;
-                onWindowResize();
-                camera.position.set(50, 50, 50);
-                camera.lookAt(0, 0, 0);
+                camera.position.set(25, 30, 25);
+                orbitControls.target.set(0, 0, 0);
             }
         }
 
@@ -741,9 +680,9 @@ EDITOR_TEMPLATE = '''
                 const result = await response.json();
                 if (!response.ok) throw new Error('Проект не найден или ошибка загрузки.');
                 
-                clearLevel();
+                levelData.items = [];
                 Object.assign(levelData, result.data);
-                buildLevelFromData();
+                updateLevelGeometry();
                 document.getElementById('project-name').value = projectName;
 
             } catch (error) {
@@ -753,83 +692,68 @@ EDITOR_TEMPLATE = '''
             }
         }
 
-        const moveDirection = new THREE.Vector3();
-        const playerCollider = new THREE.Box3();
-        const playerCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-        scene.add(playerCamera);
+        async function uploadTexture() {
+            const fileInput = document.getElementById('texture-file-input');
+            const file = fileInput.files[0];
+            if (!file) { alert('Пожалуйста, выберите файл текстуры.'); return; }
 
+            const formData = new FormData();
+            formData.append('texture', file);
+            showSpinner(true);
+            try {
+                const response = await fetch('/api/texture', { method: 'POST', body: formData });
+                const result = await response.json();
+                if (!response.ok) throw new Error(result.error);
+                
+                alert(`Текстура ${result.filename} успешно загружена.`);
+                const textureSelect = document.getElementById('texture-select');
+                const newOption = document.createElement('option');
+                newOption.value = newOption.textContent = result.filename;
+                textureSelect.appendChild(newOption);
+                fileInput.value = '';
+            } catch (error) {
+                alert(`Ошибка загрузки текстуры: ${error.message}`);
+            } finally {
+                showSpinner(false);
+            }
+        }
+
+        const moveDirection = new THREE.Vector3();
         function updatePlayer(deltaTime) {
-            if (document.pointerLockElement !== document.body && !joystick.active) return;
-            
             const speed = playerSpeed * deltaTime;
-            const cameraDirection = new THREE.Vector3();
-            playerCamera.getWorldDirection(cameraDirection);
-            cameraDirection.y = 0;
-            cameraDirection.normalize();
-
             moveDirection.set(0,0,0);
-            if (keyStates['KeyW'] || keyStates['ArrowUp']) moveDirection.add(cameraDirection);
-            if (keyStates['KeyS'] || keyStates['ArrowDown']) moveDirection.sub(cameraDirection);
-            
-            const rightDirection = new THREE.Vector3().crossVectors(playerCamera.up, cameraDirection).negate();
-            if (keyStates['KeyA'] || keyStates['ArrowLeft']) moveDirection.sub(rightDirection);
-            if (keyStates['KeyD'] || keyStates['ArrowRight']) moveDirection.add(rightDirection);
+            if (keyStates['KeyW'] || keyStates['ArrowUp']) moveDirection.z -= 1;
+            if (keyStates['KeyS'] || keyStates['ArrowDown']) moveDirection.z += 1;
+            if (keyStates['KeyA'] || keyStates['ArrowLeft']) moveDirection.x -= 1;
+            if (keyStates['KeyD'] || keyStates['ArrowRight']) moveDirection.x += 1;
 
             if (joystick.active) {
                 const maxRadius = 60;
-                const joystickForward = cameraDirection.clone().multiplyScalar(joystick.vector.y / maxRadius);
-                const joystickRight = rightDirection.clone().multiplyScalar(joystick.vector.x / maxRadius);
-                moveDirection.add(joystickForward).add(joystickRight);
+                moveDirection.x += joystick.vector.x / maxRadius;
+                moveDirection.z += joystick.vector.y / maxRadius;
             }
 
-            if (moveDirection.lengthSq() > 0) {
-                 moveDirection.normalize().multiplyScalar(speed);
-                 
-                 const oldPosition = player.position.clone();
-                 
-                 player.position.x += moveDirection.x;
-                 playerCollider.setFromObject(player);
-                 for (const box of collisionObjects) {
-                     if (playerCollider.intersectsBox(box)) {
-                         player.position.x = oldPosition.x;
-                         break;
-                     }
-                 }
-                 
-                 player.position.z += moveDirection.z;
-                 playerCollider.setFromObject(player);
-                 for (const box of collisionObjects) {
-                     if (playerCollider.intersectsBox(box)) {
-                         player.position.z = oldPosition.z;
-                         break;
-                     }
-                 }
-            }
+            if (moveDirection.lengthSq() === 0) return;
+            moveDirection.normalize().multiplyScalar(speed);
             
-            player.position.y -= 9.8 * deltaTime;
-            playerCollider.setFromObject(player);
-            let onGround = false;
-            for(const terrain of terrainObjects) {
-                const terrainBox = new THREE.Box3().setFromObject(terrain);
-                if (playerCollider.intersectsBox(terrainBox)) {
-                     player.position.y = terrain.position.y + playerHeight / 2 - 0.5;
-                     onGround = true;
-                     break;
-                }
+            const playerBox = new THREE.Box3().setFromObject(player);
+            
+            const intendedXPos = player.position.clone().add(new THREE.Vector3(moveDirection.x, 0, 0));
+            const playerBoxX = playerBox.clone().translate(new THREE.Vector3(moveDirection.x, 0, 0));
+            if (!collisionObjects.some(box => playerBoxX.intersectsBox(box))) {
+                player.position.x = intendedXPos.x;
             }
 
-            if (keyStates['Space'] && onGround) {
-                player.position.y += 3 * deltaTime;
+            const intendedZPos = player.position.clone().add(new THREE.Vector3(0, 0, moveDirection.z));
+            const playerBoxZ = playerBox.clone().translate(new THREE.Vector3(0, 0, moveDirection.z));
+            if (!collisionObjects.some(box => playerBoxZ.intersectsBox(box))) {
+                player.position.z = intendedZPos.z;
             }
 
-            playerCamera.position.copy(player.position);
-            playerCamera.position.y += playerHeight / 2 - 0.2;
-            
-            if (document.pointerLockElement === document.body) {
-                playerCamera.rotation.y -= (event.movementX || 0) * 0.002;
-                playerCamera.rotation.x -= (event.movementY || 0) * 0.002;
-                playerCamera.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, playerCamera.rotation.x));
-            }
+            camera.position.x = player.position.x + 15;
+            camera.position.z = player.position.z + 15;
+            camera.position.y = 20;
+            camera.lookAt(player.position);
         }
 
         function showSpinner(show) {
@@ -840,14 +764,12 @@ EDITOR_TEMPLATE = '''
             requestAnimationFrame(animate);
             const deltaTime = clock.getDelta();
             
-            if (isPlayMode) {
+            if (isPlayMode && document.getElementById('blocker').style.display === 'none') {
                 updatePlayer(deltaTime);
-                renderer.render(scene, playerCamera);
-            } else {
-                updatePreviewMesh();
+            } else if (!isPlayMode) {
                 orbitControls.update();
-                renderer.render(scene, camera);
             }
+            renderer.render(scene, camera);
         }
 
         init();
@@ -858,9 +780,9 @@ EDITOR_TEMPLATE = '''
 
 @app.route('/')
 def editor():
-    projects = list_projects_from_hf()
-    textures = list_textures_from_hf()
-    return render_template_string(EDITOR_TEMPLATE, projects=projects, textures=textures)
+    projects = [p.replace('.json', '') for p in list_files_from_hf('pz_projects/')]
+    textures = list_files_from_hf('pz_textures/')
+    return render_template_string(EDITOR_TEMPLATE, projects=projects, textures=textures, REPO_ID=REPO_ID)
 
 @app.route('/api/project', methods=['POST'])
 def save_project_api():
@@ -870,13 +792,18 @@ def save_project_api():
         return jsonify({"error": "Project name is required"}), 400
 
     local_filename = f"{uuid4().hex}.json"
-    with open(local_filename, 'w', encoding='utf-8') as f:
+    temp_path = os.path.join(app.config['UPLOAD_FOLDER'], local_filename)
+    with open(temp_path, 'w', encoding='utf-8') as f:
         json.dump(data, f)
     
-    success = upload_project_to_hf(local_filename, project_name)
-
-    if os.path.exists(local_filename):
-        os.remove(local_filename)
+    success = upload_to_hf(
+        temp_path, 
+        f"pz_projects/{project_name}.json",
+        f"Save PZ project {project_name}"
+    )
+
+    if os.path.exists(temp_path):
+        os.remove(temp_path)
         
     if success:
         return jsonify({"message": "Project saved successfully"}), 201
@@ -891,29 +818,33 @@ def load_project_api(project_name):
     else:
         return jsonify({"error": "Project not found or failed to download"}), 404
 
-@app.route('/api/textures')
-def get_textures_list():
-    textures = list_textures_from_hf()
-    return jsonify(textures)
-
-@app.route('/api/texture/<filename>')
-def get_texture_file(filename):
-    api, token = get_api()
-    if not api:
-        return "Hugging Face token not configured", 500
-    try:
-        file_path = hf_hub_download(
-            repo_id=REPO_ID,
-            filename=f"pz_textures/{filename}",
-            repo_type="dataset",
-            token=token,
-            force_download=True
+@app.route('/api/texture', methods=['POST'])
+def upload_texture_api():
+    if 'texture' not in request.files:
+        return jsonify({"error": "No texture file part"}), 400
+    file = request.files['texture']
+    if file.filename == '':
+        return jsonify({"error": "No selected file"}), 400
+    if file:
+        filename = secure_filename(file.filename)
+        temp_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(temp_path)
+
+        success = upload_to_hf(
+            temp_path,
+            f"pz_textures/{filename}",
+            f"Upload texture {filename}"
         )
-        return send_file(file_path)
-    except HfHubHTTPError:
-        return "Texture not found", 404
-    except Exception as e:
-        return f"Error downloading texture: {e}", 500
+        
+        if os.path.exists(temp_path):
+            os.remove(temp_path)
+
+        if success:
+            return jsonify({"message": "Texture uploaded", "filename": filename}), 201
+        else:
+            return jsonify({"error": "Failed to upload texture"}), 500
+    return jsonify({"error": "File error"}), 500
+
 
 if __name__ == '__main__':
     port = int(os.environ.get('PORT', 7860))