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 &copy; <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)