kompass

index.html

@@ -16,6 +16,10 @@
     <div id="map"></div>
   </div>
   <div id="bottomHud" style="position: fixed; bottom: 5px; left: 0px; left: 5px;  z-index: 1000;">
+    <div style="position: absolute; top: 0px; left: 95px; background: #ffffff87; width: 140px; height: 140px; border-radius: 100px;">
+      <img style="width: 140px; position: absolute;" src="/img/kompassRing.png">
+      <img id="kompoassnadel" style="width: 140px; position: absolute;" src="/img/kompassPfeilGold.png">
+    </div>
     <table style="margin-bottom: 5px; padding: 5px; border-radius: 5px; border: 3px solid #0000002e; background: rgb(26 26 26 / 49%); border-bottom-right-radius: 0px;">
       <tr>
         <td style="width:50px; height: 50px; background: #00000052;" class="playerSlot" id="slot_head"></td>

js/main.js

@@ -178,10 +178,25 @@ var oldmapY = null;
 var picStep = 0;
 var cnt = 0;
 let g_allPlayers = {};
+let schatzCoords = {};
+
+socket.on('setSchatzCoords', function (setSchatzCoordsNew) {
+	schatzCoords = setSchatzCoordsNew["schatzcoords"];
+});
 socket.on('setpos', function (allPlayers) {
 	window.requestAnimationFrame(function () {
 		g_allPlayers = allPlayers;
 		for (var id in allPlayers) {
+			if(id == socket.id) {
+				let x = schatzCoords["x"]*32-allPlayers[id]["x"]+16;
+				let y = schatzCoords["y"]*32-allPlayers[id]["y"]+16;
+				console.log(schatzCoords["x"]*32, schatzCoords["y"]*32)
+				console.log(allPlayers[id]["x"], allPlayers[id]["y"])
+
+				let angle = calcAngleDegrees(x, y);
+				$("#kompoassnadel").css("transform", "rotate(" + (angle+90) + "deg)");
+				//console.log("angle", angle)
+			}
 			var player = allPlayers[id];
 			var playerElement = $("#" + id);
 			var playerImg = playerElement.find("img");
@@ -411,3 +426,7 @@ $(document).ready(function () {
 
 
 });
+
+function calcAngleDegrees(x, y) {
+	return (Math.atan2(y, x) * 180) / Math.PI;
+  }

server.js

@@ -24,7 +24,7 @@ let schatzcoords = { x: 0, y: 0 };
 while (!schatzversteckt) {
 	for (var line = 0; line < newmap.map.length; line++) {
 		for (var column = 0; column < newmap.map[line].length; column++) {
-			if (newmap.map[line][column] == 4 || newmap.map[line][column] == 10) {
+			if (newmap.map[line][column] == 4 || newmap.map[line][column] == 10) { //TODO schatz nicht im Wasser Spawnen!
 				if (Math.random() < 0.1 && !schatzversteckt) {
 					//console.log("versteckt", line, column)
 					schatzcoords = { x: line, y: column };
@@ -239,6 +239,10 @@ io.on('connection', function (socket) {
 		id: socket.id
 	});
 	
+	io.sockets.emit("setSchatzCoords", {
+		schatzcoords: schatzcoords,
+	});
+
 	socket.on('disconnect', function () {
 		for (var i in player.slots) {
 			if (player.slots[i]) {