diff --git a/cfg.js b/cfg.js new file mode 100644 index 0000000..9edf34a --- /dev/null +++ b/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 + } +}; \ No newline at end of file diff --git a/css/main.css b/css/main.css index 02fdf9a..b55220e 100644 --- a/css/main.css +++ b/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 { diff --git a/css/vex.css b/css/vex.css new file mode 100644 index 0000000..afee49d --- /dev/null +++ b/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; } diff --git a/img/gym_blue.png b/img/gym_blue.png new file mode 100644 index 0000000..66c2b61 Binary files /dev/null and b/img/gym_blue.png differ diff --git a/img/gym_red.png b/img/gym_red.png new file mode 100644 index 0000000..ee25f97 Binary files /dev/null and b/img/gym_red.png differ diff --git a/img/gym_white.png b/img/gym_white.png new file mode 100644 index 0000000..0f9f1a6 Binary files /dev/null and b/img/gym_white.png differ diff --git a/img/gym_yellow.png b/img/gym_yellow.png new file mode 100644 index 0000000..c8137fe Binary files /dev/null and b/img/gym_yellow.png differ diff --git a/img/license.txt b/img/license.txt new file mode 100644 index 0000000..0fbb1d3 --- /dev/null +++ b/img/license.txt @@ -0,0 +1 @@ +https://shareicon.net/license/cc-3-0-by \ No newline at end of file diff --git a/img/pokestop_blue.png b/img/pokestop_blue.png new file mode 100644 index 0000000..aba9866 Binary files /dev/null and b/img/pokestop_blue.png differ diff --git a/img/pokestop_lure.png b/img/pokestop_lure.png new file mode 100644 index 0000000..336c418 Binary files /dev/null and b/img/pokestop_lure.png differ diff --git a/img/pokestop_puple.png b/img/pokestop_puple.png new file mode 100644 index 0000000..4d00049 Binary files /dev/null and b/img/pokestop_puple.png differ diff --git a/index.html b/index.html index c5a11ff..2736b4f 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,11 @@ - - + + + + + @@ -37,12 +40,12 @@
-
+
- - + + \ No newline at end of file diff --git a/ajax.js b/js/ajax.js similarity index 85% rename from ajax.js rename to js/ajax.js index c6e8f02..c0bd8d8 100644 --- a/ajax.js +++ b/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) { diff --git a/gmaps.js b/js/gmaps.js similarity index 100% rename from gmaps.js rename to js/gmaps.js diff --git a/js/init.js b/js/init.js new file mode 100644 index 0000000..df6467c --- /dev/null +++ b/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"); + +})(); \ No newline at end of file diff --git a/main.js b/js/main.js similarity index 66% rename from main.js rename to js/main.js index 74db892..8dc6b54 100644 --- a/main.js +++ b/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: "

Create new fort
", + input: [ + '', + '', + '', + '' + ].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: "

Delete this fort?
", + 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();