Update app.py

app.py

@@ -32,8 +32,8 @@ def index():
         <title>TON AR Hotspots</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
         <script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
-        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAo9TkjVj/lQsiG9MixcUCddNmW+wFRfSDKcRFuQ=" crossorigin=""/>
-        <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjGwcl9PfVyaNnITeztADbcHiK/fxh8=" crossorigin=""></script>
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
         <style>
             body, html {
                 margin: 0;
@@ -111,64 +111,67 @@ def index():
                 z-index: 10;
                 text-align: center;
             }
+            .hotspot small {
+                font-size: 0.7em;
+                opacity: 0.8;
+                display: block;
+                margin-top: 5px;
+            }
             .hotspot.hidden {
                 opacity: 0;
                 pointer-events: none;
             }
-            #mini-map-container {
+            #map-container {
                 position: fixed;
                 bottom: 10px;
                 left: 10px;
                 width: 200px;
                 height: 200px;
-                background-color: #333;
-                border: 2px solid #555;
+                background-color: rgba(0, 0, 0, 0.7);
                 border-radius: 10px;
                 overflow: hidden;
-                z-index: 20;
-                box-shadow: 0 0 15px rgba(0,0,0,0.7);
                 transition: all 0.3s ease;
+                z-index: 50;
                 display: flex;
                 flex-direction: column;
             }
-            #mini-map-container.expanded {
+            #map-container.fullscreen {
                 width: 100%;
                 height: 100%;
                 top: 0;
                 left: 0;
                 border-radius: 0;
+                justify-content: center;
+                align-items: center;
             }
             #map {
                 flex-grow: 1;
                 width: 100%;
+                height: calc(100% - 35px);
+                border-radius: 10px;
+                overflow: hidden;
+            }
+            #map-container.fullscreen #map {
                 height: 100%;
+                border-radius: 0;
             }
             #toggle-map-button {
-                position: absolute;
-                top: 5px;
-                right: 5px;
-                z-index: 21;
-                background-color: rgba(0,0,0,0.6);
+                background-color: rgba(0, 0, 0, 0.5);
                 color: white;
                 border: none;
-                border-radius: 50%;
-                width: 30px;
-                height: 30px;
-                font-size: 18px;
+                padding: 5px 10px;
+                margin: 5px;
+                border-radius: 5px;
                 cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
+                font-size: 12px;
+                align-self: flex-end;
             }
-            #mini-map-container.expanded #toggle-map-button {
+            #map-container.fullscreen #toggle-map-button {
+                position: absolute;
                 top: 10px;
                 right: 10px;
-            }
-            .leaflet-control-container, .leaflet-pane {
-                z-index: auto !important;
-            }
-            .leaflet-control-attribution.leaflet-control a {
-                color: #fff;
+                font-size: 16px;
+                margin: 0;
             }
         </style>
     </head>
@@ -186,9 +189,9 @@ def index():
         <video id="camera-view" playsinline autoplay muted></video>
         <div id="ar-container"></div>
 
-        <div id="mini-map-container">
-            <button id="toggle-map-button">⤢</button>
+        <div id="map-container">
             <div id="map"></div>
+            <button id="toggle-map-button">Minimap</button>
         </div>
 
         <script>
@@ -201,12 +204,14 @@ def index():
                 hotspots: [],
                 currentUserPosition: null,
                 deviceOrientation: { alpha: 0, beta: 0, gamma: 0 },
-                cameraFov: 60
+                cameraFov: 60,
+                map: null,
+                userMarker: null,
+                hotspotMarkers: [],
+                initialMapSet: false
             };
 
