* uwu
parent
89b92e5048
commit
a4ce6493ff
|
|
@ -40,22 +40,37 @@
|
|||
.data, .traceroute {
|
||||
width: 768px;
|
||||
}
|
||||
.guess {
|
||||
.guess, .next {
|
||||
background-color: #444;
|
||||
display: block;
|
||||
width: 128px;
|
||||
height: 24px;
|
||||
height: 20px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.next {
|
||||
background-color: #4a4;
|
||||
}
|
||||
.result-container {
|
||||
visibility: hidden;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 768px;
|
||||
}
|
||||
.scoring {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
width: 128px;
|
||||
width: 256px;
|
||||
height: 128px;
|
||||
background-color: #444;
|
||||
}
|
||||
.ipa, .whois, .traceroute {
|
||||
word-wrap : break-word;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -68,8 +83,14 @@
|
|||
<div class="container">
|
||||
<div id="map"></div>
|
||||
<div class="guess">Take a guess</div>
|
||||
<pre class="data"></pre>
|
||||
<pre class="traceroute"></pre>
|
||||
<div class="result-container">
|
||||
<div class="result"></div>
|
||||
<div class="targetDetail"></div>
|
||||
<div class="next">Next round!</div>
|
||||
</div>
|
||||
<h3 class="ipa"></h3>
|
||||
<div class="whois"></div>
|
||||
<div class="traceroute"></div>
|
||||
</div>
|
||||
<div class="scoring"></div>
|
||||
<script src="/game.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,21 @@
|
|||
let score = 0;
|
||||
let round = 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);
|
||||
|
||||
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);
|
||||
}
|
||||
|
|
@ -47,24 +35,61 @@ ${data.whois}`;
|
|||
guessMarker.getLatLng(),
|
||||
marker.getLatLng()
|
||||
];
|
||||
L.polyline(latlngs).addTo(map);
|
||||
polyline = 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
|
||||
const points = Math.floor((1.2**(-distance/100))*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(".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('.guess').addEventListener("click", result)
|
||||
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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue