From f2c1cf16f7061af6e8375a17087bc00b21e91166 Mon Sep 17 00:00:00 2001
From: Sundog <sundog@reclaim.technology>
Date: Wed, 3 Jul 2024 09:45:16 -0400
Subject: [PATCH] adds bottom toolbar, adds first pass of player cabin view

---
 src/webserver/play/index.php | 135 +++++++++++++++++++++++++++--------
 1 file changed, 105 insertions(+), 30 deletions(-)
diff --git a/src/webserver/play/index.php b/src/webserver/play/index.php
index 7428147..fef77a8 100644
--- a/src/webserver/play/index.php
+++ b/src/webserver/play/index.php
@@ -27,17 +27,38 @@
     <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;
-            z-index: 88888888;
+        body {
+	    background-color: #c6baff;
+            height: 100vh;
+        }
+	#player-view {
+	    background-color: #c6baff;
+	    position: fixed;
+            top: 0;
+            height: 90vh;
+            width: 100%;
+            display: none;
+            z-index: 99999999;
+            font-size: 2rem;
 	}
-        #map-view {
-	    height: 100%;
+        #ar-view {
+	    position: fixed;
+            top: 0;
+            height: 90vh;
+            width: 100%;
+	    display: none;
+            z-index: 77777778;
+	}
+	#map-view {
+	    position: fixed;
+            top: 0;
+	    height: 90vh;
+            width: 100%;
             z-index: 77777777;
 	}
         #toggle-view {
 	    position: absolute;
-            top: 90%;
+            top: 80%;
             right: 0%;
             z-index: 99999999;
 	}
@@ -47,25 +68,48 @@
             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;
-	}
         .big-marker {
             width: 48px !important;
             height: 48px !important;
-        }
+	}
+        #bottom-toolbar {
+	    display: flex;
+            justify-content: center;
+            align-items: center;
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+            height: 10vh;
+            background-color: #f49e7e;
+            z-index: 99999999;
+	}
+        #home-button {
+	    width: 30vw;
+            height: 100%;
+	}
+        #action-button {
+	    width: 40vw;
+            height: 100%;
+	}
+        #player-button {
+	    width: 30vw;
+            height: 100%;
+	}
+        #home-button-icon, #action-button-icon, #player-button-icon {
+	    display: block;
+	    position: relative;
+	    width: 100%;
+            height: 100%;
+            text-align: center;
+	}
     </style>
 </head>
 <body>
+<div id="player-view">
+    <div id="player-view-header"></div>
+    <div id="player-view-details"></div>
+</div>
 <div id="map-view"></div>
-<div id="player-map-icon"><div class="playerMapIcon"><div>👤</div></div></div>
 <script language="javascript">
     var player;
 
@@ -95,16 +139,35 @@
 	iconSize: [20, 20]
     });
 
+    function goToMapMode() {
+	document.getElementById("ar-view").style.display = "none";
+        document.getElementById("player-view").style.display = "none";
+	document.getElementById("map-view").style.display = "block";
+	currentView = "map";
+    }
+
+    function goToARMode() {
+        document.getElementById("ar-view").style.display = "block";
+	document.getElementById("player-view").style.display = "none";
+	document.getElementById("map-view").style.display = "none";
+	currentView = "ar";
+    }
+
+    function goToPlayerMode() {
+        document.getElementById("ar-view").style.display = "none";
+	document.getElementById("player-view").style.display = "block";
+	document.getElementById("map-view").style.display = "none";
+	currentView = "player";
+    }
+
     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";
 	}
     }
@@ -140,15 +203,15 @@ AFRAME.registerComponent('camera-logger', {
 	    }
 	});
 
-	var debugText = "<p>Time: " + this.data.seconds + "</p>\n";
-	debugText += "<p>Position: " + worldPos.x.toFixed(6) + ", " + worldPos.z.toFixed(6) + "</p>\n";
-	debugText += "<p>Distance to marker[0]: " + globalMap.distance(currentPosition, globalMarkers[0]._latlng).toFixed(1) + " meters</p>\n";
+	//var debugText = "<p>Time: " + this.data.seconds + "</p>\n";
+	//debugText += "<p>Position: " + worldPos.x.toFixed(6) + ", " + worldPos.z.toFixed(6) + "</p>\n";
+	//debugText += "<p>Distance to marker[0]: " + globalMap.distance(currentPosition, globalMarkers[0]._latlng).toFixed(1) + " meters</p>\n";
 
-	if (player && player.nickname) {
-	    debugText = "<p><strong>You are " + player.nickname + "</strong></p>\n" + debugText;
-	}
+	//if (player && player.nickname) {
+	//    debugText = "<p><strong>You are " + player.nickname + "</strong> - <a href='../auth/logout.php'>Log Out</a></p>\n" + debugText;
+	//}
 	
-        document.querySelector('#debug-view').innerHTML = debugText; 
+        //document.querySelector('#debug-view').innerHTML = debugText; 
     });
   },
 
@@ -171,6 +234,16 @@ fetch("https://wander.reclaim.technology/webserver/api/me.php").then((response)
     return response.text();
 }).then((playerJSON) => {
     player = JSON.parse(playerJSON);
+    document.getElementById("player-view-header").innerHTML = "<center><h1>" + player.nickname + "'s cabin</h1></center>";
+    var playerInfo = "<p>You are " + player.nickname + ".</p>";
+    playerInfo += "<p>Your items:</p>";
+    playerInfo += "<ul>";
+    player.items.forEach((item) => {
+        playerInfo += "<li>" + item.quantity + " " + item.name.toLowerCase() + "</li>";
+    });
+    playerInfo += "</ul>";
+    playerInfo += "<center><button id='player-logout-button' onclick='window.location.href=\"../auth/logout.php\"'>Log Out</button></center>";
+    document.getElementById("player-view-details").innerHTML = playerInfo;
 });
 
 </script>
@@ -199,10 +272,12 @@ fetch("https://wander.reclaim.technology/webserver/api/me.php").then((response)
     ?>
 </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>
+<div id="bottom-toolbar">
+    <div id="home-button"><span id="home-button-icon" onclick="goToMapMode()">Home</span></div>
+    <div id="action-button"><span id="action-button-icon" onclick="goToARMode()">Action</span></div>
+    <div id="player-button"><span id="player-button-icon" onclick="goToPlayerMode()">Player</span></div>
+</div>
 </body>
 <script language="javascript">
     // make sure we have camera perms
