Update app.py

app.py

@@ -4,71 +4,74 @@ import time
 from datetime import datetime
 from uuid import uuid4
 
-from flask import Flask, render_template_string, request, jsonify
-from huggingface_hub import HfApi, hf_hub_download
+from flask import Flask, render_template_string, request, jsonify, send_from_directory
+from huggingface_hub import HfApi, hf_hub_download, list_files_info
 from huggingface_hub.utils import RepositoryNotFoundError, HfHubHTTPError
 from dotenv import load_dotenv
+from werkzeug.utils import secure_filename
 
 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 upload_project_to_hf(local_path, project_name):
-    if not HF_TOKEN_WRITE:
+def get_api_client():
+    token = HF_TOKEN_WRITE if HF_TOKEN_WRITE else HF_TOKEN_READ
+    if not token:
+        return None, None
+    return HfApi(token=token), token
+
+def upload_to_hf(local_path, path_in_repo, commit_message):
+    api, _ = get_api_client()
+    if not api or not HF_TOKEN_WRITE:
+        print("Write token not available. Upload skipped.")
         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):
-    token_to_use = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE
-    if not token_to_use:
+def download_from_hf(path_in_repo):
+    _, token = get_api_client()
+    if not token:
         return None
     try:
         local_path = hf_hub_download(
             repo_id=REPO_ID,
-            filename=f"pz_projects/{project_name}.json",
+            filename=path_in_repo,
             repo_type="dataset",
-            token=token_to_use,
+            token=token,
             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) as e:
+        return local_path
+    except (HfHubHTTPError, RepositoryNotFoundError):
         return None
-    except Exception as e:
+    except Exception:
         return None
 
-def list_projects_from_hf():
-    token_to_use = HF_TOKEN_READ if HF_TOKEN_READ else HF_TOKEN_WRITE
-    if not token_to_use:
+def list_files_from_hf(folder):
+    api, token = get_api_client()
+    if not api:
         return []
     try:
-        api = HfApi()
-        repo_info = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=token_to_use)
-        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)
+        files_info = list_files_info(repo_id=REPO_ID, repo_type="dataset", token=token, paths=[folder])
+        return sorted([os.path.basename(f.rfilename) for f in files_info if not f.rfilename.endswith('/.gitattributes')])
     except Exception:
         return []
 
@@ -84,44 +87,42 @@ 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.9); backdrop-filter: blur(5px); padding: 15px; border-right: 1px solid #444;
+            width: 350px; height: 100%; overflow-y: auto; box-sizing: border-box; transition: transform 0.3s ease-in-out;
+            transform: translateX(0); pointer-events: auto; display: flex; flex-direction: column;
         }
         .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"], select {
-            width: 100%; padding: 8px; box-sizing: border-box; background: #222; border: 1px solid #555; color: white; border-radius: 4px; margin-bottom: 5px;
+        input[type="text"], input[type="number"], select, input[type="file"] {
+            width: 100%; padding: 8px; box-sizing: border-box; background: #222; border: 1px solid #555; color: white; border-radius: 4px; margin-bottom: 10px;
         }
+        input[type="checkbox"] { margin-right: 5px; }
         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: 5px; 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; }
-        #tool-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; }
+        #tool-selector { display: flex; flex-direction: column; gap: 10px; max-height: 250px; overflow-y: auto; padding: 5px; border: 1px solid #333; border-radius: 4px; }
         .tool-item {
-            padding: 10px; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; text-align: center; cursor: pointer;
+            padding: 10px; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; text-align: left; 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: fixed; 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: 1001;
+        }
+        #modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; display: none; }
+        #asset-modal {
+            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #1e1e1e; padding: 20px;
+            border-radius: 8px; z-index: 1001; width: 90%; max-width: 400px; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
         }
         #burger-menu {
             position: absolute; top: 15px; left: 15px; z-index: 20; display: none; width: 30px; height: 22px; cursor: pointer; pointer-events: auto;
@@ -129,13 +130,13 @@ EDITOR_TEMPLATE = '''
         #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: fixed; 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); } }
         @media (max-width: 800px) {
-            #ui-panel { transform: translateX(-100%); padding-top: 60px; }
+            #ui-panel { transform: translateX(-100%); padding-top: 60px; width: 300px; }
             #ui-panel.open { transform: translateX(0); }
             #burger-menu { display: block; }
             #joystick-container { width: 100px; height: 100px; }
@@ -164,14 +165,20 @@ EDITOR_TEMPLATE = '''
                 <h3>Режим</h3>
                 <button id="play-mode-toggle" class="play-button">Играть</button>
             </div>
-            <div class="ui-group">
+             <div class="ui-group">
+                <h3>Текстуры</h3>
+                <input type="file" id="texture-upload" accept="image/*">
+                <button id="upload-texture-btn">Загрузить текстуру</button>
+            </div>
+            <div class="ui-group" style="flex: 1; display: flex; flex-direction: column;">
                 <h3>Инструменты</h3>
                 <div id="tool-selector"></div>
