Update app.py

app.py

@@ -100,7 +100,7 @@ EDITOR_TEMPLATE = '''
         .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 {
+        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: 5px;
         }
         button {
@@ -114,7 +114,7 @@ EDITOR_TEMPLATE = '''
         .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;
+            transition: all 0.2s; font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
         }
         .tool-item:hover { background: #3a3a3a; border-color: #666; }
         .tool-item.active { background: #0077cc; border-color: #00aaff; }
@@ -123,9 +123,9 @@ EDITOR_TEMPLATE = '''
         #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;
+            width: 60px; height: 60px; animation: spin 1s linear infinite; display: none; z-index: 10001;
         }
-        #blocker { position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; top:0; left:0; z-index: 99; }
+        #blocker { position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: none; top:0; left:0; z-index: 9999; }
         #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;
@@ -137,6 +137,18 @@ EDITOR_TEMPLATE = '''
             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%; }
+        
+        #building-modal {
+            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
+            background: rgba(20, 20, 20, 0.95);
+            padding: 20px; border-radius: 8px; z-index: 10000;
+            border: 1px solid #555; box-shadow: 0 0 20px rgba(0,0,0,0.5);
+            max-width: 90vw; max-height: 90vh; overflow-y: auto;
+        }
+        #building-preview-container { position: relative; cursor: crosshair; margin-bottom: 15px; }
+        #building-preview-img { max-width: 100%; max-height: 60vh; display: block; }
+        #building-entrance-canvas { position: absolute; top: 0; left: 0; pointer-events: none; }
+        
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
         @media (max-width: 800px) {
             #ui-panel { transform: translateX(-100%); padding-top: 60px; }
@@ -176,6 +188,10 @@ EDITOR_TEMPLATE = '''
                     <button id="draw-mode-area" class="tool-item">Область</button>
                 </div>
                 <div id="tool-selector" class="tool-selector"></div>
+                <div id="custom-building-options" style="display:none; margin-top:10px;">
+                    <label>Ширина:</label>
+                    <input type="number" id="building-width-input" value="10" step="0.5">
+                </div>
                 <p style="font-size: 0.8em; color: #888; margin-top: 10px;">
                     ЛКМ: Разместить / Начать область<br>
                     Отпустить ЛКМ: Закончить область<br>
@@ -185,8 +201,30 @@ EDITOR_TEMPLATE = '''
                 </p>
                 <button id="clear-level" class="danger-button">Очистить уровень</button>
             </div>
+            <div class="ui-group">
+                <h3>Кастомные здания</h3>
+                <button id="add-building-btn">Добавить здание</button>
+                <input type="file" id="building-image-input" accept="image/png" style="display: none;">
+                <div id="custom-tools-selector" class="tool-selector" style="margin-top: 10px;"></div>
+            </div>
+        </div>
+    </div>
+
+    <div id="building-modal" style="display: none;">
+        <h3>Новое здание</h3>
+        <p style="font-size: 0.9em; color: #ccc;">Кликните на изображение, чтобы указать точку входа.</p>
+        <div id="building-preview-container">
+            <img id="building-preview-img" alt="Building Preview">
+            <canvas id="building-entrance-canvas"></canvas>
         </div>
+        <label style="display: flex; align-items: center; gap: 10px;">
+            <input type="checkbox" id="building-solid-checkbox" checked>
+            <span>Плотное здание (с коллзией)</span>
+        </label>
+        <button id="save-new-building">Сохранить и выбрать</button>
+        <button id="cancel-new-building" class="danger-button" style="background-color: #555;">Отмена</button>
     </div>
+
     <div id="blocker"><div id="instructions"><p style="font-size:36px">Нажмите, чтобы играть</p><p>Движение: WASD / Джойстик</p><p>Нажмите ESC для выхода</p></div></div>
     <div id="loading-spinner"></div>
     <div id="joystick-container"><div id="joystick-handle"></div></div>
@@ -211,7 +249,7 @@ EDITOR_TEMPLATE = '''
         let currentTool = { category: 'floors', type: 'grass' };
         let currentRotation = 0;
         const gridSize = 1;
-        const levelData = { floors: {}, walls: {}, objects: {} };
+        let levelData = { floors: {}, walls: {}, objects: {}, buildingDefinitions: {}, buildingInstances: [] };
         let drawMode = 'single'; // 'single' or 'area'
         let isDrawingArea = false;
         let areaStartPoint = new THREE.Vector3();
@@ -240,6 +278,9 @@ EDITOR_TEMPLATE = '''
 
         const instancedMeshes = {};
         const loadedTextures = {};
+        const customBuildingMeshes = [];
+        let entranceHelper;
+        let currentEntranceCoords = {x: 0.5, y: 0.95};
 
         function init() {
             showSpinner(true);
@@ -306,7 +347,7 @@ EDITOR_TEMPLATE = '''
             gridHelper = new THREE.GridHelper(100, 100, 0x556677, 0x556677);
             scene.add(gridHelper);
 
-            const planeGeo = new THREE.PlaneGeometry(100, 100);
+            const planeGeo = new THREE.PlaneGeometry(1000, 1000);
             planeGeo.rotateX(-Math.PI / 2);
             placementPlane = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({ visible: false }));
             scene.add(placementPlane);
@@ -325,6 +366,12 @@ EDITOR_TEMPLATE = '''
             );
             selectionBox.visible = false;
             scene.add(selectionBox);
+
+            const spriteMaterial = new THREE.SpriteMaterial({ color: 0x00ff00, transparent: true, opacity: 0.7, depthTest: false });
+            entranceHelper = new THREE.Sprite(spriteMaterial);
+            entranceHelper.scale.set(1.5, 3, 1);
+            entranceHelper.visible = false;
+            scene.add(entranceHelper);
             
             window.addEventListener('resize', onWindowResize);
             renderer.domElement.addEventListener('pointermove', onPointerMove);
@@ -399,12 +446,111 @@ EDITOR_TEMPLATE = '''
             
             document.getElementById('draw-mode-single').addEventListener('click', () => setDrawMode('single'));
             document.getElementById('draw-mode-area').addEventListener('click', () => setDrawMode('area'));
+
+            document.getElementById('add-building-btn').addEventListener('click', () => document.getElementById('building-image-input').click());
+            document.getElementById('building-image-input').addEventListener('change', handleImageUpload);
+            document.getElementById('save-new-building').addEventListener('click', saveNewBuildingDefinition);
+            document.getElementById('cancel-new-building').addEventListener('click', () => {
+                 document.getElementById('building-modal').style.display = 'none';
+                 document.getElementById('blocker').style.display = 'none';
+            });
+            document.getElementById('building-preview-container').addEventListener('click', setEntrancePoint);
+            document.getElementById('building-width-input').addEventListener('input', updatePreviewMesh);
+        }
+
+        function handleImageUpload(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const modal = document.getElementById('building-modal');
+                const img = document.getElementById('building-preview-img');
+                img.onload = () => {
+                    const canvas = document.getElementById('building-entrance-canvas');
+                    canvas.width = img.clientWidth;
+                    canvas.height = img.clientHeight;
+                    currentEntranceCoords = {x: 0.5, y: 0.95};
+                    drawEntranceMarker();
+                };
+                img.src = e.target.result;
+                modal.style.display = 'block';
+                document.getElementById('blocker').style.display = 'block';
+            };
+            reader.readAsDataURL(file);
+            event.target.value = '';
+        }
+
+        function setEntrancePoint(event) {
+            const rect = event.target.getBoundingClientRect();
+            const x = event.clientX - rect.left;
+            const y = event.clientY - rect.top;
+            currentEntranceCoords = { x: x / rect.width, y: y / rect.height };
+            drawEntranceMarker();
+        }
+
+        function drawEntranceMarker() {
+            const canvas = document.getElementById('building-entrance-canvas');
+            const ctx = canvas.getContext('2d');
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            const x = currentEntranceCoords.x * canvas.width;
+            const y = currentEntranceCoords.y * canvas.height;
+            ctx.beginPath();
+            ctx.arc(x, y, 5, 0, 2 * Math.PI, false);
+            ctx.fillStyle = 'rgba(0, 255, 0, 0.8)';
+            ctx.fill();
+            ctx.lineWidth = 2;
+            ctx.strokeStyle = '#ffffff';
+            ctx.stroke();
+        }
+
+        function saveNewBuildingDefinition() {
+            const img = document.getElementById('building-preview-img');
+            const def = {
+                src: img.src,
+                isSolid: document.getElementById('building-solid-checkbox').checked,
+                entrance: currentEntranceCoords,
+                aspectRatio: img.naturalHeight / img.naturalWidth,
+            };
+            const defId = `building_${Date.now()}`;
+            levelData.buildingDefinitions[defId] = def;
+
+            document.getElementById('building-modal').style.display = 'none';
+            document.getElementById('blocker').style.display = 'none';
+
+            updateCustomToolsUI();
+            selectTool('custom', defId);
+        }
+
+        function updateCustomToolsUI() {
+            const selector = document.getElementById('custom-tools-selector');
+            selector.innerHTML = '';
+            for (const defId in levelData.buildingDefinitions) {
+                const def = levelData.buildingDefinitions[defId];
+                const item = document.createElement('div');
+                item.className = 'tool-item';
+                item.dataset.category = 'custom';
+                item.dataset.type = defId;
+                item.title = defId;
+                
+                const img = document.createElement('img');
+                img.src = def.src;
+                img.style.width = '100%';
+                img.style.height = '40px';
+                img.style.objectFit = 'cover';
+                img.style.pointerEvents = 'none';
+
+                item.appendChild(img);
+                item.addEventListener('click', () => selectTool('custom', defId));
+                selector.appendChild(item);
+            }
         }
         
         function setDrawMode(mode) {
             drawMode = mode;
             document.getElementById('draw-mode-single').classList.toggle('active', mode === 'single');
             document.getElementById('draw-mode-area').classList.toggle('active', mode === 'area');
+            document.getElementById('custom-building-options').style.display = 'none';
         }
 
         function initJoystick() {
@@ -438,20 +584,48 @@ EDITOR_TEMPLATE = '''
         
         function selectTool(category, type) {
             currentTool = { category, type };
-            document.querySelectorAll('#tool-selector .tool-item').forEach(el => el.classList.remove('active'));
+            document.querySelectorAll('.tool-item').forEach(el => el.classList.remove('active'));
             const activeEl = document.querySelector(`.tool-item[data-category="${category}"][data-type="${type}"]`);
             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);
+            document.getElementById('custom-building-options').style.display = category === 'custom' ? 'block' : 'none';
+            document.getElementById('draw-mode-area').style.display = category === 'custom' ? 'none' : 'flex';
+            if (category === 'custom') setDrawMode('single');
+
+            updatePreviewMesh();
+        }
+
+        function updatePreviewMesh() {
+            if (previewMesh) {
+                scene.remove(previewMesh);
+                previewMesh.geometry.dispose();
+                previewMesh.material.dispose();
+            }
+
+            let geometry, material;
+            if (currentTool.category === 'custom') {
+                const def = levelData.buildingDefinitions[currentTool.type];
+                if (!def) return;
+                const width = parseFloat(document.getElementById('building-width-input').value) || 10;
+                const height = width * def.aspectRatio;
+
+                geometry = new THREE.PlaneGeometry(width, height);
+                const texture = new THREE.TextureLoader().load(def.src);
+                material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, opacity: 0.7, side: THREE.DoubleSide });
+                previewMesh = new THREE.Mesh(geometry, material);
+                previewMesh.userData.isBuilding = true;
+                previewMesh.userData.size = {x: width, y: height, z: 0.2};
             } else {
-                geometry = new THREE.BoxGeometry(...asset.size);
+                const asset = ASSETS[currentTool.category][currentTool.type];
+                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);
+                }
+                material = new THREE.MeshStandardMaterial({ map: loadedTextures[currentTool.category][currentTool.type], transparent: true, opacity: 0.6 });
+                previewMesh = new THREE.Mesh(geometry, material);
+                previewMesh.userData.isBuilding = false;
             }
