feat(match2): standardize brawlstars display

components/match2/wikis/brawlstars/match_summary.lua

@@ -9,7 +9,6 @@
 local Array = require('Module:Array')
 local DateExt = require('Module:Date/Ext')
 local DisplayHelper = require('Module:MatchGroup/Display/Helper')
-local Logic = require('Module:Logic')
 local Lua = require('Module:Lua')
 local MapTypeIcon = require('Module:MapType')
 local Operator = require('Module:Operator')
@@ -19,12 +18,6 @@ local MatchSummaryWidgets = Lua.import('Module:Widget/Match/Summary/All')
 local MatchSummary = Lua.import('Module:MatchSummary/Base')
 local WidgetUtil = Lua.import('Module:Widget/Util')
 
-local GREEN_CHECK = '<i class="fa fa-check forest-green-text" style="width: 14px; text-align: center" ></i>'
-local ICONS = {
-	check = GREEN_CHECK,
-}
-local NO_CHECK = '[[File:NoCheck.png|link=]]'
-
 local CustomMatchSummary = {}
 
 ---@param args table
@@ -51,75 +44,36 @@ function CustomMatchSummary.createBody(match)
 	)}
 end
 
----@param game MatchGroupUtilGame
----@param opponentIndex integer
----@return Html
-function CustomMatchSummary._gameScore(game, opponentIndex)
-	local score = game.scores[opponentIndex]
-	local scoreDisplay = DisplayHelper.MapScore(score, opponentIndex, game.resultType, game.walkover, game.winner)
-	return mw.html.create('div'):wikitext(scoreDisplay)
-end
-
 ---@param game MatchGroupUtilGame
 ---@return Html?
 function CustomMatchSummary._createMapRow(game)
 	if not game.map then
 		return
 	end
 
-	local characterData = {
-		Array.map((game.opponents[1] or {}).players or {}, Operator.property('brawler')),
-		Array.map((game.opponents[2] or {}).players or {}, Operator.property('brawler')),
-	}
-
-	local row = MatchSummary.Row()
-
-	local centerNode = mw.html.create('div')
-		:addClass('brkts-popup-spaced')
-		:wikitext(CustomMatchSummary._getMapDisplay(game))
-		:css('text-align', 'center')
-
-	if game.resultType == 'np' then
-		centerNode:addClass('brkts-popup-spaced-map-skip')
-	end
-
-	local leftNode = mw.html.create('div')
-		:addClass('brkts-popup-spaced')
-		:node(MatchSummaryWidgets.Characters{
-			flipped = false,
-			characters = characterData[1],
-			bg = 'brkts-popup-side-color-blue', -- Team 1 is always blue
-		})
-		:node(CustomMatchSummary._createCheckMarkOrCross(game.winner == 1, 'check'))
-		:node(CustomMatchSummary._gameScore(game, 1))
-
-	local rightNode = mw.html.create('div')
-		:addClass('brkts-popup-spaced')
-		:node(CustomMatchSummary._gameScore(game, 2))
-		:node(CustomMatchSummary._createCheckMarkOrCross(game.winner == 2, 'check'))
-		:node(MatchSummaryWidgets.Characters{
-			flipped = true,
-			characters = characterData[2],
-			bg = 'brkts-popup-side-color-red', -- Team 2 is always red
-		})
-
-	row:addElement(leftNode)
-		:addElement(centerNode)
-		:addElement(rightNode)
-
-	row:addClass('brkts-popup-body-game')
-		:css('overflow', 'hidden')
-
-	-- Add Comment
-	if Logic.isNotEmpty(game.comment) then
-		row:addElement(MatchSummaryWidgets.Break{})
-		local comment = mw.html.create('div')
-			:wikitext(game.comment)
-			:css('margin', 'auto')
-		row:addElement(comment)
+	local function makeTeamSection(opponentIndex)
+		local characterData = Array.map((game.opponents[opponentIndex] or {}).players or {}, Operator.property('brawler'))
+		local teamColor = opponentIndex == 1 and 'blue' or 'red'
+		return {
+			MatchSummaryWidgets.Characters{
+				flipped = opponentIndex == 2,
+				characters = characterData,
+				bg = 'brkts-popup-side-color-' .. teamColor,
+			},
+			MatchSummaryWidgets.GameWinLossIndicator{winner = game.winner, opponentIndex = opponentIndex},
+			DisplayHelper.MapScore(game.scores[opponentIndex], opponentIndex, game.resultType, game.walkover, game.winner)
+		}
 	end
 