-                <p style="font-size: 0.8em; color: #888; margin-top: 10px;">
-                    ЛКМ: Разместить<br>
-                    ПКМ: Вращать / Двигать камеру<br>
-                    Shift + ЛКМ: Удалить<br>
-                    Колесо мыши: Приближение
+                <button id="add-asset-btn" style="margin-top: 10px;">Создать новый объект</button>
+                <p style="font-size: 0.8em; color: #888; margin-top: auto;">
+                    ЛКМ: Разместить/Выбрать<br>
+                    ПКМ / Колесо мыши: Вращать<br>
+                    Delete: Удалить выбранный<br>
+                    ESC: Снять выделение
                 </p>
                 <button id="clear-level" class="danger-button">Очистить уровень</button>
             </div>
@@ -180,77 +187,81 @@ EDITOR_TEMPLATE = '''
     <div id="loading-spinner"></div>
     <div id="joystick-container"><div id="joystick-handle"></div></div>
 
+    <div id="modal-backdrop">
+        <div id="asset-modal">
+            <h3>Создание объекта</h3>
+            <label for="asset-name">Имя:</label>
+            <input type="text" id="asset-name" placeholder="e.g., brick_wall">
+            <label for="asset-texture">Текстура:</label>
+            <select id="asset-texture">
+                {% for texture in textures %}
+                <option value="{{ texture }}">{{ texture }}</option>
+                {% endfor %}
+            </select>
+            <label for="asset-width">Ширина:</label>
+            <input type="number" id="asset-width" value="1">
+            <label for="asset-height">Высота:</label>
+            <input type="number" id="asset-height" value="2.5">
+            <label for="asset-depth">Глубина:</label>
+            <input type="number" id="asset-depth" value="0.2">
+            <label><input type="checkbox" id="asset-solid" checked> Непроходимый (solid)</label>
+            <div style="display: flex; gap: 10px; margin-top: 15px;">
+                <button id="save-asset-btn">Сохранить</button>
+                <button id="cancel-asset-btn" class="danger-button">Отмена</button>
+            </div>
+        </div>
+    </div>
+
     <script type="importmap">
     { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" } }
     </script>
     <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, raycaster, mouse, placementPlane, gridHelper, previewMesh;
+        let scene, camera, renderer, orbitControls, transformControls;
+        let raycaster, mouse, placementPlane, previewMesh;
         
         let isPlayMode = false;
         let player, playerVelocity = new THREE.Vector3();
         const playerSpeed = 5.0;
         const keyStates = {};
         const clock = new THREE.Clock();
-        let wallBBoxes = [];
+        let collisionBBoxes = [];
 
-        let currentTool = { category: 'floors', type: 'grass' };
+        let currentToolId = null;
         let currentRotation = 0;
         const gridSize = 1;
-        const levelData = { floors: {}, walls: {}, objects: {} };
+        let levelData = { assets: {}, placements: [] };
+        let placedObjects = new Map();
 
         const joystick = { active: false, center: new THREE.Vector2(), current: new THREE.Vector2(), vector: new THREE.Vector2() };
-        
-        const isMobile = 'ontouchstart' in window;
-        
+
         const textureLoader = new THREE.TextureLoader();
-        const loadedTextures = {};
-
-        function loadTexture(url) {
-            if (loadedTextures[url]) return loadedTextures[url];
-            const texture = textureLoader.load(url);
-            texture.wrapS = THREE.RepeatWrapping;
-            texture.wrapT = THREE.RepeatWrapping;
-            texture.magFilter = THREE.NearestFilter;
-            texture.minFilter = THREE.NearestFilter;
-            loadedTextures[url] = texture;
-            return texture;
-        }
+        const textureCache = new Map();
 
-        const ASSETS = {
-            floors: {
-                grass: { size: [1, 0.1, 1], mapUrl: 'https://i.ibb.co/FqsRw2T/grass.png' },
-                grass_4x4: { size: [4, 0.1, 4], mapUrl: 'https://i.ibb.co/FqsRw2T/grass.png', repeat: [4,4] },
-                concrete: { size: [1, 0.1, 1], mapUrl: 'https://i.ibb.co/yQdGbpS/concrete.png' },
-                concrete_4x4: { size: [4, 0.1, 4], mapUrl: 'https://i.ibb.co/yQdGbpS/concrete.png', repeat: [4,4] },
-                wood: { size: [1, 0.1, 1], mapUrl: 'https://i.ibb.co/GvxPb7k/wood.png' },
-                dirt: { size: [1, 0.1, 1], mapUrl: 'https://i.ibb.co/P9tLdZn/dirt.png' }
-            },
-            walls: {
-                brick: { size: [1, 2.5, 0.2], mapUrl: 'https://i.ibb.co/PMNtV6z/brick.png', repeat: [1,2] },
-                concrete: { size: [1, 2.5, 0.2], mapUrl: 'https://i.ibb.co/VMyXgV8/wall-concrete.png', repeat: [1,2] }
-            },
-            objects: {
-                crate: { size: [0.8, 0.8, 0.8], mapUrl: 'https://i.ibb.co/PZ9rV3g/crate.png' },
-                barrel: { size: [0.4, 0.8, 0], geometry: 'cylinder', mapUrl: 'https://i.ibb.co/PcnwQqp/barrel.png' }
+        function loadTexture(textureFile) {
+            if (textureCache.has(textureFile)) {
+                return textureCache.get(textureFile);
             }
-        };
-
-        const instancedMeshes = {};
-        let isPanning = false;
-        const panStart = new THREE.Vector2();
+            const texture = textureLoader.load(`/api/texture/${textureFile}`, (tex) => {
+                tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+                tex.colorSpace = THREE.SRGBColorSpace;
+            });
+            textureCache.set(textureFile, texture);
+            return texture;
+        }
 
         function init() {
             scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x3d4a55);
-            scene.fog = new THREE.Fog(0x3d4a55, 50, 150);
+            scene.background = new THREE.Color(0x3d4247);
             
             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(25, 30, 25);
-            camera.lookAt(0,0,0);
+            camera.position.set(50, 50, 50);
+            camera.lookAt(0, 0, 0);
 
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
@@ -258,49 +269,60 @@ EDITOR_TEMPLATE = '''
             renderer.shadowMap.enabled = true;
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.body.appendChild(renderer.domElement);
-            
-            const hemiLight = new THREE.HemisphereLight(0xB1E1FF, 0x495057, 0.6);
+
+            orbitControls = new OrbitControls(camera, renderer.domElement);
+            orbitControls.enableDamping = true;
+            orbitControls.minZoom = 0.5;
+            orbitControls.maxZoom = 4;
+            orbitControls.enableRotate = true; 
+            orbitControls.minPolarAngle = Math.PI / 6;
+            orbitControls.maxPolarAngle = Math.PI / 3;
+
+            const hemiLight = new THREE.HemisphereLight(0xB1E1FF, 0x4e5157, 1.5);
             scene.add(hemiLight);
 
