Track target location on map

client/platforms/android/assets/www/config.xml

@@ -2,10 +2,11 @@
 <widget id="appsass.in" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>Appsassin</name>
     <description>
-        #HackManchester
+        Travel the world. Meet new people. Kill them. #HackManchester
     </description>
     <content src="index.html" />
     <access origin="*" />
-    <preference name="fullscreen" value="true" />
+    <preference name="fullscreen" value="false" />
+    <preference name="UIWebViewBounce" value="false" />
     <preference name="webviewbounce" value="false" />
 </widget>

client/platforms/android/assets/www/css/index.css

@@ -15,82 +15,87 @@ body {
     -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
     -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
     background-color: #000;
+    background-image: url("../img/back2.jpg");
+    background-repeat: no-repeat; 
+    background-size: cover;
+    background-position: center;
     color: #FFF;
     background-attachment: fixed;
     font-family: "HelveticaNeue-Light", "HelveticaNeue", Helvetica, Arial, sans-serif;
     font-size: 12px;
     height: 100%;
     margin: 0px;
     padding: 0px;
-    text-transform: uppercase;
     width: 100%;
 }
 
-h1 {
+.ios7 header {
+    border-top: 20px solid #B60101;
+}
+
+header {
+    background-color: #B60101;
+    position: relative;
+    left: 0px;
+    top: 0px;
+    zoom: 1;
+    width: 100%;
+    margin: 0px;
+    padding: 0px;
+    height: 44px;
+    overflow: hidden;
+}
+
+header h1 {
+    color: #FFF;
+    font-weight: normal;
+    min-height: 44px;
+    line-height: 44px;
+    text-align: center;
+    font-size: 30px;
+    display: block;
+    margin: 2px 50px;
+    padding: 0;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    overflow: hidden;
+    white-space: nowrap;
+    zoom: 1;
+    outline: 0 !important;
     font-family: "brfont";
 }
 
+div.container {
+    margin: 15px;
+}
+
+div.container h3 {
+    margin: 50px 0;
+    text-align: center;
+    font-size: 16px;
+}
+
 .map {
     height: 100%;
     width: 100%;
     position: absolute;
 }
 
 div.olControlZoom {
-    position: absolute;
-    top: 8px;
-    left: 8px;
-    background: rgba(255,255,255,0.4);
-    border-radius: 4px;
-    padding: 2px;
-}
-* {
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-div.olControlZoom a {
-    display: block;
-    margin: 1px;
-    padding: 0;
-    color: white;
-    font-size: 28px;
-    font-family: sans-serif;
-    font-weight: bold;
-    text-decoration: none;
-    text-align: center;
-    height: 32px;
-    width: 32px;
-    line-height: 28px;
-    text-shadow: 0 0 3px rgba(0,0,0,0.8);
-    background: #130085; /* fallback for IE - IE6 requires background shorthand*/
-    background: rgba(0, 60, 136, 0.5);
-    filter: alpha(opacity=80);
-}
-a.olControlZoomIn {
-    border-radius: 4px 4px 0 0;
-}
-a.olControlZoomOut {
-    border-radius: 0 0 4px 4px;
-}
-div.olControlZoom a:hover {
-    background: #130085; /* fallback for IE */
-    background: rgba(0, 60, 136, 0.7);
-    filter: alpha(opacity=100);
-}
-@media only screen and (max-width: 600px) {
-    div.olControlZoom a:hover {
-        background: rgba(0, 60, 136, 0.5);
-    }
+    display: none!important;
 }
+
 div.olMapViewport {
     -ms-touch-action: none;
 }
+
 .olLayerGrid .olTileImage {
     -webkit-transition: opacity 0.2s linear;
     -moz-transition: opacity 0.2s linear;
     -o-transition: opacity 0.2s linear;
     transition: opacity 0.2s linear;
 }
-/* Turn on GPU support where available */
+
 .olTileImage {
     -webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
@@ -106,3 +111,53 @@ div.olMapViewport {
     -ms-perspective: 1000;
     perspective: 1000;
 }
+
+button {
+    font-family: "brfont";
+    display: block;
+    padding: 0.5em 1em;
+    font-size: 2em;
+    text-transform: uppercase;
+    border-radius: .3em;
+    border: 1px solid black;
+    background-color: #000;
+    background-image: url("../img/button.jpg");
+    background-repeat: no-repeat; 
+    background-size: cover;
+    background-position: center;
+    /*box-shadow: inset 0 .1em rgba(255,255,255,0.1), 0 .1em .1em black, 0 0.2em rgba(255,255,255,0.1), 0 0 0 .2em rgba(0,0,0,0.1);*/
+    color: #B60101;
+    margin: 75px auto;
+}
+
+button:hover {
+    text-shadow: 0 0 .3em #B60101;
+}
+
+button:active {
+    text-shadow: 0 0 .3em #B60101;
+    top: 0.1em;
+    /*box-shadow: inset 0 .1em rgba(255,255,255,0.1), 0 0.1em rgba(255,255,255,0.1), 0 -0.1em 0 .2em rgba(0,0,0,0.1);*/
+}
+
+input {
+    display: block;
+    font-size: 14px;
+    width: 240px;
+    margin: 25px auto;
+    padding: 10px 8px 10px 8px;
+    border-radius: 5px;
+    box-shadow: inset 0 1px 2px rgba(0,0,0, .55), 0px 1px 1px rgba(255,255,255,.5);
+    border: 1px solid #666;
+    opacity: 0.5;
+}
+
+input:hover,
+input:focus {
+    opacity: 0.8;
+    color: #B60101;
+    font-weight: bold;
+    box-shadow: inset 0 1px 2px rgba(255,255,255, .35), 0px 1px 15px rgba(0,246,255,.5);
+    border: 1px solid #B60101;
+    outline: none;
+}

client/platforms/android/assets/www/game.html

@@ -2,7 +2,7 @@
 <html>
     <body>
         <header>
-            <h1>Map</h1>
+            <h1>GAME IN PLAY</h1>
         </header>
         <div id="map" class="map"></div>
     </body>

client/platforms/android/assets/www/js/appsassin.js

@@ -7,14 +7,23 @@ var appsassin = (function () {
     // Called when the app is loaded
     appsassin.init = function () {
         overrideBackButton();
+        padiOS7StatusBar();
         userId = localStorage.getItem("userId");
+        game = localStorage.getItem("game");
         if (typeof (userId) !== "undefined" && userId !== null) {
             appsassin.switchView("main");
         } else {
             appsassin.switchView("signup");
         }
     };
 
+    // Add extra padding to the header for iOS 7
+    function padiOS7StatusBar() {
+        if (window.device && parseFloat(window.device.version) >= 7) {
+            $("html").addClass("ios7");
+        }
+    }
+
     // Switches the HTML view
     appsassin.switchView = function (viewName, elementId) {
         var fileName = viewName + ".html";
@@ -100,19 +109,29 @@ var appsassin = (function () {
         var main = {};
 
         main.init = function () {
-            $(".wait").show();
             $(".submit").bind("click", function(e) {
                 e.preventDefault();
                 e.stopPropagation();
-                main.init();
+                checkForGame();
             });
+            checkForGame();
+        };
+
+        // Checks to see if there is an active game or gets the current location
+        function checkForGame() {
+            $(".wait").show();
+            $(".check").hide();
+            if (game && game.status) {
+                otherPlayers(game);
+                return;
+            }
             var options = {
                 maximumAge: 3000,
                 timeout: 30000,
                 enableHighAccuracy: true
             };
             navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, options);
-        };
+        }
 
         // Checks for games in the current location
         function geolocationSuccess(position) {
@@ -122,6 +141,7 @@ var appsassin = (function () {
         // Assigns any local games returned from the server
         function handleGames(games) {
             if (games && games.length > 0) {
+                game = games[0];
                 server.joinGame(games[0]._id, userId, otherPlayers);
             } else {
                 alert("There are no local games available to join");
@@ -130,16 +150,19 @@ var appsassin = (function () {
             }
         }
 
-        // Waiting for other players
-        function otherPlayers(game) {
-            if (!game || !game.status || game.status === "open") {
+        // Wait for other players
+        function otherPlayers(updatedGame) {
+            if (game && game.state) {
+                game = updatedGame;
+            }
+            if (game.state === "inprogress") {
+                appsassin.switchView("game");
+            } else {
                 $(".wait").hide();
                 $(".others").show();
                 setTimeout(function() {
                     server.getGame(game._id, otherPlayers);
                 }, 5000);
-            } else {
-                appsassin.switchView("game");
             }
         }
 
@@ -157,7 +180,11 @@ var appsassin = (function () {
         var game = {};
 
         game.init = function () {
-            var map = new Tracker.Map();
+            var options = {
+                "user": userId,
+                "game": game._id
+            };
+            var map = new Tracker.Map(options);
             // Tracks my position on the map
             map.watchPosition();
         };

client/platforms/android/assets/www/js/server.js

@@ -43,16 +43,28 @@ var server = (function () {
     };
 
     server.joinGame = function (gameId, userId, callback) {
-        console.log("joining game...");
+        console.log("joining game " + gameId + "...");
         var data = {
             "id": userId
         };
         doPost("/joingame/" + gameId, data, callback);
     };
 
     server.getGame = function (gameId, callback) {
+        console.log("getting game " + gameId + "...");
         doGet("/games/" + gameId, callback);
     };
 
+    server.sendLocation = function (gameId, userId, lng, lat, callback) {
+        console.log("sending location...");
+        var data = {
+            "gameId": gameId,
+            "userId": userId,
+            "lng": lng,
+            "lat": lat
+        };
+        doPost("/location/track", data, callback);
+    };
+
     return server;
 })();

client/platforms/android/assets/www/js/tracker.js

@@ -1,14 +1,17 @@
 var Tracker = Tracker || {};
 (function () {
     Tracker.Map = function (opt) {
-        var resize, options, self, poll = true;
+        var resize, options, self, game, user;
 
         if (!(this instanceof Tracker.Map)) {
             return new Tracker.Map(opt);
         }
 
         options = opt || {};
 
+        game = options.game;
+        user = options.user;
+
         this.map = new OpenLayers.Map({
             div: options.element || "map",
             projection: options.projection || new OpenLayers.Projection("EPSG:4326"),
@@ -34,12 +37,27 @@ var Tracker = Tracker || {};
         self = this;
 
         this.watchedPosition = function (position) {
+            server.sendLocation(game, user, position.coords.longitude, position.coords.latitude, targetPosition);
             var point = new OpenLayers.Geometry.Point(position.coords.longitude, position.coords.latitude)
                 .transform(new OpenLayers.Projection("EPSG:4326"), self.map.getProjectionObject());
 
             self.drawMyMarker(point);
             self.map.zoomToExtent(self.vector.getDataExtent());
         };
+
+        function targetPosition(data) {
+            if (!data || data.length <= 1) {
+                console.log("Issue with target location");
+                return;
+            }
+            console.log(data[0]);
+            console.log(data[1]);
+            var point = new OpenLayers.Geometry.Point(data[0], data[1])
+                .transform(new OpenLayers.Projection("EPSG:4326"), self.map.getProjectionObject());
+
+            self.drawTargetMarker(point);
+            self.map.zoomToExtent(self.vector.getDataExtent());
+        };
     };
 
     Tracker.Map.prototype.watchPosition = function () {