adds map tile caching, PWA manifest, placeholder icons and default NPC marker

src/webserver/play/index.php

@@ -11,6 +11,7 @@
     <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
     <script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js'></script>
     <script type='text/javascript' src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js'></script>
+    <link rel="manifest" href="manifest.json" />
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""/>
@@ -18,6 +19,8 @@
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""></script>
+    <script src="https://unpkg.com/pouchdb@^5.2.0/dist/pouchdb.js"></script>
+    <script src="https://unpkg.com/leaflet.tilelayer.pouchdbcached@latest/L.TileLayer.PouchDBCached.js"></script>
     <style>
         #ar-view {
 	    display: none;
@@ -65,6 +68,7 @@
     var globalRotation = new THREE.Quaternion();
 
     var globalMap = L.map('map-view').setView([34.68825, -84.47705], globalZoom);
+    globalMap.attributionControl.setPrefix(false);
 
     var globalMarkers = [];
 
@@ -73,7 +77,9 @@
 
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 22,
-        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+        useCache: true,
+	crossOrigin: true
     }).addTo(globalMap);
 
     // generic monster svg icon for now
@@ -128,7 +134,7 @@ AFRAME.registerComponent('camera-logger', {
 	});
 	
         document.querySelector('#debug-view').innerHTML = "<p>Time: " + this.data.seconds 
-		+ "</p><p>Camera Position: (" + worldPos.x.toFixed(6) + ", " + worldPos.y.toFixed(2) + ", " + worldPos.z.toFixed(6) + "</p>"
+		+ "</p><p>Camera Position: (" + worldPos.x.toFixed(6) + ", " + worldPos.y.toFixed(2) + ", " + worldPos.z.toFixed(6) + ")</p>"
 		+ "</p><p>Distance to marker[0]: " + globalMap.distance(currentPosition, globalMarkers[0]._latlng).toFixed(1) + " meters</p>";
     });
   },

src/webserver/play/manifest.json

@@ -0,0 +1,18 @@
+{
+    "name": "Wandering Ellijay",
+    "short_name": "Wander",
+    "icons": [
+        {
+	    "src": "icons/squatch-512.png",
+	    "type": "image/png",
+	    "sizes": "512x512"
+	},
+	{
+	    "src": "icons/squatch-192.png",
+	    "type": "image/png",
+	    "sizes": "192x192"
+	}
+    ],
+    "start_url": "https://wander.reclaim.technology/webserver/play/",
+    "display": "fullscreen"
+}