99 lines
2.9 KiB
JavaScript
99 lines
2.9 KiB
JavaScript
let score = 0;
|
|
let round = 1;
|
|
let initialized = false;
|
|
let marker;
|
|
let guessMarker;
|
|
let polyline;
|
|
let map = L.map('map').setView([0, 0], 3);
|
|
let data;
|
|
L.tileLayer('https://tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=60d393cb6480453ea125b2725ba44470', {
|
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
maxZoom: 18,
|
|
tileSize: 256,
|
|
zoomOffset: 0,
|
|
noWrap: true
|
|
}).addTo(map);
|
|
|
|
document.querySelector(".scoring").innerText = `This round: make a guess ;)
|
|
Score total: ${score}
|
|
Round: ${round}`
|
|
|
|
async function main() {
|
|
|
|
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()
|
|
];
|
|
polyline = L.polyline(latlngs).addTo(map);
|
|
const distance = getDistance(marker.getLatLng(), guessMarker.getLatLng());
|
|
const points = Math.floor((1.2**(-distance/100))*5000) // best I could do XD
|
|
|
|
score += points;
|
|
|
|
document.querySelector(".scoring").innerText = `This round: ${points}
|
|
Score total: ${score}
|
|
Round: ${round}`
|
|
round++;
|
|
|
|
marker.setOpacity(1);
|
|
document.querySelector(".result").innerText = `You were ${distance} km away from your target! This has earned you ${points} points.`
|
|
document.querySelector(".targetDetail").innerText = `The IP is supposedly located in ${data.city}, ${data.region}, ${data.country}.`
|
|
document.querySelector(".guess").style.visibility = 'hidden';
|
|
document.querySelector(".result-container").style.visibility = 'visible';
|
|
}
|
|
function nextRound() {
|
|
document.querySelector(".guess").style.visibility = 'visible';
|
|
document.querySelector(".result-container").style.visibility = 'hidden';
|
|
setTimeout(() => {
|
|
main();
|
|
},200);
|
|
}
|
|
|
|
document.querySelector(".load").style.display = "block";
|
|
|
|
if (initialized) {
|
|
map.removeLayer(guessMarker);
|
|
map.removeLayer(marker);
|
|
map.removeLayer(polyline);
|
|
}
|
|
|
|
data = await fetch("/data").then((res)=>res.json())
|
|
|
|
document.querySelector(".ipa").innerText = `IP Address: ${data.ip}`;
|
|
document.querySelector(".traceroute").innerText = `Traceroute: ${data.traceroute}`;
|
|
document.querySelector(".whois").innerText = `WHOIS: ${data.whois}`;
|
|
|
|
marker = L.marker([data.lat, data.lon]).addTo(map);
|
|
marker.setOpacity(0);
|
|
|
|
document.querySelector(".load").style.display = "none";
|
|
|
|
|
|
guessMarker = new L.marker([0,0], {draggable: true}).addTo(map);
|
|
map.on('click', addMarker);
|
|
|
|
if (!initialized) {
|
|
document.querySelector('.guess').addEventListener("click", result);
|
|
document.querySelector('.next').addEventListener("click", nextRound);
|
|
}
|
|
|
|
initialized = true;
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', main)
|