mirror of
https://github.com/tiennm99/vigeoguessr.git
synced 2026-10-11 03:13:55 +00:00
new ver
This commit is contained in:
DucLV committed
1 parent
b472d23686
commit
903ec66d6f
1 file changed
+1
-398
+1
-398
@@ -1,398 +1 @@
|
|||||||
'use strict';
|
'use strict';const _0x2f3f3d=_0x522a;(function(_0x28c52f,_0x241c32){const _0x6471a4=_0x522a,_0x10f607=_0x28c52f();while(!![]){try{const _0x49c61a=-parseInt(_0x6471a4(0x1af))/0x1+-parseInt(_0x6471a4(0x1db))/0x2*(parseInt(_0x6471a4(0x1b4))/0x3)+parseInt(_0x6471a4(0x1b7))/0x4+parseInt(_0x6471a4(0x198))/0x5+parseInt(_0x6471a4(0x1cc))/0x6+parseInt(_0x6471a4(0x19e))/0x7+parseInt(_0x6471a4(0x1a6))/0x8;if(_0x49c61a===_0x241c32)break;else _0x10f607['push'](_0x10f607['shift']());}catch(_0xcf1bba){_0x10f607['push'](_0x10f607['shift']());}}}(_0x4cf1,0x5c6ed));var map,resultmap,markers=[],guess_coordinates=[],true_location=[],accumulated_distance=0x0,current_name='',distance_from_guess=[],check_count=0x0,choiceLocation='HN';const boundingBoxVN={'HN':[105.77,20.96,105.88,21.05,0.003],'TPHCM':[106.62,10.71,106.75,10.83,0.005],'HP':[106.65,20.8,106.75,20.9,0.05],'ND':[0x6a,20.35,106.25,20.5,0.005],'DN':[108.17,0x10,108.25,16.1,0.005]};var minLat=boundingBoxVN[choiceLocation][0x1],maxLat=boundingBoxVN[choiceLocation][0x3],minLong=boundingBoxVN[choiceLocation][0x0],maxLong=boundingBoxVN[choiceLocation][0x2],delta=boundingBoxVN[choiceLocation][0x4];const accessToken='MLY|24113623194974280|5bf83fa202912f1cc3210b2cf968fb65';async function getRandomMapillaryImage(){const _0x4eb278=_0x522a,_0x1e5b33=Math[_0x4eb278(0x1cd)]()*(maxLat-minLat)+minLat,_0x211128=Math[_0x4eb278(0x1cd)]()*(maxLong-minLong)+minLong,_0x2454d8=[(_0x211128-delta)[_0x4eb278(0x18c)](0x4),(_0x1e5b33-delta)['toFixed'](0x4),(_0x211128+delta)[_0x4eb278(0x18c)](0x4),(_0x1e5b33+delta)[_0x4eb278(0x18c)](0x4)][_0x4eb278(0x1c0)](','),_0x514f4a=_0x4eb278(0x1de)+accessToken+'&fields=id,thumb_original_url,geometry,is_pano&limit=3&bbox='+_0x2454d8+'&is_pano=true';try{console['log'](_0x4eb278(0x1e8));const _0x36adbf=await fetch(_0x514f4a),_0x5e2489=await _0x36adbf[_0x4eb278(0x1c9)]();if(_0x5e2489['data']&&_0x5e2489['data']['length']>0x0){const _0x20dd30=_0x5e2489['data'][_0x4eb278(0x190)](_0x5bcfd5=>_0x5bcfd5[_0x4eb278(0x18a)]),_0x2e6a28=_0x20dd30[_0x4eb278(0x1ab)]>0x0?_0x20dd30[Math[_0x4eb278(0x186)](Math[_0x4eb278(0x1cd)]()*_0x20dd30[_0x4eb278(0x1ab)])]:_0x5e2489[_0x4eb278(0x1cf)][0x0];return console[_0x4eb278(0x1a1)](_0x4eb278(0x1ca)),{'lat':_0x2e6a28[_0x4eb278(0x189)][_0x4eb278(0x1b1)][0x1],'lng':_0x2e6a28[_0x4eb278(0x189)][_0x4eb278(0x1b1)][0x0],'url':_0x2e6a28['thumb_original_url'],'id':_0x2e6a28['id'],'isPano':_0x2e6a28[_0x4eb278(0x18a)]||![]};}else return console[_0x4eb278(0x1a1)](_0x4eb278(0x1c7)),getRandomMapillaryImage();}catch(_0x498c14){console['error']('Error\x20fetching\x20image:',_0x498c14),document[_0x4eb278(0x1b0)](_0x4eb278(0x1e1))[_0x4eb278(0x19d)]=_0x4eb278(0x1aa),setTimeout(()=>getRandomMapillaryImage(),0x7d0);}}function checkLibrariesLoaded(){return new Promise(_0x5b45ac=>{const _0x53b944=setInterval(()=>{window['L']&&window['PhotoSphereViewer']&&(clearInterval(_0x53b944),_0x5b45ac());},0x64);});}function showLoading(){const _0x5a4801=_0x522a;document['getElementById'](_0x5a4801(0x1e1))[_0x5a4801(0x19d)]=_0x5a4801(0x1c5);if(!document[_0x5a4801(0x1b0)]('loading-styles')){const _0x54e63f=document[_0x5a4801(0x1a9)](_0x5a4801(0x1e2));_0x54e63f['id']=_0x5a4801(0x1e7),_0x54e63f['textContent']=_0x5a4801(0x1cb),document['head'][_0x5a4801(0x199)](_0x54e63f);}}function hideLoading(){const _0x37fc0f=_0x522a,_0x336799=document['getElementById'](_0x37fc0f(0x1e1));_0x336799&&_0x336799[_0x37fc0f(0x19d)][_0x37fc0f(0x1b3)](_0x37fc0f(0x1c1))&&(_0x336799[_0x37fc0f(0x19d)]='');}function initialize(){const _0x5f0fbe=_0x522a;check_count=0x0,disableButton(_0x5f0fbe(0x1ba)),showLoading(),getRandomMapillaryImage()[_0x5f0fbe(0x1c6)](_0x322477=>{const _0x20a7c9=_0x5f0fbe;if(!_0x322477)return location[_0x20a7c9(0x1bb)]();true_location=[_0x322477[_0x20a7c9(0x1c8)],_0x322477['lng']],current_name=_0x20a7c9(0x19b),document['getElementById'](_0x20a7c9(0x1e1))[_0x20a7c9(0x19d)]='';try{if(window[_0x20a7c9(0x1dc)]&&window[_0x20a7c9(0x1dc)][_0x20a7c9(0x1df)]){hideLoading();const _0x106e35=new PhotoSphereViewer[(_0x20a7c9(0x1df))]({'container':document[_0x20a7c9(0x1b0)](_0x20a7c9(0x1e1)),'panorama':_0x322477['url'],'loadingImg':null,'defaultYaw':0x0,'defaultZoomLvl':-0x60,'navbar':[_0x20a7c9(0x1bc),_0x20a7c9(0x1a5)],'mousewheel':!![],'touchmoveTwoFingers':!![]});_0x106e35[_0x20a7c9(0x1c4)]('ready',()=>{const _0x2b61e9=_0x20a7c9;console['log'](_0x2b61e9(0x1e3));}),_0x106e35[_0x20a7c9(0x1c4)](_0x20a7c9(0x1ad),()=>{const _0x318013=_0x20a7c9;console[_0x318013(0x1a1)](_0x318013(0x1d0));}),_0x106e35['addEventListener']('panorama-error',_0x1c0c5c=>{const _0x61576b=_0x20a7c9;console['error'](_0x61576b(0x1ce),_0x1c0c5c),hideLoading(),document[_0x61576b(0x1b0)]('pano')[_0x61576b(0x19d)]=_0x61576b(0x19c)+_0x322477[_0x61576b(0x18b)]+'\x22\x20style=\x22width:100%;\x20height:100%;\x20object-fit:cover;\x20border-radius:10px;\x22\x20/>';});}else console[_0x20a7c9(0x1b6)](_0x20a7c9(0x1a3)),hideLoading(),document[_0x20a7c9(0x1b0)]('pano')[_0x20a7c9(0x19d)]='<img\x20src=\x22'+_0x322477['url']+'\x22\x20stylLine truncated
|
||||||
|
|
||||||
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 = `
|
|
||||||
<div style="width:100%; height:400px; display:flex; justify-content:center; align-items:center; ">
|
|
||||||
<div style="text-align:center; color: #e74c3c;">
|
|
||||||
<div style="font-size: 18px; margin-bottom: 10px;">⚠️ Error loading image</div>
|
|
||||||
<div style="font-size: 14px;">Retrying...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
// Retry after a short delay
|
|
||||||
setTimeout(() => getRandomMapillaryImage(), 2000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkLibrariesLoaded() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
const checkInterval = setInterval(() => {
|
|
||||||
if (window.L && window.PhotoSphereViewer) {
|
|
||||||
clearInterval(checkInterval);
|
|
||||||
resolve();
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function showLoading() {
|
|
||||||
document.getElementById('pano').innerHTML = `
|
|
||||||
<div style="width:100%; height:400px; display:flex; justify-content:center; align-items:center; ">
|
|
||||||
<div style="text-align:center;">
|
|
||||||
<div style="border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 2s linear infinite; margin: 0 auto 15px;"></div>
|
|
||||||
<div style="color: #666; font-size: 16px;">Loading image...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// Add CSS animation for spinner
|
|
||||||
if (!document.getElementById('loading-styles')) {
|
|
||||||
const style = document.createElement('style');
|
|
||||||
style.id = 'loading-styles';
|
|
||||||
style.textContent = `
|
|
||||||
@keyframes spin {
|
|
||||||
0% { transform: rotate(0deg); }
|
|
||||||
100% { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
document.head.appendChild(style);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideLoading() {
|
|
||||||
// Remove loading indicator
|
|
||||||
const panoElement = document.getElementById('pano');
|
|
||||||
if (panoElement && panoElement.innerHTML.includes('Loading image...')) {
|
|
||||||
panoElement.innerHTML = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function initialize() {
|
|
||||||
check_count = 0;
|
|
||||||
disableButton('check');
|
|
||||||
|
|
||||||
// Show loading indicator
|
|
||||||
showLoading();
|
|
||||||
|
|
||||||
getRandomMapillaryImage().then(image => {
|
|
||||||
if (!image) return location.reload();
|
|
||||||
true_location = [image.lat, image.lng];
|
|
||||||
current_name = "VIET NAM";
|
|
||||||
document.getElementById('pano').innerHTML = ""; // Clear any existing content
|
|
||||||
|
|
||||||
try {
|
|
||||||
if (window.PhotoSphereViewer && window.PhotoSphereViewer.Viewer) {
|
|
||||||
// Hide loading before initializing viewer
|
|
||||||
hideLoading();
|
|
||||||
|
|
||||||
const viewer = new PhotoSphereViewer.Viewer({
|
|
||||||
container: document.getElementById('pano'),
|
|
||||||
panorama: image.url,
|
|
||||||
loadingImg: null,
|
|
||||||
defaultYaw: 0,
|
|
||||||
defaultZoomLvl: -96,
|
|
||||||
navbar: [
|
|
||||||
'zoom',
|
|
||||||
'fullscreen'
|
|
||||||
],
|
|
||||||
mousewheel: false,
|
|
||||||
touchmoveTwoFingers: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add event listeners for loading states
|
|
||||||
viewer.addEventListener('ready', () => {
|
|
||||||
console.log('Photo Sphere Viewer loaded successfully');
|
|
||||||
});
|
|
||||||
|
|
||||||
viewer.addEventListener('panorama-loaded', () => {
|
|
||||||
console.log('Panorama image loaded');
|
|
||||||
});
|
|
||||||
|
|
||||||
viewer.addEventListener('panorama-error', (error) => {
|
|
||||||
console.error('Error loading panorama:', error);
|
|
||||||
// Fallback to regular image on panorama load error
|
|
||||||
hideLoading();
|
|
||||||
document.getElementById('pano').innerHTML = `<img src="${image.url}" style="width:100%; height:100%; object-fit:cover; border-radius:10px;" />`;
|
|
||||||
});
|
|
||||||
|
|
||||||
} else {
|
|
||||||
console.warn('PhotoSphereViewer not available, using fallback image');
|
|
||||||
hideLoading();
|
|
||||||
document.getElementById('pano').innerHTML = `<img src="${image.url}" style="width:100%; height:100%; object-fit:cover; border-radius:10px;" />`;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error initializing Photo Sphere Viewer:', error);
|
|
||||||
// Fallback to regular image
|
|
||||||
hideLoading();
|
|
||||||
document.getElementById('pano').innerHTML = `<img src="${image.url}" style="width:100%; height:100%; object-fit:cover; border-radius:10px;" />`;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
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 = `
|
|
||||||
<div style="width:100%; height:400px; display:flex; justify-content:center; align-items:center;">
|
|
||||||
<div style="text-align:center; color: #e74c3c;">
|
|
||||||
<div style="font-size: 18px; margin-bottom: 10px;">⚠️ Failed to load</div>
|
|
||||||
<button onclick="location.reload()" style="padding: 8px 16px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">Retry</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearMarkers() {
|
|
||||||
for (let i = 0; i < markers.length; i++) {
|
|
||||||
map.removeLayer(markers[i]);
|
|
||||||
}
|
|
||||||
markers = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteMarkers() {
|
|
||||||
clearMarkers();
|
|
||||||
}
|
|
||||||
|
|
||||||
function continueGame() {
|
|
||||||
var resModal = new bootstrap.Modal(document.getElementById('resultModal'));
|
|
||||||
resModal.hide();
|
|
||||||
location.reload();
|
|
||||||
}
|
|
||||||
|
|
||||||
function check() {
|
|
||||||
distance_from_guess = [];
|
|
||||||
var guess_error = distance(guess_coordinates[0], guess_coordinates[1], true_location[0], true_location[1], 'M');
|
|
||||||
accumulated_distance += parseFloat(guess_error);
|
|
||||||
distance_from_guess = guess_error;
|
|
||||||
|
|
||||||
showResultModal(distance_from_guess);
|
|
||||||
|
|
||||||
disableButton('check');
|
|
||||||
}
|
|
||||||
|
|
||||||
function distance(lat1, lon1, lat2, lon2, unit) {
|
|
||||||
if ((lat1 == lat2) && (lon1 == lon2)) {
|
|
||||||
return 0;
|
|
||||||
} else {
|
|
||||||
var radlat1 = Math.PI * lat1 / 180;
|
|
||||||
var radlat2 = Math.PI * lat2 / 180;
|
|
||||||
var theta = lon1 - lon2;
|
|
||||||
var radtheta = Math.PI * theta / 180;
|
|
||||||
var dist = Math.sin(radlat1) * Math.sin(radlat2) +
|
|
||||||
Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
|
|
||||||
|
|
||||||
if (dist > 1) dist = 1;
|
|
||||||
|
|
||||||
dist = Math.acos(dist);
|
|
||||||
dist = dist * 180 / Math.PI;
|
|
||||||
dist = dist * 60 * 1.1515;
|
|
||||||
|
|
||||||
if (unit == "K") dist = dist * 1.609344;
|
|
||||||
if (unit == "N") dist = dist * 0.8684;
|
|
||||||
|
|
||||||
dist = dist * 1609.34;
|
|
||||||
return dist.toFixed(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function display_location() {
|
|
||||||
const scoreText = document.getElementById("score");
|
|
||||||
if (distance_from_guess > 1000)
|
|
||||||
scoreText.innerHTML = `Hmm! Your distance is ${distance_from_guess}m away.`;
|
|
||||||
else if (distance_from_guess > 200)
|
|
||||||
scoreText.innerHTML = `Good job! Your distance is ${distance_from_guess}m away.`;
|
|
||||||
else
|
|
||||||
scoreText.innerHTML = `Excellent! Your distance is ${distance_from_guess}m away.`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function disableButton(id) {
|
|
||||||
document.getElementById(id).disabled = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function enableButton(id) {
|
|
||||||
document.getElementById(id).disabled = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showResultModal(distanceKm) {
|
|
||||||
const modal = document.getElementById("resultModal");
|
|
||||||
const scoreText = document.getElementById("resultText");
|
|
||||||
const distanceText = document.getElementById("distance-guess");
|
|
||||||
|
|
||||||
if (distance_from_guess > 1000)
|
|
||||||
distanceText.innerHTML = `${(distance_from_guess / 1000).toFixed(2)} KM`;
|
|
||||||
else
|
|
||||||
distanceText.innerHTML = `${distance_from_guess} M`;
|
|
||||||
// Update the score text
|
|
||||||
if (distance_from_guess > 1000)
|
|
||||||
scoreText.innerHTML = `Hmm! Nice try.`;
|
|
||||||
else if (distance_from_guess > 200)
|
|
||||||
scoreText.innerHTML = `Good job!`;
|
|
||||||
else
|
|
||||||
scoreText.innerHTML = `Excellent!`;
|
|
||||||
|
|
||||||
// Show the modal
|
|
||||||
modal.style.display = "block";
|
|
||||||
|
|
||||||
// Create the result map
|
|
||||||
createResultMap();
|
|
||||||
}
|
|
||||||
|
|
||||||
function createResultMap() {
|
|
||||||
// Clear any existing map
|
|
||||||
const resultContainer = document.getElementById('result');
|
|
||||||
resultContainer.innerHTML = '';
|
|
||||||
|
|
||||||
var result_map = L.map('result').setView(true_location, 12);
|
|
||||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
||||||
maxZoom: 19,
|
|
||||||
}).addTo(result_map);
|
|
||||||
|
|
||||||
// Invalidate map size to ensure proper rendering
|
|
||||||
setTimeout(() => {
|
|
||||||
result_map.invalidateSize();
|
|
||||||
}, 100);
|
|
||||||
|
|
||||||
const true_marker = L.marker(true_location, {
|
|
||||||
icon: L.icon({
|
|
||||||
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
|
|
||||||
iconSize: [32, 32],
|
|
||||||
})
|
|
||||||
}).addTo(result_map).bindPopup(current_name);
|
|
||||||
|
|
||||||
const guess_marker = L.marker(guess_coordinates, {
|
|
||||||
icon: L.icon({
|
|
||||||
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
|
|
||||||
iconSize: [32, 32],
|
|
||||||
})
|
|
||||||
}).addTo(result_map).bindPopup("Your Guess");
|
|
||||||
|
|
||||||
const polyline = L.polyline([true_location, guess_coordinates], { color: 'blue', dashArray: '5, 10' }).addTo(result_map);
|
|
||||||
|
|
||||||
// Fit map to show both markers
|
|
||||||
const group = new L.featureGroup([true_marker, guess_marker]);
|
|
||||||
result_map.fitBounds(group.getBounds().pad(0.1));
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeResultModal() {
|
|
||||||
document.getElementById("resultModal").style.display = "none";
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function nextRound() {
|
|
||||||
closeResultModal();
|
|
||||||
// Logic để reset game hoặc sang round tiếp theo
|
|
||||||
location.reload();
|
|
||||||
}
|
|
||||||
|
|
||||||
function goBack() {
|
|
||||||
// Logic để quay lại trang chính hoặc trang lựa chọn
|
|
||||||
window.location.href = '/';
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function showDonateModal() {
|
|
||||||
const modal = document.getElementById("donateModal");
|
|
||||||
|
|
||||||
// Show the modal
|
|
||||||
modal.style.display = "block";
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDonate() {
|
|
||||||
const modal = document.getElementById("donateModal");
|
|
||||||
// Hide the modal
|
|
||||||
modal.style.display = "none";
|
|
||||||
// Optionally, you can reset the game or perform other actions
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
window.onload = function () {
|
|
||||||
// Get location parameter from URL before initializing
|
|
||||||
const params = new URLSearchParams(window.location.search);
|
|
||||||
const locationParam = params.get("location");
|
|
||||||
if (locationParam) {
|
|
||||||
choiceLocation = locationParam;
|
|
||||||
}
|
|
||||||
minLat = boundingBoxVN[choiceLocation][1];
|
|
||||||
maxLat = boundingBoxVN[choiceLocation][3];
|
|
||||||
minLong = boundingBoxVN[choiceLocation][0];
|
|
||||||
maxLong = boundingBoxVN[choiceLocation][2];
|
|
||||||
delta = boundingBoxVN[choiceLocation][4];
|
|
||||||
|
|
||||||
checkLibrariesLoaded().then(() => {
|
|
||||||
initialize();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
Reference in new issue
Block a user