mirrors/0ad
1
0
Fork 2
mirror of https://gitea.wildfiregames.com/0ad/0ad.git synced 2026-06-24 14:47:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve layout of the match summary screen

Browse Source 
This improves the layout of the summary screen, so text and displayed
values fit better. By doing so this also removed the need to specify a
"verticalOffset" for values, as they get vertically centered now.

(cherry picked from commit 1268854587)
Signed-off-by: Itms <itms@wildfiregames.com>
This commit is contained in:
Dunedan
2024-12-28 12:10:07 +01:00
committed by Itms
parent cece45f305
commit d3062cdfda
3 changed files with 108 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
binaries/data/mods/public/gui/summary/layout.js
+88 -90
View File
@@ -13,17 +13,17 @@ 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 },
{ "identifier": "economyScore", "caption": translate("Economy score"), "yStart": 16, "width": 100 },
{ "identifier": "militaryScore", "caption": translate("Military score"), "yStart": 16, "width": 100 },
{ "identifier": "explorationScore", "caption": translate("Exploration score"), "yStart": 16, "width": 100 }
{ "identifier": "totalScore", "caption": translate("Total score"), "yStart": 0, "width": 120 },
{ "identifier": "economyScore", "caption": translate("Economy score"), "yStart": 0, "width": 120 },
{ "identifier": "militaryScore", "caption": translate("Military score"), "yStart": 0, "width": 120 },
{ "identifier": "explorationScore", "caption": translate("Exploration score"), "yStart": 0, "width": 120 }
],
"titleHeadings": [],
"counters": [
{ "width": 100, "fn": calculateScoreTotal, "verticalOffset": 12 },
{ "width": 100, "fn": calculateEconomyScore, "verticalOffset": 12 },
{ "width": 100, "fn": calculateMilitaryScore, "verticalOffset": 12 },
{ "width": 100, "fn": calculateExplorationScore, "verticalOffset": 12 }
{ "width": 120, "fn": calculateScoreTotal },
{ "width": 120, "fn": calculateEconomyScore },
{ "width": 120, "fn": calculateMilitaryScore },
{ "width": 120, "fn": calculateExplorationScore }
],
"teamCounterFn": calculateScoreTeam
},
@@ -31,14 +31,14 @@ var getScorePanelsData = () => [
"label": translate("Structures"),
"headings": [
{ "identifier": "playername", "caption": translate("Player name"), "yStart": 26, "width": 200 },
{ "identifier": "Structure", "caption": translate("Total"), "yStart": 34, "width": 105 },
{ "identifier": "House", "caption": translate("Houses"), "yStart": 34, "width": 85 },
{ "identifier": "Economic", "caption": translate("Economic"), "yStart": 34, "width": 85 },
{ "identifier": "Outpost", "caption": translate("Outposts"), "yStart": 34, "width": 85 },
{ "identifier": "Military", "caption": translate("Military"), "yStart": 34, "width": 85 },
{ "identifier": "Fortress", "caption": translate("Fortresses"), "yStart": 34, "width": 85 },
{ "identifier": "CivCentre", "caption": translate("Civ centers"), "yStart": 34, "width": 85 },
{ "identifier": "Wonder", "caption": translate("Wonders"), "yStart": 34, "width": 85 }
{ "identifier": "Structure", "caption": translate("Total"), "yStart": 34, "width": 90 },
{ "identifier": "House", "caption": translate("Houses"), "yStart": 34, "width": 90 },
{ "identifier": "Economic", "caption": translate("Economic"), "yStart": 34, "width": 90 },
{ "identifier": "Outpost", "caption": translate("Outposts"), "yStart": 34, "width": 90 },
{ "identifier": "Military", "caption": translate("Military"), "yStart": 34, "width": 90 },
{ "identifier": "Fortress", "caption": translate("Fortresses"), "yStart": 34, "width": 90 },
{ "identifier": "CivCentre", "caption": translate("Civ centers"), "yStart": 34, "width": 90 },
{ "identifier": "Wonder", "caption": translate("Wonders"), "yStart": 34, "width": 90 }
],
"titleHeadings": [
{
@@ -50,18 +50,18 @@ var getScorePanelsData = () => [
"lost": getColoredTypeTranslation("lost")
}),
"yStart": 16,
"width": 85 * 7 + 105
}, // width = 700
"width": 90 * 8
}, // width = 720
],
"counters": [
{ "width": 105, "fn": calculateBuildings, "verticalOffset": 3 },
{ "width": 85, "fn": calculateBuildings, "verticalOffset": 3 },
{ "width": 85, "fn": calculateBuildings, "verticalOffset": 3 },
{ "width": 85, "fn": calculateBuildings, "verticalOffset": 3 },
{ "width": 85, "fn": calculateBuildings, "verticalOffset": 3 },
{ "width": 85, "fn": calculateBuildings, "verticalOffset": 3 },
{ "width": 85, "fn": calculateBuildings, "verticalOffset": 3 },
{ "width": 85, "fn": calculateBuildings, "verticalOffset": 3 }
{ "width": 90, "fn": calculateBuildings },
{ "width": 90, "fn": calculateBuildings },
{ "width": 90, "fn": calculateBuildings },
{ "width": 90, "fn": calculateBuildings },
{ "width": 90, "fn": calculateBuildings },
{ "width": 90, "fn": calculateBuildings },
{ "width": 90, "fn": calculateBuildings },
{ "width": 90, "fn": calculateBuildings }
],
"teamCounterFn": calculateBuildingsTeam
},
@@ -69,15 +69,15 @@ var getScorePanelsData = () => [
"label": translate("Units"),
"headings": [
{ "identifier": "playername", "caption": translate("Player name"), "yStart": 26, "width": 200 },
{ "identifier": "Unit", "caption": translate("Total"), "yStart": 34, "width": 105 },
{ "identifier": "Infantry", "caption": translate("Infantry"), "yStart": 34, "width": 85 },
{ "identifier": "Worker", "caption": translate("Worker"), "yStart": 34, "width": 85 },
{ "identifier": "Cavalry", "caption": translate("Cavalry"), "yStart": 34, "width": 85 },
{ "identifier": "Champion", "caption": translate("Champion"), "yStart": 34, "width": 85 },
{ "identifier": "Hero", "caption": translate("Heroes"), "yStart": 34, "width": 85 },
{ "identifier": "Siege", "caption": translate("Siege"), "yStart": 34, "width": 85 },
{ "identifier": "Ship", "caption": translate("Navy"), "yStart": 34, "width": 85 },
{ "identifier": "Trader", "caption": translate("Traders"), "yStart": 34, "width": 85 }
{ "identifier": "Unit", "caption": translate("Total"), "yStart": 34, "width": 90 },
{ "identifier": "Infantry", "caption": translate("Infantry"), "yStart": 34, "width": 90 },
{ "identifier": "Worker", "caption": translate("Worker"), "yStart": 34, "width": 90 },
{ "identifier": "Cavalry", "caption": translate("Cavalry"), "yStart": 34, "width": 90 },
{ "identifier": "Champion", "caption": translate("Champion"), "yStart": 34, "width": 90 },
{ "identifier": "Hero", "caption": translate("Heroes"), "yStart": 34, "width": 90 },
{ "identifier": "Siege", "caption": translate("Siege"), "yStart": 34, "width": 90 },
{ "identifier": "Ship", "caption": translate("Navy"), "yStart": 34, "width": 90 },
{ "identifier": "Trader", "caption": translate("Traders"), "yStart": 34, "width": 90 }
],
"titleHeadings": [
{
@@ -88,19 +88,19 @@ var getScorePanelsData = () => [
"lost": getColoredTypeTranslation("lost")
}),
"yStart": 16,
"width": 85 * 8 + 105
}, // width = 785
"width": 90 * 9
}, // width = 810
],
"counters": [
{ "width": 105, "fn": calculateUnits, "verticalOffset": 3 },
{ "width": 85, "fn": calculateUnits, "verticalOffset": 3 },
{ "width": 85, "fn": calculateUnits, "verticalOffset": 3 },
{ "width": 85, "fn": calculateUnits, "verticalOffset": 3 },
{ "width": 85, "fn": calculateUnits, "verticalOffset": 3 },
{ "width": 85, "fn": calculateUnits, "verticalOffset": 3 },
{ "width": 85, "fn": calculateUnits, "verticalOffset": 3 },
{ "width": 85, "fn": calculateUnits, "verticalOffset": 3 },
{ "width": 85, "fn": calculateUnits, "verticalOffset": 3 }
{ "width": 90, "fn": calculateUnits },
{ "width": 90, "fn": calculateUnits },
{ "width": 90, "fn": calculateUnits },
{ "width": 90, "fn": calculateUnits },
{ "width": 90, "fn": calculateUnits },
{ "width": 90, "fn": calculateUnits },
{ "width": 90, "fn": calculateUnits },
{ "width": 90, "fn": calculateUnits },
{ "width": 90, "fn": calculateUnits }
],
"teamCounterFn": calculateUnitsTeam
},
@@ -113,7 +113,7 @@ var getScorePanelsData = () => [
"identifier": res.code,
"caption": resourceNameFirstWord(res.code),
"yStart": 34,
"width": 100
"width": 110
})),
{
"identifier": "tributes",
@@ -123,12 +123,12 @@ var getScorePanelsData = () => [
"sent": getColoredTypeTranslation("sent"),
"received": getColoredTypeTranslation("received")
}),
"yStart": 16,
"width": 121
"yStart": 0,
"width": 110
},
{ "identifier": "treasuresCollected", "caption": translate("Treasures collected"), "yStart": 16, "width": 85 },
{ "identifier": "loot", "caption": translate("Loot"), "yStart": 16, "width": 85 },
{ "identifier": "livestock", "caption": translate("Livestock bred"), "yStart": 16, "width": 85 }
{ "identifier": "treasuresCollected", "caption": translate("Treasures collected"), "yStart": 0, "width": 85 },
{ "identifier": "loot", "caption": translate("Loot"), "yStart": 0, "width": 85 },
{ "identifier": "livestock", "caption": translate("Livestock bred"), "yStart": 0, "width": 85 }
],
"titleHeadings": [
{
@@ -138,20 +138,19 @@ var getScorePanelsData = () => [
"used": getColoredTypeTranslation("used")
}),
"yStart": 16,
"width": 100 * g_ResourceData.GetCodes().length + 110
"width": 110 * g_ResourceData.GetCodes().length + 110
},
],
"counters": [
{ "width": 110, "fn": calculateTotalResources, "verticalOffset": 12 },
{ "width": 110, "fn": calculateTotalResources },
...g_ResourceData.GetCodes().map(code => ({
"fn": calculateResources,
"verticalOffset": 12,
"width": 100
"width": 110
})),
{ "width": 121, "fn": calculateTributeSent, "verticalOffset": 12 },
{ "width": 85, "fn": calculateTreasureCollected, "verticalOffset": 12 },
{ "width": 85, "fn": calculateLootCollected, "verticalOffset": 12 },
{ "width": 85, "fn": calculateLivestockTrained, "verticalOffset": 12 }
{ "width": 110, "fn": calculateTributeSent },
{ "width": 85, "fn": calculateTreasureCollected },
{ "width": 85, "fn": calculateLootCollected },
{ "width": 85, "fn": calculateLivestockTrained }
],
"teamCounterFn": calculateResourcesTeam
},
@@ -159,8 +158,8 @@ var getScorePanelsData = () => [
"label": translate("Market"),
"headings": [
{ "identifier": "playername", "caption": translate("Player name"), "yStart": 26, "width": 200 },
{ "identifier": "tradeIncome", "caption": translate("Trade income"), "yStart": 16, "width": 100 },
{ "identifier": "barterEfficency", "caption": translate("Barter efficiency"), "yStart": 16, "width": 100, "format": "PERCENTAGE" },
{ "identifier": "tradeIncome", "caption": translate("Trade income"), "yStart": 0, "width": 120 },
{ "identifier": "barterEfficency", "caption": translate("Barter efficiency"), "yStart": 0, "width": 120, "format": "PERCENTAGE" },
...g_ResourceData.GetResources().map(res => {
return {
"identifier": res.code,
@@ -170,19 +169,18 @@ var getScorePanelsData = () => [
"resourceFirstWord": resourceNameFirstWord(res.code),
"resourceWithinSentence": resourceNameWithinSentence(res.code)
}),
"yStart": 16,
"width": 100
"yStart": 0,
"width": 120
};
})
],
"titleHeadings": [],
"counters": [
{ "width": 100, "fn": calculateTradeIncome, "verticalOffset": 12 },
{ "width": 100, "fn": calculateBarterEfficiency, "verticalOffset": 12 },
{ "width": 120, "fn": calculateTradeIncome },
{ "width": 120, "fn": calculateBarterEfficiency },
...g_ResourceData.GetCodes().map(code => ({
"width": 100,
"fn": calculateResourceExchanged,
"verticalOffset": 12
"width": 120,
"fn": calculateResourceExchanged
}))
],
"teamCounterFn": calculateMarketTeam
@@ -191,13 +189,13 @@ var getScorePanelsData = () => [
"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" },
{ "identifier": "population", "caption": translate("Population"), "yStart": 16, "width": 100, "hideInSummary": true },
{ "identifier": "mapControlPeak", "caption": translate("Map control (peak)"), "yStart": 16, "width": 100, "format": "PERCENTAGE" },
{ "identifier": "mapControl", "caption": translate("Map control (finish)"), "yStart": 16, "width": 100, "format": "PERCENTAGE" },
{ "identifier": "mapExploration", "caption": translate("Map exploration"), "yStart": 16, "width": 100, "format": "PERCENTAGE" },
{ "identifier": "vegetarianRatio", "caption": translate("Vegetarian ratio"), "yStart": 16, "width": 100, "format": "PERCENTAGE" },
{ "identifier": "feminization", "caption": translate("Feminization"), "yStart": 16, "width": 100, "format": "PERCENTAGE" },
{ "identifier": "killDeath", "caption": translate("Kill / Death ratio"), "yStart": 0, "width": 110, "format": "DECIMAL2" },
{ "identifier": "population", "caption": translate("Population"), "yStart": 0, "width": 110, "hideInSummary": true },
{ "identifier": "mapControlPeak", "caption": translate("Map control (peak)"), "yStart": 0, "width": 110, "format": "PERCENTAGE" },
{ "identifier": "mapControl", "caption": translate("Map control (finish)"), "yStart": 0, "width": 110, "format": "PERCENTAGE" },
{ "identifier": "mapExploration", "caption": translate("Map exploration"), "yStart": 0, "width": 110, "format": "PERCENTAGE" },
{ "identifier": "vegetarianRatio", "caption": translate("Vegetarian ratio"), "yStart": 0, "width": 110, "format": "PERCENTAGE" },
{ "identifier": "feminization", "caption": translate("Feminization"), "yStart": 0, "width": 110, "format": "PERCENTAGE" },
{
"identifier": "bribes",
"caption": translate("Bribes"),
@@ -206,20 +204,20 @@ var getScorePanelsData = () => [
"succeeded": getColoredTypeTranslation("succeeded"),
"failed": getColoredTypeTranslation("failed")
}),
"yStart": 16,
"width": 139
"yStart": 0,
"width": 110
}
],
"titleHeadings": [],
"counters": [
{ "width": 100, "fn": calculateKillDeathRatio, "verticalOffset": 12 },
{ "width": 100, "fn": calculatePopulationCount, "verticalOffset": 12, "hideInSummary": true },
{ "width": 100, "fn": calculateMapPeakControl, "verticalOffset": 12 },
{ "width": 100, "fn": calculateMapFinalControl, "verticalOffset": 12 },
{ "width": 100, "fn": calculateMapExploration, "verticalOffset": 12 },
{ "width": 100, "fn": calculateVegetarianRatio, "verticalOffset": 12 },
{ "width": 100, "fn": calculateFeminization, "verticalOffset": 12 },
{ "width": 139, "fn": calculateBribes, "verticalOffset": 12 }
{ "width": 110, "fn": calculateKillDeathRatio },
{ "width": 110, "fn": calculatePopulationCount, "hideInSummary": true },
{ "width": 110, "fn": calculateMapPeakControl },
{ "width": 110, "fn": calculateMapFinalControl },
{ "width": 110, "fn": calculateMapExploration },
{ "width": 110, "fn": calculateVegetarianRatio },
{ "width": 110, "fn": calculateFeminization },
{ "width": 110, "fn": calculateBribes }
],
"teamCounterFn": calculateMiscellaneousTeam
}
@@ -269,7 +267,7 @@ function updateGeneralPanelHeadings(allHeadings)
let headerGUI = Engine.GetGUIObjectByName(headerGUIName);
headerGUI.caption = headings[h].headerCaption || headings[h].caption;
headerGUI.size = left + " " + headings[h].yStart + " " + (left + headings[h].width) + " 100%";
headerGUI.size = (left - 4) + " " + headings[h].yStart + " " + (left + headings[h].width + 4) + " 69";
headerGUI.hidden = false;
if (headings[h].width < g_LongHeadingWidth)
@@ -312,7 +310,7 @@ function updateGeneralPanelCounter(allCounters)
for (let w in counters)
{
counterObject = Engine.GetGUIObjectByName("valueData[" + p + "][" + w + "]");
counterObject.size = left + " " + counters[w].verticalOffset + " " + (left + counters[w].width) + " 100%";
counterObject.size = left + " 0 " + (left + counters[w].width) + " 100%";
counterObject.hidden = false;
left += counters[w].width;
}
@@ -327,12 +325,12 @@ function updateGeneralPanelCounter(allCounters)
for (let w in counters)
{
counterObject = Engine.GetGUIObjectByName("valueDataTeam[" + t + "][" + p + "][" + w + "]");
counterObject.size = left + " " + counters[w].verticalOffset + " " + (left + counters[w].width) + " 100%";
counterObject.size = left + " 0 " + (left + counters[w].width) + " 100%";
counterObject.hidden = false;
if (g_Teams[t])
{
let yStart = 25 + g_Teams[t].length * (g_PlayerBoxYSize + g_PlayerBoxGap) + 3 + counters[w].verticalOffset;
let yStart = 25 + g_Teams[t].length * (g_PlayerBoxYSize + g_PlayerBoxGap) + 3;
counterTotalObject = Engine.GetGUIObjectByName("valueDataTeam[" + t + "][" + w + "]");
counterTotalObject.size = (left + 20) + " " + yStart + " " + (left + counters[w].width) + " 100%";
counterTotalObject.hidden = false;
binaries/data/mods/public/gui/summary/summary.js
+2 -1
View File
@@ -256,7 +256,8 @@ function resizeDropdown(dropdown)
let size = dropdown.size;
size.bottom = dropdown.size.top +
(Engine.GetTextWidth(dropdown.font, dropdown.list[dropdown.selected]) >
dropdown.size.right - dropdown.size.left - 32 ? 42 : 27);
dropdown.size.right - dropdown.size.left - 28 &&
dropdown.list[dropdown.selected].indexOf(" ") !== -1 ? 42 : 28);
dropdown.size = size;
}
binaries/data/mods/public/gui/summary/summary.xml
+18 -18
View File
@@ -30,7 +30,7 @@
<object name="summaryText"
type="text"
size="50 16 100%-50 100%-16"
size="0 16 33% 100%-16"
font="sans-bold-18"
textcolor="255 255 255"
text_align="left"
@@ -39,7 +39,7 @@
<object name="timeElapsed"
type="text"
size="50 16 100%-50 100%-16"
size="67% 16 100% 100%-16"
font="sans-bold-18"
textcolor="255 255 255"
text_align="right"
@@ -48,7 +48,7 @@
<object name="mapName"
type="text"
size="50 16 100%-50 100%-16"
size="34% 16 66% 100%-16"
font="sans-bold-18"
textcolor="255 255 255"
text_align="center"
@@ -73,21 +73,21 @@
<object name="titleHeading[x]" type="text" style="ModernTopLabelText"/>
</repeat>
<repeat var="x" count="9">
<object name="Heading[x]" type="text" style="ModernTopLabelText"/>
<object name="Heading[x]" type="text" style="ModernLabelText"/>
</repeat>
</object>
<repeat count="4" var="i">
<object type="image" name="teamBoxt[i]" size="0 65 100% 100%-50" hidden="true">
<object type="image" name="teamBoxt[i]" size="0 70 100% 100%-50" hidden="true">
<object type="text" name="teamNameHeadingt[i]" size="15 5 100% 100%" style="ModernLeftTopLabelText"/>
<object size="0 30 100% 100%">
<repeat count="8" var="n">
<object type="image" name="playerBoxt[i][n]" size="10 0 10 30" hidden="true">
<object name="playerOutcomet[i][n]" type="image" size="4 5 36 37"/>
<object name="playerNamet[i][n]" type="text" size="46 2 214 100%" style="ModernLeftLabelText"/>
<object name="civIcont[i][n]" type="image" size="214 5 246 37" />
<object name="playerNamet[i][n]" type="text" size="40 2 210 100%" style="ModernLeftLabelText"/>
<object name="civIcont[i][n]" type="image" size="210 5 242 37" />
<repeat var="x" count="9">
<object name="valueDataTeam[i][n][x]" type="text" style="ModernTopLabelText"/>
<object name="valueDataTeam[i][n][x]" type="text" style="ModernLabelText"/>
</repeat>
</object>
</repeat>
@@ -99,20 +99,20 @@
</object>
</repeat>
<object type="image" name="noTeamsBox" size="0 65 100% 100%-50" hidden="true">
<object type="image" name="noTeamsBox" size="0 70 100% 100%-50" hidden="true">
<repeat count="8">
<object type="image" name="playerBox[n]" size="10 0 10 30" hidden="true">
<object name="playerOutcome[n]" type="image" size="4 5 36 37"/>
<object name="playerName[n]" type="text" size="46 2 214 100%" style="ModernLeftLabelText"/>
<object name="civIcon[n]" type="image" size="214 5 246 37"/>
<object name="playerName[n]" type="text" size="40 2 210 100%" style="ModernLeftLabelText"/>
<object name="civIcon[n]" type="image" size="210 5 242 37"/>
<repeat var="x" count="9">
<object name="valueData[n][x]" type="text" style="ModernTopLabelText"/>
<object name="valueData[n][x]" type="text" style="ModernLabelText"/>
</repeat>
</object>
</repeat>
</object>
</object>
<object name="chartsPanel" type="image" sprite="ModernTabHorizontalFrame" size="20 120 100%-20 100%-54">
<repeat count="2" var="k">
<object name="chart[k]Part" size="15 0 50%-10 100%-35">
@@ -122,7 +122,7 @@
<object name="chart[k]CategorySelection"
type="dropdown"
style="ModernDropDown"
size="5 28 145 52">
size="5 28 145 56">
<translatableAttribute id="tooltip" context="summary chart">Category</translatableAttribute>
</object>
@@ -132,7 +132,7 @@
<object name="chart[k]ValueSelection"
type="dropdown"
style="ModernDropDown"
size="155 28 295 52">
size="155 28 295 56">
<translatableAttribute id="tooltip" context="summary chart">Value</translatableAttribute>
</object>
@@ -143,12 +143,12 @@
type="dropdown"
style="ModernDropDown"
hidden="true"
size="305 28 445 52">
size="305 28 445 56">
<translatableAttribute id="tooltip" context="summary chart">Type</translatableAttribute>
</object>
<object type="image" sprite="color: 255 255 255 20" size="0 75 100% 100%"/>
<object name="chart[k]" type="chart" style="ModernChart" format_x="DURATION_SHORT" format_y="INTEGER" size="5 80 100%-5 100%-25"/>
<object type="image" sprite="color: 255 255 255 20" size="0 80 100% 100%"/>
<object name="chart[k]" type="chart" style="ModernChart" format_x="DURATION_SHORT" format_y="INTEGER" size="5 85 100%-5 100%-25"/>
<object name="chart[k]XAxisLabel" type="text" style="ModernLabelText" size="5 100%-25 100%-5 100%-5"/>
</object>
</repeat>