mirror of
https://github.com/tiennm99/vigeoguessr.git
synced 2026-10-11 03:13:55 +00:00
deploy
This commit is contained in:
DucLV committed
1 parent
404acf4862
commit
98b8b5ce79
6 files changed
+214
-177
No files matched your search
@@ -1,90 +0,0 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
min-width: 550px;
|
||||
margin:0 auto;
|
||||
|
||||
}
|
||||
|
||||
#map, #pano{
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
#map {
|
||||
float: left;
|
||||
height: 40%;
|
||||
width: 50%;
|
||||
border-top-left-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-right-width: .5px;
|
||||
|
||||
}
|
||||
|
||||
#pano {
|
||||
float: left;
|
||||
height: 40%;
|
||||
width: 50%;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-left-width: 0px;
|
||||
}
|
||||
|
||||
|
||||
#result{
|
||||
height: 25%;
|
||||
width: 90%;
|
||||
border-radius: 30px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
#location, #distance, #totaldistance{
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
font-family: Chalkduster, fantasy;
|
||||
}
|
||||
|
||||
#location, #distance {
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
#check, #next{
|
||||
font-size: 15px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 20px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#buttons, #info{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1{
|
||||
text-align: center;
|
||||
font-family: Chalkduster, fantasy;
|
||||
}
|
||||
|
||||
#next{
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
|
||||
#center{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#totaldistance{
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#round {
|
||||
font-family: Chalkduster, fantasy;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@@ -1,21 +1,22 @@
|
||||
/* jshint esversion: 6 */
|
||||
/* jshint node: true */
|
||||
|
||||
'use strict';
|
||||
|
||||
|
||||
//change ablility to hit check multiple times
|
||||
var map;
|
||||
var resultmap;
|
||||
var markers = [];
|
||||
var guess_coordinates = [];
|
||||
var true_location = [];
|
||||
var us_city_set = [4699066, 5809844, 4164138, 4440906,4894465, 2562501];
|
||||
var world_city_set =[3143244, 3599699, 1857910, 4853608, 323786];
|
||||
|
||||
var accumulated_distance = 0;
|
||||
var current_name = '';
|
||||
var distance_from_guess = [];
|
||||
var check_count = 0;
|
||||
|
||||
const minLat = 20.9975;
|
||||
const maxLat = 21.0509;
|
||||
const minLong = 105.7881;
|
||||
const maxLong = 105.9043;
|
||||
|
||||
|
||||
async function getData(url) {
|
||||
return fetch(url)
|
||||
@@ -23,39 +24,52 @@ async function getData(url) {
|
||||
.catch(error => console.log(error));
|
||||
}
|
||||
|
||||
async function initialize() {
|
||||
|
||||
function initialize() {
|
||||
check_count = 0;
|
||||
disableButton('check');
|
||||
disableButton('next');
|
||||
if (accumulated_distance == 0) {
|
||||
document.getElementById("totaldistance").innerHTML = 'Round Score: 0 Miles';
|
||||
}
|
||||
document.getElementById("location").innerHTML = ' ';
|
||||
document.getElementById("distance").innerHTML = ' ';
|
||||
|
||||
var lat = (Math.random() * (maxLat - minLat) + minLat);
|
||||
var long = (Math.random() * (maxLong - minLong) + minLong);
|
||||
|
||||
var number = await Promise.all([getData(`https://api.openweathermap.org/data/2.5/weather?id=${randomLoc()}&APPID=2e35570eab59959f85e835dabdddc726`)]);
|
||||
true_location = [];
|
||||
true_location.push(number[0].coord.lat,number[0].coord.lon);
|
||||
current_name = (number[0].name + ", " + number[0].sys.country);
|
||||
var streetviewService = new google.maps.StreetViewService();
|
||||
streetviewService.getPanoramaByLocation(new google.maps.LatLng(lat, long), 50,
|
||||
function (data, status) {
|
||||
if (status == google.maps.StreetViewStatus.OK) {
|
||||
|
||||
}
|
||||
else { location.reload(); }
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
var luther = {lat: 43.31613189259254, lng: -91.80256027484972};
|
||||
true_location.push(lat, long);
|
||||
current_name = ("VIET NAM");
|
||||
|
||||
|
||||
var luther = { lat: 21.0228148, lng: 105.7957638 };
|
||||
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
center: luther,
|
||||
zoom: 1,
|
||||
zoom: 12,
|
||||
streetViewControl: false,
|
||||
gestureHandling: 'greedy'
|
||||
});
|
||||
|
||||
var rmap = new google.maps.Map(document.getElementById('result'), {
|
||||
center: luther,
|
||||
zoom: 2,
|
||||
center: { lat: lat, lng: long },
|
||||
zoom: 12,
|
||||
streetViewControl: false,
|
||||
zoomControl: true,
|
||||
zoomControlOptions: {
|
||||
position: google.maps.ControlPosition.LEFT_CENTER
|
||||
},
|
||||
gestureHandling: 'greedy'
|
||||
});
|
||||
|
||||
|
||||
@@ -81,11 +95,14 @@ async function initialize() {
|
||||
|
||||
var panorama = new google.maps.StreetViewPanorama(
|
||||
document.getElementById('pano'), {
|
||||
position: {lat: number[0].coord.lat, lng: number[0].coord.lon},
|
||||
position: { lat: lat, lng: long },
|
||||
pov: {
|
||||
heading: 34,
|
||||
heading: 180,
|
||||
pitch: 10
|
||||
},
|
||||
zoom: 1,
|
||||
preference: google.maps.StreetViewPreference.NEAREST,
|
||||
radius: 5000,
|
||||
addressControl: false
|
||||
});
|
||||
map.setStreetView(panorama);
|
||||
@@ -111,24 +128,26 @@ async function initialize() {
|
||||
markers = [];
|
||||
}
|
||||
|
||||
function check(){
|
||||
function continueGame() {
|
||||
var resModal = new bootstrap.Modal(document.getElementById('resultModal'));
|
||||
resModal.hide();
|
||||
location.reload();
|
||||
}
|
||||
|
||||
enableButton('next');
|
||||
function check() {
|
||||
var resModal = new bootstrap.Modal(document.getElementById('resultModal'));
|
||||
resModal.show();
|
||||
distance_from_guess = [];
|
||||
var guess_error = (distance(guess_coordinates[0],guess_coordinates[1],true_location[0], true_location[1],'K'));
|
||||
var guess_error = (distance(guess_coordinates[0], guess_coordinates[1], true_location[0], true_location[1], 'M'));
|
||||
accumulated_distance += parseFloat(guess_error);
|
||||
distance_from_guess = guess_error;
|
||||
|
||||
/*
|
||||
console.log("Guessed Location: " + guess_coordinates);
|
||||
console.log("Actual Location: " + true_location);
|
||||
console.log("current guess error: " + guess_error);
|
||||
console.log("total guess error: " + accumulated_distance);
|
||||
*/
|
||||
var true_coords = { lat: true_location[0], lng: true_location[1] };
|
||||
var guess_coords = { lat: guess_coordinates[0], lng: guess_coordinates[1] };
|
||||
|
||||
|
||||
var result_map = new google.maps.Map(document.getElementById('result'), {
|
||||
zoom: 2,
|
||||
zoom: 12,
|
||||
center: true_coords
|
||||
});
|
||||
|
||||
@@ -185,61 +204,39 @@ function check(){
|
||||
function distance(lat1, lon1, lat2, lon2, unit) {
|
||||
if ((lat1 == lat2) && (lon1 == lon2)) {
|
||||
return 0;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
var radlat1 = Math.PI * lat1 / 180;
|
||||
var radlat2 = Math.PI * lat2 / 180;
|
||||
var theta = lon1 - lon2;
|
||||
var radtheta = Math.PI * theta / 180;
|
||||
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
|
||||
|
||||
if (dist > 1) {
|
||||
dist = 1;
|
||||
}
|
||||
|
||||
dist = Math.acos(dist);
|
||||
dist = dist * 180 / Math.PI;
|
||||
dist = dist * 60 * 1.1515;
|
||||
if (unit=="K") { dist = dist * 1.609344 }
|
||||
if (unit=="N") { dist = dist * 0.8684 }
|
||||
return (dist / 1.609).toFixed(1)
|
||||
;
|
||||
|
||||
if (unit == "K") {
|
||||
dist = dist * 1.609344;
|
||||
}
|
||||
|
||||
if (unit == "N") {
|
||||
dist = dist * 0.8684;
|
||||
}
|
||||
|
||||
// Convert miles to meters
|
||||
dist = dist * 1609.34;
|
||||
|
||||
return dist.toFixed(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var index = -1;
|
||||
function randomLoc(){
|
||||
index += 1
|
||||
if (index > world_city_set.length -1){
|
||||
index = 0
|
||||
//console.log(index)
|
||||
document.getElementById("totaldistance").innerHTML = 'Round Score: 0 Miles';
|
||||
swal({
|
||||
title: "Thanks For playing!",
|
||||
icon: "success",
|
||||
text: "Your Guessing was only off by " + accumulated_distance.toFixed(1) + " Miles This Round!"
|
||||
});
|
||||
accumulated_distance = 0;
|
||||
document.getElementById('round').innerHTML = "Round: 1/" + world_city_set.length
|
||||
document.getElementById("next").innerHTML= "Next Location";
|
||||
return[world_city_set[0]]
|
||||
|
||||
}else if(index == world_city_set.length -1){
|
||||
document.getElementById("next").innerHTML= "Finish Round";
|
||||
document.getElementById('round').innerHTML = "Round: " + (index + 1) + "/" + world_city_set.length
|
||||
return[world_city_set[index]]
|
||||
}else{
|
||||
//console.log(index);
|
||||
document.getElementById("next").innerHTML= "Next Location";
|
||||
document.getElementById('round').innerHTML = "Round: " + (index + 1) + "/" + world_city_set.length
|
||||
return[world_city_set[index]]
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function display_location() {
|
||||
document.getElementById("location").innerHTML = "Correct Location: " + current_name;
|
||||
document.getElementById("distance").innerHTML = "Your Guess was " + distance_from_guess + " Miles away";
|
||||
document.getElementById("totaldistance").innerHTML = "Round Score: " + accumulated_distance.toFixed(1) + " Miles";
|
||||
document.getElementById("score").innerHTML = "Congratulation! Your distance is " + distance_from_guess + "m away.";
|
||||
}
|
||||
|
||||
function disableButton(id) {
|
||||
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
+54
-20
@@ -1,24 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<title>GeoGuessr Clone</title>
|
||||
<link rel="stylesheet" href="clone.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="clone.js" type="text/javascript"></script>
|
||||
<script type='text/javascript' src='config.js'></script>
|
||||
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
||||
<script async defer
|
||||
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKZ_CNbyEvx8T1ueUC1xYzyuSrtUeIycY&callback=initialize">
|
||||
</script>
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Kode+Mono:[email protected]&display=swap"
|
||||
rel="stylesheet">
|
||||
</head>
|
||||
<h1> GeoGuessr Clone Project!</h1>
|
||||
<div id = "round"></div>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="map"></div>
|
||||
<img id="logo" src="logo.png" />
|
||||
<div id="pano"></div>
|
||||
<div id="play-panel">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
<div id="play-action">
|
||||
<button type="button" class="btn btn-warning btn-lg btn" onclick=check() id="check">Go Check</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id = 'buttons' class="container" >
|
||||
<div >
|
||||
<button type="button" class="btn btn-primary btn-lg btn btn-dark" onclick = check() id="check">Guess!</button>
|
||||
<button type="button" class="btn btn-primary btn-lg btn btn-dark" onclick = initialize() id="next">Next Location</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class = 'container' id="result"></div>
|
||||
|
||||
<div id='center' class="container">
|
||||
<div id="location"></div>
|
||||
@@ -29,17 +49,31 @@
|
||||
<footer id="totaldistance"></footer>
|
||||
</div>
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="clone.js" type="text/javascript"></script>
|
||||
<script type='text/javascript' src='config.js'></script>
|
||||
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
||||
<script async defer
|
||||
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD6VIchvuZI1cVQSDdrDQ6MqgPgnMqZnC0&callback=initialize">
|
||||
</script>
|
||||
<img id="qr" src="donate.png" />
|
||||
|
||||
|
||||
<div class="modal fade" id="resultModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLabel">RESULT</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class = 'container' id="result"></div>
|
||||
<div id='distance'>
|
||||
<p id="score"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" onClick = continueGame()>Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,96 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin:0 auto;
|
||||
|
||||
}
|
||||
|
||||
#pano {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
border-top-left-radius: 15px;
|
||||
border-bottom-left-radius: 15px;
|
||||
border-left-width: 0px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
position: absolute; top: 5px; z-index: 99;
|
||||
width: 15%;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
-webkit-filter: drop-shadow(5px 5px 5px #222);
|
||||
filter: drop-shadow(5px 5px 5px #222);
|
||||
}
|
||||
|
||||
#qr {
|
||||
position: absolute; bottom: 5px; z-index: 99;
|
||||
left: 5px;
|
||||
width: 5%;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
-webkit-filter: drop-shadow(5px 5px 5px #222);
|
||||
filter: drop-shadow(5px 5px 5px #222);
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute; bottom: 10px; right: 10px; z-index: 99;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
min-width: 500px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
#infor {
|
||||
position: absolute; top: 10px; right: 10px; z-index: 10;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#check{
|
||||
position: absolute;
|
||||
right: 10px; z-index: 99;
|
||||
height: 50px;
|
||||
bottom: 50%;
|
||||
margin-bottom: 30px;
|
||||
min-width: 500px;
|
||||
width: 25%;
|
||||
height: 50px;
|
||||
display: block;
|
||||
font-size: 20;
|
||||
font-weight: bold;
|
||||
font-family: "Kode Mono", monospace;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
#resultModal {
|
||||
font-size: 20;
|
||||
font-weight: bold;
|
||||
font-family: "Kode Mono", monospace;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
#result{
|
||||
height: 200px;
|
||||
width: 90%;
|
||||
border-radius: 30px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
|
||||
#score{
|
||||
text-align: center;
|
||||
font-size: 20;
|
||||
padding-top: 10px;
|
||||
}
|
||||
Reference in new issue
Block a user