Player per world support @ client.

web/custommarker.js

@@ -1,4 +1,4 @@
-function CustomMarker(latlng,  map, oncreated, args) {
+function CustomMarker(latlng,  map, oncreated) {
 	google.maps.OverlayView.call(this);
 	
 	this.latlng_ = latlng;
@@ -8,7 +8,6 @@ function CustomMarker(latlng,  map, oncreated, args) {
 	this.setMap(map);
 	
 	this.oncreated = oncreated;
-	this.oncreatedargs = args;
 }
 
 CustomMarker.prototype = new google.maps.OverlayView();
@@ -29,7 +28,7 @@ CustomMarker.prototype.draw = function() {
 			google.maps.event.trigger(me, "click");
 		});
 
-		this.oncreated(div, this.oncreatedargs);
+		this.oncreated(div);
 		
 		// Then add the overlay to the DOM
 		var panes = this.getPanes();

web/dynmap_style.css

@@ -377,6 +377,10 @@ body {
     border: 3px solid transparent;
 }
 
+.dynmap .playerlist .player.otherworld {
+	opacity: 0.5;
+}
+
 .dynmap .playerlist .player:hover {
     background: rgba(64,64,64,0.6);
 }

web/map.js

@@ -31,6 +31,13 @@ DynMapType.prototype = {
 	updateTileSize: function(zoom) {}
 };
 
+function Location(world, x, y, z) {
+	this.world = world;
+	this.x = x;
+	this.y = y;
+	this.z = z;
+}
+
 function DynMap(options) {
 	var me = this;
 	me.options = options;
@@ -42,7 +49,7 @@ function DynMap(options) {
 DynMap.prototype = {
 	worlds: {},
 	registeredTiles: new Array(),
-	markers: new Array(),
+	players: {},
 	chatPopups: new Array(),
 	lasttimestamp: '0',
 	followingPlayer: '',
@@ -231,7 +238,7 @@ DynMap.prototype = {
 		
 		setTimeout(function() { me.update(); }, me.options.updaterate);
 	},
-	selectMap: function(map) {
+	selectMap: function(map, completed) {
 		if (!map) { throw "Cannot select map " + map; }
 		var me = this;
 		me.map.setMapTypeId('none');
@@ -240,10 +247,27 @@ DynMap.prototype = {
 		me.maptype.updateTileSize(me.map.zoom);
 		window.setTimeout(function() {
 			me.map.setMapTypeId(map.world.name + '.' + map.name);
+			if (completed) { completed(); }
 		}, 1);
 		$('.map', me.worldlist).removeClass('selected');
 		$(map.element).addClass('selected');
 	},
+	selectWorld: function(world, completed) {
+		var me = this;
+		if (typeof(world) == 'String') { world = me.worlds[world]; }
+		if (me.world == world) {
+			if (completed) { completed(); }
+			return;
+		}
+		me.selectMap(world.defaultmap, completed);
+	},
+	panTo: function(location, completed) {
+		var me = this;
+		me.selectWorld(location.world, function() {
+			var position = me.map.getProjection().fromWorldToLatLng(location.x, location.y, location.z);
+			me.map.panTo(position);
+		});
+	},
 	update: function() {
 		var me = this;
 		
@@ -257,21 +281,23 @@ DynMap.prototype = {
 				me.clock.setTime(update.servertime);
 				me.clockdigital.setTime(update.servertime);
 
-				var typeVisibleMap = {};
+				var newplayers = {};
-				var newmarkers = {};
+				$.each(update.players, function(index, playerUpdate) {
-				
+					var name = playerUpdate.name;
-				$.each(update.players, function(index, player) {
+					var player = me.players[name];
-					var mi = {
+					if (player) {
-						id: 'player_' + player.name,
+						me.updatePlayer(player, playerUpdate);
-						text: player.name,
+					} else {
-						type: 'player',
+						me.addPlayer(playerUpdate);
-						position: me.map.getProjection().fromWorldToLatLng(parseFloat(player.x), parseFloat(player.y), parseFloat(player.z)),
+					}
-						visible: true
+					newplayers[name] = player;
-					};
-
-					me.updateMarker(mi);
-					newmarkers[mi.id] = mi;
 				});
+				for(var name in me.players) {
+					var player = me.players[name];
+					if(!(name in newplayers)) {
+						me.removePlayer(player);
+					}
+				}
 				
 				$.each(update.updates, function(index, update) {
 					swtch(update.type, {
@@ -297,16 +323,6 @@ DynMap.prototype = {
 					//divs.filter(function(i){return parseInt(divs[i].attr('rel')) > timestamp+me.options.messagettl;}).remove();
 				});
 				
-				for(var m in me.markers) {
-					var marker = me.markers[m];
-					if(!(m in newmarkers)) {
-						marker.remove(null);
-						if (marker.playerItem) {
-							marker.playerItem.remove();
-						}
-						delete me.markers[m];
-					}
-				}
 				setTimeout(function() { me.update(); }, me.options.updaterate);
 			}, function(request, statusText, ex) {
 				me.alertbox
@@ -353,11 +369,10 @@ DynMap.prototype = {
 	},
 	onPlayerChat: function(playerName, message) {
 		var me = this;
-		var markers = me.markers;
 		var chatPopups = this.chatPopups;
 		var map = me.map;
-		var mid = "player_" + playerName;
+		var player = me.players[playerName];
-		var playerMarker = markers[mid];
+		var playerMarker = player && player.marker;
 		if (me.options.showchat == 'balloons') {
 			if (playerMarker)
 			{
@@ -449,95 +464,103 @@ DynMap.prototype = {
 			tile.mapType.onTileUpdated(tile.tileElement, tileName);
 		}
 	},
-	updateMarker: function(mi) {
+	addPlayer: function(update) {
 		var me = this;
-		var markers = me.markers;
+		var player = me.players[update.name] = {
-		var map = me.map;
+				name: update.name,
+				location: new Location(me.worlds[update.world], parseFloat(update.x), parseFloat(update.y), parseFloat(update.z))
+		};
 		
-		if(mi.id in markers) {
+		// Create the player-marker.
-			var m = markers[mi.id];
+		markerPosition = me.map.getProjection().fromWorldToLatLng(location.x, location.y, location.z);
-			m.toggle(mi.visible);
+		player.marker = new CustomMarker(markerPosition, me.map, function(div) {
-			m.setPosition(mi.position);
+			var playerImage;
-		} else {
+			$(div)
-			var contentfun = function(div,mi) {
+				.addClass('Marker')
-				$(div)
+				.addClass('playerMarker')
-					.addClass('Marker')
+				.append(playerImage = $('<img/>')
-					.addClass(mi.type + 'Marker')
+						.attr({ src: 'player.png' }))
-					.append($('<img/>').attr({src: mi.type + '.png'}))
+				.append($('<span/>')
-					.append($('<span/>').text(mi.text));
+					.addClass('playerName')
-			};
+					.text(player.name));
-			if (mi.type == 'player') {
+			
-				contentfun = function(div, mi) {
+			if (me.options.showplayerfacesonmap) {
-					var playerImage;
+				getMinecraftHead(player.name, 32, function(head) {
-					$(div)
+					$(head)
-						.addClass('Marker')
+						.addClass('playericon')
-						.addClass('playerMarker')
+						.prependTo(div);
-						.append(playerImage = $('<img/>')
+					playerImage.remove();
-								.attr({ src: 'player.png' }))
+				});
-						.append($('<span/>')
-							.addClass('playerName')
-							.text(mi.text))
-					if (me.options.showplayerfacesonmap) {
-						getMinecraftHead(mi.text, 32, function(head) {
-							$(head)
-								.addClass('playericon')
-								.prependTo(div);
-							playerImage.remove();
-						});
-					}
-				};
 			}
-			var marker = new CustomMarker(mi.position, map, contentfun, mi);
+		});
-			marker.markerType = mi.type;
 		
-			markers[mi.id] = marker;
+		// Create the player-menu-item.
-
+		var playerIconContainer;
-			if (mi.type == 'player') {
+		var menuitem = player.menuitem = $('<li/>')
-				marker.playerItem = $('<li/>')
+			.addClass('player')
-					.addClass('player')
+			.append(playerIconContainer = $('<span/>')
-					.append(marker.playerIconContainer = $('<span/>')
+					.addClass('playerIcon')
-							.addClass('playerIcon')
+					.append($('<img/>').attr({ src: 'player_face.png' }))
-							.append($('<img/>').attr({ src: 'player_face.png' }))
+					.attr({ title: 'Follow ' + player.name })
-							.attr({ title: 'Follow ' + mi.text })
+					.click(function() {
-							.click(function() {
+						var follow = player != me.followingPlayer;
-								var follow = mi.id != me.followingPlayer;
+						me.followPlayer(follow ? player : null)
-								me.followPlayer(follow ? mi.id : '')
+					})
-							}))
+					)
-					.append($('<a/>')
+			.append($('<a/>')
-							.attr({
+					.attr({
-								href: '#',
+						href: '#',
-								title: 'Center on ' + mi.text
+						title: 'Center on ' + player.name
-								})
+						})
-							.text(mi.text)
+					.text(player.name)
-							)
+					)
-					.click(function(e) { map.panTo(markers[mi.id].getPosition()); })
+			.click(function(e) { me.panTo(player.location); })
-					.appendTo(me.playerlist);
+			.appendTo(me.playerlist);
-
+		if (me.options.showplayerfacesinmenu) {
-				if (me.options.showplayerfacesinmenu) {
+			getMinecraftHead(player.name, 16, function(head) {
-					getMinecraftHead(mi.text, 16, function(head) {
+				$('img', playerIconContainer).remove();
-						$('img', marker.playerIconContainer).remove();
+				$(head).appendTo(playerIconContainer);
-						marker.playerItem.icon = $(head)
+			});
-							.appendTo(marker.playerIconContainer);
-					});
-				}
-			}
-		}
-		
-		if(mi.id == me.followingPlayer) {
-			map.panTo(markers[mi.id].getPosition());
 		}
 	},
-	followPlayer: function(name) {
+	updatePlayer: function(player, update) {
+		var me = this;
+		var location = player.location = new Location(me.worlds[update.world], parseFloat(update.x), parseFloat(update.y), parseFloat(update.z));
+		
+		// Update the marker.
+		markerPosition = me.map.getProjection().fromWorldToLatLng(location.x, location.y, location.z);
+		player.marker.toggle(me.world == location.world);
+		player.marker.setPosition(markerPosition);
+		
+		// Update menuitem.
+		player.menuitem.toggleClass('otherworld', me.world != location.world);
+		
+		if (player == me.followingPlayer) {
+			// Follow the updated player.
+			me.panTo(player.location);
+		}
+	},
+	removePlayer: function(player) {
+		var me = this;
+		
+		delete me.players[player.name];
+		
+		// Remove the marker.
+		player.marker.remove();
+		
+		// Remove menu item.
+		player.menuitem.remove();
+	},
+	followPlayer: function(player) {
 		var me = this;
 		$('.following', me.playerlist).removeClass('following');
 		
-		var m = me.markers[name];
+		if(player) {
-		if(m) {
+			$(player.menuitem).addClass('following');
-			$(m.playerItem).addClass('following');
+			me.panTo(player.location);
-			me.map.panTo(m.getPosition());
 		}
-		this.followingPlayer = name;
+		this.followingPlayer = player;
-	},
+	}
 	// TODO: Enable hash-links.
 /*	updateLink: function() {
 		var me = this;