djsundog/AllWhomstWander
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adds bottom toolbar, adds first pass of player cabin view

Browse Source
This commit is contained in:
Sundog Jones 2024-07-03 09:45:16 -04:00
parent 51a6d89cea
commit f2c1cf16f7
1 changed files with 105 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
src/webserver/play/index.php
View File

@ -27,17 +27,38 @@
<script src="https://unpkg.com/pouchdb@^5.2.0/dist/pouchdb.js"></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> <script src="https://unpkg.com/leaflet.tilelayer.pouchdbcached@latest/L.TileLayer.PouchDBCached.js"></script>
<style> <style>
#ar-view { body {
display: none; background-color: #c6baff;
z-index: 88888888; 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 { #ar-view {
height: 100%; 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; z-index: 77777777;
} }
#toggle-view { #toggle-view {
position: absolute; position: absolute;
top: 90%; top: 80%;
right: 0%; right: 0%;
z-index: 99999999; z-index: 99999999;
} }
@ -47,25 +68,48 @@
left: 0; left: 0;
z-index: 99999999; 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 { .big-marker {
width: 48px !important; width: 48px !important;
height: 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> </style>
</head> </head>
<body> <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="map-view"></div>
<div id="player-map-icon"><div class="playerMapIcon"><div>👤</div></div></div>
<script language="javascript"> <script language="javascript">
var player; var player;
@ -95,16 +139,35 @@
iconSize: [20, 20] 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() { function toggleView() {
if (currentView === "map") { if (currentView === "map") {
document.getElementById("ar-view").style.display = "block"; document.getElementById("ar-view").style.display = "block";
document.getElementById("map-view").style.display = "none"; document.getElementById("map-view").style.display = "none";
document.getElementById("player-map-icon").style.display = "none";
currentView = "ar"; currentView = "ar";
} else { } else {
document.getElementById("ar-view").style.display = "none"; document.getElementById("ar-view").style.display = "none";
document.getElementById("map-view").style.display = "block"; document.getElementById("map-view").style.display = "block";
document.getElementById("player-map-icon").style.display = "flex";
currentView = "map"; currentView = "map";
} }
} }
@ -140,15 +203,15 @@ AFRAME.registerComponent('camera-logger', {
} }
}); });
var debugText = "<p>Time: " + this.data.seconds + "</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>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"; //debugText += "<p>Distance to marker[0]: " + globalMap.distance(currentPosition, globalMarkers[0]._latlng).toFixed(1) + " meters</p>\n";
if (player && player.nickname) { //if (player && player.nickname) {
debugText = "<p><strong>You are " + player.nickname + "</strong></p>\n" + debugText; // 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(); return response.text();
}).then((playerJSON) => { }).then((playerJSON) => {
player = JSON.parse(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> </script>
@ -199,10 +272,12 @@ fetch("https://wander.reclaim.technology/webserver/api/me.php").then((response)
?> ?>
</a-scene> </a-scene>
</div> </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="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> </body>
<script language="javascript"> <script language="javascript">
// make sure we have camera perms // make sure we have camera perms