-	return row:create()
+	return MatchSummaryWidgets.Row{
+		classes = {'brkts-popup-body-game'},
+		children = WidgetUtil.collect(
+			MatchSummaryWidgets.GameTeamWrapper{children = makeTeamSection(1)},
+			MatchSummaryWidgets.GameCenter{children = CustomMatchSummary._getMapDisplay(game)},
+			MatchSummaryWidgets.GameTeamWrapper{children = makeTeamSection(2), flipped = true},
+			MatchSummaryWidgets.GameComment{children = game.comment}
+		)
+	}
 end
 
 ---@param game MatchGroupUtilGame
@@ -132,20 +86,4 @@ function CustomMatchSummary._getMapDisplay(game)
 	return mapDisplay
 end
 
----@param showIcon boolean
----@param iconType string
----@return Html
-function CustomMatchSummary._createCheckMarkOrCross(showIcon, iconType)
-	local container = mw.html.create('div')
-	container:addClass('brkts-popup-spaced'):css('line-height', '27px')
-
-	if showIcon then
-		container:node(ICONS[iconType])
-	else
-		container:node(NO_CHECK)
-	end
-
-	return container
-end
-
 return CustomMatchSummary

components/widget/match/summary/widget_match_summary_all.lua

@@ -19,6 +19,7 @@ Widgets.Character = Lua.import('Module:Widget/Match/Summary/Character')
 Widgets.Collapsible = Lua.import('Module:Widget/Match/Summary/Collapsible')
 Widgets.GameCenter = Lua.import('Module:Widget/Match/Summary/GameCenter')
 Widgets.GameComment = Lua.import('Module:Widget/Match/Summary/GameComment')
+Widgets.GameTeamWrapper = Lua.import('Module:Widget/Match/Summary/GameTeamWrapper')
 Widgets.GameWinLossIndicator = Lua.import('Module:Widget/Match/Summary/GameWinLossIndicator')
 Widgets.MapVeto = Lua.import('Module:Widget/Match/Summary/MapVeto')
 Widgets.MatchComment = Lua.import('Module:Widget/Match/Summary/MatchComment')

components/widget/match/summary/widget_match_summary_game_team_wrapper.lua

@@ -0,0 +1,31 @@
+---
+-- @Liquipedia
+-- wiki=commons
+-- page=Module:Widget/Match/Summary/GameTeamWrapper
+--
+-- Please see https://github.com/Liquipedia/Lua-Modules to contribute
+--
+
+local Array = require('Module:Array')
+local Class = require('Module:Class')
+local Lua = require('Module:Lua')
+
+local Widget = Lua.import('Module:Widget')
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+
+---@class MatchSummaryMatchGameTeamWrapper: Widget
+---@operator call(table): MatchSummaryMatchGameTeamWrapper
+local MatchSummaryMatchGameTeamWrapper = Class.new(Widget)
+MatchSummaryMatchGameTeamWrapper.defaultProps = {
+	flipped = false,
+}
+
+---@return Widget?
+function MatchSummaryMatchGameTeamWrapper:render()
+	return HtmlWidgets.Div{
+		classes = {'brkts-popup-spaced'},
+		children = self.props.flipped and Array.reverse(self.props.children) or self.props.children
+	}
+end
+
+return MatchSummaryMatchGameTeamWrapper