From d271ca89cfadbcde60cd7fd722e7e8dffab9a33f Mon Sep 17 00:00:00 2001
From: WhiteTreePaladin <brian@wildfiregames.com>
Date: Tue, 5 Jun 2012 00:36:35 +0000
Subject: [PATCH] Update GUI style for single object selections (based on
 quantumstate's mockup)

This was SVN commit r11937.
---
 .../public/gui/session/selection_details.js   |  47 ++++---
 .../data/mods/public/gui/session/session.xml  | 131 ++++++++++--------
 .../data/mods/public/gui/session/styles.xml   |  24 +++-
 .../public/gui/session/utility_functions.js   |  21 +++
 4 files changed, 142 insertions(+), 81 deletions(-)

diff --git a/binaries/data/mods/public/gui/session/selection_details.js b/binaries/data/mods/public/gui/session/selection_details.js
index 813f79bc41..1433ea8676 100644
--- a/binaries/data/mods/public/gui/session/selection_details.js
+++ b/binaries/data/mods/public/gui/session/selection_details.js
@@ -33,17 +33,15 @@ function displaySingle(entState, template)
 	getGUIObjectByName("rankIcon").sprite = getRankIconSprite(entState);					
 								
 	// Hitpoints
-	var hitpoints = "";
-
 	if (entState.hitpoints)
 	{
 		var unitHealthBar = getGUIObjectByName("healthBar");
 		var healthSize = unitHealthBar.size;
-		healthSize.rtop = 100-100*Math.max(0, Math.min(1, entState.hitpoints / entState.maxHitpoints));
+		healthSize.rright = 100*Math.max(0, Math.min(1, entState.hitpoints / entState.maxHitpoints));
 		unitHealthBar.size = healthSize;
 
-		hitpoints = "[font=\"serif-bold-13\"]Health [/font]" + entState.hitpoints + "/" + entState.maxHitpoints;
-		getGUIObjectByName("health").tooltip = hitpoints;
+		var hitpoints = entState.hitpoints + " / " + entState.maxHitpoints;
+		getGUIObjectByName("healthText").caption = hitpoints;
 		getGUIObjectByName("health").hidden = false;
 	}
 	else
@@ -72,7 +70,7 @@ function displaySingle(entState, template)
 	{
 		var experienceBar = getGUIObjectByName("experienceBar");
 		var experienceSize = experienceBar.size;
-		experienceSize.rtop = 100 - 100 * Math.max(0, Math.min(1, 1.0 * entState.promotion.curr / entState.promotion.req));
+		experienceSize.rright = 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);
@@ -87,24 +85,23 @@ function displaySingle(entState, template)
 	}
 
 	// Resource stats
-	var resources = "";
-	var resourceType = "";
-
 	if (entState.resourceSupply)
 	{
-		resources = Math.ceil(+entState.resourceSupply.amount) + "/" + entState.resourceSupply.max;
-		resourceType = entState.resourceSupply.type["generic"];
+		var resources = Math.ceil(+entState.resourceSupply.amount) + " / " + entState.resourceSupply.max;
+		var resourceType = entState.resourceSupply.type["generic"];
 		if (resourceType == "treasure")
 			resourceType = entState.resourceSupply.type["specific"];
 
 		var unitResourceBar = getGUIObjectByName("resourceBar");
 		var resourceSize = unitResourceBar.size;
 
-		resourceSize.rtop = 100-100*Math.max(0, Math.min(1, +entState.resourceSupply.amount / entState.resourceSupply.max));
+		resourceSize.rright = 100 * Math.max(0, Math.min(1, +entState.resourceSupply.amount / +entState.resourceSupply.max));
 		unitResourceBar.size = resourceSize;
 
 		var unitResources = getGUIObjectByName("resources");
-		unitResources.tooltip = "[font=\"serif-bold-13\"]Resources: [/font]" + resources + " " + resourceType;
+		unitResources.tooltip = resourceType;
+
+		getGUIObjectByName("resourceText").caption = resources;
 
 		if (!entState.hitpoints)
 			unitResources.size = getGUIObjectByName("health").size;
@@ -143,10 +140,15 @@ function displaySingle(entState, template)
 		getGUIObjectByName("resourceCarryingText").hidden = true;
 	}
 
