feat(standings): use new table design in swiss standings

javascript/commons/ExportImage.js

@@ -83,7 +83,12 @@ const EXPORT_IMAGE_CONFIG = {
 			typeName: 'Participants'
 		},
 		{ selector: '.standings-ffa', targetSelector: 'tbody', typeName: 'BR/FFA Standings Table' },
-		{ selector: '.standings-swiss', targetSelector: 'tbody', typeName: 'Swiss Standings Table' },
+		{
+			selector: '.table2.standings-swiss',
+			targetSelector: 'table.table2__table',
+			titleSelector: '.table2__title',
+			typeName: 'Swiss Standings Table'
+		},
 		{
 			selector: '.table2#MvpTable',
 			targetSelector: '.table2__container',

lua/wikis/commons/Widget/Basic/Label.lua

@@ -13,6 +13,7 @@ local Widget = Lua.import('Module:Widget')
 local HtmlWidgets = Lua.import('Module:Widget/Html/All')
 
 ---@class GenericLabelProps
+---@field attributes table<string, string>?
 ---@field css table<string, string|number>?
 ---@field children Renderable|Renderable[]
 ---@field labelScheme string?
@@ -31,10 +32,13 @@ function GenericLabel:render()
 		props.css = props.css or {}
 		props.css['--label-scale'] = props.labelScale
 	end
+	if props.labelType then
+		props.attributes = props.attributes or {}
+		props.attributes['data-label-type'] = props.labelType
+	end
+
 	return HtmlWidgets.Div{
-		attributes = props.labelType and {
-			['data-label-type'] = props.labelType
-		} or nil,
+		attributes = props.attributes,
 		classes = {
 			'generic-label',
 			props.labelScheme and ('label--' .. props.labelScheme) or nil,

lua/wikis/commons/Widget/Standings/MatchOverview.lua

@@ -9,19 +9,26 @@ local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
 local Class = Lua.import('Module:Class')
+local FnUtil = Lua.import('Module:FnUtil')
 
 local Widget = Lua.import('Module:Widget')
 local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Label = Lua.import('Module:Widget/Basic/Label')
+local WidgetUtil = Lua.import('Module:Widget/Util')
 
 local OpponentDisplay = Lua.import('Module:OpponentDisplay/Custom')
 
+---@class MatchOverviewWidgetProps
+---@field match MatchGroupUtilMatch
+---@field showOpponent integer
+
 ---@class MatchOverviewWidget: Widget
----@operator call(table): MatchOverviewWidget
+---@operator call(MatchOverviewWidgetProps): MatchOverviewWidget
+---@field props MatchOverviewWidgetProps
 local MatchOverviewWidget = Class.new(Widget)
 
 ---@return Widget?
 function MatchOverviewWidget:render()
-	---@type MatchGroupUtilMatch
 	local match = self.props.match
 	local opponentIndexToShow = tonumber(self.props.showOpponent)
 	if not match or not opponentIndexToShow or #match.opponents ~= 2 then
@@ -40,30 +47,73 @@ function MatchOverviewWidget:render()
 
 	return HtmlWidgets.Div{
 		css = {
-			['display'] = 'flex',
+			display = 'flex',
 			['justify-content'] = 'space-between',
 			['flex-direction'] = 'column',
 			['align-items'] = 'center',
+			gap = '0.25rem',
 		},
-		children = {
-			HtmlWidgets.Span{
-				children = OpponentDisplay.BlockOpponent{
-					opponent = opponentToShow,
-					overflow = 'ellipsis',
-					teamStyle = 'icon',
-				}
-			},
-			HtmlWidgets.Span{
-				css = {
-					['font-size'] = '0.8em',
-				},
-				children = {
-					OpponentDisplay.InlineScore(leftOpponent),
-					' - ',
-					OpponentDisplay.InlineScore(opponentToShow),
-				},
-			},
+		children = WidgetUtil.collect(
+			self:_createResultDisplay(
+				OpponentDisplay.InlineScore(leftOpponent),
+				OpponentDisplay.InlineScore(opponentToShow)
+			),
+			OpponentDisplay.InlineOpponent{
+				opponent = opponentToShow,
+				overflow = 'ellipsis',
+				teamStyle = 'icon',
+			}
+		),
+	}
+end
+
+---@private
+---@param self MatchOverviewWidget
+---@return string
+MatchOverviewWidget._getMatchResultType = FnUtil.memoize(function (self)
+	local match = self.props.match
+	local opponentIndexToShow = tonumber(self.props.showOpponent)
+
+	if match.phase == 'ongoing' then
+		return 'default'
+	elseif match.winner == opponentIndexToShow then
+		return 'loss'
+	elseif match.winner == 0 then
+		return 'draw'
+	end
+	return 'win'
+end)
+
+---@private
+---@param leftScore string
+---@param rightScore string
+---@return Widget[]
+function MatchOverviewWidget:_createScoreContainer(leftScore, rightScore)
+	local resultType = self:_getMatchResultType()
+	return {
+		HtmlWidgets.Span{
+			css = resultType == 'win' and {['font-weight'] = 'bold'} or nil,
+			children = leftScore
 		},
+		HtmlWidgets.Span{children = ':'},
+		HtmlWidgets.Span{
+			css = resultType == 'loss' and {['font-weight'] = 'bold'} or nil,
+			children = rightScore
+		}
+	}
+end
+
+---@private
+---@return Widget?
+function MatchOverviewWidget:_createResultDisplay(leftScore, rightScore)
+	if self.props.match.phase == 'upcoming' then
+		return
+	end
+	local resultType = self:_getMatchResultType()
+	return Label{
+		labelScheme = 'standings-result',
+		labelType = 'result-' .. resultType,
+		children = self:_createScoreContainer(leftScore, rightScore)
 	}
 end