71 lines
1.9 KiB
JavaScript
71 lines
1.9 KiB
JavaScript
|
let score = 0;
|
||
|
|
let round = 0;
|
||
|
|
async function main() {
|
||
|
|
|
||
|
|
let map = L.map('map').setView([0, 0], 3);
|
||
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
|
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||
|
|
maxZoom: 18,
|
||
|
|
tileSize: 256,
|
||
|
|
zoomOffset: 0
|
||
|
|
}).addTo(map);
|
||
|
|
|
||
|
|
document.querySelector(".load").style.display = "block";
|
||
|
|
|
||
|
|
const data = await fetch("/data").then((res)=>res.json())
|
||
|
|
|
||
|
|
console.log("???")
|
||
|
|
document.querySelector(".data").innerText = `IP Address: ${data.ip}
|
||
|
|
WHOIS result (redacted):
|
||
|
|
${data.whois}`;
|
||
|
|
document.querySelector(".traceroute").innerText = data.traceroute;
|
||
|
|
let marker = L.marker([data.lat, data.lon]).addTo(map);
|
||
|
|
marker.setOpacity(0);
|
||
|
|
|
||
|
|
document.querySelector(".load").style.display = "none";
|
||
|
|
|
||
|
|
|
||
|
|
let guessMarker = new L.marker([0,0], {draggable: true}).addTo(map);
|
||
|
|
map.on('click', addMarker);
|
||
|
|
|
||
|
|
function getDistance(from, to) {
|
||
|
|
return ((from.distanceTo(to)).toFixed(0)/1000);
|
||
|
|
}
|
||
|
|
|
||
|
|
function addMarker(e){
|
||
|
|
map.removeLayer(guessMarker)
|
||
|
|
guessMarker = new L.marker(e.latlng, {draggable: true}).addTo(map);
|
||
|
|
guessMarker.on('drag', markerDrag)
|
||
|
|
}
|
||
|
|
|
||
|
|
function markerDrag(e) {
|
||
|
|
getDistance(marker.getLatLng(), guessMarker.getLatLng());
|
||
|
|
}
|
||
|
|
|
||
|
|
function result() {
|
||
|
|
const latlngs = [
|
||
|
|
guessMarker.getLatLng(),
|
||
|
|
marker.getLatLng()
|
||
|
|
];
|
||
|
|
L.polyline(latlngs).addTo(map);
|
||
|
|
const distance = getDistance(marker.getLatLng(), guessMarker.getLatLng());
|
||
|
|
const points = Math.floor((20000**(-distance/20000))*5000) // best I could do XD
|
||
|
|
|
||
|
|
score += points;
|
||
|
|
round++;
|
||
|
|
|
||
|
|
document.querySelector(".scoring").innerText = `This round: ${points}
|
||
|
|
Score total: ${score}
|
||
|
|
Round: ${round}`
|
||
|
|
|
||
|
|
marker.setOpacity(1);
|
||
|
|
alert("You were " + distance + "km away from your target! This has earned you " + points + " points.")
|
||
|
|
main();
|
||
|
|
}
|
||
|
|
|
||
|
|
document.querySelector('.guess').addEventListener("click", result)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('DOMContentLoaded', main)
|