-
+
diff --git a/scripts/clean_node_modules.sh b/scripts/clean_node_modules.sh index 5d595ba..d8b1de5 100755 --- a/scripts/clean_node_modules.sh +++ b/scripts/clean_node_modules.sh @@ -14,7 +14,7 @@ rm -r ./{ansicolors,buffer-from,canvas-renderer,cardinal,concat-stream,core-util rm -r ./{earcut,esm,esprima,geojson-vt,gl-matrix,grid-index,ieee754,inherits,isarray,kdbush,@mapbox,minimist,murmurhash-js} rm -r ./{path-to-regexp,pbf,potpack,process-nextick-args,protocol-buffers-schema,quickselect} rm -r ./{readable-stream,redeyed,resolve-protobuf-schema,rw,safe-buffer,sharkdown,split,ssr-window,string_decoder} -rm -r ./{supercluster,template7,through,tinyqueue,typedarray,util-deprecate,vt-pbf,wgs84} +rm -r ./{supercluster,template7,through,tinyqueue,topojson-client,typedarray,util-deprecate,vector-tile,vt-pbf,whatwg-fetch,wgs84} rm -r @fortawesome/fontawesome-free/{js,less,scss,sprites,svgs} rm -r @fortawesome/fontawesome-free/css/{all.css,brands.css,brands.min.css,fontawesome.css,fontawesome.min.css,regular.css,\ @@ -34,6 +34,11 @@ rm -r mapbox-gl/{build,CHANGELOG.md,flow-typed,node_modules,src} rm -r mapbox-gl/dist/{mapbox-gl-csp.js,mapbox-gl-csp.js.map,mapbox-gl-csp-worker.js,mapbox-gl-csp-worker.js.map,mapbox-gl-dev.js,\ mapbox-gl-dev.js.flow,mapbox-gl.js.flow,mapbox-gl.js.map,mapbox-gl-unminified.js,mapbox-gl-unminified.js.map,style-spec} +rm -r leaflet/src +rm -r leaflet/dist/{leaflet.js.map,leaflet-src.esm.js,leaflet-src.esm.js.map,leaflet-src.js,leaflet-src.js.map} + +rm -r leaflet.vectorgrid/{docs,leafdoc-templates,node_modules,package.json,README.md,src} +rm -r leaflet.vectorgrid/dist/{Leaflet.VectorGrid.bundled.js.map,Leaflet.VectorGrid.bundled.min.js,Leaflet.VectorGrid.js,Leaflet.VectorGrid.js.map,Leaflet.VectorGrid.min.js,vectorgrid-api-docs.html} echo "Size after: $(du -sh | cut -d ' ' -f 1)" echo "Cleanup complete!" diff --git a/www/img/map/dirt.png b/www/img/map/dirt.png new file mode 100644 index 0000000..6e28f53 Binary files /dev/null and b/www/img/map/dirt.png differ diff --git a/www/img/map/grass.png b/www/img/map/grass.png new file mode 100644 index 0000000..d9626c4 Binary files /dev/null and b/www/img/map/grass.png differ diff --git a/www/img/map/ground.png b/www/img/map/ground.png new file mode 100644 index 0000000..ba6a47c Binary files /dev/null and b/www/img/map/ground.png differ diff --git a/www/img/map/water.png b/www/img/map/water.png new file mode 100644 index 0000000..ec4a14d Binary files /dev/null and b/www/img/map/water.png differ diff --git a/www/index.html b/www/index.html index 482f8aa..72654d5 100644 --- a/www/index.html +++ b/www/index.html @@ -13,6 +13,7 @@ + @@ -31,8 +32,13 @@ + + + + + diff --git a/www/js/map.js b/www/js/map.js index 27e3050..6f2fd46 100644 --- a/www/js/map.js +++ b/www/js/map.js @@ -4,62 +4,22 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -mapboxgl.accessToken = ''; -const map = new mapboxgl.Map({ - container: 'mapbox', - style: SETTINGS['map_style_json'], - attributionControl: false, - dragPan: false, - pitch: 0, - zoom: 0, - maxZoom: 20 -}); - -var dpPoint = null; -var dpPitch = null; - -map.on('touchstart', function (data) { - if (data.points.length == 2) { - var diff = Math.abs(data.points[0].y - data.points[1].y); - if (diff <= 50) { - dpPoint = data.point; - map.touchZoomRotate.disable(); - dpPitch = map.getPitch(); - } - } -}); -map.on('touchmove', function (data) { - if (dpPoint) { - data.preventDefault(); - var pitchdiff = (dpPoint.y - data.point.y) * 0.5; - map.setPitch(dpPitch + pitchdiff); - } -}); +var gotfirstfix = false; -map.on('touchend', function (data) { - if (dpPoint) { - map.touchZoomRotate.enable(); - } - dpPoint = null; - dpPitch = null; -}); +var geoerrorcount = 0; -map.on('touchcancel', function (data) { - if (dpPoint) { - map.touchZoomRotate.enable(); - } - dpPoint = null; - dpPitch = null; -}); +var gamemaptype = "mapbox"; -function mapEasing(t) { - return t * (2 - t); +if (localStorage.getItem("litemode") == "true") { + gamemaptype = "leaflet"; } -var gotfirstfix = false; - -var geoerrorcount = 0; +if (gamemaptype == "leaflet") { + var map = leafletMap(); +} else { + var map = mapboxMap(); +} watchLocation(function (position) { if (gotfirstfix) { @@ -85,21 +45,11 @@ watchLocation(function (position) { }); function setMapHeading(heading) { - if (typeof heading == 'number') { - map.easeTo({ - bearing: heading, - easing: mapEasing - }); - } + map.setHeading(heading); } function setMapLocation(latitude, longitude) { - map.easeTo({ - center: [ - longitude, - latitude - ] - }); + map.setMapLocation(latitude, longitude); } function updatePlaceLayer(latitude, longitude) { @@ -110,28 +60,7 @@ function updatePlaceLayer(latitude, longitude) { longitude: longitude, radius: 5 }, function (data) { - var oldmarkers = document.getElementsByClassName("place-marker"); - if (oldmarkers.length > 0) { - markerparent = oldmarkers[0].parentNode; - while (oldmarkers.length > 0) { - markerparent.removeChild(oldmarkers[0]); - } - } - data.features.forEach(function (place) { - var el = document.createElement("div"); - el.className = "place-marker"; - if (place.properties.teamid != null && place.properties.teamid > 0) { - el.className += " place-color-" + SETTINGS["teams"][place.properties.teamid]["color"]; - } - - el.addEventListener('click', function () { - openPlace(place.properties.id, place.properties.name); - }); - - new mapboxgl.Marker(el) - .setLngLat(place.geometry.coordinates) - .addTo(map); - }); + map.updatePlaceLayer(data); }); } @@ -142,19 +71,5 @@ function animateMapIn(latitude, longitude, zoom, heading) { if (typeof heading == 'undefined') { heading = 0; } - map.flyTo({ - center: [ - longitude, - latitude - ], - speed: 0.7, - zoom: zoom, - heading: heading, - pitch: 45 - }); - // Set min zoom after some time to fly in - setTimeout(function () { - map.setMinZoom(16); - map.setPitch(45); - }, 1000); + map.animateMapIn(latitude, longitude, zoom, heading); } \ No newline at end of file diff --git a/www/js/map_leaflet.js b/www/js/map_leaflet.js new file mode 100644 index 0000000..84b3f5c --- /dev/null +++ b/www/js/map_leaflet.js @@ -0,0 +1,160 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +function leafletMap() { + var map = L.map('mapbox', { + zoomSnap: 0.25, + zoomControl: false, + attributionControl: false + }); + + map.placelayer = L.layerGroup(); + + map.placelayer.addTo(map); + + $("#mapbox").css("background-color", "#6cdc9b"); + $("#mapbox").css("background-image", "url(img/map/ground.png)"); + // Prevent roads and stuff from appearing above UI + $("#mapbox").css("z-index", "-9999"); + + var openmaptilesUrl = SETTINGS['map_pbf_url']; + + var vectorTileStyling = { + water: { + fill: true, + weight: 1, + fillColor: '#76FFFF', + color: '#76FFFF', + fillOpacity: 1, + opacity: 1 + }, + admin: [], + waterway: { + weight: 1, + fillColor: '#76FFFF', + color: '#76FFFF', + fillOpacity: 1, + opacity: 1 + }, + landcover: { + fill: true, + weight: 1, + fillColor: '#62CF80', + color: '#62CF80', + fillOpacity: 0.5, + opacity: 0.5, + }, + landuse: [], + park: { + fill: true, + weight: 1, + fillColor: '#62CF80', + color: '#62CF80', + fillOpacity: 0.5, + opacity: 0.5 + }, + boundary: [], + aeroway: [], + transportation: { + weight: 2, + fillColor: '#FEC481', + color: '#FEC481', + fillOpacity: 1, + opacity: 1, + }, + building: { + fill: true, + weight: 1, + fillColor: '#c0e3e9', + color: '#c0e3e9', + fillOpacity: 0.5, + opacity: 0.5 + }, + water_name: [], + transportation_name: [], + place: [], + housenumber: [], + poi: [], + country_name: [], + marine_name: [], + state_name: [], + place_name: [], + waterway_name: [], + poi_name: [], + road_name: [], + housenum_name: [] + }; + + var openmaptilesVectorTileOptions = { + rendererFactory: L.svg.tile, + attribution: '', + vectorTileLayerStyles: vectorTileStyling, + maxNativeZoom: 14, + maxZoom: 20 + }; + + var openmaptilesPbfLayer = L.vectorGrid.protobuf(openmaptilesUrl, openmaptilesVectorTileOptions).addTo(map); + + map.setView({lat: 0, lng: 0}, 1); + + map.setMapHeading = function (heading) { + + } + + map.setMapLocation = function (latitude, longitude) { + map.setView({ + lng: longitude, + lat: latitude + }); + } + + map.updatePlaceLayer = function (data) { + map.placelayer.clearLayers(); + + data.features.forEach(function (place) { + var color = "white"; + if (place.properties.teamid != null && place.properties.teamid > 0) { + color = SETTINGS["teams"][place.properties.teamid]["color"]; + } + + var icon = L.icon({ + iconUrl: "img/place/" + color + ".png", + iconSize: [50, 50], + iconAnchor: [25, 10] + }); + + L.marker( + [ + place.geometry.coordinates[1], + place.geometry.coordinates[0] + ], + { + icon: icon + }) + .on('click', function () { + openPlace(place.properties.id, place.properties.name); + }) + .addTo(map.placelayer); + }); + } + + map.animateMapIn = function (latitude, longitude, zoom, heading) { + if (typeof zoom == 'undefined') { + zoom = 17; + } + if (typeof heading == 'undefined') { + heading = 0; + } + map.flyTo([latitude, longitude], zoom); + // Set min zoom after some time to fly in + setTimeout(function () { + map.setMinZoom(14); + map.setZoom(zoom); + }, 1000); + } + + return map; +} \ No newline at end of file diff --git a/www/js/map_mapbox.js b/www/js/map_mapbox.js new file mode 100644 index 0000000..d5203bf --- /dev/null +++ b/www/js/map_mapbox.js @@ -0,0 +1,130 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +function mapboxMap() { + mapboxgl.accessToken = ''; + var map = new mapboxgl.Map({ + container: 'mapbox', + style: SETTINGS['map_style_json'], + attributionControl: false, + dragPan: false, + pitch: 0, + zoom: 0, + maxZoom: 20 + }); + + map.mapEasing = function (t) { + return t * (2 - t); + } + + map.setMapHeading = function (heading) { + if (typeof heading == 'number') { + map.easeTo({ + bearing: heading, + easing: map.mapEasing + }); + } + } + + map.setMapLocation = function (latitude, longitude) { + map.easeTo({ + center: [ + longitude, + latitude + ] + }); + } + + map.updatePlaceLayer = function (data) { + var oldmarkers = document.getElementsByClassName("place-marker"); + if (oldmarkers.length > 0) { + markerparent = oldmarkers[0].parentNode; + while (oldmarkers.length > 0) { + markerparent.removeChild(oldmarkers[0]); + } + } + data.features.forEach(function (place) { + var el = document.createElement("div"); + el.className = "place-marker"; + if (place.properties.teamid != null && place.properties.teamid > 0) { + el.className += " place-color-" + SETTINGS["teams"][place.properties.teamid]["color"]; + } + + el.addEventListener('click', function () { + openPlace(place.properties.id, place.properties.name); + }); + + new mapboxgl.Marker(el) + .setLngLat(place.geometry.coordinates) + .addTo(map); + }); + } + + map.animateMapIn = function (latitude, longitude, zoom, heading) { + if (typeof zoom == 'undefined') { + zoom = 17; + } + if (typeof heading == 'undefined') { + heading = 0; + } + map.flyTo({ + center: [ + longitude, + latitude + ], + speed: 0.7, + zoom: zoom, + heading: heading, + pitch: 45 + }); + // Set min zoom after some time to fly in + setTimeout(function () { + map.setMinZoom(15); + map.setPitch(45); + map.setZoom(zoom); + }, 1000); + } + + var dpPoint = null; + var dpPitch = null; + + map.on('touchstart', function (data) { + if (data.points.length == 2) { + var diff = Math.abs(data.points[0].y - data.points[1].y); + if (diff <= 50) { + dpPoint = data.point; + map.touchZoomRotate.disable(); + dpPitch = map.getPitch(); + } + } + }); + + map.on('touchmove', function (data) { + if (dpPoint) { + data.preventDefault(); + var pitchdiff = (dpPoint.y - data.point.y) * 0.5; + map.setPitch(dpPitch + pitchdiff); + } + }); + + map.on('touchend', function (data) { + if (dpPoint) { + map.touchZoomRotate.enable(); + } + dpPoint = null; + dpPitch = null; + }); + + map.on('touchcancel', function (data) { + if (dpPoint) { + map.touchZoomRotate.enable(); + } + dpPoint = null; + dpPitch = null; + }); + + return map; +} \ No newline at end of file diff --git a/www/js/settings.js b/www/js/settings.js index 64aa538..ac300d2 100644 --- a/www/js/settings.js +++ b/www/js/settings.js @@ -7,12 +7,13 @@ var settings = [ { - setting: "account", - title: "Sign out", - text: "Disconnect this device and open the sign in screen.", - icon: "game-icon game-icon-exit-door", - color: "red", - onclick: "logout()" + setting: "litemode", + title: "Use alternate map", + text: "Replace the 3D map with a lightweight power-saving 2D version.", + icon: "game-icon game-icon-treasure-map", + color: "green", + type: "toggle", + restart: true }, { setting: "opensource", @@ -20,7 +21,8 @@ var settings = [ text: "See information on third-party code and artwork used in TerranQuest.", icon: "game-icon game-icon-spell-book", color: "lightblue", - onclick: "router.navigate('/credits')" + onclick: "router.navigate('/credits')", + type: "link" }, { setting: "privacy", @@ -28,7 +30,17 @@ var settings = [ text: "Know what data we collect and what your rights are.", icon: "game-icon game-icon-spy", color: "purple", - onclick: "openBrowser('" + SETTINGS["terms_of_service_url"] + "')" + onclick: "openBrowser('" + SETTINGS["terms_of_service_url"] + "')", + type: "link" + }, + { + setting: "account", + title: "Sign out", + text: "Disconnect this device and open the sign in screen.", + icon: "game-icon game-icon-exit-door", + color: "red", + onclick: "logout()", + type: "link" }, { setting: "versions", @@ -43,14 +55,50 @@ var settings = [ function loadSettings() { $("#settings-bin").html(""); settings.forEach(function (item) { - $("#settings-bin").append('