-            const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            const dirLight = new THREE.DirectionalLight(0xffffff, 2.5);
             dirLight.position.set(-30, 50, -30);
             dirLight.castShadow = true;
-            dirLight.shadow.mapSize.width = 2048;
-            dirLight.shadow.mapSize.height = 2048;
-            dirLight.shadow.camera.left = -50;
-            dirLight.shadow.camera.right = 50;
-            dirLight.shadow.camera.top = 50;
-            dirLight.shadow.camera.bottom = -50;
+            dirLight.shadow.mapSize.width = 4096;
+            dirLight.shadow.mapSize.height = 4096;
+            dirLight.shadow.camera.left = -80;
+            dirLight.shadow.camera.right = 80;
+            dirLight.shadow.camera.top = 80;
+            dirLight.shadow.camera.bottom = -80;
             scene.add(dirLight);
 
-            gridHelper = new THREE.GridHelper(100, 100, 0x444444, 0x444444);
+            const gridHelper = new THREE.GridHelper(200, 200, 0x555555, 0x555555);
             scene.add(gridHelper);
 
-            const planeGeo = new THREE.PlaneGeometry(100, 100);
+            const planeGeo = new THREE.PlaneGeometry(200, 200);
             planeGeo.rotateX(-Math.PI / 2);
-            placementPlane = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({ visible: false }));
+            placementPlane = new THREE.Mesh(planeGeo, new THREE.MeshStandardMaterial({ color: 0x444444, transparent: true, opacity: 0.5 }));
+            placementPlane.receiveShadow = true;
             scene.add(placementPlane);
 
             raycaster = new THREE.Raycaster();
             mouse = new THREE.Vector2();
+
+            transformControls = new TransformControls(camera, renderer.domElement);
+            transformControls.addEventListener('dragging-changed', event => { orbitControls.enabled = !event.value; });
+            transformControls.addEventListener('mouseUp', () => updatePlacementFromTransform());
+            transformControls.setMode('translate');
+            scene.add(transformControls);
             
             initUI();
             initPlayer();
             initJoystick();
-            initInstancedMeshes();
             
             window.addEventListener('resize', onWindowResize);
             renderer.domElement.addEventListener('pointermove', onPointerMove);
             renderer.domElement.addEventListener('pointerdown', onPointerDown);
-            renderer.domElement.addEventListener('pointerup', onPointerUp);
-            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(!isPlayMode) {
+                if (!isPlayMode && !e.ctrlKey) {
                     e.preventDefault();
-                    const zoomAmount = e.deltaY > 0 ? 1.1 : 0.9;
-                    camera.zoom *= zoomAmount;
-                    camera.updateProjectionMatrix();
+                    rotatePreview(e.deltaY > 0 ? 1 : -1);
                 }
             }, { passive: false });
             renderer.domElement.addEventListener('contextmenu', e => e.preventDefault());
