Hello, I am rather new to Wurm Unlimited, but I am an experienced software developer. While I like this web app, I found a few ways to improve it.
Change log:
I added 2 variables to keep track of the min and max zoom. I saw in your code that you were awkwardly checking for the min and max zoom. Just use these variables for that.
I added gotoCoordinate for 2 reasons: 1) I hope that it may be used in a HUD mini-map mod (though some things may need to change depending on implementation) 2) it is useful for debugging.
Now for the biggest addition... Player tracking. If you can pass up at least the x,y coordinates of each player on the server and have it call updatePlayers with JSON serialized data, then you have player tracking.
To make this work for real, you will need to add another canvas at the same html level as "<canvas id="map"></canvas>" in "index.html". Give the new canvas a higher z-index than the map canvas. Now you have an overlay! (This trick can also be used for other sorts of tracking such as boats by giving them their own canvas layer.)
I'll let you decide where the renderPlayers() call should go in your code.
I picked a fuchsia color because it stands out and isn't already being used from what I could tell.
I am passing up player names in my example, but it isn't used in the rendering. I put it there to lay the ground work for future features.
If you decide to use this feature, make sure to move permanentPlayerColor to config.js as my comment in the code says.
Here are my additions to map.js:
// playersContainer is the json container of all the players in the server
//{ "players" : [
// { "name":"Player1" , "x":500 , "y":500 }
//]}
// example: playersContainer.players[i].name
var playersContainer;
// Zoom values [0.125, 0.25, 0.5, 1, 2, 4, 8, 16]
var minZoom = 0.125;
var maxZoom = 16;
// Move the following line to config.js
var permanentPlayerColor = "rgba(255, 0, 255, 1)";
// (inX, inY) is where you want the view to go to
// zoomIn is a bool asking if you want to be fully zoomed in
function gotoCoordinate(inX, inY, zoomIn) {
list.setAttribute("style", "display: none;");
if (zoomIn == true)
zoom = maxZoom;
x = inX * zoom;
y = inY * zoom;
update();
}
// Takes player data as input then stores/updates it into memory
function updatePlayers(jsonData) {
playersContainer = JSON.parse(jsonData);
}
// Renders the current players as a 1x1 fuchsia color
function renderPlayers() {
var tempPlayers = playersContainer;
if (tempPlayers === undefined || tempPlayers.length == 0) {
console.log("tempPlayers is empty!");
return;
}
// playerCanvas would be a canvas overlayed on the map canvas (higher z-index than the map canvas)
// Clearing it before redrawing makes sure that the old player locations don't stay on the map.
//playerCanvasContext.clearRect(0, 0, playerCanvas.width, playerCanvas.height);
for(i = 0; i < tempPlayers.players.length; i++) {
ctx.fillStyle = permanentPlayerColor;
ctx.fillRect(tempPlayers.players[i].x, tempPlayers.players[i].y, 1, 1);
}
}
Here are the function calls to call the appropriate functions:
// Sample data to seed the list of players
// DELETE this for deployment
var examplePlayerJsonText = '{' +
'"players" : [' +
'{ "name":"Player1" , "x":500 , "y":500 },' +
'{ "name":"Player2" , "x":1000 , "y":1000 },' +
'{ "name":"Player3" , "x":1500 , "y":1500 }' +
']}';
// Function calls
updatePlayers(examplePlayerJsonText);
renderPlayers();
gotoCoordinate(500, 500, true);
My goal was to not change any of your existing functions. That way you can plug-and-play with these changes and decide which ones you want to keep.
FYI: the code tags on this forum seem to overly extend the indention of tabs.
