From 67114e1ea3dba31426eb21a8f1cab9dc8b56b354 Mon Sep 17 00:00:00 2001
From: Kenneth Watson <shrimpza@users.noreply.github.com>
Date: Tue, 13 Dec 2022 20:40:26 +0200
Subject: [PATCH] Add player look direction and movement indicator (#283)

---
 public/js/map/overlays/PlayerOverlay.js |  39 +++++++++++++++++++-----
 public/pics/sam_dir.png                 | Bin 0 -> 143 bytes
 public/pics/sam_dir_move.png            | Bin 0 -> 151 bytes
 web/minetest.go                         |   1 +
 4 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 public/pics/sam_dir.png
 create mode 100644 public/pics/sam_dir_move.png

diff --git a/public/js/map/overlays/PlayerOverlay.js b/public/js/map/overlays/PlayerOverlay.js
index 4136734..eaf9c00 100644
--- a/public/js/map/overlays/PlayerOverlay.js
+++ b/public/js/map/overlays/PlayerOverlay.js
@@ -27,7 +27,7 @@ export default L.LayerGroup.extend({
   },
 
   createPopup: function(player){
-    var html = "<b>" + player.name + "</b>";
+    let html = "<b>" + player.name + "</b>";
     html += "<hr>";
 
     for (let i=0; i<Math.floor(player.hp / 2); i++)
@@ -55,14 +55,36 @@ export default L.LayerGroup.extend({
   },
 
   createMarker: function(player){
-    var marker = L.marker([player.pos.z, player.pos.x], {icon: PlayerIcon});
+    const marker = L.marker([player.pos.z, player.pos.x], {icon: this.getIcon(player)});
 
     marker.bindPopup(this.createPopup(player));
     return marker;
   },
 
+  getIcon: function(player) {
+    /*
+      compatibility with mapserver_mod without `yaw` attribute - value will be 0.
+      if a player manages to look exactly north, the indicator will also disappear
+      but aligning view at 0.0 is difficult/unlikely during normal gameplay.
+    */
+    if (player.yaw === 0) return PlayerIcon;
+
+    const icon = 'pics/sam.png';
+    const indicator = player.velocity.x !== 0 || player.velocity.z !== 0 ? 'pics/sam_dir_move.png' : 'pics/sam_dir.png';
+    return L.divIcon({
+      html: `<div style="display:inline-block;width:48px;height:48px">
+          <img src="${icon}" style="position:absolute;top:8px;left:16px;width:16px;height:32px;" alt="${player.name}">
+          <img src="${indicator}" style="position:absolute;top:0;left:0;width:48px;height:48px;transform:rotate(${player.yaw*-1}rad)" alt="${player.name}">
+        </div>`,
+      className: '', // don't use leaflet default of a white block
+      iconSize:     [48, 48],
+      iconAnchor:   [24, 24],
+      popupAnchor:  [0, -24]
+    });
+  },
+
   isPlayerInCurrentLayer: function(player){
-    var mapLayer = layerMgr.getCurrentLayer();
+    const mapLayer = layerMgr.getCurrentLayer();
 
     return (
       player.pos.y >= (mapLayer.from*16) &&
@@ -73,7 +95,7 @@ export default L.LayerGroup.extend({
   onMinetestUpdate: function(/*info*/){
 
     players.forEach(player => {
-      var isInLayer = this.isPlayerInCurrentLayer(player);
+      const isInLayer = this.isPlayerInCurrentLayer(player);
 
       if (!isInLayer){
         if (this.currentObjects[player.name]){
@@ -88,13 +110,14 @@ export default L.LayerGroup.extend({
 
       if (this.currentObjects[player.name]){
         //marker exists
-        let marker = this.currentObjects[player.name];
+        const marker = this.currentObjects[player.name];
         marker.setLatLng([player.pos.z, player.pos.x]);
+        marker.setIcon(this.getIcon(player));
         marker.setPopupContent(this.createPopup(player));
 
       } else {
         //marker does not exist
-        let marker = this.createMarker(player);
+        const marker = this.createMarker(player);
         marker.addTo(this);
 
         this.currentObjects[player.name] = marker;
@@ -102,7 +125,7 @@ export default L.LayerGroup.extend({
     });
 
     Object.keys(this.currentObjects).forEach(existingName => {
-      var playerIsActive = players.find(function(p){
+      const playerIsActive = players.find(function(p){
         return p.name == existingName;
       });
 
@@ -124,7 +147,7 @@ export default L.LayerGroup.extend({
         return;
       }
 
-      var marker = this.createMarker(player);
+      const marker = this.createMarker(player);
       marker.addTo(this);
       this.currentObjects[player.name] = marker;
     });
diff --git a/public/pics/sam_dir.png b/public/pics/sam_dir.png
new file mode 100644
index 0000000000000000000000000000000000000000..877eae2106438e6815799c098e69b0e946a02286
GIT binary patch
literal 143
zcmeAS@N?(olHy`uVBq!ia0vp^1|TfJ1|-=hsU87RVV*9IAr-gYUR4x3puppD@XcR-
zS)WkVjw#nAo0&d_2e2}1SS;_=)Aru%NWhQpnH>v1Z0DO8eMsGNQ}uqWo3#(0Gta5p
g7SGEMGztM^qIPP<?_848&<_&xboFyt=akR{0QcQ3@&Et;

literal 0
HcmV?d00001

diff --git a/public/pics/sam_dir_move.png b/public/pics/sam_dir_move.png
new file mode 100644
index 0000000000000000000000000000000000000000..adc355e5567c41855db4a032c12b0629097e48e9
GIT binary patch
literal 151
zcmeAS@N?(olHy`uVBq!ia0vp^1|TfJ1|-=hsU87Rah@)YAr-gYUR4xoaNuD+@a%uT
z9$Tx8%gYVfezC4fL0e<)cb$B&ThvhG&*#u10Ux5fPfU9-S;g{i{M0#dKPnmXkAGWz
oP&%<^gWxtsw;LSHKqC>rI`)X~_R9Jt%`G4?Pgg&ebxsLQ06Rr9XaE2J

literal 0
HcmV?d00001

diff --git a/web/minetest.go b/web/minetest.go
index 5b9c556..32d91f8 100644
--- a/web/minetest.go
+++ b/web/minetest.go
@@ -50,6 +50,7 @@ type Player struct {
 	Moderator       bool       `json:"moderator"`
 	RTT             float64    `json:"rtt"`
 	ProtocolVersion float64    `json:"protocol_version"`
+	Yaw             float64    `json:"yaw"`
 	//TODO: stamina, skin, etc
 }