Update app.py

app.py

@@ -123,8 +123,6 @@ EDITOR_TEMPLATE = '''
             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; }
-        #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;
         }
@@ -171,15 +169,14 @@ EDITOR_TEMPLATE = '''
                 <div id="tool-selector"></div>
                 <p style="font-size: 0.8em; color: #888; margin-top: 10px;">
                     ЛКМ: Разместить<br>
-                    ПКМ: Вращать<br>
+                    ПКМ: Вращать / Двигать камеру<br>
                     Shift + ЛКМ: Удалить<br>
-                    Колесо мыши: Вращать
+                    Колесо мыши: Приближение
                 </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>Нажмите ESC для выхода</p></div></div>
     <div id="loading-spinner"></div>
     <div id="joystick-container"><div id="joystick-handle"></div></div>
 
@@ -188,10 +185,8 @@ EDITOR_TEMPLATE = '''
     </script>
     <script type="module">
         import * as THREE from 'three';
-        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-        let scene, camera, renderer, orbitControls;
-        let raycaster, mouse, placementPlane, gridHelper, previewMesh;
+        let scene, camera, renderer, raycaster, mouse, placementPlane, gridHelper, previewMesh;
         
         let isPlayMode = false;
         let player, playerVelocity = new THREE.Vector3();
@@ -206,32 +201,56 @@ EDITOR_TEMPLATE = '''
         const levelData = { floors: {}, walls: {}, objects: {} };
 
         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 ASSETS = {
             floors: {
-                grass: { color: 0x55902f, size: [gridSize, 0.1, gridSize] },
-                concrete: { color: 0x888888, size: [gridSize, 0.1, gridSize] },
-                wood: { color: 0x8B4513, size: [gridSize, 0.1, gridSize] },
-                dirt: { color: 0x9b7653, size: [gridSize, 0.1, gridSize] }
+                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: { color: 0xb55a44, size: [gridSize, 2.5, 0.2] },
-                concrete: { color: 0xc2c2c2, size: [gridSize, 2.5, 0.2] }
+                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: { color: 0x966F33, size: [gridSize * 0.8, gridSize * 0.8, gridSize * 0.8] },
-                barrel: { color: 0x595959, size: [gridSize * 0.4, gridSize * 0.8, 0], geometry: 'cylinder' }
+                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' }
             }
         };
 
         const instancedMeshes = {};
+        let isPanning = false;
+        const panStart = new THREE.Vector2();
 
         function init() {
             scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x283747);
+            scene.background = new THREE.Color(0x3d4a55);
+            scene.fog = new THREE.Fog(0x3d4a55, 50, 150);
             
-            camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000);
+            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);
 
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
@@ -239,17 +258,11 @@ EDITOR_TEMPLATE = '''
             renderer.shadowMap.enabled = true;
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.body.appendChild(renderer.domElement);
-
-            orbitControls = new OrbitControls(camera, renderer.domElement);
-            orbitControls.enableDamping = true;
-            orbitControls.maxPolarAngle = Math.PI / 2.2;
-            orbitControls.minDistance = 10;
-            orbitControls.maxDistance = 100;
-
-            const hemiLight = new THREE.HemisphereLight(0xB1E1FF, 0xB97A20, 0.8);
+            
+            const hemiLight = new THREE.HemisphereLight(0xB1E1FF, 0x495057, 0.6);
             scene.add(hemiLight);
 
-            const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
+            const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
             dirLight.position.set(-30, 50, -30);
             dirLight.castShadow = true;
             dirLight.shadow.mapSize.width = 2048;
@@ -279,12 +292,15 @@ EDITOR_TEMPLATE = '''
             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('keyup', e => { keyStates[e.code] = false; });
             renderer.domElement.addEventListener('wheel', e => {
                 if(!isPlayMode) {
                     e.preventDefault();
-                    rotatePreview(e.deltaY > 0 ? 1 : -1);
+                    const zoomAmount = e.deltaY > 0 ? 1.1 : 0.9;
+                    camera.zoom *= zoomAmount;
+                    camera.updateProjectionMatrix();
                 }
             }, { passive: false });
             renderer.domElement.addEventListener('contextmenu', e => e.preventDefault());
@@ -298,13 +314,16 @@ EDITOR_TEMPLATE = '''
                 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({ color: asset.color });
+                    const material = new THREE.MeshStandardMaterial({ map: texture });
                     const mesh = new THREE.InstancedMesh(geometry, material, MAX_COUNT);
                     mesh.castShadow = true;
                     mesh.receiveShadow = true;
@@ -332,7 +351,7 @@ EDITOR_TEMPLATE = '''
                 for (const type in ASSETS[category]) {
                     const item = document.createElement('div');
                     item.className = 'tool-item';
-                    item.textContent = `${category.slice(0,1).toUpperCase()}: ${type}`;
+                    item.textContent = `${category.slice(0,1).toUpperCase()}: ${type.replace('_',' ')}`;
                     item.dataset.category = category;
                     item.dataset.type = type;
                     item.addEventListener('click', () => selectTool(category, type));
@@ -358,8 +377,6 @@ EDITOR_TEMPLATE = '''
                 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;
@@ -393,34 +410,60 @@ EDITOR_TEMPLATE = '''
             } else {
                 geometry = new THREE.BoxGeometry(...asset.size);
             }
