Absorb duplicated summary tab code to the tab_buttons gui

refs 8ae67ed15f/9ae7c4d810
Comments By: elexis, Stan, Freagarach
Tested By: Freagarach
Reviewed By: Imarok
Differential Revision: D1206
This was SVN commit r23789.

binaries/data/mods/public/gui/common/tab_buttons.js

@@ -3,6 +3,11 @@
  */
 var g_TabCategoryCount;
 
+/**
+ * Align the buttons horizontally or vertically.
+ */
+var g_TabHorizontal;
+
 /**
  * Index of the currently visible tab, set first tab as default.
  */
@@ -17,15 +22,17 @@ var g_OnSelectTab;
  * Create tab buttons.
  *
  * @param {Array} categoriesData - Arrays of objects containing for every tab a (translated) label and tooltip.
- * @param {number} buttonHeight - Vertical distance between the top and bottom of a button.
- * @param {number} spacing - Vertical distance between two buttons.
+ * @param {boolean} horizontal - Have the tabs horizontally or vertically aligned.
+ * @param {number} buttonSize - Size of a button in the specified direction.
+ * @param {number} spacing - Distance between two buttons in the specified direction.
  * @param {function} onPress - Function to be executed when a button is pressed, it gets the new category index passed.
  * @param {function} onSelect - Function to be executed whenever the selection changes (so also for scrolling), it gets the new category index passed.
  */