-            const material = new THREE.MeshStandardMaterial({ map: loadedTextures[category][type], transparent: true, opacity: 0.6 });
-            previewMesh = new THREE.Mesh(geometry, material);
             scene.add(previewMesh);
         }
 
@@ -472,7 +646,7 @@ EDITOR_TEMPLATE = '''
             mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
             raycaster.setFromCamera(mouse, camera);
             const intersects = raycaster.intersectObject(placementPlane);
-            if (intersects.length > 0) {
+            if (intersects.length > 0 && previewMesh) {
                 const point = intersects[0].point;
                 const gridX = Math.round(point.x / gridSize);
                 const gridZ = Math.round(point.z / gridSize);
@@ -491,11 +665,15 @@ EDITOR_TEMPLATE = '''
                     previewMesh.visible = false;
                 } else {
                     previewMesh.position.set(gridX * gridSize, 0, gridZ * gridSize);
-                    const asset = ASSETS[currentTool.category][currentTool.type];
-                    previewMesh.position.y = asset.size[1] / 2;
+                    if (previewMesh.userData.isBuilding) {
+                        previewMesh.position.y = previewMesh.userData.size.y / 2;
+                    } else {
+                        const asset = ASSETS[currentTool.category][currentTool.type];
+                        previewMesh.position.y = asset.size[1] / 2;
+                    }
                     previewMesh.visible = true;
                 }
