Update

- Fort icons
- Gym icons
- Modals
- Configuration file
- Load scripts sync
- Restructured files

cfg.js

@@ -0,0 +1,13 @@
+var CFG = {
+  API: {
+    HOST: "127.0.0.1",
+    PORT: 3000,
+    ROUTE: "/api"
+  },
+  GMAPS: {
+    API_KEY: "XXXXX",
+    BASE_ZOOM: 20,
+    BASE_LAT: 39.18875480450959,
+    BASE_LNG: -96.58109955489635
+  }
+};

css/main.css

@@ -8,13 +8,20 @@ html {
 
 body {
   overflow-x: hidden;
+  overflow-y: scroll !important;
 }
 
 #map {
   position: absolute;
   left: calc(50% - 400px);
-  width: 800px;
-  height: 400px;
+  width: 800px !important;
+  height: 400px !important;
+}
+
+#map_manager {
+  padding-bottom: 500px;
+  margin-top: -100px;
+  display: none;
 }
 
 .view {

css/vex.css

@@ -0,0 +1,208 @@
+@keyframes vex-fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@-webkit-keyframes vex-fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@-moz-keyframes vex-fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@-ms-keyframes vex-fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@-o-keyframes vex-fadein {
+  0% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+@keyframes vex-fadeout {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+@-webkit-keyframes vex-fadeout {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+@-moz-keyframes vex-fadeout {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+@-ms-keyframes vex-fadeout {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+@-o-keyframes vex-fadeout {
+  0% {
+    opacity: 1; }
+  100% {
+    opacity: 0; } }
+
+@keyframes vex-rotation {
+  0% {
+    transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg); }
+  100% {
+    transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    -ms-transform: rotate(359deg);
+    -o-transform: rotate(359deg); } }
+
+@-webkit-keyframes vex-rotation {
+  0% {
+    transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg); }
+  100% {
+    transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    -ms-transform: rotate(359deg);
+    -o-transform: rotate(359deg); } }
+
+@-moz-keyframes vex-rotation {
+  0% {
+    transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg); }
+  100% {
+    transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    -ms-transform: rotate(359deg);
+    -o-transform: rotate(359deg); } }
+
+@-ms-keyframes vex-rotation {
+  0% {
+    transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg); }
+  100% {
+    transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    -ms-transform: rotate(359deg);
+    -o-transform: rotate(359deg); } }
+
+@-o-keyframes vex-rotation {
+  0% {
+    transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg); }
+  100% {
+    transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    -ms-transform: rotate(359deg);
+    -o-transform: rotate(359deg); } }
+
+.vex, .vex *, .vex *:before, .vex *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+
+.vex {
+  position: fixed;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  z-index: 1111;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+
+.vex-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll; }
+
+.vex-overlay {
+  background: #000;
+  filter: alpha(opacity=40);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; }
+
+.vex-overlay {
+  animation: vex-fadein 0.5s;
+  -webkit-animation: vex-fadein 0.5s;
+  -moz-animation: vex-fadein 0.5s;
+  -ms-animation: vex-fadein 0.5s;
+  -o-animation: vex-fadein 0.5s;
+  -webkit-backface-visibility: hidden;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.4);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+
+.vex-close:before {
+  font-family: Arial, sans-serif;
+  content: "\00D7"; }
+
+.vex-dialog-form {
+  margin: 0; }
+
+.vex-dialog-button {
+  text-rendering: optimizeLegibility;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent; }
+
+.vex-loading-spinner {
+  animation: vex-rotation 0.7s linear infinite;
+  -webkit-animation: vex-rotation 0.7s linear infinite;
+  -moz-animation: vex-rotation 0.7s linear infinite;
+  -ms-animation: vex-rotation 0.7s linear infinite;
+  -o-animation: vex-rotation 0.7s linear infinite;
+  -webkit-backface-visibility: hidden;
+  -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
+  position: fixed;
+  z-index: 1112;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 2em;
+  width: 2em;
+  background: #fff; }
+
+body.vex-open {
+  overflow: hidden; }

img/license.txt

@@ -0,0 +1 @@
+https://shareicon.net/license/cc-3-0-by

index.html

@@ -9,8 +9,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="css/main.css">
     <link rel="stylesheet" type="text/css" href="css/pure.min.css">
-    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=X"></script>
-    <script src="./gmaps.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vex-js/2.3.4/js/vex.combined.min.js"></script>
+    <script>vex.defaultOptions.className = "vex-theme-plain";</script>
+    <link rel="stylesheet" type="text/css" href="css/vex.css">
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/2.3.4/css/vex-theme-plain.css">
   </head>
   <body class="body">
 
@@ -37,12 +40,12 @@
       <br/>
     </div>
 
-    <div class="area" id="fort_manager" style="padding-bottom:500px;opacity:0;">
+    <div class="area" id="map_manager">
       <div id="map"></div>
     </div>
 
-    <script language="javascript" src="ajax.js"></script>
-    <script language="javascript" src="main.js"></script>
+    <script src="cfg.js"></script>
+    <script src="js/init.js"></script>
 
   </body>
 </html>

js/ajax.js

@@ -1,7 +1,7 @@
 function send(data, resolve) {
   var xhr = new XMLHttpRequest();
   var protocol = window.location.protocol;
-  xhr.open("POST", protocol + "//" + "127.0.0.1:3000/api", true);
+  xhr.open("POST", protocol + "//" + CFG.API.HOST + ":" + CFG.API.PORT + CFG.API.ROUTE, true);
   xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   xhr.onreadystatechange = function() {
     if (xhr.readyState === 4) {

js/init.js

@@ -0,0 +1,17 @@
+(function() {
+
+  function loadScriptDefered(src) {
+    var js = null;
+    js = document.createElement("script");
+    js.type = "text/javascript";
+    js.src = src;
+    js.async = false;
+    document.body.appendChild(js);
+  };
+
+  loadScriptDefered("http://maps.google.com/maps/api/js?key=" + CFG.GMAPS.API_KEY);
+  loadScriptDefered("js/gmaps.js");
+  loadScriptDefered("js/ajax.js");
+  loadScriptDefered("js/main.js");
+
+})();

js/main.js

@@ -7,14 +7,57 @@
   var heartTimeout = null;
   var heartTimedOut = true;
 
-  var map = new GMaps({
+  var gmap = new GMaps({
     el: "#map",
-    lat: 39.18875480450959,
-    lng: -96.58109955489635,
     disableDoubleClickZoom: true,
-    dblclick: addFort
+    lat: 0,
+    lng: 0,
+    disableDefaultUI: true,
+    dblclick: function(e) {
+      vex.dialog.open({
+        message: "<center><img src='img/pokestop_blue.png' /><br/>Create new fort</center>",
+        input: [
+          '<input name="name" placeholder="Name" type="text" />',
+          '<input name="description" placeholder="Description" type="text" />',
+          '<input name="image_url" placeholder="Image" type="text" />',
+          '<input name="experience" placeholder="Experience" type="text" />'
+        ].join(""),
+        buttons: [
+          $.extend({}, vex.dialog.buttons.YES, {
+            text: "Submit"
+          }),
+          $.extend({}, vex.dialog.buttons.NO, {
+            text: "Abort"
+          })
+        ],
+        callback: function(data) {
+          e.name = data.name;
+          e.description = data.description;
+          e.imageUrl = data.image_url;
+          e.experience = data.experience;
+          addFort(e);
+        }
+      })
+    }
   });
-  map.setZoom(20);
+
+  function addFort(e) {
+    let lat = e.latLng.lat();
+    let lng = e.latLng.lng();
+    send({
+      action: "addFortToPosition",
+      latitude: lat,
+      longitude: lng,
+      zoom: gmap.zoom,
+      name: e.name,
+      description: e.description,
+      image: e.imageUrl,
+      experience: e.experience
+    }, function(res) {
+      console.log(res);
+      refreshMapForts();
+    });
+  }
 
   function setStatus(txt, color) {
     connection_status.innerHTML = txt;
@@ -79,7 +122,13 @@
     setStatus("Logged in!", "green");
     world_manager.style.display = "block";
     server_ping.style.display = "block";
-    fort_manager.style.opacity = 1;
+    map_manager.style.display = "block";
+    gmap.refresh();
+    gmap.setCenter({
+      lat: CFG.GMAPS.BASE_LAT,
+      lng: CFG.GMAPS.BASE_LNG
+    });
+    gmap.setZoom(CFG.GMAPS.BASE_ZOOM);
     initHeartBeat();
     refreshMapForts();
     refreshConnectedPlayers();
@@ -103,57 +152,42 @@
   }
 
   function refreshMapForts() {
-    let center = map.getCenter();
+    let center = gmap.getCenter();
     let lat = center.lat();
     let lng = center.lng();
     send({
       action: "getFortsByPosition",
       latitude: lat,
       longitude: lng,
-      zoom: map.zoom
+      zoom: gmap.zoom
     }, function(result) {
-      map.removeMarkers();
+      gmap.removeMarkers();
       result.forts.map((fort) => {
-        map.addMarker({
+        gmap.addMarker({
           lat: fort.latitude,
           lng: fort.longitude,
           title: fort.name,
-          dblclick: function() {
-            removeFort(this);
+          icon: "img/pokestop_blue.png",
+          rightclick: function(e) {
+            vex.dialog.confirm({
+              message: "<center><img src='img/pokestop_blue.png' /><br/>Delete this fort?</center>",
+              callback: function(value) {
+                if (value) removeFort(this);
+              }.bind(fort)
+            })
           }.bind(fort)
         });
       });
     });
   }
 
-  function addFort(e) {
-    let latLng = e.latLng.toString().split(",");
-    let lat = latLng[0].substring(1);
-    let lng = latLng[1].substring(0, latLng[1].length - 1);
-    let name = prompt("Enter fort name: ");
-    let description = prompt("Enter fort description: ");
-    send({
-      action: "addFortToPosition",
-      latitude: lat,
-      longitude: lng,
-      zoom: map.zoom,
-      name: name,
-      description: description
-    }, function(res) {
-      console.log(res);
-      refreshMapForts();
-    });
-  }
-
   function removeFort(fort) {
-    let sure = prompt("Do you really want to remove this fort?");
-    if (sure === null) return void 0;
     send({
       action: "deleteFortById",
       uid: fort.uid,
       latitude: fort.latitude,
       longitude: fort.longitude,
-      zoom: map.zoom
+      zoom: gmap.zoom
     }, function(res) {
       console.log(res);
       refreshMapForts();