From 7903174d9edc36846e0356813a2811c1539aa85b Mon Sep 17 00:00:00 2001
From: Sundog <sundog@reclaim.technology>
Date: Mon, 24 Jun 2024 10:06:38 -0400
Subject: [PATCH] adds map location markers and popup details

---
 src/webserver/play/index.php | 143 +++++++++++++++++++++++++++++++++--
 1 file changed, 137 insertions(+), 6 deletions(-)
diff --git a/src/webserver/play/index.php b/src/webserver/play/index.php
index 6880d05..e69bbfa 100644
--- a/src/webserver/play/index.php
+++ b/src/webserver/play/index.php
@@ -7,14 +7,129 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>All Whomst Wander</title>
-<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>
+    <title>All Whomst Wander</title>
+    <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="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+     crossorigin=""/>
+    <!-- Make sure you put this AFTER Leaflet's CSS -->
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+     crossorigin=""></script>
+    <style>
+        #ar-view {
+	    display: none;
+            z-index: 88888888;
+	}
+        #map-view {
+	    height: 100%;
+            z-index: 77777777;
+	}
+        #toggle-view {
+	    position: absolute;
+            top: 90%;
+            right: 0%;
+            z-index: 99999999;
+	}
+        #debug-view {
+	    display: none;
+	    position: absolute;
+            top: 50%;
+            left: 0;
+            z-index: 99999999;
+	}
+        #player-map-icon {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+	    height: 100%;
+	    width: 100%;
+            top: 0;
+            left: 0;
+        }
+    </style>
 </head>
 <body>
-<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true'>
-    <a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
+<div id="map-view"></div>
+<div id="player-map-icon"><div class="playerMapIcon"><div>👤</div></div></div>
+<script language="javascript">
+    var globalZoom = 19; // default zoom level
+
+    var globalPosition = new THREE.Vector3();
+    var globalRotation = new THREE.Quaternion();
+
+    var globalMap = L.map('map-view').setView([34.695068, -84.482468], globalZoom);
+
+    var currentView = "map";
+
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 22,
+        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(globalMap);
+
+    // generic monster svg icon for now
+    var monsterIcon = L.icon({
+        iconUrl: 'monster.svg',
+	iconSize: [48, 48]
+    });
+
+    function toggleView() {
+        if (currentView === "map") {
+	    document.getElementById("ar-view").style.display = "block";
+	    document.getElementById("map-view").style.display = "none";
+            document.getElementById("player-map-icon").style.display = "none";
+	    currentView = "ar";
+	} else {
+	    document.getElementById("ar-view").style.display = "none";
+	    document.getElementById("map-view").style.display = "block";
+            document.getElementById("player-map-icon").style.display = "flex";
+	    currentView = "map";
+	}
+    }
+
+AFRAME.registerComponent('camera-logger', {
+  schema: {
+    timestamp: {type: 'int'},
+    seconds: {type: 'int'} // default 0
+  },
+
+  log : function () {
+    var cameraEl = this.el.sceneEl.camera.el;
+    var rotation = cameraEl.getAttribute('rotation');
+    var worldPos = new THREE.Vector3();
+    worldPos.setFromMatrixPosition(cameraEl.object3D.matrixWorld);
+
+    // update map view
+    navigator.geolocation.getCurrentPosition((position) => {
+        worldPos.x = position.coords.latitude;
+        worldPos.z = position.coords.longitude;
+        globalMap.panTo([position.coords.latitude, position.coords.longitude]);
+
+        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>";
+    });
+  },
+
+  play: function () {
+    this.data.timestamp = Date.now();
+    this.log();
+  },
+
+  tick: function () {  
+    if (Date.now() - this.data.timestamp > 1000) {
+      this.data.timestamp += 1000;
+      this.data.seconds += 1;
+      this.log();
+    }
+  },
+});
+</script>
+<div id="ar-view">
+<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: true' renderer='antialias: true; alpha: true'>
+    <a-camera id='player-camera' gps-new-camera='gpsMinDistance: 1' camera-logger></a-camera>
     <?php
         $poi_npc_results = $conn->query('SELECT * FROM "POI-NPCs"');
         if ($poi_npc_results) {
@@ -28,11 +143,27 @@
                     <a-gltf-model src="<?= trim($npc['model_path']) === "" ? "models/head.gltf" : $npc['model_path'] ?>" position="0 0 0" rotation="0 0 0"></a-gltf-model>
                     <a-text look-at="[gps-new-camera]" scale="5 5 5" align="center" text="value: <?= $poi['name'] . "\n" . $npc['name'] ?>;"></a-text>
                 </a-entity>
+		<script language='javascript'>
+		L.marker([<?= $poi['latitude'] ?>, <?= $poi['longitude'] ?>], {icon: monsterIcon, alt: "Map marker for <?= $npc['name'] ?> located at <?= $poi['name'] ?>"}).addTo(globalMap).bindPopup("<div class='poi-popup'><img src='<?= $npc['image_path'] === "" ? "images/default.png" : $npc['image_path'] ?>' class='npc-image' /><?= $npc['name'] ?> has been spotted at <?= $poi['name'] ?></div>"); 
+		</script>
                 <?php
             }
         }
     ?>
 </a-scene>
+</div>
+<div id="toggle-view-div">
+    <button id="toggle-view" name="toggle" value="Switch" onclick="toggleView()">Switch View</button>
+</div>
+<div id="debug-view"></div>
 </body>
+<script language="javascript">
+    // make sure we have camera perms
+    if (navigator.mediaDevices) {
+	navigator.mediaDevices.getUserMedia({video: true}, function(localMediaStream){alert("user media good")}, function(err){alert(err)});
+    } else {
+        alert("no mediaDevices!");
+    }
+</script>
 </html>
 
