Work player marker layout - center icon on player location

This commit is contained in:
Mike Primm 2011-12-03 04:11:40 +08:00 committed by mikeprimm
parent 5775c3bcfe
commit 2c13519e37
2 changed files with 50 additions and 16 deletions

View file

@ -541,10 +541,24 @@
* players on the map * players on the map
*/ */
.dynmap .playerIcon {
margin-top: -16px;
margin-left: -16px;
width: 32px;
height: 32px;
}
.dynmap .playerIconSm {
margin-top: -8px;
margin-left: -8px;
width: 16px;
height: 16px;
}
.dynmap .playerName { .dynmap .playerName {
position: absolute; position: absolute;
top: 0px; top: -16px;
left: 34px; left: 18px;
z-index:20; z-index:20;
white-space: nowrap; white-space: nowrap;
@ -559,8 +573,8 @@
.dynmap .playerNameSm { .dynmap .playerNameSm {
position: absolute; position: absolute;
top: -1px; top: -16px;
left: 18px; left: 10px;
white-space: nowrap; white-space: nowrap;
@ -572,11 +586,30 @@
border-radius: 3px; border-radius: 3px;
} }
.dynmap .playerNameNoHealth {
top: -7px;
}
.dynmap .healthContainer { .dynmap .healthContainer {
display: block; display: block;
position: absolute; position: absolute;
bottom: 0; top: -2px;
left: 34px; left: 18px;
width: 50px;
background: rgba(0,0,0,0.6);
padding: 2px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.dynmap .healthContainerSm {
display: block;
position: absolute;
top: -2px;
left: 10px;
width: 50px; width: 50px;

View file

@ -13,21 +13,22 @@ componentconstructors['playermarkers'] = function(dynmap, configuration) {
// Only show player faces if canvas supported // Only show player faces if canvas supported
if(dynmap.canvassupport == false) if(dynmap.canvassupport == false)
configuration.showplayerfaces = false; configuration.showplayerfaces = false;
var nm;
$(div) $(div)
.addClass('Marker') .addClass('Marker')
.addClass('playerMarker') .addClass('playerMarker')
.append(playerImage = $('<img/>') .append(playerImage = $('<img/>').addClass(configuration.smallplayerfaces?'playerIconSm':'playerIcon')
.attr({ src: 'images/player.png' })) .attr({ src: 'images/player.png' }))
.append($('<span/>') .append(nm = $('<span/>')
.addClass(configuration.smallplayerfaces?'playerNameSm':'playerName') .addClass(configuration.smallplayerfaces?'playerNameSm':'playerName')
.text(player.name)); .text(player.name));
if (configuration.showplayerfaces) { if (configuration.showplayerfaces) {
if(configuration.smallplayerfaces) { if(configuration.smallplayerfaces) {
getMinecraftHead(player.account, 16, function(head) { getMinecraftHead(player.account, 16, function(head) {
$(head) $(head)
.addClass('playericon') .addClass('playerIconSm')
.prependTo(div); .prependTo(div);
playerImage.remove(); playerImage.remove();
}); });
@ -35,18 +36,15 @@ componentconstructors['playermarkers'] = function(dynmap, configuration) {
else { else {
getMinecraftHead(player.account, 32, function(head) { getMinecraftHead(player.account, 32, function(head) {
$(head) $(head)
.addClass('playericon') .addClass('playerIcon')
.prependTo(div); .prependTo(div);
playerImage.remove(); playerImage.remove();
}); });
} }
} }
if (configuration.showplayerhealth) { if (configuration.showplayerhealth) {
if(!configuration.showplayerfaces) /* Need 32 high */
playerImage.css('margin-bottom','16px');
player.healthContainer = $('<div/>') player.healthContainer = $('<div/>')
.addClass('healthContainer') .addClass(configuration.smallplayerfaces?'healthContainerSm':'healthContainer')
.appendTo(div); .appendTo(div);
if (player.health !== undefined && player.armor !== undefined) { if (player.health !== undefined && player.armor !== undefined) {
player.healthBar = $('<div/>') player.healthBar = $('<div/>')
@ -68,6 +66,9 @@ componentconstructors['playermarkers'] = function(dynmap, configuration) {
player.healthContainer.css('display','none'); player.healthContainer.css('display','none');
} }
} }
else {
nm.addClass('playerNameNoHealth');
}
return div; return div;
}}); }});