Shrink experience bar, add tooltip to rank icon, rework middle panel shading

This was SVN commit r11984.
This commit is contained in:
WhiteTreePaladin 2012-06-18 22:33:40 +00:00
parent a34232d71e
commit 033120e8d8
5 changed files with 273 additions and 266 deletions

Binary file not shown.

View File

@ -30,8 +30,12 @@ function displaySingle(entState, template)
playerName = "[OFFLINE] " + playerName;
}
// Rank
getGUIObjectByName("rankIcon").sprite = getRankIconSprite(entState);
// Rank
if (entState.identity && entState.identity.rank && entState.identity.classes)
{
getGUIObjectByName("rankIcon").sprite = getRankIconSprite(entState);
getGUIObjectByName("rankIcon").tooltip = entState.identity.rank;
}
// Hitpoints
if (entState.hitpoints)
@ -69,7 +73,7 @@ function displaySingle(entState, template)
experienceSize.rtop = 100 - (100 * Math.max(0, Math.min(1, 1.0 * +entState.promotion.curr / +entState.promotion.req)));
experienceBar.size = experienceSize;
var experience = "[font=\"serif-bold-13\"]Experience [/font]" + Math.floor(entState.promotion.curr);
var experience = "[font=\"serif-bold-13\"]Experience: [/font]" + Math.floor(entState.promotion.curr);
if (entState.promotion.curr < entState.promotion.req)
experience += "/" + entState.promotion.req;
getGUIObjectByName("experience").tooltip = experience;

View File

@ -617,7 +617,7 @@
<object size="50%-112 0 50%+112 100%" name="detailsAreaSingle">
<!-- Stats Bars -->
<object size= "2 0 100%-2 98" type="image" sprite="topPanelShader" tooltip_style="sessionToolTip">
<object size= "2 0 100%-2 98" type="image" tooltip_style="sessionToolTip">
<!-- Health bar -->
<object size="88 8 100% 32" name="healthSection">
@ -655,29 +655,31 @@
</object>
</object>
<!-- Attack and Armor -->
<object size="90 60 126 96" name="attackAndArmorStats" type="image" sprite="stretched:session/icons/stances/defensive.png" tooltip="Attack and Armor" tooltip_style="sessionToolTip"/>
<!-- Resource carrying icon/counter -->
<object size="100%-72 60 100%-26 96" type="text" name="resourceCarryingText" style="StatsTextRight"/>
<object size="100%-32 60 100%+4 96" type="image" name="resourceCarryingIcon"/>
</object>
<!-- Big unit icon -->
<object size="-6 -6 90 90" type="image" name="iconBorder" sprite="iconBorder" tooltip_style="sessionToolTip">
<object size="1 1 100%-1 100%-1" type="image" name="icon" ghost="true"/>
<!-- Experience bar -->
<object size="2 2 9 100%-2" type="image" name="experience" tooltip="Experience" tooltip_style="sessionToolTip">
<object type="image" sprite="barBorder" ghost="true" size="-1 -1 100%+1 100%+1"/>
<object type="image" sprite="experienceBackground" ghost="true"/>
<object type="image" sprite="experienceForeground" ghost="true" name="experienceBar"/>
<object type="image" sprite="statsBarShaderVertical" ghost="true"/>
<object size="0 60 100% 94" type="image" sprite="topPanelShader">
<!-- Attack and Armor -->
<object size="90 0 126 36" name="attackAndArmorStats" type="image" sprite="stretched:session/icons/stances/defensive.png" tooltip="Attack and Armor" tooltip_style="sessionToolTip"/>
<!-- Resource carrying icon/counter -->
<object size="100%-72 0 100%-26 36" type="text" name="resourceCarryingText" style="StatsTextRight"/>
<object size="100%-32 0 100%+4 36" type="image" name="resourceCarryingIcon"/>
</object>
<object z="20" size="4 4 20 20" name="rankIcon" type="image" sprite="" ghost="true"/>
<!-- Big unit icon -->
<object size="-8 -8 88 88" type="image" name="iconBorder" sprite="iconBorder" tooltip_style="sessionToolTip">
<object size="1 1 100%-1 100%-1" type="image" name="icon" ghost="true"/>
<!-- Experience bar -->
<object size="2 2 5 100%-2" type="image" name="experience" tooltip="Experience" tooltip_style="sessionToolTip">
<object type="image" sprite="barBorder" ghost="true" size="-1 -1 100%+1 100%+1"/>
<object type="image" sprite="experienceBackground" ghost="true"/>
<object type="image" sprite="experienceForeground" ghost="true" name="experienceBar"/>
<object type="image" sprite="statsBarShaderVertical" ghost="true"/>
</object>
<object z="20" size="4 4 20 20" name="rankIcon" type="image" tooltip="Rank" tooltip_style="sessionToolTip"/>
</object>
</object>
<!-- Names -->
<object size="2 92 100%-2 100%-36" name="statsArea" type="image">
@ -754,17 +756,17 @@
z="30"
>
<object z="20" size="4 0 100%-4 100%" ghost="true" type="image" sprite="bottomPanelShader"/>
<object z="20" size="4 0 100%-4 100%" ghost="true" type="image" sprite="bottomPanelShader"/>
<object size="0 0 100% 100%">
<repeat count="6">
<object name="unitCommandButton[n]" hidden="true" style="iconButton" type="button" size="0 0 32 32" tooltip_style="sessionToolTipBottomBold">
<object name="unitCommandIcon[n]" ghost="true" type="image" size="0 0 100% 100%" style="commandIcon"/>
<object name="unitCommandCount[n]" ghost="true" style="groupIconsText" type="text" size="0 0 100% 100%"/>
</object>
</repeat>
</object>
<object size="0 0 100% 100%">
<repeat count="6">
<object name="unitCommandButton[n]" hidden="true" style="iconButton" type="button" size="0 0 32 32" tooltip_style="sessionToolTipBottomBold">
<object name="unitCommandIcon[n]" ghost="true" type="image" size="0 0 100% 100%" style="commandIcon"/>
<object name="unitCommandCount[n]" ghost="true" style="groupIconsText" type="text" size="0 0 100% 100%"/>
</object>
</repeat>
</object>
</object>
</object> <!-- END OF SELECTION DETAILS -->

