Initial version
This commit is contained in:
root
0
geogame/templates/account/messages/logged_in.txt
Normal file
0
geogame/templates/account/messages/logged_in.txt
Normal file
64
geogame/templates/base.html
Normal file
64
geogame/templates/base.html
Normal file
@@ -0,0 +1,64 @@
|
||||
{% load static %}
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'main.css' %}">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
|
||||
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
|
||||
<title>Geogame</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<img id="logo" src="{% static 'brand.png' %}"></img>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item {% if request.path == "/" %} active {% endif %}">
|
||||
<a href="{% url 'home' %}" class="nav-link">Home</a>
|
||||
</li>
|
||||
{% if user.is_authenticated %}
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'profile' %}" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'game:contribute' %}" class="nav-link">Contribute</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'account_logout' %}" class="nav-link">Logout</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'account_login' %}" class="nav-link">Login</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags }}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 content">
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
60
geogame/templates/game_base.html
Normal file
60
geogame/templates/game_base.html
Normal file
@@ -0,0 +1,60 @@
|
||||
{% load static %}
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="initial-scale=1.0, width=device-width">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="{% static 'main.css' %}">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
|
||||
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
|
||||
<title>Geogame</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<img id="logo" src="{% static 'brand.png' %}"></img>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item {% if request.path == "/" %} active {% endif %}">
|
||||
<a href="{% url 'home' %}" class="nav-link">Home</a>
|
||||
</li>
|
||||
{% if user.is_authenticated %}
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'profile' %}" class="nav-link">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'game:contribute' %}" class="nav-link">Contribute</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'account_logout' %}" class="nav-link">Logout</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'account_login' %}" class="nav-link">Login</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ message.tags }}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
24
geogame/templates/main/api_form.html
Normal file
24
geogame/templates/main/api_form.html
Normal file
@@ -0,0 +1,24 @@
|
||||
{% extends 'game_base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 content">
|
||||
<h1 class="section-header">API key for for {{user.email}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 content">
|
||||
<form action="" method="POST">
|
||||
{{ form.non_field_errors }}
|
||||
{% csrf_token %}
|
||||
{{form.as_p}}
|
||||
<button type="submit" class="btn btn-primary">Update API Key</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
25
geogame/templates/main/contribute_form.html
Normal file
25
geogame/templates/main/contribute_form.html
Normal file
@@ -0,0 +1,25 @@
|
||||
{% extends 'game_base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 content">
|
||||
<h1 class="section-header">Coordinate Submission</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 content">
|
||||
<form action="" method="POST">
|
||||
{{ form.non_field_errors }}
|
||||
{% csrf_token %}
|
||||
{{form.as_p}}
|
||||
{{ form.media }}
|
||||
<button type="submit" class="btn btn-primary">Submit Coordinates</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
74
geogame/templates/main/game_recap.html
Normal file
74
geogame/templates/main/game_recap.html
Normal file
@@ -0,0 +1,74 @@
|
||||
{% extends 'game_base.html' %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 pt-4 pb-4">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{message.tags}}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<div class="alert alert-info">
|
||||
Your average guess was {{average_distance}}km away.
|
||||
</div>
|
||||
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
<a class="btn btn-success btn-lg btn-block" href="{% url 'game:new-game' %}" role="button">New Game</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function initializeMaps() {
|
||||
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
zoom: 2,
|
||||
center: {lat: 30, lng: 0}
|
||||
});
|
||||
|
||||
{% for result in results %}
|
||||
var actual_coord{{forloop.counter}} = {lat: {{result.0.0}}, lng: {{result.0.1}}};
|
||||
var guess_coord{{forloop.counter}} = {lat: {{result.1.0}}, lng: {{result.1.1}}};
|
||||
|
||||
var actual_marker{{forloop.counter}} = new google.maps.Marker({
|
||||
position: actual_coord{{forloop.counter}},
|
||||
map: map,
|
||||
title: 'Actual Position',
|
||||
icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
|
||||
draggable:false,
|
||||
});
|
||||
|
||||
var guess_marker{{forloop.counter}} = new google.maps.Marker({
|
||||
position: guess_coord{{forloop.counter}},
|
||||
map: map,
|
||||
title: 'Your Guess',
|
||||
draggable:false,
|
||||
});
|
||||
|
||||
var line{{forloop.counter}} = new google.maps.Polyline({
|
||||
path: [
|
||||
new google.maps.LatLng({{result.0.0}}, {{result.0.1}}),
|
||||
new google.maps.LatLng({{result.1.0}}, {{result.1.1}})
|
||||
],
|
||||
strokeColor: "#FF0000",
|
||||
strokeOpacity: 0.8,
|
||||
strokeWeight: 5,
|
||||
map: map
|
||||
});
|
||||
{% endfor %}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async defer
|
||||
src="https://maps.googleapis.com/maps/api/js?key={{user.api_key}}&callback=initializeMaps">
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
78
geogame/templates/main/homepage.html
Normal file
78
geogame/templates/main/homepage.html
Normal file
@@ -0,0 +1,78 @@
|
||||
{% extends 'game_base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 content">
|
||||
<h1 class="section-header">Welcome to Geogame</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 content">
|
||||
{% if user.is_authenticated %}
|
||||
{% if has_api_key %}
|
||||
{% if existing_game %}
|
||||
<a class="btn btn-info btn-lg btn-block" href="{% url 'game:round-view' game_pk=existing_game.id round_pk=existing_round.id %}" role="button">Continue Last Game</a>
|
||||
<a class="btn btn-success btn-lg btn-block" href="{% url 'game:new-game' %}" role="button">New Game</a>
|
||||
{% else %}
|
||||
<button type="button" class="btn btn-info btn-lg btn-block" disabled>Continue Last Game</button>
|
||||
<a class="btn btn-success btn-lg btn-block" href="{% url 'game:new-game' %}" role="button">New Game</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="alert alert-warning">
|
||||
You must set an api key on your profile page to play the game. Please read the FAQ for more info.
|
||||
</div>
|
||||
<button type="button" class="btn btn-info btn-lg btn-block" disabled>Continue Last Game</button>
|
||||
<button type="button" class="btn btn-success btn-lg btn-block" disabled>New Game</button>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<div class="alert alert-danger">
|
||||
You must be logged in to play the game. Please read the FAQ for more info.
|
||||
</div>
|
||||
<button type="button" class="btn btn-info btn-lg btn-block" disabled>Continue Last Game</button>
|
||||
<button type="button" class="btn btn-success btn-lg btn-block" disabled>New Game</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 content">
|
||||
<h3 class="section-header">FAQ</h3>
|
||||
<p><strong>What is this?</strong></p>
|
||||
<p>This is a game that uses <a href="http://www.geoguessr.com">Geoguessr</a> as inspiration.</p>
|
||||
<p><strong>Why does this exist?</strong></p>
|
||||
<p>Sadly, because of Google's predatory pricing strategy for their Maps api, geoguessr have had to modify their game in a detrimental way to cut costs.</p>
|
||||
<p>I created this little site to allow people to play the game how it used to be (or as close to it).</p>
|
||||
<p><strong>Why do I need an api key?</strong></p>
|
||||
<p>To get around the aforementioned api pricing strategy I require you to upload your own api key.</p>
|
||||
<p>Your api key will be used only for games that you play, each key has $200/month free usage, which is plenty for all but the most avid players.</p>
|
||||
<p><strong>How do I get an api key?</strong></p>
|
||||
<p>Go <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">here</a> and register to get an api key.</p>
|
||||
<p>Once you have a key save it against your profile <a href="{% url 'profile' %}">here</a>.
|
||||
<p><strong>Is this safe?</strong></p>
|
||||
<p>All I can do is offer assurances that I won't use the api keys for anything other than their stated purpose: namely, for each individual's games on this site.</p>
|
||||
<p>This site uses django's built in authentication framework, and I have taken every care to look after your personal details.</p>
|
||||
<p><strong>What does the "Broken Streetview" button do?</strong></p>
|
||||
<p>Sometimes a coordinate with no valid streetview is selected for you, you will just get a black screen.</p>
|
||||
<p>If this occurs please click the "Broken Streetview" button and you will be provided with a new scene and the faulty coordinate will be removed from the database.</p>
|
||||
<p><strong>There isn't a great variety of countries, why?</strong></p>
|
||||
<p>I am relying on crowd sourcing of playable scenes, please consider helping out by <a href="{% url 'game:contribute' %}">adding a few coordinates of your own</a>.</p>
|
||||
<p>You get to keep track of the coordinates you add, and see how well (or badly) other people do on them!</p>
|
||||
<p>For now I have managed to find some data on uk coordinates that I can use, but its not so easy getting data for other countries.</p>
|
||||
<p><strong>I didn't receive my email reset password, what gives?</strong></p>
|
||||
<p>I am using a free mail server to send password reset emails, the limit is 100/day.</p>
|
||||
<p>If you require assisstance accessing your account, please email edward.wilding3@gmail.com</p>
|
||||
<p><strong>This site is atrocious and you should feel bad</strong></p>
|
||||
<p>Firstly that isn't a question, secondly that hurts my feelings, thirdly I built it in 2 days after geoguessr changed their site.</p>
|
||||
<p><strong>This site is amazing, how can I contact you to discuss this, or another, site?</strong></p>
|
||||
<p>Thank you! Please get in touch: edward.wilding3@gmail.com</p>
|
||||
|
||||
<h4>Now go out there and have some fun exploring the world!</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
41
geogame/templates/main/profile.html
Normal file
41
geogame/templates/main/profile.html
Normal file
@@ -0,0 +1,41 @@
|
||||
{% extends 'game_base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 content">
|
||||
<h1 class="section-header">Your Profile</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 content">
|
||||
<p>Logged in as {{user.email}}</p>
|
||||
<p>
|
||||
<a class="btn btn-primary btn-lg" style="margin-top:16px" href="{% url 'account_change_password' %}">Change Password</a>
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-primary btn-lg" href="{% url 'api-key-view' pk=user.pk %}">API key</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 content">
|
||||
<h3 class="section-header">Played Games</h3>
|
||||
<p>Coming soon</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 offset-lg-1 content">
|
||||
<h3 class="section-header">Your Contributions</h3>
|
||||
<p>Coming soon</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
89
geogame/templates/main/round.html
Normal file
89
geogame/templates/main/round.html
Normal file
@@ -0,0 +1,89 @@
|
||||
{% extends 'game_base.html' %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{message.tags}}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
|
||||
<div id="map2" class="map"></div>
|
||||
|
||||
<form action="{% url 'game:round-view' game_pk=game_pk round_pk=round_pk %}" method="POST">
|
||||
{{ form.non_field_errors }}
|
||||
{% csrf_token %}
|
||||
{{form.as_p}}
|
||||
<button type="submit" class="btn btn-primary btn-block">Make Guess</button>
|
||||
</form>
|
||||
|
||||
<form action="{% url 'game:remove-coord' game_pk=game_pk round_pk=round_pk %}" method="POST">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-warning btn-block">Broken Streetview</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function initializeMaps() {
|
||||
var panorama = new google.maps.StreetViewPanorama(
|
||||
document.getElementById('map'), {
|
||||
position: {lat: {{lat}}, lng: {{lng}}},
|
||||
addressControl: false,
|
||||
linksControl: true,
|
||||
enableCloseButton: false,
|
||||
showRoadLabels: false,
|
||||
});
|
||||
|
||||
var myLatLng = {lat: 0, lng: 0};
|
||||
var centreLatLng = {lat: 30, lng: 0};
|
||||
|
||||
var map2 = new google.maps.Map(document.getElementById('map2'), {
|
||||
zoom: 2,
|
||||
center: centreLatLng
|
||||
});
|
||||
|
||||
marker = new google.maps.Marker({
|
||||
position: myLatLng,
|
||||
map: map2,
|
||||
title: 'Your Guess',
|
||||
draggable:false,
|
||||
});
|
||||
|
||||
google.maps.event.addListener(map2, 'click', function(event) {
|
||||
placeMarker(event.latLng);
|
||||
$("#id_guess_lat").val(event.latLng.lat());
|
||||
$("#id_guess_lng").val(event.latLng.lng());
|
||||
});
|
||||
|
||||
function placeMarker(location) {
|
||||
marker.setMap(null);
|
||||
marker = new google.maps.Marker({
|
||||
position: location,
|
||||
map: map2
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<script async defer
|
||||
src="https://maps.googleapis.com/maps/api/js?key={{user.api_key}}&callback=initializeMaps">
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
63
geogame/templates/main/round_recap.html
Normal file
63
geogame/templates/main/round_recap.html
Normal file
@@ -0,0 +1,63 @@
|
||||
{% extends 'game_base.html' %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 pt-4 pb-4">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{message.tags}}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<div class="alert alert-info">
|
||||
Your guess was {{distance}}km away.
|
||||
</div>
|
||||
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
{% if last_round %}
|
||||
<a class="btn btn-success btn-lg btn-block" href="{% url 'game:end-recap-view' game_pk=game_id %}" role="button">Game Recap</a>
|
||||
{% else %}
|
||||
<a class="btn btn-success btn-lg btn-block" href="{% url 'game:round-view' game_pk=game_id round_pk=next_round_id %}" role="button">Next Round</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function initializeMaps() {
|
||||
var actual_coord = {lat: {{lat}}, lng: {{lng}}};
|
||||
var guess_coord = {lat: {{guess_lat}}, lng: {{guess_lng}}};
|
||||
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
zoom: 4,
|
||||
center: actual_coord
|
||||
});
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
position: actual_coord,
|
||||
map: map,
|
||||
title: 'Actual Position',
|
||||
icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
|
||||
draggable:false,
|
||||
});
|
||||
|
||||
var marker2 = new google.maps.Marker({
|
||||
position: guess_coord,
|
||||
map: map,
|
||||
title: 'Your Guess',
|
||||
draggable:false,
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<script async defer
|
||||
src="https://maps.googleapis.com/maps/api/js?key={{user.api_key}}&callback=initializeMaps">
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user