-            let map;
-            let userMarker;
-            let hotspotMarkers = [];
+            const MAX_VISIBLE_DISTANCE = 10;
 
             async function fetchBalance(address) {
                 try {
@@ -224,7 +229,7 @@ def index():
                 await setupCamera();
                 setupGPS();
                 setupOrientationListener();
-                setupMap();
+                initMap();
                 await loadHotspots();
                 setupAddHotspotListener();
                 requestAnimationFrame(update);
@@ -267,13 +272,11 @@ def index():
                                 lat: position.coords.latitude,
                                 lon: position.coords.longitude
                             };
-                            if (map && userMarker) {
-                                const latLng = [position.coords.latitude, position.coords.longitude];
-                                userMarker.setLatLng(latLng);
-                                if (map.getZoom() < 15) { // Only set view if zoom is low, to avoid constant recentering
-                                    map.setView(latLng, 15);
-                                } else {
-                                    map.panTo(latLng);
+                            if (state.userMarker) {
+                                state.userMarker.setLatLng([state.currentUserPosition.lat, state.currentUserPosition.lon]);
+                                if (!state.initialMapSet) {
+                                    state.map.setView([state.currentUserPosition.lat, state.currentUserPosition.lon], 15);
+                                    state.initialMapSet = true;
                                 }
                             }
                         },
@@ -301,26 +304,25 @@ def index():
                 }
             }
 
-            function setupMap() {
-                map = L.map('map', {zoomControl: false}).setView([0, 0], 2);
+            function initMap() {
+                state.map = L.map('map').setView([0, 0], 2);
                 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                }).addTo(map);
-
-                userMarker = L.circleMarker([0, 0], {
-                    radius: 8,
-                    color: '#007aff',
-                    fillColor: '#007aff',
-                    fillOpacity: 0.8
-                }).addTo(map);
-
-                document.getElementById('toggle-map-button').addEventListener('click', () => {
-                    const container = document.getElementById('mini-map-container');
-                    const button = document.getElementById('toggle-map-button');
-                    container.classList.toggle('expanded');
-                    button.innerText = container.classList.contains('expanded') ? '⤡' : '⤢';
-                    setTimeout(() => { map.invalidateSize(); }, 300); 
-                });
+                    attribution: '© OpenStreetMap contributors'
+                }).addTo(state.map);
+                state.userMarker = L.marker([0, 0]).addTo(state.map).bindPopup('Ваше местоположение').openPopup();
+
+                document.getElementById('toggle-map-button').addEventListener('click', toggleMap);
+            }
+
+            function toggleMap() {
+                const mapContainer = document.getElementById('map-container');
+                mapContainer.classList.toggle('fullscreen');
+                setTimeout(() => {
+                    state.map.invalidateSize();
+                    if (state.currentUserPosition) {
+                        state.map.setView([state.currentUserPosition.lat, state.currentUserPosition.lon], state.map.getZoom());
+                    }
+                }, 300);
             }
 
             async function loadHotspots() {
@@ -329,6 +331,7 @@ def index():
                     const data = await response.json();
                     state.hotspots = data;
                     renderHotspots();
+                    renderHotspotsOnMap();
                 } catch (error) {
                     console.error('Ошибка загрузки хотспотов:', error);
                 }
@@ -337,36 +340,26 @@ def index():
             function renderHotspots() {
                 const container = document.getElementById('ar-container');
                 container.innerHTML = '';
-
-                hotspotMarkers.forEach(marker => marker.remove());
-                hotspotMarkers = [];
-
                 state.hotspots.forEach((hotspot, index) => {
                     const el = document.createElement('div');
                     el.className = 'hotspot';
                     el.id = `hotspot-${index}`;
-                    
-                    const textNode = document.createElement('span');
-                    textNode.innerText = hotspot.text;
-                    el.appendChild(textNode);
-
-                    if (hotspot.user_address) {
-                        const creatorSpan = document.createElement('span');
-                        creatorSpan.style.fontSize = '0.7em';
-                        creatorSpan.style.display = 'block';
-                        creatorSpan.style.marginTop = '5px';
-                        creatorSpan.innerText = `by ${hotspot.user_address.slice(0, 6)}...${hotspot.user_address.slice(-4)}`;
-                        el.appendChild(creatorSpan);
-                    }
+                    el.innerHTML = `${hotspot.text}<br><small>by ${hotspot.creator_address ? hotspot.creator_address.slice(0, 6) + '...' + hotspot.creator_address.slice(-4) : 'Unknown'}</small>`;
                     container.appendChild(el);
+                });
+            }
 