-function placeTabButtons(categoriesData, buttonHeight, spacing, onPress, onSelect)
+function placeTabButtons(categoriesData, horizontal, buttonSize, spacing, onPress, onSelect)
 {
-	g_OnSelectTab = onSelect;
 	g_TabCategoryCount = categoriesData.length;
+	g_TabHorizontal = horizontal;
+	g_OnSelectTab = onSelect;
 
 	for (let category in categoriesData)
 	{
@@ -36,11 +43,22 @@ function placeTabButtons(categoriesData, buttonHeight, spacing, onPress, onSelec
 			break;
 		}
 
+		button.style = "ModernTabButton" + (horizontal ? "Horizontal" : "Vertical");
 		button.hidden = false;
 
 		let size = button.size;
-		size.top = category * (buttonHeight + spacing) + spacing / 2;
-		size.bottom = size.top + buttonHeight;
+		if (horizontal)
+		{
+			size.left = category * (buttonSize + spacing) + spacing / 2;
+			size.right = size.left + buttonSize;
+			size.rright = 0;
+		}
+		else
+		{
+			size.top = category * (buttonSize + spacing) + spacing / 2;
+			size.bottom = size.top + buttonSize;
+			size.rbottom = 0;
+		}
 		button.size = size;
 		button.tooltip = categoriesData[category].tooltip || "";
 
@@ -71,7 +89,13 @@ function selectPanel(category)
 {
 	g_TabCategorySelected = category;
 	Engine.GetGUIObjectByName("tabButtons").children.forEach((button, j) => {
-		button.sprite = category == j ? "ModernTabVerticalForeground" : "ModernTabVerticalBackground";
+		button.sprite = g_TabHorizontal ?
+			category == j ?
+				"ModernTabHorizontalForeground" :
+				"ModernTabHorizontalBackground" :
+			category == j ?
+				"ModernTabVerticalForeground" :
+				"ModernTabVerticalBackground";
 	});
 
 	if (g_OnSelectTab)

binaries/data/mods/public/gui/common/tab_buttons.xml

@@ -10,7 +10,7 @@
 
 	<object name="tabButtons" type="image">
 		<repeat count="20">
-			<object name="tabButton[n]" type="button" style="ModernTabButtonVertical" size="0 0 100% 30" hidden="true">
+			<object name="tabButton[n]" type="button" size="0 0 100% 100%" hidden="true">
 				<object type="text" name="tabButtonText[n]" style="ModernLabelText" ghost="true"/>
 				<action on="MouseWheelUp">selectNextTab(-1);</action>
 				<action on="MouseWheelDown">selectNextTab(1);</action>

binaries/data/mods/public/gui/credits/credits.js

@@ -47,6 +47,7 @@ function init()
 
 	placeTabButtons(
 		g_PanelData,
+		false,
 		g_TabButtonHeight,
 		g_TabButtonDist,
 		selectPanel,

binaries/data/mods/public/gui/gamesetup/Pages/GameSetupPage/Panels/GameSettingsTabs.js

@@ -33,6 +33,7 @@ class GameSettingTabs
 	{
 		placeTabButtons(
 			g_GameSettingsLayout,
+			false,
 			this.TabButtonHeight,
 			this.TabButtonMargin,
 			this.onTabPress.bind(this),

binaries/data/mods/public/gui/options/options.js

@@ -178,6 +178,7 @@ function init(data, hotloadData)
 
 	placeTabButtons(
 		g_Options,
+		false,
 		g_TabButtonHeight,
 		g_TabButtonDist,
 		selectPanel,

binaries/data/mods/public/gui/summary/layout.js

@@ -1,6 +1,16 @@
-var getScorePanelsData = () => ({
-	"score": {
-		"caption": translate("Score"),
+/**
+ * Horizontal size of a tab button.
+ */
+var g_TabButtonWidth = 118;
+
+/**
+ * Horizontal space between two tab buttons.
+ */
+var g_TabButtonDist = 6;
+
+var getScorePanelsData = () => [
+	{
+		"label": translate("Score"),
 		"headings": [
 			{ "identifier": "playername", "caption": translate("Player name"), "yStart": 26, "width": 200 },
 			{ "identifier": "totalScore", "caption": translate("Total score"), "yStart": 16, "width": 100 },
@@ -17,8 +27,8 @@ var getScorePanelsData = () => ({
 		],
 		"teamCounterFn": calculateScoreTeam
 	},
-	"buildings": {
-		"caption": translate("Structures"),
+	{
+		"label": translate("Structures"),
 		"headings": [
 			{ "identifier": "playername", "caption": translate("Player name"), "yStart": 26, "width": 200 },
 			{ "identifier": "total", "caption": translate("Total"), "yStart": 34, "width": 105 },
@@ -55,8 +65,8 @@ var getScorePanelsData = () => ({
 		],
 		"teamCounterFn": calculateBuildingsTeam
 	},
-	"units": {
-		"caption": translate("Units"),
+	{
+		"label": translate("Units"),
 		"headings": [
 			{ "identifier": "playername", "caption": translate("Player name"), "yStart": 26, "width": 200 },
 			{ "identifier": "total", "caption": translate("Total"), "yStart": 34, "width": 105 },
@@ -95,8 +105,8 @@ var getScorePanelsData = () => ({
 		],
 		"teamCounterFn": calculateUnitsTeam
 	},
-	"resources": {
-		"caption": translate("Resources"),
+	{
+		"label": translate("Resources"),
 		"headings": [
 			{ "identifier": "playername", "caption": translate("Player name"), "yStart": 26, "width": 200 },
 			{ "identifier": "total", "caption": translate("Total"), "yStart": 34, "width": 110 },
@@ -146,8 +156,8 @@ var getScorePanelsData = () => ({
 		],
 		"teamCounterFn": calculateResourcesTeam
 	},
-	"market": {
-		"caption": translate("Market"),
+	{
+		"label": translate("Market"),
 		"headings": [
 			{ "identifier": "playername", "caption": translate("Player name"), "yStart": 26, "width": 200 },
 			{ "identifier": "tradeIncome", "caption": translate("Trade income"), "yStart": 16, "width": 100 },
@@ -178,8 +188,8 @@ var getScorePanelsData = () => ({
 		],
 		"teamCounterFn": calculateMarketTeam
 	},
-	"misc": {
-		"caption": translate("Miscellaneous"),
+	{
+		"label": translate("Miscellaneous"),
 		"headings": [
 			{ "identifier": "playername", "caption": translate("Player name"), "yStart": 26, "width": 200 },
 			{ "identifier": "killDeath", "caption": translate("Kill / Death ratio"), "yStart": 16, "width": 100, "format": "DECIMAL2" },
@@ -212,7 +222,13 @@ var getScorePanelsData = () => ({
 		],
 		"teamCounterFn": calculateMiscellaneousTeam
 	}
-});
+];
+
+var g_ChartPanelsData = [
+	{
+		"label": translate("Charts")
+	}
+];
 
 function getColoredTypeTranslation(type)
 {

binaries/data/mods/public/gui/summary/summary.js

@@ -126,16 +126,6 @@ var g_SelectedChart = {
 	"type": [0, 0]
 };
 
-/**
- * Array of the panel button names.
- */
-var g_PanelButtons = [];
-
-/**
- * Remember the name of the currently opened view panel.
- */
-var g_SelectedPanel;
-
 function init(data)
 {
 	initSummaryData(data);
@@ -146,12 +136,10 @@ function initSummaryData(data)
 {
 	g_GameData = data;
 	g_ScorePanelsData = getScorePanelsData();
-	g_PanelButtons = Object.keys(g_ScorePanelsData).concat(["charts"]).map(panel => panel + "PanelButton");
 
-	g_SelectedPanel = g_PanelButtons[0];
 	if (data && data.gui && data.gui.summarySelection)
 	{
-		g_SelectedPanel = data.gui.summarySelection.panel;
+		g_TabCategorySelected = data.gui.summarySelection.panel;
 		g_SelectedChart = data.gui.summarySelection.charts;
 	}
 
@@ -166,14 +154,6 @@ function initGUISummary()
 	initGUICharts();
 	initGUILabels();
 	initGUIButtons();
-
-	selectPanel(Engine.GetGUIObjectByName(g_SelectedPanel));
-	for (let button of g_PanelButtons)
-	{
-		let tab = Engine.GetGUIObjectByName(button);
-		tab.onMouseWheelUp = () => selectNextTab(1);
-		tab.onMouseWheelDown = () => selectNextTab(-1);
-	}
 }
 
 /**
@@ -187,39 +167,21 @@ function initGUIWindow()
 	Engine.GetGUIObjectByName("summaryWindowTitle").size = g_GameData.gui.dialog ? "50%-128 -16 50%+128 16" : "50%-128 4 50%+128 36";
 }
 
-/**
- * Show next/previous panel.
- * @param direction - 1/-1 forward, backward panel.
- */
-function selectNextTab(direction)
+function selectPanelGUI(panel)
 {
-	selectPanel(Engine.GetGUIObjectByName(g_PanelButtons[
-		(g_PanelButtons.indexOf(g_SelectedPanel) + direction + g_PanelButtons.length) % g_PanelButtons.length]));
-}
-
-function selectPanel(panel)
-{
-	// TODO: move panel buttons to a custom parent object
-
-	for (let button of Engine.GetGUIObjectByName("summaryWindow").children)
-		if (button.name.endsWith("PanelButton"))
-			button.sprite = "ModernTabHorizontalBackground";
-
-	panel.sprite = "ModernTabHorizontalForeground";
-
-	adjustTabDividers(panel.size);
+	adjustTabDividers(Engine.GetGUIObjectByName("tabButton[" + panel + "]").size);
 
 	let generalPanel = Engine.GetGUIObjectByName("generalPanel");
 	let chartsPanel = Engine.GetGUIObjectByName("chartsPanel");
-	let chartsHidden = panel.name != "chartsPanelButton";
+
+	// We assume all scorePanels come before the charts.
+	let chartsHidden = panel < g_ScorePanelsData.length;
 	generalPanel.hidden = !chartsHidden;
 	chartsPanel.hidden = chartsHidden;
 	if (chartsHidden)
-		updatePanelData(g_ScorePanelsData[panel.name.substr(0, panel.name.length - "PanelButton".length)]);
+		updatePanelData(g_ScorePanelsData[panel]);
 	else
 		[0, 1].forEach(updateCategoryDropdown);
-
-	g_SelectedPanel = panel.name;
 }
 
 function initGUICharts()
@@ -264,8 +226,8 @@ function resizeDropdown(dropdown)
 function updateCategoryDropdown(number)
 {
 	let chartCategory = Engine.GetGUIObjectByName("chart[" + number + "]CategorySelection");
-	chartCategory.list_data = Object.keys(g_ScorePanelsData);
-	chartCategory.list = Object.keys(g_ScorePanelsData).map(panel => g_ScorePanelsData[panel].caption);
+	chartCategory.list_data = g_ScorePanelsData.map((panel, idx) => idx);
+	chartCategory.list = g_ScorePanelsData.map(panel => panel.label);
 	chartCategory.onSelectionChange = function() {
 		if (!this.list_data[this.selected])
 			return;
@@ -358,22 +320,17 @@ function updateChart(number, category, item, itemNumber, type)
 
 function adjustTabDividers(tabSize)
 {
+	let tabButtonsLeft = Engine.GetGUIObjectByName("tabButtonsFrame").size.left;
+
 	let leftSpacer = Engine.GetGUIObjectByName("tabDividerLeft");
+	let leftSpacerSize = leftSpacer.size;
+	leftSpacerSize.right = tabSize.left + tabButtonsLeft + 2;
+	leftSpacer.size = leftSpacerSize;
+
 	let rightSpacer = Engine.GetGUIObjectByName("tabDividerRight");
-
-	leftSpacer.size = [
-		20,
-		leftSpacer.size.top,
-		tabSize.left + 2,
-		leftSpacer.size.bottom
-	].join(" ");
-
-	rightSpacer.size = [
-		tabSize.right - 2,
-		rightSpacer.size.top,
-		"100%-20",
-		rightSpacer.size.bottom
-	].join(" ");
+	let rightSpacerSize = rightSpacer.size;
+	rightSpacerSize.left = tabSize.right + tabButtonsLeft - 2;
+	rightSpacer.size = rightSpacerSize;
 }
 
 function updatePanelData(panelInfo)
@@ -445,7 +402,7 @@ function updatePanelData(panelInfo)
 function continueButton()
 {
 	let summarySelection = {
-		"panel": g_SelectedPanel,
+		"panel": g_TabCategorySelected,
 		"charts": g_SelectedChart
 	};
 	if (g_GameData.gui.isInGame)
@@ -536,6 +493,21 @@ function initGUIButtons()
 	lobbyButtonSize.right = (replayButton.hidden ? Engine.GetGUIObjectByName("continueButton").size.left : replayButton.size.left) - 10;
 	lobbyButtonSize.left = lobbyButtonSize.right - lobbyButtonWidth;
 	lobbyButton.size = lobbyButtonSize;
+
+	let allPanelsData = g_ScorePanelsData.concat(g_ChartPanelsData);
+	for (let tab in allPanelsData)
+		allPanelsData[tab].tooltip =
+			sprintf(translate("Toggle the %(name)s summary tab."), { "name": allPanelsData[tab].label }) +
+			colorizeHotkey("\n" + translate("Use %(hotkey)s to move a summary tab right."), "tab.next") +
+			colorizeHotkey("\n" + translate("Use %(hotkey)s to move a summary tab left."), "tab.prev");
+
+	placeTabButtons(
+		allPanelsData,
+		true,
+		g_TabButtonWidth,
+		g_TabButtonDist,
+		selectPanel,
+		selectPanelGUI);
 }
 
 function initTeamData()

binaries/data/mods/public/gui/summary/summary.xml

@@ -16,14 +16,6 @@
 		</action>
 	</object>
 
-	<object hotkey="tab.next">
-		<action on="KeyDown">selectNextTab(1);</action>
-	</object>
-
-	<object hotkey="tab.prev">
-		<action on="KeyDown">selectNextTab(-1);</action>
-	</object>
-
 	<object type="image" sprite="ModernFade" name="fadeImage"/>
 
 	<object name="summaryWindow"
@@ -65,56 +57,11 @@
 
 		</object>
 
-		<object name="tabDividerLeft" type="image" sprite="ModernTabHorizontalSpacer" size="172 120 174 122"/>
-		<object name="tabDividerRight" type="image" sprite="ModernTabHorizontalSpacer" size="328 120 330 122"/>
+		<object name="tabDividerLeft" type="image" sprite="ModernTabHorizontalSpacer" size="20 120 20 122"/>
+		<object name="tabDividerRight" type="image" sprite="ModernTabHorizontalSpacer" size="20 120 100%-20 122"/>
 
-		<object name="scorePanelButton" type="button" style="ModernTabButtonHorizontal" size="20 92 136 120">
-			<action on="Press">selectPanel(this);</action>
-			<object type="text" style="ModernLabelText" ghost="true">
-				<translatableAttribute id="caption">Score</translatableAttribute>
-			</object>
-		</object>
-
-		<object name="buildingsPanelButton" type="button" style="ModernTabButtonHorizontal" size="142 92 260 120">
-			<action on="Press">selectPanel(this);</action>
-			<object type="text" style="ModernLabelText" ghost="true">
-				<translatableAttribute id="caption">Structures</translatableAttribute>
-			</object>
-		</object>
-
-		<object name="unitsPanelButton" type="button" style="ModernTabButtonHorizontal" size="266 92 384 120">
-			<action on="Press">selectPanel(this);</action>
-			<object type="text" style="ModernLabelText" ghost="true">
-				<translatableAttribute id="caption">Units</translatableAttribute>
-			</object>
-		</object>
-
-		<object name="resourcesPanelButton" type="button" style="ModernTabButtonHorizontal" size="390 92 508 120">
-			<action on="Press">selectPanel(this);</action>
-			<object type="text" style="ModernLabelText" ghost="true">
-				<translatableAttribute id="caption">Resources</translatableAttribute>
-			</object>
-		</object>
-
-		<object name="marketPanelButton" type="button" style="ModernTabButtonHorizontal" size="514 92 632 120">
-			<action on="Press">selectPanel(this);</action>
-			<object type="text" style="ModernLabelText" ghost="true">
-				<translatableAttribute id="caption">Market</translatableAttribute>
-			</object>
-		</object>
-
-		<object name="miscPanelButton" type="button" style="ModernTabButtonHorizontal" size="638 92 756 120">
-			<action on="Press">selectPanel(this);</action>
-			<object type="text" style="ModernLabelText" ghost="true">
-				<translatableAttribute id="caption">Miscellaneous</translatableAttribute>
-			</object>
-		</object>
-
-		<object name="chartsPanelButton" type="button" style="ModernTabButtonHorizontal" size="762 92 880 120">
-			<action on="Press">selectPanel(this);</action>
-			<object type="text" style="ModernLabelText" ghost="true">
-				<translatableAttribute id="caption">Charts</translatableAttribute>
-			</object>
+		<object name="tabButtonsFrame" size="17 92 883 120">
+			<include file="gui/common/tab_buttons.xml"/>
 		</object>
 
 		<object name="generalPanel" type="image" sprite="ModernTabHorizontalFrame" size="20 120 100%-20 100%-54">