-            } else {
+            } else if (previewMesh) {
                 previewMesh.visible = false;
             }
         }
@@ -513,23 +691,26 @@ EDITOR_TEMPLATE = '''
         }
         
         function onPointerDown(event) {
-            if (isPlayMode || !previewMesh.visible) return;
+            if (isPlayMode || (previewMesh && !previewMesh.visible)) return;
+            if (event.target !== renderer.domElement) return;
 
             if (event.button === 2) { rotatePreview(1); return; }
             if (event.button !== 0) return;
             
             const isRemoving = event.shiftKey;
-            const pos = previewMesh.position;
             
-            if (drawMode === 'area' && !isRemoving) {
+            if (isRemoving) {
+                removeItemAtPointer();
+                return;
+            }
+
+            const pos = previewMesh.position.clone();
+            
+            if (drawMode === 'area' && currentTool.category !== 'custom') {
                 isDrawingArea = true;
                 areaStartPoint.copy(pos);
             } else {
-                if (isRemoving) {
-                    removeItemAt(pos);
-                } else {
-                    addItem(pos, currentRotation);
-                }
+                addItem(pos, currentRotation);
                 updateLevelGeometry();
             }
         }
@@ -544,7 +725,6 @@ EDITOR_TEMPLATE = '''
                     const point = intersects[0].point;
                     const gridX = Math.round(point.x / gridSize);
                     const gridZ = Math.round(point.z / gridSize);
-                    const endPoint = new THREE.Vector3(gridX * gridSize, 0, gridZ * gridSize);
 
                     const startX = Math.round(areaStartPoint.x / gridSize);
                     const startZ = Math.round(areaStartPoint.z / gridSize);
@@ -553,7 +733,7 @@ EDITOR_TEMPLATE = '''
 
                     for (let x = Math.min(startX, endX); x <= Math.max(startX, endX); x++) {
                         for (let z = Math.min(startZ, endZ); z <= Math.max(startZ, endZ); z++) {
-                            addItem(new THREE.Vector3(x * gridSize, 0, z * gridSize), 0); // Rotation 0 for terrain
+                            addItem(new THREE.Vector3(x * gridSize, 0, z * gridSize), 0);
                         }
                     }
                     updateLevelGeometry();
@@ -568,14 +748,51 @@ EDITOR_TEMPLATE = '''
 
         function addItem(pos, rotation) {
             const { category, type } = currentTool;
-            removeItemAt(pos);
-            if (!levelData[category][type]) levelData[category][type] = [];
-            levelData[category][type].push([pos.x, pos.z, rotation]);
+            if (category === 'custom') {
+                const def = levelData.buildingDefinitions[type];
+                if (!def) return;
+                const width = parseFloat(document.getElementById('building-width-input').value) || 10;
+                const height = width * def.aspectRatio;
+                levelData.buildingInstances.push({
+                    defId: type,
+                    pos: {x: pos.x, y: height/2, z: pos.z},
+                    scale: {x: width, y: height, z: 0.2},
+                    rotation: rotation
+                });
+            } else {
+                removeItemAtGrid(pos);
+                if (!levelData[category][type]) levelData[category][type] = [];
+                levelData[category][type].push([pos.x, pos.z, rotation]);
+            }
+        }
+        
+        function removeItemAtPointer() {
+            raycaster.setFromCamera(mouse, camera);
+            const intersectsBuildings = raycaster.intersectObjects(customBuildingMeshes);
+            if (intersectsBuildings.length > 0) {
+                const intersectedMesh = intersectsBuildings[0].object;
+                const instanceIndex = customBuildingMeshes.indexOf(intersectedMesh);
+                if (instanceIndex > -1) {
+                    levelData.buildingInstances.splice(instanceIndex, 1);
+                    updateLevelGeometry();
+                    return;
+                }
+            }
+            
+            const intersectsPlane = raycaster.intersectObject(placementPlane);
+            if (intersectsPlane.length > 0) {
+                const pos = intersectsPlane[0].point;
+                removeItemAtGrid(pos);
+                updateLevelGeometry();
+            }
         }
 
