diff --git a/assets/js/game.js b/assets/js/game.js
index 07b4c6d..dff9432 100644
--- a/assets/js/game.js
+++ b/assets/js/game.js
@@ -1,398 +1 @@
-'use strict';
-
-var map;
-var resultmap;
-var markers = [];
-var guess_coordinates = [];
-var true_location = [];
-
-var accumulated_distance = 0;
-var current_name = '';
-var distance_from_guess = [];
-var check_count = 0;
-
-var choiceLocation = "HN"
-
-
-const boundingBoxVN = {
- HN: [105.7700, 20.9600, 105.8800, 21.0500, 0.003], // Hà Nội
- TPHCM: [106.6200, 10.7100, 106.7500, 10.8300, 0.005], // TP. Hồ Chí Minh
- HP: [106.6500, 20.8000, 106.7500, 20.9000, 0.05], // Trung tâm Hải Phòng
- ND: [106.0000, 20.3500, 106.2500, 20.5000, 0.005],
- DN: [108.1700, 16.0000, 108.2500, 16.1000, 0.005], // Đà Nẵng
-};
-
-var minLat = boundingBoxVN[choiceLocation][1];
-var maxLat = boundingBoxVN[choiceLocation][3];
-var minLong = boundingBoxVN[choiceLocation][0];
-var maxLong = boundingBoxVN[choiceLocation][2];
-
-var delta = boundingBoxVN[choiceLocation][4];
-
-const accessToken = 'MLY|24113623194974280|5bf83fa202912f1cc3210b2cf968fb65';
-
-async function getRandomMapillaryImage() {
-
- // Generate a random point within the defined area
- const randomLat = (Math.random() * (maxLat - minLat) + minLat);
- const randomLng = (Math.random() * (maxLong - minLong) + minLong);
-
- const bbox = [
- (randomLng - delta).toFixed(4),
- (randomLat - delta).toFixed(4),
- (randomLng + delta).toFixed(4),
- (randomLat + delta).toFixed(4)
- ].join(',');
-
- const url = `https://graph.mapillary.com/images?access_token=${accessToken}&fields=id,thumb_original_url,geometry,is_pano&limit=3&bbox=${bbox}&is_pano=true`;
- try {
- console.log('Fetching panoramic image...');
- const res = await fetch(url);
- const data = await res.json();
- if (data.data && data.data.length > 0) {
- // Filter for panoramic images first
- const panoramicImages = data.data.filter(img => img.is_pano);
- const image = panoramicImages.length > 0 ? panoramicImages[Math.floor(Math.random() * panoramicImages.length)] : data.data[0];
-
- console.log('Image fetched successfully');
- return {
- lat: image.geometry.coordinates[1],
- lng: image.geometry.coordinates[0],
- url: image.thumb_original_url,
- id: image.id,
- isPano: image.is_pano || false
- };
- } else {
- console.log('No images found, retrying...');
- return getRandomMapillaryImage();
- }
- } catch (error) {
- console.error('Error fetching image:', error);
- // Show error in loading area
- document.getElementById('pano').innerHTML = `
-
-
-
⚠️ Error loading image
-
Retrying...
-
-
`;
- });
-
- } else {
- console.warn('PhotoSphereViewer not available, using fallback image');
- hideLoading();
- document.getElementById('pano').innerHTML = ``;
- }
- } catch (error) {
- console.error('Error initializing Photo Sphere Viewer:', error);
- // Fallback to regular image
- hideLoading();
- document.getElementById('pano').innerHTML = ``;
- }
-
-
- map = L.map('map').setView([(minLat + maxLat) / 2, (minLong + maxLong) / 2], 10);
- L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
- maxZoom: 19,
- }).addTo(map);
-
- map.on('click', function(e) {
- deleteMarkers();
- guess_coordinates = [e.latlng.lat, e.latlng.lng];
- const marker = L.marker(e.latlng).addTo(map);
- markers.push(marker);
- if (check_count === 0) {
- enableButton('check');
- check_count += 1;
- }
- });
- }).catch(error => {
- console.error('Error in initialize function:', error);
- document.getElementById('pano').innerHTML = `
-
-
-
⚠️ Failed to load
-
-
-