View File

@ -493,21 +493,25 @@
</sprite>
<sprite name="topPanelShader">
<image backcolor="0 0 0 72" size="0 5 100% 100%-5"/>
<image texture="session/panel_shader.png"
size="0 0 100% 100%"
/>
<image texture="session/panel_shader_edge.png"
real_texture_placement="0 0 256 5"
size="0 100%-5 100% 100%"
size="0 100% 100% 100%+5"
/>
</sprite>
<sprite name="bottomPanelShader">
<image texture="session/panel_shader_edge.png"
real_texture_placement="0 0 256 5"
size="0 0 100% 5"
size="0 -5 100% 0"
/>
<image backcolor="0 0 0 50" size="0 5 100% 100%"/>
<image texture="session/panel_shader.png"
size="0 0 100% 100%"
/>
</sprite>
<!-- <sprite name="playerColorShader">

View File

@ -4,11 +4,11 @@ const FAUNA = "fauna";
const SPECIAL = "special";
const COST_DISPLAY_NAMES = {
"food": "Food",
"wood": "Wood",
"stone": "Stone",
"metal": "Metal",
"population": "Population"
"food": "Food",
"wood": "Wood",
"stone": "Stone",
"metal": "Metal",
"population": "Population"
};
//-------------------------------- -------------------------------- --------------------------------
@ -35,193 +35,198 @@ function toTitleCase(word)
// Get the basic player data
function getPlayerData(playerAssignments)
{
var players = [];
var simState = Engine.GuiInterfaceCall("GetSimulationState");
if (!simState)
return players;
for (var i = 0; i < simState.players.length; i++)
{
var playerState = simState.players[i];
var name = playerState.name;
var civ = playerState.civ;
var color = {"r": playerState.colour.r*255, "g": playerState.colour.g*255, "b": playerState.colour.b*255, "a": playerState.colour.a*255};
var player = {
"name": name,
"civ": civ,
"color": color,
"team": playerState.team,
"state": playerState.state,
"guid": undefined, // network guid for players controlled by hosts
"disconnected": false // flag for host-controlled players who have left the game
};
players.push(player);
}
// Overwrite default player names with multiplayer names
if (playerAssignments)
{
for (var playerGuid in playerAssignments)
{
var playerAssignment = playerAssignments[playerGuid];
if (players[playerAssignment.player])
{
players[playerAssignment.player].guid = playerGuid;
players[playerAssignment.player].name = playerAssignment.name;
}
}
}
var players = [];
var simState = Engine.GuiInterfaceCall("GetSimulationState");
if (!simState)
return players;
for (var i = 0; i < simState.players.length; i++)
{
var playerState = simState.players[i];
var name = playerState.name;
var civ = playerState.civ;
var color = {
"r": playerState.colour.r*255,
"g": playerState.colour.g*255,
"b": playerState.colour.b*255,
"a": playerState.colour.a*255
};
var player = {
"name": name,
"civ": civ,
"color": color,
"team": playerState.team,
"state": playerState.state,
"guid": undefined, // network guid for players controlled by hosts
"disconnected": false // flag for host-controlled players who have left the game
};
players.push(player);
}
// Overwrite default player names with multiplayer names
if (playerAssignments)
{
for (var playerGuid in playerAssignments)
{
var playerAssignment = playerAssignments[playerGuid];
if (players[playerAssignment.player])
{
players[playerAssignment.player].guid = playerGuid;
players[playerAssignment.player].name = playerAssignment.name;
}
}
}
return players;
}
function findGuidForPlayerID(playerAssignments, player)
{
for (var playerGuid in playerAssignments)
{
var playerAssignment = playerAssignments[playerGuid];
if (playerAssignment.player == player)
return playerGuid;
}
return undefined;
for (var playerGuid in playerAssignments)
{
var playerAssignment = playerAssignments[playerGuid];
if (playerAssignment.player == player)
return playerGuid;
}
return undefined;
}
// Update player data when a host has connected
function updatePlayerDataAdd(players, hostGuid, playerAssignment)
{
if (players[playerAssignment.player])
{
players[playerAssignment.player].guid = hostGuid;
players[playerAssignment.player].name = playerAssignment.name;
players[playerAssignment.player].offline = false;
}
if (players[playerAssignment.player])
{
players[playerAssignment.player].guid = hostGuid;
players[playerAssignment.player].name = playerAssignment.name;
players[playerAssignment.player].offline = false;
}
}
// Update player data when a host has disconnected
function updatePlayerDataRemove(players, hostGuid)
{
for each (var player in players)
if (player.guid == hostGuid)
player.offline = true;
for each (var player in players)
if (player.guid == hostGuid)
player.offline = true;
}
function hasClass(entState, className)
{
if (entState.identity)
{
var classes = entState.identity.classes;
if (classes && classes.length)
return (classes.indexOf(className) != -1);
}
return false;
if (entState.identity)
{
var classes = entState.identity.classes;
if (classes && classes.length)
return (classes.indexOf(className) != -1);
}
return false;
}
// For the unit details panel
function damageValues(dmg)
{
if (dmg)
{
var dmgArray = [];
dmg.hack? dmgArray.push(dmg.hack) : dmgArray.push(0);
dmg.pierce? dmgArray.push(dmg.pierce) : dmgArray.push(0);
dmg.crush? dmgArray.push(dmg.crush) : dmgArray.push(0);
if (dmg)
{
var dmgArray = [];
dmg.hack? dmgArray.push(dmg.hack) : dmgArray.push(0);
dmg.pierce? dmgArray.push(dmg.pierce) : dmgArray.push(0);
dmg.crush? dmgArray.push(dmg.crush) : dmgArray.push(0);
return dmgArray;
}
else
{
return [0, 0, 0];
}
return dmgArray;
}
else
{
return [0, 0, 0];
}
}
// For the unit details panel
function damageTypeDetails(dmg)
{
if (dmg)
{
var dmgArray = [];
if (dmg.hack) dmgArray.push(dmg.hack + "[font=\"sans-10\"][color=\"orange\"] Hack[/color][/font]");
if (dmg.pierce) dmgArray.push(dmg.pierce + "[font=\"sans-10\"][color=\"orange\"] Pierce[/color][/font]");
if (dmg.crush) dmgArray.push(dmg.crush + "[font=\"sans-10\"][color=\"orange\"] Crush[/color][/font]");
if (dmg)
{
var dmgArray = [];
if (dmg.hack) dmgArray.push(dmg.hack + "[font=\"sans-10\"][color=\"orange\"] Hack[/color][/font]");
if (dmg.pierce) dmgArray.push(dmg.pierce + "[font=\"sans-10\"][color=\"orange\"] Pierce[/color][/font]");
if (dmg.crush) dmgArray.push(dmg.crush + "[font=\"sans-10\"][color=\"orange\"] Crush[/color][/font]");
return dmgArray.join(", ");
}
else
{
return "[font=\"serif-12\"](None)[/font]";
}
return dmgArray.join(", ");
}
else
{
return "[font=\"serif-12\"](None)[/font]";
}
}
// For the training tooltip
function damageTypesToText(dmg)
{
if (!dmg)
return "[font=\"serif-12\"](None)[/font]";
if (!dmg)
return "[font=\"serif-12\"](None)[/font]";
var hackLabel = "[font=\"serif-12\"] Hack[/font]";
var pierceLabel = "[font=\"serif-12\"] Pierce[/font]";
var crushLabel = "[font=\"serif-12\"] Crush[/font]";
var hackDamage = dmg.hack;
var pierceDamage = dmg.pierce;
var crushDamage = dmg.crush;
var hackLabel = "[font=\"serif-12\"] Hack[/font]";
var pierceLabel = "[font=\"serif-12\"] Pierce[/font]";
var crushLabel = "[font=\"serif-12\"] Crush[/font]";
var hackDamage = dmg.hack;
var pierceDamage = dmg.pierce;
var crushDamage = dmg.crush;
var dmgArray = [];
if (hackDamage) dmgArray.push(hackDamage + hackLabel);
if (pierceDamage) dmgArray.push(pierceDamage + pierceLabel);
if (crushDamage) dmgArray.push(crushDamage + crushLabel);
var dmgArray = [];
if (hackDamage) dmgArray.push(hackDamage + hackLabel);
if (pierceDamage) dmgArray.push(pierceDamage + pierceLabel);
if (crushDamage) dmgArray.push(crushDamage + crushLabel);
return dmgArray.join("[font=\"serif-12\"], [/font]");
return dmgArray.join("[font=\"serif-12\"], [/font]");
}
function getEntityCommandsList(entState)
{
var commands = [];
if (entState.garrisonHolder)
{
commands.push({
"name": "unload-all",
"tooltip": "Unload All",
"icon": "garrison-out.png"
});
}
var commands = [];
if (entState.garrisonHolder)
{
commands.push({
"name": "delete",
"tooltip": "Delete",
"icon": "kill_small.png"
"name": "unload-all",
"tooltip": "Unload All",
"icon": "garrison-out.png"
});
}
if (hasClass(entState, "Unit"))
{
commands.push({
"name": "garrison",
"tooltip": "Garrison",
"icon": "garrison.png"
});
}
commands.push({
"name": "delete",
"tooltip": "Delete",
"icon": "kill_small.png"
});
if (entState.buildEntities)
{
commands.push({
"name": "repair",
"tooltip": "Repair",
"icon": "repair.png"
});
}
if (hasClass(entState, "Unit"))
{
commands.push({
"name": "garrison",
"tooltip": "Garrison",
"icon": "garrison.png"
});
}
if (entState.rallyPoint)
{
commands.push({
"name": "focus-rally",
"tooltip": "Focus on Rally Point",
"icon": "focus-rally.png"
});
}
if (entState.buildEntities)
{
commands.push({
"name": "repair",
"tooltip": "Repair",
"icon": "repair.png"
});
}
return commands;
if (entState.rallyPoint)
{
commands.push({
"name": "focus-rally",
"tooltip": "Focus on Rally Point",
"icon": "focus-rally.png"
});
}
return commands;
}
/**
@ -230,7 +235,7 @@ function getEntityCommandsList(entState)
*/
function getCostComponentDisplayName(costComponentName)
{
return COST_DISPLAY_NAMES[costComponentName];
return COST_DISPLAY_NAMES[costComponentName];
}
/**
@ -238,13 +243,13 @@ function getCostComponentDisplayName(costComponentName)
*/
function getEntityCostComponentsTooltipString(template)
{
var costs = [];
if (template.cost.food) costs.push(template.cost.food + " [font=\"serif-12\"]" + getCostComponentDisplayName("food") + "[/font]");
if (template.cost.wood) costs.push(template.cost.wood + " [font=\"serif-12\"]" + getCostComponentDisplayName("wood") + "[/font]");
if (template.cost.metal) costs.push(template.cost.metal + " [font=\"serif-12\"]" + getCostComponentDisplayName("metal") + "[/font]");
if (template.cost.stone) costs.push(template.cost.stone + " [font=\"serif-12\"]" + getCostComponentDisplayName("stone") + "[/font]");
if (template.cost.population) costs.push(template.cost.population + " [font=\"serif-12\"]" + getCostComponentDisplayName("population") + "[/font]");
return costs;
var costs = [];
if (template.cost.food) costs.push(template.cost.food + " [font=\"serif-12\"]" + getCostComponentDisplayName("food") + "[/font]");
if (template.cost.wood) costs.push(template.cost.wood + " [font=\"serif-12\"]" + getCostComponentDisplayName("wood") + "[/font]");
if (template.cost.metal) costs.push(template.cost.metal + " [font=\"serif-12\"]" + getCostComponentDisplayName("metal") + "[/font]");
if (template.cost.stone) costs.push(template.cost.stone + " [font=\"serif-12\"]" + getCostComponentDisplayName("stone") + "[/font]");
if (template.cost.population) costs.push(template.cost.population + " [font=\"serif-12\"]" + getCostComponentDisplayName("population") + "[/font]");
return costs;
}
/**
@ -252,37 +257,37 @@ function getEntityCostComponentsTooltipString(template)
*/
function getEntityCostTooltip(template)
{
var cost = "[font=\"serif-bold-13\"]Costs:[/font] ";
var cost = "[font=\"serif-bold-13\"]Costs:[/font] ";
// Entities with a wallset component are proxies for initiating wall placement and as such do not have a cost of
// their own; the individual wall pieces within it do.
if (template.wallSet)
{
var templateLong = GetTemplateData(template.wallSet.templates.long);
var templateMedium = GetTemplateData(template.wallSet.templates.medium);
var templateShort = GetTemplateData(template.wallSet.templates.short);
var templateTower = GetTemplateData(template.wallSet.templates.tower);
// Entities with a wallset component are proxies for initiating wall placement and as such do not have a cost of
// their own; the individual wall pieces within it do.
if (template.wallSet)
{
var templateLong = GetTemplateData(template.wallSet.templates.long);
var templateMedium = GetTemplateData(template.wallSet.templates.medium);
var templateShort = GetTemplateData(template.wallSet.templates.short);
var templateTower = GetTemplateData(template.wallSet.templates.tower);
// TODO: the costs of the wall segments should be the same, and for now we will assume they are (ideally we
// should take the average here or something).
var wallCosts = getEntityCostComponentsTooltipString(templateLong);
var towerCosts = getEntityCostComponentsTooltipString(templateTower);
// TODO: the costs of the wall segments should be the same, and for now we will assume they are (ideally we
// should take the average here or something).
var wallCosts = getEntityCostComponentsTooltipString(templateLong);
var towerCosts = getEntityCostComponentsTooltipString(templateTower);
cost += "\n";
cost += " Walls: " + wallCosts.join(", ") + "\n";
cost += " Towers: " + towerCosts.join(", ");
}
else if (template.cost)
{
var costs = getEntityCostComponentsTooltipString(template);
cost += costs.join(", ");
}
else
{
cost = ""; // cleaner than duplicating the serif-bold-13 stuff
}
cost += "\n";
cost += " Walls: " + wallCosts.join(", ") + "\n";
cost += " Towers: " + towerCosts.join(", ");
}
else if (template.cost)
{
var costs = getEntityCostComponentsTooltipString(template);
cost += costs.join(", ");
}
else
{
cost = ""; // cleaner than duplicating the serif-bold-13 stuff
}
return cost;
return cost;
}
/**
@ -290,85 +295,74 @@ function getEntityCostTooltip(template)
*/
function getPopulationBonusTooltip(template)
{
var popBonus = "";
if (template.cost && template.cost.populationBonus)
popBonus = "\n[font=\"serif-bold-13\"]Population Bonus:[/font] " + template.cost.populationBonus;
return popBonus;
var popBonus = "";
if (template.cost && template.cost.populationBonus)
popBonus = "\n[font=\"serif-bold-13\"]Population Bonus:[/font] " + template.cost.populationBonus;
return popBonus;
}
function getEntitySpeed(template)
{
var speed = "";
if (template.speed)
{
speed += "[font=\"serif-bold-13\"]Speed:[/font] ";
var speeds = [];
if (template.speed.walk) speeds.push(template.speed.walk + " [font=\"serif-12\"]Walk[/font]");
if (template.speed.run) speeds.push(template.speed.run + " [font=\"serif-12\"]Run[/font]");
var speed = "";
if (template.speed)
{
speed += "[font=\"serif-bold-13\"]Speed:[/font] ";
var speeds = [];
if (template.speed.walk) speeds.push(template.speed.walk + " [font=\"serif-12\"]Walk[/font]");
if (template.speed.run) speeds.push(template.speed.run + " [font=\"serif-12\"]Run[/font]");
speed += speeds.join(", ");
}
return speed;
speed += speeds.join(", ");
}
return speed;
}
function getEntityAttack(template)
{
var attacks = [];
if (template.attack)
var attacks = [];
if (template.attack)
{
for (var type in template.attack)
{
for (var type in template.attack)
{
attacks.push("[font=\"serif-bold-13\"]" + type + " Attack:[/font] " + damageTypesToText(template.attack[type]));
}
attacks.push("[font=\"serif-bold-13\"]" + type + " Attack:[/font] " + damageTypesToText(template.attack[type]));
}
return attacks.join("\n");
}
return attacks.join("\n");
}
function getEntityName(template)
{
return template.name.specific || template.name.generic || "???";
return template.name.specific || template.name.generic || "???";
}
function getEntityNameWithGenericType(template)
{
var name;
if ((template.name.specific && template.name.generic) && (template.name.specific != template.name.generic))
name = template.name.specific + " (" + template.name.generic + ")";
else
name = template.name.specific || template.name.generic || "???";
var name;
if ((template.name.specific && template.name.generic) && (template.name.specific != template.name.generic))
name = template.name.specific + " (" + template.name.generic + ")";
else
name = template.name.specific || template.name.generic || "???";
return "[font=\"serif-bold-16\"]" + name + "[/font]";
return "[font=\"serif-bold-16\"]" + name + "[/font]";
}
function getEntityRankedName(entState)
{
var template = GetTemplateData(entState.template)
var rank = entState.identity.rank;
if (rank)
return rank + " " + template.name.specific;
else
return template.name.specific;
var template = GetTemplateData(entState.template)
var rank = entState.identity.rank;
if (rank)
return rank + " " + template.name.specific;
else
return template.name.specific;
}
function getRankIconSprite(entState)
{
if (entState.identity && entState.identity.rank && entState.identity.classes)
{
if ("Elite" == entState.identity.rank)
{
return "stretched:session/icons/rank3.png";
}
else if ("Advanced" == entState.identity.rank)
{
return "stretched:session/icons/rank2.png";
}
else if (entState.identity.classes &&
entState.identity.classes.length &&
-1 != entState.identity.classes.indexOf("CitizenSoldier"))
{
return "stretched:session/icons/rank1.png";
}
}
if ("Elite" == entState.identity.rank)
return "stretched:session/icons/rank3.png";
else if ("Advanced" == entState.identity.rank)
return "stretched:session/icons/rank2.png";
else if (entState.identity.classes && entState.identity.classes.length && -1 != entState.identity.classes.indexOf("CitizenSoldier"))
return "stretched:session/icons/rank1.png";
return "";
return "";
}