Permalink
Browse files

End of round map (two point plotted map)

  • Loading branch information...
webdevbrian committed Apr 24, 2013
1 parent 1029678 commit 6621996464d48825b43837f189b5b38bd84842c9
Showing with 49 additions and 5 deletions.
  1. +3 −1 css/style.css
  2. BIN img/actual.png
  3. BIN img/guess.png
  4. +9 −4 index.html
  5. +37 −0 js/roundmap.js
View
@@ -23,7 +23,9 @@ html,body { width: 100%; height: 100%;}
Round specific
*********************************/
#roundEnd { position: absolute; top: 50%; left: 50%; width: 400px; height: 300px; margin: -190px 0 0 -240px; padding: 20px; background: white; text-align: center; display: none; z-index: 1000; box-shadow: 0px 0px 20px rgba(255,255,255, 0.9); }
#roundEnd { position: absolute; left: 50%; width: 400px; margin: 40px 0 0 -200px; padding: 20px; background: white; text-align: center; display: none; z-index: 1005; box-shadow: 0px 0px 20px rgba(255,255,255, 0.9); }
#roundEnd #roundMap { width: 400px; height: 200px; background: red; margin: 20px 0; }
#roundEnd .closeBtn { cursor: pointer; }
#endGame { position: absolute; top: 50%; left: 50%; width: 400px; margin: -190px 0 0 -240px; padding: 20px; background: #EFEFEF; text-align: center; display: none; z-index: 1000; }
View
Binary file not shown.
View
Binary file not shown.
View
@@ -10,6 +10,7 @@
<script type='text/javascript' src='js/rnd.js'></script>
<script type='text/javascript' src='js/minimap.js'></script>
<script type='text/javascript' src='js/streetviewmap.js'></script>
<script type='text/javascript' src='js/roundmap.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
//
@@ -28,6 +29,7 @@
svinitialize();
mminitialize();
//
// Scoreboard & Guess button event
//
@@ -54,11 +56,11 @@
guessLatLongs = window.guessLatLng.toString();
// Make arrays and clean from (){} characters
locArray = locLatLongs.replace(/[\])}[{(]/g,'').split(',');
guessArray = guessLatLongs.replace(/[\])}[{(]/g,'').split(',');
window.locArray = locLatLongs.replace(/[\])}[{(]/g,'').split(',');
window.guessArray = guessLatLongs.replace(/[\])}[{(]/g,'').split(',');
// Calculate distance between points, and convert to kilometers
distance = Math.ceil(calcDistance(locArray[0], locArray[1], guessArray[0], guessArray[1]) / 1000);
distance = Math.ceil(calcDistance(window.locArray[0], window.locArray[1], window.guessArray[0], window.guessArray[1]) / 1000);
console.log(distance);
// Calculate points awarded via guess proximity
@@ -102,12 +104,15 @@
$('.round').html('Current Round: <b>'+round+'/5</b>');
$('.roundScore').html('Last Round Score: <b>'+roundScore+'</b>');
$('.totalScore').html('Total Score: <b>'+totalScore+'</b>');
$('#roundEnd').html('<p>Your guess was<br/><strong><h1>'+distance+'</strong>km</h1> away from the actual location.<br/><br/> You have scored<br/><h1>'+roundScore+' points</h1> this round!<br/><br/><button class="btn btn-primary closeBtn" type="button">Continue</button></p></p>');
$('#roundEnd').html('<p>Your guess was<br/><strong><h1>'+distance+'</strong>km</h1> away from the actual location.<br/><div id="roundMap"></div><br/> You have scored<br/><h1>'+roundScore+' points</h1> this round!<br/><br/><button class="btn btn-primary closeBtn" type="button">Continue</button></p></p>');
$('#roundEnd').fadeIn();
// Reload maps to refresh coords
svinitialize();
mminitialize();
rminitialize();
}
if (round >= 5){
View
@@ -0,0 +1,37 @@
//
// End of round map
//
function rminitialize() {
var currentLLArr = locLatLongs.replace(/[\])}[{(]/g,'').split(',');
var GuessLLArr = guessLatLongs.replace(/[\])}[{(]/g,'').replace(/\s/g, "").split(',');
var actualLtLng = new google.maps.LatLng(currentLLArr[0],currentLLArr[1]);
var guessLtLng = new google.maps.LatLng(GuessLLArr[0],GuessLLArr[1]);
var mapOptions = {
zoom: 2,
center: actualLtLng,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("roundMap"), mapOptions);
var actualMarker = new google.maps.Marker({
position: actualLtLng,
title:"Actual Location",
icon: 'img/actual.png'
});
var guessMarker = new google.maps.Marker({
position: guessLtLng,
title:"Your Guess",
icon: 'img/guess.png'
});
// To add the marker to the map, call setMap();
actualMarker.setMap(map);
guessMarker.setMap(map);
};

0 comments on commit 6621996

Please sign in to comment.