Changing map xy coords to xz. Other small refactors.

msuddaby · Apr 13, 2021 · 36bb13f · 36bb13f
1 parent c1b532c
commit 36bb13f
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 26 deletions.
diff --git a/WebMap/MapDataServer.cs b/WebMap/MapDataServer.cs
@@ -60,9 +60,9 @@ public MapDataServer() {
                     var zdoData = ZDOMan.instance.GetZDO(player.m_characterID);
                     var pos = zdoData.GetPosition();
                     if (player.m_publicRefPos) {
-                        dataString += $"{player.m_uid}\n{player.m_playerName}\n{pos.x}\n{pos.z}\n";
+                        dataString += $"{player.m_uid}\n{player.m_playerName}\n{pos.x},{pos.y},{pos.z}\n";
                     } else {
-                        dataString += $"{player.m_uid}\n{player.m_playerName}\nhidden\nhidden\n";
+                        dataString += $"{player.m_uid}\n{player.m_playerName}\nhidden\n";
                     }
                 });
                 if (dataString.Length > 0) {

diff --git a/WebMap/WebMap.cs b/WebMap/WebMap.cs
@@ -26,6 +26,8 @@ public class WebMap : BaseUnityPlugin {
         static MapDataServer mapDataServer;
         static string worldDataPath;
 
+        private bool fogTextureNeedsSaving = false;
+
         //The Awake() method is run at the very start when the game is initialized.
         public void Awake() {
             var harmony = new Harmony("com.kylepaulsen.valheim.webmap");
@@ -107,7 +109,11 @@ public void UpdateFogTexture() {
                                     var yDiff = pixelY - y;
                                     var currentExploreRadiusSquared = xDiff * xDiff + yDiff * yDiff;
                                     if (currentExploreRadiusSquared < pixelExploreRadiusSquared) {
-                                        mapDataServer.fogTexture.SetPixel(x, y, Color.white);
+                                        var fogTexColor = mapDataServer.fogTexture.GetPixel(x, y);
+                                        if (fogTexColor.r < 1f) {
+                                            fogTextureNeedsSaving = true;
+                                            mapDataServer.fogTexture.SetPixel(x, y, Color.white);
+                                        }
                                     }
                                 }
                             }
@@ -118,12 +124,13 @@ public void UpdateFogTexture() {
         }
 
         public void SaveFogTexture() {
-            if (mapDataServer.players.Count > 0) {
+            if (mapDataServer.players.Count > 0 && fogTextureNeedsSaving) {
                 byte[] pngBytes = mapDataServer.fogTexture.EncodeToPNG();
 
                 Debug.Log("Saving fog file...");
                 try {
                     File.WriteAllBytes(Path.Combine(worldDataPath, "fog.png"), pngBytes);
+                    fogTextureNeedsSaving = false;
                 } catch {
                     Debug.Log("FAILED TO WRITE FOG FILE!");
                 }

diff --git a/WebMap/web-src/index.js b/WebMap/web-src/index.js
@@ -31,6 +31,12 @@ const setup = async () => {
 		fogImage
 	});
 
+	map.addIcon({
+		type: 'start',
+		x: 0,
+		z: 0
+	});
+
 	const pings = {};
 	websocket.addActionListener('ping', (ping) => {
 		let mapIcon = pings[ping.playerId];
@@ -42,7 +48,7 @@ const setup = async () => {
 			pings[ping.playerId] = mapIcon;
 		}
 		mapIcon.x = ping.x;
-		mapIcon.y = ping.y;
+		mapIcon.z = ping.z;
 		map.updateIcons();
 
 		clearTimeout(mapIcon.timeoutId);

diff --git a/WebMap/web-src/map.js b/WebMap/web-src/map.js
@@ -38,6 +38,9 @@ const createIconEl = (iconObj) => {
 	const iconEl = document.createElement('div');
 	iconEl.id = iconObj.id;
 	iconEl.className = `mapIcon ${iconObj.type}`;
+	if (iconObj.zIndex) {
+		iconEl.style.zIndex = iconObj.zIndex;
+	}
 	const iconTextEl = document.createElement('div');
 	iconTextEl.textContent = iconObj.text;
 	iconEl.appendChild(iconTextEl);
@@ -56,7 +59,7 @@ const updateIcons = () => {
 		const adjustX = (iconElement.offsetWidth / 2);
 		const adjustY = (iconElement.offsetHeight / 2);
 		const imgX = iconObj.x / pixelSize + coordOffset;
-		const imgY = height - (iconObj.y / pixelSize + coordOffset);
+		const imgY = height - (iconObj.z / pixelSize + coordOffset);
 
 		iconElement.style.left = (imgX * canvasOffsetScale + canvas.offsetLeft) - adjustX + 'px';
 		iconElement.style.top = (imgY * canvasOffsetScale + canvas.offsetTop) - adjustY + 'px';
@@ -81,10 +84,10 @@ const removeIcon = (iconObj) => {
 	}
 };
 
-const explore = (mapX, mapY) => {
+const explore = (mapX, mapZ) => {
 	const radius = exploreRadius / pixelSize;
 	const x = mapX / pixelSize + coordOffset;
-	const y = height - (mapY / pixelSize + coordOffset);
+	const y = height - (mapZ / pixelSize + coordOffset);
 	fogCanvasCtx.beginPath();
 	fogCanvasCtx.arc(x, y, radius, 0, 2 * Math.PI, false);
 	fogCanvasCtx.fill();
@@ -102,7 +105,7 @@ const redrawMap = () => {
 
 const setZoom = function(zoomP) {
 	const minZoom = 50;
-	const maxZoom = 2000 * devicePixelRatio;
+	const maxZoom = 8000 * devicePixelRatio;
 	zoomP = Math.min(Math.max(Math.round(zoomP), minZoom), maxZoom);
 	currentZoom = zoomP;
 	canvas.style.width = `${zoomP}%`;

diff --git a/WebMap/web-src/players.js b/WebMap/web-src/players.js
@@ -8,14 +8,15 @@ const init = () => {
 		players.forEach((player) => {
 			let playerMapIcon = playerMapIcons[player.id];
 			if (!playerMapIcon) {
-				playerMapIcon = { ...player, type: 'player', text: player.name };
+				playerMapIcon = { ...player, type: 'player', text: player.name, zIndex: 5 };
 				map.addIcon(playerMapIcon);
 				playerMapIcons[player.id] = playerMapIcon;
 			}
 			playerMapIcon.lastUpdate = Date.now();
 			playerMapIcon.x = player.x;
-			playerMapIcon.y = player.y;
-			map.explore(player.x, player.y);
+			playerMapIcon.z = player.z;
+			map.updateIcons();
+			map.explore(player.x, player.z);
 		});
 	});
 
@@ -30,12 +31,6 @@ const init = () => {
 			}
 		});
 	}, 2000);
-
-	map.addIcon({
-		type: 'start',
-		x: 0,
-		y: 0
-	});
 };
 
 export default {

diff --git a/WebMap/web-src/websocket.js b/WebMap/web-src/websocket.js
@@ -1,4 +1,4 @@
-const actionListeners = { players: [], ping: [] };
+const actionListeners = {};
 
 const addActionListener = (type, func) => {
 	const listeners = actionListeners[type] || [];
@@ -20,10 +20,12 @@ const actions = {
 					newPlayer.name = line;
 					break;
 				case 2:
-					newPlayer.x = parseFloat(line);
-					break;
-				case 3:
-					newPlayer.y = parseFloat(line);
+					if (line !== 'hidden') {
+						const xyz = line.split(',').map(parseFloat);
+						newPlayer.x = xyz[0];
+						newPlayer.y = xyz[1];
+						newPlayer.z = xyz[2];
+					}
 					playerData.push(newPlayer);
 					newPlayer = {};
 					break;
@@ -34,19 +36,23 @@ const actions = {
 		});
 	},
 	ping: (lines) => {
-		const xy = lines[2].split(',');
+		const xz = lines[2].split(',');
 		const ping = {
 			playerId: lines[0],
 			name: lines[1],
-			x: parseFloat(xy[0]),
-			y: parseFloat(xy[1])
+			x: parseFloat(xz[0]),
+			z: parseFloat(xz[1])
 		};
 		actionListeners.ping.forEach(func => {
 			func(ping);
 		});
 	}
 };
 
+Object.keys(actions).forEach(key => {
+	actionListeners[key] = [];
+});
+
 const init = () => {
 	const ws = new WebSocket(`ws://${location.host}`);
 	ws.addEventListener('message', (e) => {