-
Notifications
You must be signed in to change notification settings - Fork 8
/
play.htm
98 lines (88 loc) · 4.23 KB
/
play.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script>
servers = $.get( "servers.json" );
servers.done(handleServerList);
servers.fail(failServerList);
navigator.geolocation.getCurrentPosition(knownPosition, unknownPosition);
function handleServerList(servers) {
server_list = servers // ugly pt. 1
$( "#play-list" ).empty();
var arrayLength = servers.length;
for (var i = 0; i < arrayLength; i++) {
$( "#play-list" ).append("<li>" + servers[i]['location'] + ": " + "<a href=\"" + servers[i]['url'] + "\">" + servers[i]['name'] + "</a>" + "</li>");
}
}
function failServerList() {
$( "#play-list" ).empty();
$( "#play-list-message" ).html("<li>Couldn't get server list :(</li>");
}
function knownPosition(position) {
servers.always(); // ugly pt. 2. We're passing the server list into this function via global variable
server = NearestPoint( position.coords.latitude, position.coords.longitude, server_list );
$( "#play-status" ).text("Playing on " + server["name"] + " located in " + server["location"] + "...");
setTimeout( function() {
window.location = server["url"];
}, 2000);
}
function unknownPosition(error) {
$( "#play-status" ).text("Can't get your location :(");
$( "#play-list-message" ).text("Select a server manually:");
}
// Adapted from
// http://stackoverflow.com/questions/21279559/geolocation-closest-locationlat-long-from-my-position
// Convert Degress to Radians
function Deg2Rad( deg ) {
return deg * Math.PI / 180;
}
function PythagorasEquirectangular( lat1, lon1, lat2, lon2 )
{
lat1 = Deg2Rad(lat1);
lat2 = Deg2Rad(lat2);
lon1 = Deg2Rad(lon1);
lon2 = Deg2Rad(lon2);
var R = 6371; // km
var x = (lon2-lon1) * Math.cos((lat1+lat2)/2);
var y = (lat2-lat1);
var d = Math.sqrt(x*x + y*y) * R;
return d;
}
function NearestPoint( latitude, longitude, points )
{
var mindif=99999;
var closest;
for (index = 0; index < points.length; ++index) {
var dif = PythagorasEquirectangular( latitude, longitude, points[ index ][ "latlongdecimal" ][0], points[ index ][ "latlongdecimal" ][1] );
if ( dif < mindif )
{
closest=index;
mindif = dif;
}
}
return points[closest];
}
</script>
</head>
<body>
<div class="container">
<div class="page-header">
<center>
<a href="index.htm"><img class="img-responsive" src="logo.png" title="Dungeon Crawl Stone Soup" width="790px" height="152px"></a>
</center>
</div>
<div id="play">
<h2 id="play-status" class="text-center">Finding closest server...</h2>
<p class="text-center" id="play-list-message">Or select a server manually:</p>
<ul class="list-unstyled" id="play-list" style="width: 100%; text-align: center;">
<li>Loading...</li>
</ul>
</div>
</div>
</body>
</html>