-	// Set Captions
+	// Set Player details
 	getGUIObjectByName("specific").caption = specificName;
+	getGUIObjectByName("specific").tooltip = genericName;
 	getGUIObjectByName("player").caption = playerName;
 	getGUIObjectByName("player").textcolor = playerColor;
+	getGUIObjectByName("player").tooltip = civName;
+
+	// TODO: Set this to the current player, not the selected unit's player
+	//getGUIObjectByName("civIcon").tooltip = civName;
 
 	// Icon image
 	if (template.icon)
@@ -159,12 +161,17 @@ function displaySingle(entState, template)
 		getGUIObjectByName("icon").sprite = "bkFillBlack";
 	}
 
-	// Tooltips
-	getGUIObjectByName("specific").tooltip = genericName;
-	getGUIObjectByName("player").tooltip = civName;
-	getGUIObjectByName("health").tooltip = hitpoints;
-	getGUIObjectByName("armourIcon").tooltip = "[font=\"serif-bold-16\"]Attack: [/font]" + damageTypesToText(entState.attack) + 
-		"\n[font=\"serif-bold-16\"]Armor: [/font]" + damageTypesToText(entState.armour);
+	// Attack
+	var attackValues = damageValues(entState.attack);
+	getGUIObjectByName("attackHack").caption = attackValues[0];
+	getGUIObjectByName("attackPierce").caption = attackValues[1];
+	getGUIObjectByName("attackCrush").caption = attackValues[2];
+
+	// Armor
+	var armorValues = damageValues(entState.armour);
+	getGUIObjectByName("armorHack").caption = armorValues[0];
+	getGUIObjectByName("armorPierce").caption = armorValues[1];
+	getGUIObjectByName("armorCrush").caption = armorValues[2];
 
 	// Icon Tooltip
 	var iconTooltip = "";
diff --git a/binaries/data/mods/public/gui/session/session.xml b/binaries/data/mods/public/gui/session/session.xml
index 8aedbf88c6..08f5d06d9f 100644
--- a/binaries/data/mods/public/gui/session/session.xml
+++ b/binaries/data/mods/public/gui/session/session.xml
@@ -28,7 +28,7 @@
 
 		<action on="Press">
 			this.hidden = !this.hidden;
