Parano/TinderPokemon
3
0
Fork 0
forked from Maxluli/TinderPokemon
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added distance calculation

Browse Source
This commit is contained in:
maxluli
2022-09-20 09:02:26 +02:00
parent d6e53b6333
commit 2e8943d994
1 changed files with 45 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@@ -30,14 +30,15 @@
<h2>Home</h2>
</div>
</div>
<!---
<div class="container">
<div class="card p-2 text-center">
<div class="card-body">
Ceci est une publicité</br>
<!-- Elle devrait me rapporter enormément d'argent</br>-->
This definitely is an AD
</div>
</div>
</div>
-->
<div class="container">
<div class="card p-2">
<img id="pokemonImage" style="image-rendering: pixelated;"
@@ -45,7 +46,8 @@
class="card-img-top" style="" alt="...">
<div class="card-body">
<h4 class="card-title" id="pokemonName">Ditto</h4>
<h4 class="card-title" id="pokemonAge">21</h4>
<h5 class="card-title" id="pokemonAge">21</h5>
<h5 class="card-title" id="pokemonDistance">35km Away</h5>
<p class="card-text" id="pokemonDescription">I like Ice Cream</p>
<div class="row">
<div class="btn col-4" id="nopeButton">
@@ -106,9 +108,20 @@
console.log(pokemonData.id);
document.getElementById("pokemonName").innerHTML = randomName[0].name;
document.getElementById("pokemonImage").src = pokemonData.sprites.front_shiny;
document.getElementById("pokemonAge").innerHTML = Math.floor(Math.random() * (65 - 18)) + 18;
console.log(pokemonInfo.flavor_text_entries[0]);
document.getElementById("pokemonAge").innerHTML = (Math.floor(Math.random() * (65 - 18)) + 18);
document.getElementById("pokemonDescription").innerHTML = pokemonInfo.flavor_text_entries[0].flavor_text;
window.navigator.geolocation.getCurrentPosition(function (pos) {
console.log(pos);
var lat = pos.coords.latitude;
var lon = pos.coords.longitude;
let pokemonLatitude = Math.floor(Math.random() * 180) - 90;
let pokemonLongitude = Math.floor(Math.random() * 360) - 180;
let dist = distance(lon, lat, pokemonLongitude, pokemonLatitude);
document.getElementById("pokemonDistance").innerHTML = Math.floor(dist) + " Km away";
})
})
}).catch((response) => {
alert("Bouhouuuuu could not get any further infos on that dumbass");
@@ -138,6 +151,33 @@
document.getElementById('favoriteButton').onclick = function () {
alert("You want to fav");
}
// !! THIS METHOD IS NOT MINE, ITS FROM STACK OVERFLOW : https://stackoverflow.com/questions/13840516/how-to-find-my-distance-to-a-known-location-in-javascript
function distance(lon1, lat1, lon2, lat2) {
var R = 6371; // Radius of the earth in km
var dLat = (lat2 - lat1).toRad(); // Javascript functions in radians
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c; // Distance in km
return d;
}
/** Converts numeric degrees to radians */
if (typeof (Number.prototype.toRad) === "undefined") {
Number.prototype.toRad = function () {
return this * Math.PI / 180;
}
}
window.navigator.geolocation.getCurrentPosition(function (pos) {
console.log(pos);
console.log(
distance(pos.coords.longitude, pos.coords.latitude, 42.37, 71.03)
);
});
</script>
</html>