-            const material = new THREE.MeshBasicMaterial({ color: asset.color, transparent: true, opacity: 0.6 });
+            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 onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
+            const aspect = window.innerWidth / window.innerHeight;
+            const frustumSize = 30 / camera.zoom;
+            camera.left = frustumSize * aspect / -2;
+            camera.right = frustumSize * aspect / 2;
+            camera.top = frustumSize / 2;
+            camera.bottom = frustumSize / -2;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         }
 
         function onPointerMove(event) {
-            if (isPlayMode) 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);
-                previewMesh.position.set(gridX * gridSize, 0, gridZ * gridSize);
                 
-                const asset = ASSETS[currentTool.category][currentTool.type];
+                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;
-                } else if (currentTool.category === 'walls') {
-                    previewMesh.position.y = asset.size[1] / 2;
                 } else {
                     previewMesh.position.y = asset.size[1] / 2;
                 }
@@ -438,18 +481,20 @@ EDITOR_TEMPLATE = '''
         }
         
         function onPointerDown(event) {
-            if (isPlayMode || !previewMesh.visible) return;
-            const isRemoving = event.shiftKey;
-            
-            if (event.button === 2) { // Right click
-                rotatePreview(1);
+            if (isPlayMode && event.target.tagName === 'CANVAS') {
+              if(isMobile) return;
+            }
+            if (!isPlayMode && event.button === 2) {
+                isPanning = true;
+                panStart.set(event.clientX, event.clientY);
                 return;
             }
-            
-            if (event.button !== 0) return; // Not left click
+
+            if (isPlayMode || !previewMesh.visible || event.button !== 0) return;
+            const isRemoving = event.shiftKey;
             
             const pos = previewMesh.position;
-            const key = `${pos.x},${pos.z}`;
+            const key = `${pos.x},${pos.y},${pos.z}`;
 
             if (isRemoving) {
                 removeItemAt(pos);
@@ -458,6 +503,12 @@ EDITOR_TEMPLATE = '''
             }
             updateLevelGeometry();
         }
+
+        function onPointerUp(event) {
+            if (event.button === 2) {
+                isPanning = false;
+            }
+        }
         
         function rotatePreview(direction) {
             currentRotation += (Math.PI / 2) * direction;
@@ -470,6 +521,7 @@ EDITOR_TEMPLATE = '''
             
             removeItemAt(pos);
 
+            if (!levelData[category]) levelData[category] = {};
             if (!levelData[category][type]) levelData[category][type] = [];
             levelData[category][type].push([pos.x, pos.z, rotation]);
         }
@@ -503,17 +555,15 @@ EDITOR_TEMPLATE = '''
                         dummy.position.set(x, 0, z);
                         dummy.rotation.set(0, rot, 0);
 
-                        if (category === 'floors') {
-                            dummy.position.y = asset.size[1] / 2;
-                        } else {
-                             dummy.position.y = asset.size[1] / 2;
-                        }
+                        dummy.position.y = (category === 'floors' ? asset.size[1] / 2 : asset.size[1] / 2);
                         
                         dummy.updateMatrix();
                         mesh.setMatrixAt(i, dummy.matrix);
-
-                        if (category === 'walls') {
-                           const box = new THREE.Box3().setFromObject(dummy);
+                        
+                        if (category === 'walls' || category === 'objects') {
+                           const boxHelper = new THREE.BoxHelper(dummy);
+                           boxHelper.geometry.computeBoundingBox();
+                           const box = boxHelper.geometry.boundingBox;
                            wallBBoxes.push(box);
                         }
                     }
@@ -533,28 +583,25 @@ EDITOR_TEMPLATE = '''
         function togglePlayMode() {
             isPlayMode = !isPlayMode;
             const uiContainer = document.getElementById('ui-container');
-            const blocker = document.getElementById('blocker');
             const joystickContainer = document.getElementById('joystick-container');
             
             if (isPlayMode) {
                 uiContainer.style.display = 'none';
                 gridHelper.visible = false;
                 previewMesh.visible = false;
-                orbitControls.enabled = false;
                 player.visible = true;
                 player.position.set(0, 0, 0);
-                blocker.style.display = 'block';
-                joystickContainer.style.display = 'block';
+                if(isMobile) joystickContainer.style.display = 'block';
             } else {
                 uiContainer.style.display = 'flex';
                 gridHelper.visible = true;
                 previewMesh.visible = true;
-                orbitControls.enabled = true;
                 player.visible = false;
-                blocker.style.display = 'none';
                 joystickContainer.style.display = 'none';
                 camera.position.set(25, 30, 25);
-                orbitControls.target.set(0, 0, 0);
+                camera.lookAt(0,0,0);
+                camera.zoom = 1;
+                camera.updateProjectionMatrix();
             }
         }
 
@@ -605,6 +652,8 @@ EDITOR_TEMPLATE = '''
         }
 
         const moveDirection = new THREE.Vector3();
+        const cameraOffset = new THREE.Vector3(20, 25, 20);
+
         function updatePlayer(deltaTime) {
             const speed = playerSpeed * deltaTime;
             moveDirection.set(0,0,0);
@@ -646,10 +695,9 @@ EDITOR_TEMPLATE = '''
             }
             if(!collisionZ) player.position.z = intendedZPos.z;
 
-            camera.position.x = player.position.x + 15;
-            camera.position.z = player.position.z + 15;
-            camera.position.y = 20;
+            camera.position.copy(player.position).add(cameraOffset);
             camera.lookAt(player.position);
+            camera.updateProjectionMatrix();
         }
 
         function showSpinner(show) {
@@ -662,9 +710,8 @@ EDITOR_TEMPLATE = '''
             
             if (isPlayMode) {
                 updatePlayer(deltaTime);
-            } else {
-                orbitControls.update();
             }
+            
             renderer.render(scene, camera);
         }