tormakris/geogame
1
0
Fork 0
Code Pull Requests Releases Activity

Initial version

Browse Source
This commit is contained in:
root
2019-08-23 10:07:26 +02:00
commit 3b6bb33505
29 changed files with 1374 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
geogame/templates/main/api_form.html Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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 %}