-        function removeItemAt(pos) {
-            const keyToRemove = `${pos.x},${pos.z}`;
+        function removeItemAtGrid(pos) {
+            const gridX = Math.round(pos.x / gridSize);
+            const gridZ = Math.round(pos.z / gridSize);
+            const keyToRemove = `${gridX * gridSize},${gridZ * gridSize}`;
             for (const category in levelData) {
+                if (category === 'buildingDefinitions' || category === 'buildingInstances') continue;
                 for (const type in levelData[category]) {
                     levelData[category][type] = levelData[category][type].filter(item => {
                         const itemKey = `${item[0]},${item[1]}`;
@@ -587,44 +804,93 @@ EDITOR_TEMPLATE = '''
         
         function updateLevelGeometry() {
             const dummy = new THREE.Object3D();
-            collisionBBoxes = [];
             
             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;
-                    const asset = ASSETS[category][type];
-
+                    
                     for (let i = 0; i < dataArray.length; i++) {
                         const [x, z, rot] = dataArray[i];
-                        
-                        dummy.position.set(x, 0, z);
+                        const asset = ASSETS[category][type];
+                        dummy.position.set(x, asset.size[1] / 2, z);
                         dummy.rotation.set(0, rot, 0);
-                        dummy.position.y = asset.size[1] / 2;
-                        
                         dummy.updateMatrix();
                         mesh.setMatrixAt(i, dummy.matrix);
-
-                        if (asset.solid) {
-                           const tempMesh = new THREE.Mesh(mesh.geometry);
-                           tempMesh.position.copy(dummy.position);
-                           tempMesh.rotation.copy(dummy.rotation);
-                           tempMesh.updateMatrixWorld();
-                           const box = new THREE.Box3().setFromObject(tempMesh, true);
-                           collisionBBoxes.push(box);
-                        }
                     }
                     mesh.instanceMatrix.needsUpdate = true;
                 }
             }
+            renderCustomBuildings();
+            rebuildCollisionData();
+        }
+
+        function renderCustomBuildings() {
+            while(customBuildingMeshes.length){
+                const mesh = customBuildingMeshes.pop();
+                scene.remove(mesh);
+                mesh.geometry.dispose();
+                mesh.material.map?.dispose();
+                mesh.material.dispose();
+            }
+
+            const textureLoader = new THREE.TextureLoader();
+            for(const instance of levelData.buildingInstances) {
+                const def = levelData.buildingDefinitions[instance.defId];
+                if (!def) continue;
+
+                const geometry = new THREE.PlaneGeometry(instance.scale.x, instance.scale.y);
+                const texture = textureLoader.load(def.src);
+                const material = new THREE.MeshStandardMaterial({ map: texture, transparent: true, side: THREE.DoubleSide });
+                const mesh = new THREE.Mesh(geometry, material);
+                
+                mesh.position.set(instance.pos.x, instance.pos.y, instance.pos.z);
+                mesh.rotation.y = instance.rotation;
+                mesh.castShadow = true;
+                mesh.receiveShadow = true;
+                
+                scene.add(mesh);
+                customBuildingMeshes.push(mesh);
+            }
+        }
+        
+        function rebuildCollisionData() {
+            collisionBBoxes = [];
+            for (const category in ASSETS) {
+                for (const type in ASSETS[category]) {
+                    const asset = ASSETS[category][type];
+                    if (!asset.solid) continue;
+                    const dataArray = levelData[category]?.[type] || [];
+                    for(const item of dataArray) {
+                        const [x, z, rot] = item;
+                        const box = new THREE.Box3();
+                        const size = new THREE.Vector3(asset.size[0], asset.size[1], asset.size[2]);
+                        const center = new THREE.Vector3(x, asset.size[1]/2, z);
+                        box.setFromCenterAndSize(center, size);
+                        collisionBBoxes.push(box);
+                    }
+                }
+            }
+            
+            for (let i = 0; i < levelData.buildingInstances.length; i++) {
+                const instance = levelData.buildingInstances[i];
+                const def = levelData.buildingDefinitions[instance.defId];
+                if (!def || !def.isSolid) continue;
+
+                const mesh = customBuildingMeshes[i];
+                if(mesh) {
+                    mesh.updateMatrixWorld();
+                    const box = new THREE.Box3().setFromObject(mesh);
+                    collisionBBoxes.push(box);
+                }
+            }
         }
         
         function clearLevel() {
             if (!confirm("Вы уверены, что хотите полностью очистить уровень?")) return;
-            levelData.floors = {};
-            levelData.walls = {};
-            levelData.objects = {};
+            levelData = { floors: {}, walls: {}, objects: {}, buildingDefinitions: {}, buildingInstances: [] };
+            updateCustomToolsUI();
             updateLevelGeometry();
         }
 
@@ -637,21 +903,23 @@ EDITOR_TEMPLATE = '''
                 const joystickContainer = document.getElementById('joystick-container');
                 uiContainer.style.display = 'flex';
                 gridHelper.visible = true;
-                previewMesh.visible = true;
+                if(previewMesh) previewMesh.visible = true;
                 orbitControls.enabled = true;
                 player.visible = false;
                 blocker.style.display = 'none';
                 joystickContainer.style.display = 'none';
+                entranceHelper.visible = false;
                 camera.position.set(50, 50, 50);
                 camera.lookAt(0,0,0);
                 orbitControls.target.set(0, 0, 0);
-                onWindowResize(); // re-adjust camera
+                onWindowResize(); 
             } else { // Enter play mode
                 blocker.style.display = 'block';
             }
         }
         
         function enterPlayMode() {
+            rebuildCollisionData();
             isPlayMode = true;
             renderer.domElement.requestPointerLock?.();
             const uiContainer = document.getElementById('ui-container');
@@ -659,12 +927,12 @@ EDITOR_TEMPLATE = '''
             const joystickContainer = document.getElementById('joystick-container');
             uiContainer.style.display = 'none';
             gridHelper.visible = false;
-            previewMesh.visible = false;
+            if(previewMesh) previewMesh.visible = false;
             orbitControls.enabled = false;
             player.visible = true;
             player.position.set(0, 0, 0);
             blocker.style.display = 'none';
-            if ('ontouchstart' in window) { // Show joystick only on touch devices
+            if ('ontouchstart' in window) {
                 joystickContainer.style.display = 'block';
             }
         }
@@ -705,6 +973,7 @@ EDITOR_TEMPLATE = '''
                 
                 clearLevel();
                 Object.assign(levelData, result.data);
+                updateCustomToolsUI();
                 updateLevelGeometry();
                 document.getElementById('project-name').value = projectName;
 
@@ -730,40 +999,74 @@ EDITOR_TEMPLATE = '''
                 moveDirection.z += joystick.vector.y / maxRadius;
             }
 
-            if (moveDirection.lengthSq() === 0) return;
-            moveDirection.normalize().multiplyScalar(speed);
-            
-            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));
-            let collisionX = false;
-            for(const colBox of collisionBBoxes) {
-                if (playerBoxX.intersectsBox(colBox)) {
-                    collisionX = true;
-                    break;
+            if (moveDirection.lengthSq() > 0) {
+                moveDirection.normalize().multiplyScalar(speed);
+                
+                const playerBox = new THREE.Box3().setFromObject(player);
+                
+                const playerBoxX = playerBox.clone().translate(new THREE.Vector3(moveDirection.x, 0, 0));
+                let collisionX = false;
+                for(const colBox of collisionBBoxes) {
+                    if (playerBoxX.intersectsBox(colBox)) {
+                        collisionX = true;
+                        break;
+                    }
                 }
-            }
-            if(!collisionX) player.position.x = intendedXPos.x;
+                if(!collisionX) player.position.x += moveDirection.x;
 
-            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 colBox of collisionBBoxes) {
-                if (playerBoxZ.intersectsBox(colBox)) {
-                    collisionZ = true;
-                    break;
+                const playerBoxZ = playerBox.clone().translate(new THREE.Vector3(0, 0, moveDirection.z));
+                let collisionZ = false;
+                for(const colBox of collisionBBoxes) {
+                    if (playerBoxZ.intersectsBox(colBox)) {
+                        collisionZ = true;
+                        break;
+                    }
                 }
+                if(!collisionZ) player.position.z += moveDirection.z;
             }
-            if(!collisionZ) player.position.z = intendedZPos.z;
             
             const cameraOffset = new THREE.Vector3(30, 30, 30);
             camera.position.copy(player.position).add(cameraOffset);
             camera.lookAt(player.position);
+            
+            updateEntranceHighlight();
+        }
+
+        function updateEntranceHighlight() {
+            let closestEntranceDist = Infinity;
+            let entranceToShow = null;
+            
+            for(let i=0; i < levelData.buildingInstances.length; i++) {
+                const instance = levelData.buildingInstances[i];
+                const def = levelData.buildingDefinitions[instance.defId];
+                if (!def || !def.entrance) continue;
+
+                const dx = (def.entrance.x - 0.5) * instance.scale.x;
+                const dy = (def.entrance.y - 0.5) * instance.scale.y;
+
+                let entrancePos = new THREE.Vector3(dx, dy, 0);
+                const rotationMatrix = new THREE.Matrix4().makeRotationY(instance.rotation);
+                entrancePos.applyMatrix4(rotationMatrix);
+                entrancePos.add(new THREE.Vector3(instance.pos.x, instance.pos.y, instance.pos.z));
+                
+                const dist = player.position.distanceTo(entrancePos);
+                if (dist < 5 && dist < closestEntranceDist) {
+                    closestEntranceDist = dist;
+                    entranceToShow = entrancePos;
+                }
+            }
+            
+            if (entranceToShow) {
+                entranceHelper.position.copy(entranceToShow);
+                entranceHelper.visible = true;
+            } else {
+                entranceHelper.visible = false;
+            }
         }
 
         function showSpinner(show) {
             document.getElementById('loading-spinner').style.display = show ? 'block' : 'none';
+            document.getElementById('blocker').style.display = show ? 'block' : 'none';
         }
 
         function animate() {