-                    const marker = L.marker([hotspot.lat, hotspot.lon]).addTo(map);
-                    let popupContent = `<b>${hotspot.text}</b>`;
-                    if (hotspot.user_address) {
-                        popupContent += `<br>Добавил: ${hotspot.user_address.slice(0, 6)}...${hotspot.user_address.slice(-4)}`;
-                    }
-                    marker.bindPopup(popupContent);
-                    hotspotMarkers.push(marker);
+            function renderHotspotsOnMap() {
+                if (!state.map) return;
+
+                state.hotspotMarkers.forEach(marker => state.map.removeLayer(marker));
+                state.hotspotMarkers = [];
+
+                state.hotspots.forEach(hotspot => {
+                    const marker = L.marker([hotspot.lat, hotspot.lon])
+                                   .addTo(state.map)
+                                   .bindPopup(`${hotspot.text}<br>by ${hotspot.creator_address ? hotspot.creator_address.slice(0, 6) + '...' + hotspot.creator_address.slice(-4) : 'Unknown'}`);
+                    state.hotspotMarkers.push(marker);
                 });
             }
 
@@ -378,7 +371,7 @@ def index():
                         return;
                     }
                     if (!tonConnectUI.account || !tonConnectUI.account.address) {
-                        alert('Пожалуйста, подключите кошелек, чтобы добавить хотспот.');
+                        alert('Для добавления хотспота необходимо подключить кошелек.');
                         return;
                     }
 
@@ -388,7 +381,7 @@ def index():
                             text: text,
                             lat: state.currentUserPosition.lat,
                             lon: state.currentUserPosition.lon,
-                            user_address: tonConnectUI.account.address
+                            creator_address: tonConnectUI.account.address
                         };
 
                         try {
@@ -398,8 +391,10 @@ def index():
                                 body: JSON.stringify(newHotspot)
                             });
                             if(response.ok) {
-                                state.hotspots.push(newHotspot);
+                                const savedHotspot = await response.json();
+                                state.hotspots.push(savedHotspot.hotspot);
                                 renderHotspots();
+                                renderHotspotsOnMap();
                             } else {
                                 alert('Не удалось сохранить хотспот.');
                             }
@@ -453,7 +448,7 @@ def index():
 
                     const distance = haversineDistance(state.currentUserPosition, hotspot);
                     
-                    if (distance > 10) { // Hotspot visible only within 10 meters
+                    if (distance > MAX_VISIBLE_DISTANCE) {
                         el.classList.add('hidden');
                         return;
                     }
@@ -472,7 +467,7 @@ def index():
                         const x = screenWidth / 2 + (angleDiff / (state.cameraFov / 2)) * (screenWidth / 2);
                         const y = screenHeight / 2;
                         
-                        const scale = Math.max(0.5, 1 - distance / 10); // Scales from 1.0 at 0m to 0.5 at 10m
+                        const scale = Math.max(0.5, 1 - distance / MAX_VISIBLE_DISTANCE);
 
                         el.style.left = `${x}px`;
                         el.style.top = `${y}px`;
@@ -519,17 +514,17 @@ def handle_hotspots():
         text = data.get('text')
         lat = data.get('lat')
         lon = data.get('lon')
-        user_address = data.get('user_address')
+        creator_address = data.get('creator_address')
 
-        if not all([text, lat, lon, user_address]):
-            return jsonify({"error": "Missing data: text, lat, lon, or user_address"}), 400
+        if not all([text, lat, lon, creator_address]):
+            return jsonify({"error": "Missing data: text, lat, lon, or creator_address"}), 400
         
         try:
             new_hotspot = {
                 "text": str(text),
                 "lat": float(lat),
                 "lon": float(lon),
-                "user_address": str(user_address)
+                "creator_address": str(creator_address)
             }
             save_hotspot(new_hotspot)
             return jsonify({"success": True, "hotspot": new_hotspot}), 201