@@ -308,35 +330,9 @@ EDITOR_TEMPLATE = '''
             animate();
         }
 
-        function initInstancedMeshes() {
-            const MAX_COUNT = 10000;
-            for (const category in ASSETS) {
-                instancedMeshes[category] = {};
-                for (const type in ASSETS[category]) {
-                    const asset = ASSETS[category][type];
-                    const texture = loadTexture(asset.mapUrl);
-                    if(asset.repeat) texture.repeat.set(...asset.repeat);
-
-                    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({ map: texture });
-                    const mesh = new THREE.InstancedMesh(geometry, material, MAX_COUNT);
-                    mesh.castShadow = true;
-                    mesh.receiveShadow = true;
-                    mesh.count = 0;
-                    instancedMeshes[category][type] = mesh;
-                    scene.add(mesh);
-                }
-            }
-        }
-
         function initPlayer() {
-            const playerGeo = new THREE.CylinderGeometry(0.25, 0.25, 1.5, 16);
-            playerGeo.translate(0, 0.75, 0);
+            const playerGeo = new THREE.CylinderGeometry(0.35, 0.35, 1.8, 16);
+            playerGeo.translate(0, 0.9, 0);
             const playerMat = new THREE.MeshStandardMaterial({ color: 0x00aaff });
             player = new THREE.Mesh(playerGeo, playerMat);
             player.castShadow = true;
@@ -345,38 +341,39 @@ EDITOR_TEMPLATE = '''
         }
 
         function initUI() {
-            const toolSelector = document.getElementById('tool-selector');
-            toolSelector.innerHTML = '';
-            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.replace('_',' ')}`;
-                    item.dataset.category = category;
-                    item.dataset.type = type;
-                    item.addEventListener('click', () => selectTool(category, type));
-                    toolSelector.appendChild(item);
-                }
-            }
-            selectTool('floors', 'grass');
-
             document.getElementById('save-project').addEventListener('click', saveProject);
             document.getElementById('load-project').addEventListener('click', loadProject);
             document.getElementById('play-mode-toggle').addEventListener('click', togglePlayMode);
             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('add-asset-btn').addEventListener('click', openAssetModal);
+            document.getElementById('save-asset-btn').addEventListener('click', saveAsset);
+            document.getElementById('cancel-asset-btn').addEventListener('click', closeAssetModal);
+            document.getElementById('upload-texture-btn').addEventListener('click', uploadTexture);
+
+            const toolSelector = document.createElement('div');
+            toolSelector.className = 'tool-item';
+            toolSelector.textContent = `Select / Move`;
+            toolSelector.dataset.toolId = 'select';
+            toolSelector.addEventListener('click', () => selectTool('select'));
+            document.getElementById('tool-selector').appendChild(toolSelector);
+
+            updateToolSelector();
         }
-        
+
         function initJoystick() {
             const joystickContainer = document.getElementById('joystick-container');
             const joystickHandle = document.getElementById('joystick-handle');
             const maxRadius = joystickContainer.clientWidth / 2;
 
             function onTouchStart(event) {
+                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 (!joystick.active) return;
@@ -391,35 +388,58 @@ EDITOR_TEMPLATE = '''
                 joystick.vector.set(0, 0);
                 joystickHandle.style.transform = 'translate(0, 0)';
             }
-            joystickContainer.addEventListener('touchstart', onTouchStart, { passive: true });
+            window.addEventListener('touchstart', onTouchStart, { passive: false });
             window.addEventListener('touchmove', onTouchMove, { passive: true });
             window.addEventListener('touchend', onTouchEnd);
         }
-        
-        function selectTool(category, type) {
-            currentTool = { category, type };
+
+        function selectTool(toolId) {
+            currentToolId = toolId;
             document.querySelectorAll('.tool-item').forEach(el => el.classList.remove('active'));
-            const activeEl = document.querySelector(`.tool-item[data-category="${category}"][data-type="${type}"]`);
+            const activeEl = document.querySelector(`.tool-item[data-tool-id="${toolId}"]`);
             if (activeEl) activeEl.classList.add('active');
 
-            if (previewMesh) scene.remove(previewMesh);
-            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);
+            if (previewMesh) {
+                scene.remove(previewMesh);
+                previewMesh = null;
+            }
+            transformControls.detach();
+
+            if (toolId !== 'select' && levelData.assets[toolId]) {
+                const asset = levelData.assets[toolId];
+                const geometry = new THREE.BoxGeometry(asset.w, asset.h, asset.d);
+                const material = new THREE.MeshBasicMaterial({ color: 0x00aaff, transparent: true, opacity: 0.6, wireframe: true });
+                previewMesh = new THREE.Mesh(geometry, material);
+                scene.add(previewMesh);
             }
-            const material = new THREE.MeshBasicMaterial({ map: loadTexture(asset.mapUrl), transparent: true, opacity: 0.6 });
-            if(asset.repeat) material.map.repeat.set(...asset.repeat);
-
-            previewMesh = new THREE.Mesh(geometry, material);
-            scene.add(previewMesh);
+        }
+        
+        function updateToolSelector() {
+            const toolSelector = document.getElementById('tool-selector');
+            toolSelector.innerHTML = '';
+            
+            const selectToolEl = document.createElement('div');
+            selectToolEl.className = 'tool-item';
+            selectToolEl.textContent = `Select / Move`;
+            selectToolEl.dataset.toolId = 'select';
+            selectToolEl.addEventListener('click', () => selectTool('select'));
+            toolSelector.appendChild(selectToolEl);
+            
+            for (const assetId in levelData.assets) {
+                const asset = levelData.assets[assetId];
+                const item = document.createElement('div');
+                item.className = 'tool-item';
+                item.textContent = `${assetId}`;
+                item.dataset.toolId = assetId;
+                item.addEventListener('click', () => selectTool(assetId));
+                toolSelector.appendChild(item);
+            }
+            selectTool(currentToolId || 'select');
         }
 
         function onWindowResize() {
             const aspect = window.innerWidth / window.innerHeight;
-            const frustumSize = 30 / camera.zoom;
+            const frustumSize = 30;
             camera.left = frustumSize * aspect / -2;
             camera.right = frustumSize * aspect / 2;
             camera.top = frustumSize / 2;
@@ -429,155 +449,163 @@ EDITOR_TEMPLATE = '''
         }
 
         function onPointerMove(event) {
+            if (isPlayMode || transformControls.dragging) return;
             mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
             mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
-
-            if(isPanning) {
-                const dx = event.clientX - panStart.x;
-                const dy = event.clientY - panStart.y;
-                panStart.set(event.clientX, event.clientY);
-                const panSpeed = (camera.right - camera.left) / (camera.zoom * renderer.domElement.clientWidth);
-                camera.position.x -= dx * panSpeed;
-                camera.position.z -= dy * panSpeed * Math.cos(camera.rotation.x);
-                return;
-            }
-
-            if (isPlayMode) return;
-            raycaster.setFromCamera(mouse, camera);
-            const intersects = raycaster.intersectObject(placementPlane);
-            if (intersects.length > 0) {
-                const point = intersects[0].point;
-                const asset = ASSETS[currentTool.category][currentTool.type];
-                const w = (asset.size[0] / gridSize);
-                const h = (asset.size[2] / gridSize);
-
-                const gridX = Math.round(point.x / gridSize);
-                const gridZ = Math.round(point.z / gridSize);
-                
-                let finalX = gridX * gridSize;
-                let finalZ = gridZ * gridSize;
-                
-                if (w > 1) finalX += (w/2-0.5) * Math.sign(finalX) * gridSize;
-                if (h > 1) finalZ += (h/2-0.5) * Math.sign(finalZ) * gridSize;
-
-                previewMesh.position.set(finalX, 0, finalZ);
-                
-                if (currentTool.category === 'floors') {
-                    previewMesh.position.y = asset.size[1] / 2;
+            
+            if (previewMesh) {
+                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) * gridSize;
+                    const gridZ = Math.round(point.z / gridSize) * gridSize;
+                    
+                    const asset = levelData.assets[currentToolId];
+                    if(asset) {
+                        previewMesh.position.set(gridX, asset.h / 2, gridZ);
+                        previewMesh.visible = true;
+                    }
                 } else {
-                    previewMesh.position.y = asset.size[1] / 2;
+                    previewMesh.visible = false;
                 }
-                previewMesh.visible = true;
-            } else {
-                previewMesh.visible = false;
             }
         }
         
         function handleKeyDown(event) {
+            keyStates[event.code] = true;
             if (isPlayMode) return;
+            
             if (event.code === 'KeyR') {
                 rotatePreview(1);
             }
+            if (event.code === 'Delete' && transformControls.object) {
+                const selectedObject = transformControls.object;
+                const placementId = selectedObject.userData.placementId;
+                
+                transformControls.detach();
+                scene.remove(selectedObject);
+                placedObjects.delete(placementId);
+                levelData.placements = levelData.placements.filter(p => p.id !== placementId);
+                updateCollisionBoxes();
+            }
+            if(event.code === 'Escape') {
+                transformControls.detach();
+                selectTool('select');
+            }
         }
         
         function onPointerDown(event) {
-            if (isPlayMode && event.target.tagName === 'CANVAS') {
-              if(isMobile) return;
-            }
-            if (!isPlayMode && event.button === 2) {
-                isPanning = true;
-                panStart.set(event.clientX, event.clientY);
+            if (isPlayMode || event.target.tagName !== 'CANVAS') return;
+             if (event.button === 2) { 
+                rotatePreview(1);
                 return;
             }
+            if (event.button !== 0) return; 
 
-            if (isPlayMode || !previewMesh.visible || event.button !== 0) return;
-            const isRemoving = event.shiftKey;
+            raycaster.setFromCamera(mouse, camera);
             
-            const pos = previewMesh.position;
-            const key = `${pos.x},${pos.y},${pos.z}`;
-
-            if (isRemoving) {
-                removeItemAt(pos);
-            } else {
-                addItem(pos, currentRotation);
-            }
-            updateLevelGeometry();
-        }
-
-        function onPointerUp(event) {
-            if (event.button === 2) {
-                isPanning = false;
+            if (currentToolId === 'select') {
+                const placedMeshes = Array.from(placedObjects.values());
+                const intersects = raycaster.intersectObjects(placedMeshes, false);
+                if (intersects.length > 0) {
+                    transformControls.attach(intersects[0].object);
+                } else {
+                    transformControls.detach();
+                }
+            } else if (previewMesh && previewMesh.visible) {
+                 addItem(previewMesh.position, currentRotation);
             }
         }
         
         function rotatePreview(direction) {
-            currentRotation += (Math.PI / 2) * direction;
-            previewMesh.rotation.y = currentRotation;
+            if (transformControls.object) {
+                transformControls.object.rotation.y += (Math.PI / 2) * direction;
+                updatePlacementFromTransform();
+            } else if (previewMesh) {
+                currentRotation += (Math.PI / 2) * direction;
+                previewMesh.rotation.y = currentRotation;
+            }
         }
 
         function addItem(pos, rotation) {
-            const { category, type } = currentTool;
-            const key = `${pos.x},${pos.z}`;
+            const assetId = currentToolId;
+            if (!assetId || !levelData.assets[assetId]) return;
             
-            removeItemAt(pos);
+            const placement = {
+                id: THREE.MathUtils.generateUUID(),
+                assetId: assetId,
+                x: pos.x, y: pos.y, z: pos.z,
+                rotY: rotation
+            };
+            levelData.placements.push(placement);
+            createObjectForPlacement(placement);
+            updateCollisionBoxes();
+        }
+
+        function createObjectForPlacement(placement) {
+            const asset = levelData.assets[placement.assetId];
+            if (!asset) return null;
 
-            if (!levelData[category]) levelData[category] = {};
-            if (!levelData[category][type]) levelData[category][type] = [];
-            levelData[category][type].push([pos.x, pos.z, rotation]);
+            const geometry = new THREE.BoxGeometry(asset.w, asset.h, asset.d);
+            const texture = loadTexture(asset.texture);
+            texture.repeat.set(asset.w, asset.h);
+            const material = new THREE.MeshStandardMaterial({ map: texture });
+            
+            const mesh = new THREE.Mesh(geometry, material);
+            mesh.position.set(placement.x, placement.y, placement.z);
+            mesh.rotation.y = placement.rotY;
+            mesh.castShadow = true;
+            mesh.receiveShadow = true;
+            mesh.userData.placementId = placement.id;
+            
+            scene.add(mesh);
+            placedObjects.set(placement.id, mesh);
+            return mesh;
         }
 
-        function removeItemAt(pos) {
-            const keyToRemove = `${pos.x},${pos.z}`;
-            for (const category in levelData) {
-                for (const type in levelData[category]) {
-                    levelData[category][type] = levelData[category][type].filter(item => {
-                        const itemKey = `${item[0]},${item[1]}`;
-                        return itemKey !== keyToRemove;
-                    });
-                }
+        function updatePlacementFromTransform() {
+            const obj = transformControls.object;
+            if (!obj) return;
+            const placement = levelData.placements.find(p => p.id === obj.userData.placementId);
+            if(placement) {
+                placement.x = obj.position.x;
+                placement.y = obj.position.y;
+                placement.z = obj.position.z;
+                placement.rotY = obj.rotation.y;
+                updateCollisionBoxes();
             }
         }
+
+        function rebuildLevel() {
+            clearPlacedObjects();
+            levelData.placements.forEach(p => createObjectForPlacement(p));
+            updateCollisionBoxes();
+        }
         
-        function updateLevelGeometry() {
-            const dummy = new THREE.Object3D();
-            wallBBoxes = [];
-            
-            for (const category in ASSETS) {
-                for (const type in ASSETS[category]) {
-                    const mesh = instancedMeshes[category][type];
-                    const dataArray = levelData[category]?.[type] || [];
-                    mesh.count = dataArray.length;
-
-                    for (let i = 0; i < dataArray.length; i++) {
-                        const [x, z, rot] = dataArray[i];
-                        const asset = ASSETS[category][type];
-                        
-                        dummy.position.set(x, 0, z);
-                        dummy.rotation.set(0, rot, 0);
-
-                        dummy.position.y = (category === 'floors' ? asset.size[1] / 2 : asset.size[1] / 2);
-                        
-                        dummy.updateMatrix();
-                        mesh.setMatrixAt(i, dummy.matrix);
-                        
-                        if (category === 'walls' || category === 'objects') {
-                           const boxHelper = new THREE.BoxHelper(dummy);
-                           boxHelper.geometry.computeBoundingBox();
-                           const box = boxHelper.geometry.boundingBox;
-                           wallBBoxes.push(box);
-                        }
-                    }
-                    mesh.instanceMatrix.needsUpdate = true;
+        function updateCollisionBoxes() {
+            collisionBBoxes = [];
+            placedObjects.forEach(mesh => {
+                const asset = levelData.assets[levelData.placements.find(p => p.id === mesh.userData.placementId).assetId];
+                if (asset && asset.solid) {
+                    mesh.updateWorldMatrix(true, false);
+                    const box = new THREE.Box3().setFromObject(mesh);
+                    collisionBBoxes.push(box);
                 }
-            }
+            });
         }
         
         function clearLevel() {
             if (!confirm("Вы уверены, что хотите полностью очистить уровень?")) return;
-            levelData.floors = {};
-            levelData.walls = {};
-            levelData.objects = {};
-            updateLevelGeometry();
+            levelData.placements = [];
+            clearPlacedObjects();
+            updateCollisionBoxes();
+        }
+
+        function clearPlacedObjects() {
+            placedObjects.forEach(obj => scene.remove(obj));
+            placedObjects.clear();
+            transformControls.detach();
         }
 
         function togglePlayMode() {
@@ -587,24 +615,28 @@ EDITOR_TEMPLATE = '''
             
             if (isPlayMode) {
                 uiContainer.style.display = 'none';
-                gridHelper.visible = false;
-                previewMesh.visible = false;
+                transformControls.detach();
+                transformControls.enabled = false;
+                if(previewMesh) previewMesh.visible = false;
+                orbitControls.enabled = false;
                 player.visible = true;
                 player.position.set(0, 0, 0);
-                if(isMobile) joystickContainer.style.display = 'block';
+                if ('ontouchstart' in window) {
+                   joystickContainer.style.display = 'block';
+                }
             } else {
                 uiContainer.style.display = 'flex';
-                gridHelper.visible = true;
-                previewMesh.visible = true;
+                transformControls.enabled = true;
+                if(previewMesh) previewMesh.visible = true;
+                orbitControls.enabled = true;
                 player.visible = false;
                 joystickContainer.style.display = 'none';
-                camera.position.set(25, 30, 25);
+                camera.position.set(50, 50, 50);
                 camera.lookAt(0,0,0);
-                camera.zoom = 1;
-                camera.updateProjectionMatrix();
+                orbitControls.target.set(0, 0, 0);
             }
         }
-
+        
         async function saveProject() {
             const projectName = document.getElementById('project-name').value.trim();
             if (!projectName) { alert("Пожалуйста, введите имя проекта."); return; }
@@ -617,12 +649,7 @@ EDITOR_TEMPLATE = '''
                 });
                 if (!response.ok) throw new Error('Ошибка при сохранении проекта.');
                 alert(`Проект '${projectName}' успешно сохранен!`);
-                const projectList = document.getElementById('project-list');
-                if (![...projectList.options].some(opt => opt.value === projectName)) {
-                    const newOption = document.createElement('option');
-                    newOption.value = newOption.textContent = projectName;
-                    projectList.appendChild(newOption);
-                }
+                updateProjectList(projectName);
             } catch (error) {
                 alert(`Не удалось сохранить проект: ${error.message}`);
             } finally {
@@ -636,12 +663,16 @@ EDITOR_TEMPLATE = '''
             showSpinner(true);
             try {
                 const response = await fetch(`/api/project/${projectName}`);
-                const result = await response.json();
                 if (!response.ok) throw new Error('Проект не найден или ошибка загрузки.');
+                const result = await response.json();
                 
-                clearLevel();
-                Object.assign(levelData, result.data);
-                updateLevelGeometry();
+                clearPlacedObjects();
+                levelData = result.data;
+                if (!levelData.assets) levelData.assets = {};
+                if (!levelData.placements) levelData.placements = [];
+                
+                rebuildLevel();
+                updateToolSelector();
                 document.getElementById('project-name').value = projectName;
 
             } catch (error) {
@@ -650,10 +681,70 @@ EDITOR_TEMPLATE = '''
                 showSpinner(false);
             }
         }
+        
+        function updateProjectList(newProjectName) {
+            const projectList = document.getElementById('project-list');
+             if (![...projectList.options].some(opt => opt.value === newProjectName)) {
+                const newOption = document.createElement('option');
+                newOption.value = newOption.textContent = newProjectName;
+                projectList.appendChild(newOption);
+                projectList.value = newProjectName;
+            }
+        }
+        
+        function openAssetModal() {
+            document.getElementById('modal-backdrop').style.display = 'flex';
+        }
+        function closeAssetModal() {
+            document.getElementById('modal-backdrop').style.display = 'none';
+        }
 
-        const moveDirection = new THREE.Vector3();
-        const cameraOffset = new THREE.Vector3(20, 25, 20);
+        function saveAsset() {
+            const name = document.getElementById('asset-name').value.trim();
+            if (!name) { alert('Имя объекта не может быть пустым.'); return; }
+            if (levelData.assets[name]) { alert('Объект с таким именем уже существует.'); return; }
+
+            levelData.assets[name] = {
+                texture: document.getElementById('asset-texture').value,
+                w: parseFloat(document.getElementById('asset-width').value) || 1,
+                h: parseFloat(document.getElementById('asset-height').value) || 1,
+                d: parseFloat(document.getElementById('asset-depth').value) || 1,
+                solid: document.getElementById('asset-solid').checked
+            };
+            
+            updateToolSelector();
+            closeAssetModal();
+        }
 
+        async function uploadTexture() {
+            const fileInput = document.getElementById('texture-upload');
+            if (fileInput.files.length === 0) {
+                alert('Пожалуйста, выберите файл текстуры.'); return;
+            }
+            const file = fileInput.files[0];
+            const formData = new FormData();
+            formData.append('texture', file);
+            showSpinner(true);
+            try {
+                const response = await fetch('/api/texture', { method: 'POST', body: formData });
+                if(!response.ok) throw new Error('Ошибка загрузки текстуры на сервер.');
+                const result = await response.json();
+
+                const textureSelect = document.getElementById('asset-texture');
+                const newOption = document.createElement('option');
+                newOption.value = newOption.textContent = result.filename;
+                textureSelect.appendChild(newOption);
+                textureSelect.value = result.filename;
+                alert('Текстура успешно загружена!');
+
+            } catch(error) {
+                alert(`Не удалось загрузить текстуру: ${error.message}`);
+            } finally {
+                showSpinner(false);
+            }
+        }
+
+        const moveDirection = new THREE.Vector3();
         function updatePlayer(deltaTime) {
             const speed = playerSpeed * deltaTime;
             moveDirection.set(0,0,0);
@@ -676,7 +767,7 @@ EDITOR_TEMPLATE = '''
             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));
             let collisionX = false;
-            for(const wallBox of wallBBoxes) {
+            for(const wallBox of collisionBBoxes) {
                 if (playerBoxX.intersectsBox(wallBox)) {
                     collisionX = true;
                     break;
@@ -686,8 +777,8 @@ EDITOR_TEMPLATE = '''
 
             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));
-             let collisionZ = false;
-            for(const wallBox of wallBBoxes) {
+            let collisionZ = false;
+            for(const wallBox of collisionBBoxes) {
                 if (playerBoxZ.intersectsBox(wallBox)) {
                     collisionZ = true;
                     break;
@@ -695,9 +786,10 @@ EDITOR_TEMPLATE = '''
             }
             if(!collisionZ) player.position.z = intendedZPos.z;
 
-            camera.position.copy(player.position).add(cameraOffset);
+            camera.position.x = player.position.x + 50;
+            camera.position.z = player.position.z + 50;
+            camera.position.y = 50;
             camera.lookAt(player.position);
-            camera.updateProjectionMatrix();
         }
 
         function showSpinner(show) {
@@ -710,8 +802,9 @@ EDITOR_TEMPLATE = '''
             
             if (isPlayMode) {
                 updatePlayer(deltaTime);
+            } else {
+                orbitControls.update();
             }
-            
             renderer.render(scene, camera);
         }
 
@@ -723,8 +816,9 @@ EDITOR_TEMPLATE = '''
 
 @app.route('/')
 def editor():
-    projects = list_projects_from_hf()
-    return render_template_string(EDITOR_TEMPLATE, projects=projects)
+    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)
 
 @app.route('/api/project', methods=['POST'])
 def save_project_api():
@@ -734,13 +828,14 @@ 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:
+    local_path = os.path.join(app.config['UPLOAD_FOLDER'], local_filename)
+    with open(local_path, 'w', encoding='utf-8') as f:
         json.dump(data, f)
     
-    success = upload_project_to_hf(local_filename, project_name)
+    success = upload_to_hf(local_path, f"pz_projects/{project_name}.json", f"Save PZ project {project_name}")
 
-    if os.path.exists(local_filename):
-        os.remove(local_filename)
+    if os.path.exists(local_path):
+        os.remove(local_path)
         
     if success:
         return jsonify({"message": "Project saved successfully"}), 201
@@ -749,12 +844,49 @@ def save_project_api():
 
 @app.route('/api/project/<project_name>', methods=['GET'])
 def load_project_api(project_name):
-    project_data = download_project_from_hf(project_name)
-    if project_data:
+    local_path = download_from_hf(f"pz_projects/{project_name}.json")
+    if local_path:
+        with open(local_path, 'r', encoding='utf-8') as f:
+            project_data = json.load(f)
+        os.remove(local_path)
         return jsonify(project_data)
     else:
         return jsonify({"error": "Project not found or failed to download"}), 404
 
+@app.route('/api/texture', methods=['POST'])
+def upload_texture_api():
+    if 'texture' not in request.files:
+        return jsonify({"error": "No texture file provided"}), 400
+    file = request.files['texture']
+    if file.filename == '':
+        return jsonify({"error": "No selected file"}), 400
+    
+    filename = secure_filename(file.filename)
+    local_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+    file.save(local_path)
+
+    success = upload_to_hf(local_path, f"pz_textures/{filename}", f"Upload texture {filename}")
+
+    if os.path.exists(local_path):
+        os.remove(local_path)
+    
+    if success:
+        return jsonify({"message": "Texture uploaded", "filename": filename}), 201
+    else:
+        return jsonify({"error": "Failed to upload texture"}), 500
+
+@app.route('/api/texture/<filename>')
+def get_texture(filename):
+    local_path = download_from_hf(f"pz_textures/{filename}")
+    if local_path:
+        # Since send_from_directory needs a directory and a filename, we move the downloaded file
+        temp_dir = os.path.join(app.config['UPLOAD_FOLDER'], 'textures')
+        os.makedirs(temp_dir, exist_ok=True)
+        final_path = os.path.join(temp_dir, os.path.basename(local_path))
+        os.rename(local_path, final_path)
+        return send_from_directory(temp_dir, os.path.basename(local_path))
+    return jsonify({"error": "Texture not found"}), 404
+
 if __name__ == '__main__':
     port = int(os.environ.get('PORT', 7860))
     app.run(debug=False, host='0.0.0.0', port=port)