-		</action>
+    </action>
 
 		<!-- ================================  ================================ -->
 		<!-- HOTKEYS (For some reason, they won't work properly unless outside menu) -->
@@ -194,7 +194,7 @@
 		<!-- ================================  ================================ -->
 		<!-- Notification Area -->
 		<!-- ================================  ================================ -->
-		<object name="notificationPanel" type="image" size="50%-300 100%-280 50%+300 100%-220" ghost="true">
+		<object name="notificationPanel" type="image" size="50%-300 100%-300 50%+300 100%-240" ghost="true">
 			<object name="notificationText" size="0 0 100% 100%" type="text" style="notificationPanel" ghost="true"/>
 		</object>
 
@@ -346,7 +346,7 @@
 			<!-- ================================  ================================ -->
 			<!-- Civ Icon -->
 			<!-- ================================  ================================ -->
-			<object size="50%-48 -26 50%+48 70" name="civIcon" type="image"/>
+			<object size="50%-48 -26 50%+48 70" name="civIcon" type="image" tooltip_style="sessionToolTipBold"/>
 
 			<!-- ================================  ================================ -->
 			<!-- Phase -->
@@ -602,7 +602,7 @@
 			</object>
 
 			<!-- ================================  ================================ -->
-			<!-- Details Panel -->
+			<!-- Details Panel (Middle) -->
 			<!-- ================================  ================================ -->
 			<object name="selectionDetails"
 				type="image"
@@ -613,62 +613,81 @@
 				<!-- Unit details for Single Unit -->
 				<object size="50%-112 0 50%+112 100%" name="detailsAreaSingle">
 
+          <!-- Big unit icon -->
+          <object z="30" size= "6 -30 126 90" type="image" name="iconBorder" tooltip_style="sessionToolTip">
+            <object size="2 2 100%-2 100%-2" type="image" name="icon" ghost="true"/>
+            <object size="100%-20 4 100%-4 20" name="rankIcon" type="image" sprite="" ghost="true"/>
+            <object type="image" sprite="glassSquareIcon" ghost="true"/>
+
+            <!-- Resource carrying icon/counter -->
+            <object size="0 40 48 88" type="image" name="resourceCarryingIcon"/>
+            <object size="0 80 48 100" type="text" name="resourceCarryingText" style="statsText"/>
+            
+            
+            <!-- Experience bar -->
+            <object size="2 100%-9 100%-2 100%-1" type="image" name="experience" tooltip="Experience" tooltip_style="sessionToolTip">
+              <object type="image" sprite="experienceBackground" ghost="true"/>
+              <object type="image" sprite="experienceForeground" ghost="true" name="experienceBar"/>
+              <object type="image" sprite="statsBarShader" ghost="true"/>
+            </object>
+          </object>
+          
 					<!-- Player Name -->
-					<object size="0 0 100% 40" name="player" type="text" style="largeCenteredOutlinedText" tooltip_style="sessionToolTipBold"/>
+					<object size="126 -24 100% 0" name="player" type="text" style="largeLeftOutlinedText" tooltip_style="sessionToolTipBold"/>
 
+          <!-- Specific Name -->
+          <object size="126 4 100% 44" name="specific" type="text" style="LeftLabelText" tooltip_style="sessionToolTipBold"/>
+
+          <!-- Stats Bars -->
+          <object size= "126 48 100%-4 136" type="image" tooltip_style="sessionToolTip">
+            <!-- Health bar -->
+            <object size="0 0 100% 16" type="image" name="health" tooltip="Health" tooltip_style="sessionToolTip">
+              <object type="image" sprite="healthBackground" ghost="true"/>
+              <object type="image" sprite="healthForeground" ghost="true" name="healthBar"/>
+              <object type="image" sprite="statsBarShader" ghost="true"/>
+              <object size="0 0 100% 100%" name="healthText" type="text" style="largeCenteredOutlinedText" ghost="true"/>
+            </object>
+
+            <!-- Stamina bar -->
+            <object size="0 20 100% 36" type="image" name="stamina" tooltip="Stamina" tooltip_style="sessionToolTip">
+              <object type="image" sprite="staminaBackground" ghost="true"/>
+              <object type="image" sprite="staminaForeground" ghost="true" name="staminaBar"/>
+              <object type="image" sprite="statsBarShader" ghost="true"/>
+            </object>
+
+            <!-- Resource bar -->
+            <object size="0 20 100% 36" type="image" name="resources" tooltip="Resources" tooltip_style="sessionToolTip">
+              <object type="image" sprite="resourceBackground" ghost="true"/>
+              <object type="image" sprite="resourceForeground" ghost="true" name="resourceBar"/>
+              <object type="image" sprite="statsBarShader" ghost="true"/>
+              <object size="0 0 100% 100%" name="resourceText" type="text" style="largeCenteredOutlinedText" ghost="true"/>
+            </object>
+          </object>
+          
 					<!-- Stats -->
-					<object size="8 36 50%-48 100%" name="statsArea" type="image">
-						<!-- Attack icon -->
-						<object hidden="true" size="0 0 48 48" type="image" name="attackIcon" sprite="stretched:session/icons/stances/aggressive.png" tooltip_style="sessionToolTip"/>
- 
-						<!-- Armour icon "0 48 48 96"-->
-						<object size="0 0 48 48" type="image" name="armourIcon" sprite="stretched:session/icons/stances/defensive.png" tooltip_style="sessionToolTip"/>
-
-						<!-- Resource carrying icon/counter -->
-						<object size="0 40 48 88" type="image" name="resourceCarryingIcon"/>
-						<object size="0 80 48 100" type="text" name="resourceCarryingText" style="statsText"/>
+					<object size="10 94 100% 100%" name="statsArea" type="image">
+            <!-- Attack - icon and Hack Pierce Crush labels -->
+            <object size="0 0 100% 32">
+						  <object size="0 -2 42 40" type="image" name="attackIcon" sprite="stretched:session/icons/stances/violent.png" tooltip_style="sessionToolTip"/>
+              <object size="42 0 92 50%" name="attackHackLabel" type="text" style="CenteredLabelText">Hack</object>
+              <object size="92 0 142 50%" name="attackPierceLabel" type="text" style="CenteredLabelText">Pierce</object>
+              <object size="142 0 192 50%" name="attackCrushLabel" type="text" style="CenteredLabelText">Crush</object>
+              <object size="42 50% 92 100%" name="attackHack" type="text" style="statsText"/>
+              <object size="92 50% 142 100%" name="attackPierce" type="text" style="statsText"/>
+              <object size="142 50% 192 100%" name="attackCrush" type="text" style="statsText"/>
+            </object>
+            
+						<!-- Armour - icon and Hack Pierce Crush labels -->
+            <object size="0 38 100% 70">
+						  <object size="0 -2 42 40" type="image" name="armorIcon" sprite="stretched:session/icons/stances/standground.png" tooltip_style="sessionToolTip"/>
+              <object size="42 0 92 50%" name="armorHackLabel" type="text" style="CenteredLabelText">Hack</object>
+              <object size="92 0 142 50%" name="armorPierceLabel" type="text" style="CenteredLabelText">Pierce</object>
+              <object size="142 0 192 50%" name="armorCrushLabel" type="text" style="CenteredLabelText">Crush</object>
+              <object size="42 50% 92 100%" name="armorHack" type="text" style="statsText"/>
+              <object size="92 50% 142 100%" name="armorPierce" type="text" style="statsText"/>
+              <object size="142 50% 192 100%" name="armorCrush" type="text" style="statsText"/>
+            </object>
 					</object>
-
-					<!-- Big unit icon -->
-					<object size= "50%-48 40 50%+48 136" type="image" name="iconBorder" tooltip_style="sessionToolTip">
-						<object size="2 2 100%-2 100%-2" type="image" name="icon" ghost="true"/>
-						<object size="100%-20 4 100%-4 20" name="rankIcon" type="image" sprite="" ghost="true"/>
-						<object type="image" sprite="glassSquareIcon" ghost="true"/>
-					</object>
-
-					<!-- Stats Bars -->
-					<object size= "50%+48 40 100% 136" type="image" tooltip_style="sessionToolTip">
-						<!-- Health bar -->
-						<object size="18 0 30 100%" type="image" name="health" tooltip="Health" tooltip_style="sessionToolTip">
-							<object type="image" sprite="healthBackground" ghost="true"/>
-							<object type="image" sprite="healthForeground" ghost="true" name="healthBar"/>
-							<object type="image" sprite="statsBarShader" ghost="true"/>
-						</object>
-
-						<!-- Stamina bar -->
-						<object size="32 0 44 100%" type="image" name="stamina" tooltip="Stamina" tooltip_style="sessionToolTip">
-							<object type="image" sprite="staminaBackground" ghost="true"/>
-							<object type="image" sprite="staminaForeground" ghost="true" name="staminaBar"/>
-							<object type="image" sprite="statsBarShader" ghost="true"/>
-						</object>
-
-						<!-- Resource bar -->
-						<object size="18 0 30 100%" type="image" name="resources" tooltip="Resources" tooltip_style="sessionToolTip">
-							<object type="image" sprite="resourceBackground" ghost="true"/>
-							<object type="image" sprite="resourceForeground" ghost="true" name="resourceBar"/>
-							<object type="image" sprite="statsBarShader" ghost="true"/>
-						</object>
-
-						<!-- Experience bar -->
-						<object size="46 0 58 100%" type="image" name="experience" tooltip="Experience" tooltip_style="sessionToolTip">
-							<object type="image" sprite="experienceBackground" ghost="true"/>
-							<object type="image" sprite="experienceForeground" ghost="true" name="experienceBar"/>
-							<object type="image" sprite="statsBarShader" ghost="true"/>
-						</object>
-					</object>
-
-					<!-- Specific Name -->
-					<object size="0 142 100% 162" name="specific" type="text" style="largeCenteredOutlinedText" tooltip_style="sessionToolTipBold"/>
 				</object>
 
 				<!-- Unit details for Multiple Units -->
diff --git a/binaries/data/mods/public/gui/session/styles.xml b/binaries/data/mods/public/gui/session/styles.xml
index 9bd0569af7..48af66f8b6 100644
--- a/binaries/data/mods/public/gui/session/styles.xml
+++ b/binaries/data/mods/public/gui/session/styles.xml
@@ -5,21 +5,20 @@
 	<!-- ================================  ================================ -->
 	<!-- Text Styles -->
 	<!-- ================================  ================================ -->
-        <style name="PauseText"
+  <style name="PauseText"
 		font="serif-bold-24"
 		textcolor="white"
 		text_align="center"
 		text_valign="center"
 	/>
 
-        <style name="PauseMessageText"
+  <style name="PauseMessageText"
 		font="serif-bold-12"
 		textcolor="white"
 		text_align="center"
 		text_valign="center"
 	/>
 
-
 	<style name="leftAlignedText"
 		textcolor="white"
 		text_align="left"
@@ -38,7 +37,7 @@
 		text_valign="center"
 	/>
 
-	<style name="largeBoldCenteredText"
+  <style name="largeBoldCenteredText"
 		font="serif-bold-18"
 		textcolor="white"
 		text_align="center"
@@ -52,6 +51,13 @@
 		text_valign="center"
 	/>
 
+  <style name="largeLeftOutlinedText"
+    font="serif-bold-stroke-14"
+    textcolor="white"
+    text_align="left"
+    text_valign="center"
+	/>
+
 	<style name="iconButtonCount"
 		textcolor="255 255 255"
 		font="serif-9"
@@ -95,7 +101,7 @@
 		text_valign="center"
 	/>
 
-	<style name="statsText"
+	<style name="statsTextLabel"
 		textcolor="white"
 		font="serif-bold-stroke-14"
 		ghost="true"
@@ -103,6 +109,14 @@
 		text_valign="center"
 	/>
 
+  <style name="statsText"
+    textcolor="white"
+    font="serif-bold-stroke-14"
+    ghost="true"
+    text_align="center"
+    text_valign="center"
+	/>
+
 	<style name="settingsText"
 		font="serif-16"
 		textcolor="white"
diff --git a/binaries/data/mods/public/gui/session/utility_functions.js b/binaries/data/mods/public/gui/session/utility_functions.js
index 43dd692ccf..ee553e02e9 100644
--- a/binaries/data/mods/public/gui/session/utility_functions.js
+++ b/binaries/data/mods/public/gui/session/utility_functions.js
@@ -102,6 +102,26 @@ function hasClass(entState, className)
 	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);
+
+		return dmgArray;
+	}
+	else
+	{
+		return [0, 0, 0];
+	}
+}
+
+// For the unit details panel
 function damageTypesToTextStacked(dmg)
 {
 	if (!dmg)
@@ -109,6 +129,7 @@ function damageTypesToTextStacked(dmg)
 	return dmg.hack + " Hack\n" + dmg.pierce + " Pierce\n" + dmg.crush + " Crush";
 }
 
+// For the training tooltip
 function damageTypesToText(dmg)
 {
 	if (!dmg)