refactor(match2): standardize match comments (#4956)

* refactor(match2): match comments

* Update components/widget/match/summary/widget_match_summary_all.lua

Co-authored-by: hjpalpha <[email protected]>

* spelling is good

* style typo

* update smokes, order of inline-css can change when transitining to widget

---------

Co-authored-by: hjpalpha <[email protected]>

components/match2/commons/match_summary_base.lua

@@ -19,6 +19,8 @@ local VodLink = require('Module:VodLink')
 
 local MatchGroupUtil = Lua.import('Module:MatchGroup/Util')
 local Links =  Lua.import('Module:Links')
+local MatchSummaryWidgets = Lua.import('Module:Widget/Match/Summary/All')
+local WidgetUtil = Lua.import('Module:Widget/Util')
 
 local OpponentLibraries = require('Module:OpponentLibraries')
 local Opponent = OpponentLibraries.Opponent
@@ -230,31 +232,6 @@ function Body:create()
 	return self.root
 end
 
----@class MatchSummaryComment
----@operator call: MatchSummaryComment
----@field root Html
-local Comment = Class.new(
-	function(self)
-		self.root = mw.html.create('div')
-			:addClass('brkts-popup-comment')
-			:css('white-space', 'normal')
-			:css('font-size', '85%')
-	end
-)
-
----@param content Html|string|number|nil
----@return MatchSummaryComment
-function Comment:content(content)
-	if Logic.isEmpty(content) then return self end
-	self.root:node(content):node(Break():create())
-	return self
-end
-
----@return Html
-function Comment:create()
-	return self.root
-end
-
 ---@class MatchSummaryFooter
 ---@operator call: MatchSummaryFooter
 ---@field root Html
@@ -333,7 +310,7 @@ end
 ---@field root Html
 ---@field headerElement Html?
 ---@field bodyElement Widget|Html?
----@field commentElement Html?
+---@field commentElement Widget?
 ---@field footerElement Html?
 local Match = Class.new(
 	function(self)
@@ -361,10 +338,10 @@ function Match:body(body)
 	return self
 end
 
----@param comment MatchSummaryComment
+---@param comment Widget
 ---@return MatchSummaryMatch
 function Match:comment(comment)
-	self.commentElement = comment:create()
+	self.commentElement = comment
 	return self
 end
 
@@ -382,16 +359,9 @@ function Match:create()
 		:node(Break():create())
 		:node(self.bodyElement)
 		:node(Break():create())
-
-	if self.commentElement ~= nil then
-		self.root
-			:node(self.commentElement)
-			:node(Break():create())
-	end
-
-	if self.footerElement ~= nil then
-		self.root:node(self.footerElement)
-	end
+		:node(self.commentElement)
+		:node(Break():create())
+		:node(self.footerElement)
 
 	return self.root
 end
@@ -535,7 +505,6 @@ end
 ---@operator call(string?):MatchSummary
 ---@field Header MatchSummaryHeader
 ---@field Body MatchSummaryBody
----@field Comment MatchSummaryComment
 ---@field Row MatchSummaryRow
 ---@field Footer MatchSummaryFooter
 ---@field Break MatchSummaryBreak
@@ -548,7 +517,6 @@ end
 local MatchSummary = Class.new()
 MatchSummary.Header = Header
 MatchSummary.Body = Body
-MatchSummary.Comment = Comment
 MatchSummary.Row = Row
 MatchSummary.Footer = Footer
 MatchSummary.Break = Break
@@ -725,10 +693,10 @@ function MatchSummary.createMatch(matchData, CustomMatchSummary, options)
 
 	local substituteComment = MatchSummary.createSubstitutesComment(matchData)
 
-	if matchData.comment or substituteComment then
-		local comment = MatchSummary.Comment():content(matchData.comment):content(substituteComment)
-		match:comment(comment)
-	end
+	match:comment(MatchSummaryWidgets.MatchComment{
+		children = WidgetUtil.collect(matchData.comment, substituteComment)
+	})
+
 	local createFooter = CustomMatchSummary.addToFooter or MatchSummary.createDefaultFooter
 	match:footer(createFooter(matchData, MatchSummary.Footer()))
 

components/match2/wikis/counterstrike/match_summary.lua

@@ -18,6 +18,7 @@ local VodLink = require('Module:VodLink')
 
 local DisplayHelper = Lua.import('Module:MatchGroup/Display/Helper')
 local MatchSummary = Lua.import('Module:MatchSummary/Base')
+local MatchSummaryWidgets = Lua.import('Module:Widget/Match/Summary/All')
 
 local GREEN_CHECK = Icon.makeIcon{iconName = 'winner', color = 'forest-green-text', size = '110%'}
 local NO_CHECK = '[[File:NoCheck.png|link=]]'
@@ -118,31 +119,6 @@ function MapVeto:displayMap(map)
 	return Logic.nilIfEmpty(CustomMatchSummary._createMapLink(map, self.game)) or TBD
 end
 
----@class CounterstrikeMatchStatus: MatchSummaryRowInterface
----@operator call: CounterstrikeMatchStatus
----@field root Html
-local MatchStatus = Class.new(
-	function(self)
-		self.root = mw.html.create('div')
-		self.root
-			:addClass('brkts-popup-comment')
-			:css('white-space', 'normal')
-			:css('font-size', '85%')
-	end
-)
-
----@param content string|number|Html|nil
----@return self
-function MatchStatus:content(content)
-	self.root:node(content):node(MatchSummary.Break():create())
-	return self
-end
-
----@return Html
-function MatchStatus:create()
-	return self.root
-end
-
 ---@param args table
 ---@return Html
 function CustomMatchSummary.getByMatchId(args)
@@ -201,9 +177,9 @@ function CustomMatchSummary.createBody(match)
 
 	-- Match Status (postponed/ cancel(l)ed)
 	if match.extradata.status then
-		local matchStatus = MatchStatus()
-		matchStatus:content('<b>Match ' .. mw.getContentLanguage():ucfirst(match.extradata.status) .. '</b>')
-		body:addRow(matchStatus)
+		body.root:node(MatchSummaryWidgets.MatchComment{
+			children = '<b>Match ' .. mw.getContentLanguage():ucfirst(match.extradata.status) .. '</b>'
+		})
 	end
 
 	return body

components/match2/wikis/criticalops/match_group_input_custom.lua

@@ -148,7 +148,6 @@ end
 function MatchFunctions.getExtraData(match)
 	return {
 		mapveto = MatchGroupInputUtil.getMapVeto(match),
-		status = match.resulttype == MatchGroupInputUtil.RESULT_TYPE.NOT_PLAYED and match.status or nil,
 	}
 end
 

components/match2/wikis/criticalops/match_summary.lua

@@ -98,31 +98,6 @@ function Score:create()
 	return self.root
 end
 
----@class CriticalopsMatchStatus: MatchSummaryRowInterface
----@operator call: CriticalopsMatchStatus
----@field root Html
-local MatchStatus = Class.new(
-	function(self)
-		self.root = mw.html.create('div')
-		self.root
-			:addClass('brkts-popup-comment')
-			:css('white-space', 'normal')
-			:css('font-size', '85%')
-	end
-)
-
----@param content Html|string|number|nil
----@return CriticalopsMatchStatus
-function MatchStatus:content(content)
-	self.root:node(content):node(MatchSummary.Break():create())
-	return self
-end
-
----@return Html
-function MatchStatus:create()
-	return self.root
-end
-
 local CustomMatchSummary = {}
 
 ---@param args table
@@ -155,13 +130,6 @@ function CustomMatchSummary.createBody(match)
 	-- Add the Map Vetoes
 	body:addRow(MatchSummary.defaultMapVetoDisplay(match))
 
-	-- Match Status (postponed/ cancel(l)ed)
-	if match.extradata.status then
-		local matchStatus = MatchStatus()
-		matchStatus:content('<b>Match ' .. mw.getContentLanguage():ucfirst(match.extradata.status) .. '</b>')
-		body:addRow(matchStatus)
-	end
-
 	return body
 end
 

components/match2/wikis/zula/match_group_input_custom.lua

@@ -142,7 +142,6 @@ end
 ---@return table
 function MatchFunctions.getExtraData(match)
 	return {
-		status = match.resulttype == MatchGroupInputUtil.RESULT_TYPE.NOT_PLAYED and match.status or nil,
 		mapveto = MatchGroupInputUtil.getMapVeto(match),
 	}
 end

components/match2/wikis/zula/match_summary.lua

@@ -98,31 +98,6 @@ function Score:create()
 	return self.root
 end
 
----@class ZulaMatchStatus: MatchSummaryRowInterface
----@operator call: ZulaMatchStatus
----@field root Html
-local MatchStatus = Class.new(
-	function(self)
-		self.root = mw.html.create('div')
-		self.root
-			:addClass('brkts-popup-comment')
-			:css('white-space', 'normal')
-			:css('font-size', '85%')
-	end
-)
-
----@param content Html|string|number|nil
----@return ZulaMatchStatus
-function MatchStatus:content(content)
-	self.root:node(content):node(MatchSummary.Break():create())
-	return self
-end
-
----@return Html
-function MatchStatus:create()
-	return self.root
-end
-
 local CustomMatchSummary = {}
 
 ---@param args table
@@ -155,13 +130,6 @@ function CustomMatchSummary.createBody(match)
 	-- Add the Map Vetoes
 	body:addRow(MatchSummary.defaultMapVetoDisplay(match))
 
-	-- Match Status (postponed/ cancel(l)ed)
-	if match.extradata.status then
-		local matchStatus = MatchStatus()
-		matchStatus:content('<b>Match ' .. mw.getContentLanguage():ucfirst(match.extradata.status) .. '</b>')
-		body:addRow(matchStatus)
-	end
-
 	return body
 end
 

components/widget/match/summary/widget_match_summary_all.lua

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

components/widget/match/summary/widget_match_summary_match_comment.lua

@@ -0,0 +1,37 @@
+---
+-- @Liquipedia
+-- wiki=commons
+-- page=Module:Widget/Match/Summary/MatchComment
+--
+-- Please see https://github.com/Liquipedia/Lua-Modules to contribute
+--
+
+local Array = require('Module:Array')
+local Class = require('Module:Class')
+local Logic = require('Module:Logic')
+local Lua = require('Module:Lua')
+
+local Widget = Lua.import('Module:Widget')
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Break = Lua.import('Module:Widget/Match/Summary/Break')
+
+---@class MatchSummaryMatchMatchComment: Widget
+---@operator call(table): MatchSummaryMatchMatchComment
+local MatchSummaryMatchMatchComment = Class.new(Widget)
+
+---@return Widget?
+function MatchSummaryMatchMatchComment:render()
+	if Logic.isEmpty(self.props.children) then
+		return
+	end
+
+	return HtmlWidgets.Div{
+		classes = {'brkts-popup-comment'},
+		css = {['font-size'] = '85%', ['white-space'] = 'normal'},
+		children = Array.flatMap(self.props.children, function (child)
+			return {child, Break{}}
+		end)
+	}
+end
+
+return MatchSummaryMatchMatchComment

spec/golden_masters/match2_matchlist_smoke_counterstrike.txt

@@ -1 +1 @@
-<div class="brkts-matchlist brkts-matchlist-collapsible" style="width:300px"><div class="brkts-matchlist-title" style="overflow-wrap:break-word;white-space:normal">Match List</div><div class="brkts-matchlist-match brkts-match-has-details brkts-match-popup-wrapper"><div class="brkts-matchlist-cell brkts-matchlist-opponent brkts-matchlist-slot-winner brkts-opponent-hover" aria-label="abc"><div class="block-players-wrapper brkts-matchlist-cell-content"><div class="block-player flipped"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">A</span></div></div></div><div class="brkts-matchlist-cell brkts-matchlist-score brkts-matchlist-slot-bold brkts-opponent-hover" aria-label="abc"><div class="brkts-matchlist-cell-content">3</div></div><div class="brkts-match-info-icon"></div><div class="brkts-matchlist-cell brkts-matchlist-score brkts-opponent-hover" aria-label="B"><div class="brkts-matchlist-cell-content">2</div></div><div class="brkts-matchlist-cell brkts-matchlist-opponent brkts-opponent-hover" aria-label="B"><div class="block-players-wrapper brkts-matchlist-cell-content"><div class="block-player"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">B</span></div></div></div><div class="brkts-popup brkts-match-info-popup"><div class="brkts-popup-header-dev" style="justify-content:center"><div class="brkts-popup-header-opponent brkts-popup-header-opponent-left"><div class="block-players-wrapper"><div class="block-player flipped"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[abc|A]]</span></div></div><div class="brkts-popup-header-opponent-score-left"><b>3</b></div></div><div class="brkts-popup-header-opponent brkts-popup-header-opponent-right"><div class="brkts-popup-header-opponent-score-right">2</div><div class="block-players-wrapper"><div class="block-player"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[B|B]]</span></div></div></div></div><div class="brkts-popup-break"></div><div class="brkts-popup-body"><div class="brkts-popup-body-element"><div class="match-countdown-block" style="text-align:center;display:block"></div></div></div><div class="brkts-popup-break"></div><div class="brkts-popup-comment" style="white-space:normal;font-size:85%">A Match Comment<div class="brkts-popup-break"></div></div><div class="brkts-popup-break"></div></div></div></div>
+<div class="brkts-matchlist brkts-matchlist-collapsible" style="width:300px"><div class="brkts-matchlist-title" style="overflow-wrap:break-word;white-space:normal">Match List</div><div class="brkts-matchlist-match brkts-match-has-details brkts-match-popup-wrapper"><div class="brkts-matchlist-cell brkts-matchlist-opponent brkts-matchlist-slot-winner brkts-opponent-hover" aria-label="abc"><div class="block-players-wrapper brkts-matchlist-cell-content"><div class="block-player flipped"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">A</span></div></div></div><div class="brkts-matchlist-cell brkts-matchlist-score brkts-matchlist-slot-bold brkts-opponent-hover" aria-label="abc"><div class="brkts-matchlist-cell-content">3</div></div><div class="brkts-match-info-icon"></div><div class="brkts-matchlist-cell brkts-matchlist-score brkts-opponent-hover" aria-label="B"><div class="brkts-matchlist-cell-content">2</div></div><div class="brkts-matchlist-cell brkts-matchlist-opponent brkts-opponent-hover" aria-label="B"><div class="block-players-wrapper brkts-matchlist-cell-content"><div class="block-player"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">B</span></div></div></div><div class="brkts-popup brkts-match-info-popup"><div class="brkts-popup-header-dev" style="justify-content:center"><div class="brkts-popup-header-opponent brkts-popup-header-opponent-left"><div class="block-players-wrapper"><div class="block-player flipped"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[abc|A]]</span></div></div><div class="brkts-popup-header-opponent-score-left"><b>3</b></div></div><div class="brkts-popup-header-opponent brkts-popup-header-opponent-right"><div class="brkts-popup-header-opponent-score-right">2</div><div class="block-players-wrapper"><div class="block-player"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[B|B]]</span></div></div></div></div><div class="brkts-popup-break"></div><div class="brkts-popup-body"><div class="brkts-popup-body-element"><div class="match-countdown-block" style="text-align:center;display:block"></div></div></div><div class="brkts-popup-break"></div><div class="brkts-popup-comment" style="font-size:85%;white-space:normal">A Match Comment<div class="brkts-popup-break"></div></div><div class="brkts-popup-break"></div></div></div></div>

spec/golden_masters/match2_matchlist_smoke_dota2.txt

@@ -1 +1 @@
-<div class="brkts-matchlist brkts-matchlist-collapsible" style="width:300px"><div class="brkts-matchlist-title" style="overflow-wrap:break-word;white-space:normal">Match List</div><div class="brkts-matchlist-match brkts-match-has-details brkts-match-popup-wrapper"><div class="brkts-matchlist-cell brkts-matchlist-opponent brkts-matchlist-slot-winner brkts-opponent-hover" aria-label="abc"><div class="block-players-wrapper brkts-matchlist-cell-content"><div class="block-player flipped"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">A</span></div></div></div><div class="brkts-matchlist-cell brkts-matchlist-score brkts-matchlist-slot-bold brkts-opponent-hover" aria-label="abc"><div class="brkts-matchlist-cell-content">3</div></div><div class="brkts-match-info-icon"></div><div class="brkts-matchlist-cell brkts-matchlist-score brkts-opponent-hover" aria-label="B"><div class="brkts-matchlist-cell-content">2</div></div><div class="brkts-matchlist-cell brkts-matchlist-opponent brkts-opponent-hover" aria-label="B"><div class="block-players-wrapper brkts-matchlist-cell-content"><div class="block-player"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">B</span></div></div></div><div class="brkts-popup brkts-match-info-popup" style="width:400px"><div class="brkts-popup-header-dev" style="justify-content:center"><div class="brkts-popup-header-opponent brkts-popup-header-opponent-left"><div class="block-players-wrapper"><div class="block-player flipped"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[abc|A]]</span></div></div><div class="brkts-popup-header-opponent-score-left"><b>3</b></div></div><div class="brkts-popup-header-opponent brkts-popup-header-opponent-right"><div class="brkts-popup-header-opponent-score-right">2</div><div class="block-players-wrapper"><div class="block-player"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[B|B]]</span></div></div></div></div><div class="brkts-popup-break"></div><div class="brkts-popup-body"><div class="brkts-popup-body-element"><div class="match-countdown-block" style="text-align:center;display:block"></div></div></div><div class="brkts-popup-break"></div><div class="brkts-popup-comment" style="white-space:normal;font-size:85%">A Match Comment<div class="brkts-popup-break"></div></div><div class="brkts-popup-break"></div></div></div></div>
+<div class="brkts-matchlist brkts-matchlist-collapsible" style="width:300px"><div class="brkts-matchlist-title" style="overflow-wrap:break-word;white-space:normal">Match List</div><div class="brkts-matchlist-match brkts-match-has-details brkts-match-popup-wrapper"><div class="brkts-matchlist-cell brkts-matchlist-opponent brkts-matchlist-slot-winner brkts-opponent-hover" aria-label="abc"><div class="block-players-wrapper brkts-matchlist-cell-content"><div class="block-player flipped"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">A</span></div></div></div><div class="brkts-matchlist-cell brkts-matchlist-score brkts-matchlist-slot-bold brkts-opponent-hover" aria-label="abc"><div class="brkts-matchlist-cell-content">3</div></div><div class="brkts-match-info-icon"></div><div class="brkts-matchlist-cell brkts-matchlist-score brkts-opponent-hover" aria-label="B"><div class="brkts-matchlist-cell-content">2</div></div><div class="brkts-matchlist-cell brkts-matchlist-opponent brkts-opponent-hover" aria-label="B"><div class="block-players-wrapper brkts-matchlist-cell-content"><div class="block-player"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">B</span></div></div></div><div class="brkts-popup brkts-match-info-popup" style="width:400px"><div class="brkts-popup-header-dev" style="justify-content:center"><div class="brkts-popup-header-opponent brkts-popup-header-opponent-left"><div class="block-players-wrapper"><div class="block-player flipped"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[abc|A]]</span></div></div><div class="brkts-popup-header-opponent-score-left"><b>3</b></div></div><div class="brkts-popup-header-opponent brkts-popup-header-opponent-right"><div class="brkts-popup-header-opponent-score-right">2</div><div class="block-players-wrapper"><div class="block-player"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[B|B]]</span></div></div></div></div><div class="brkts-popup-break"></div><div class="brkts-popup-body"><div class="brkts-popup-body-element"><div class="match-countdown-block" style="text-align:center;display:block"></div></div></div><div class="brkts-popup-break"></div><div class="brkts-popup-comment" style="font-size:85%;white-space:normal">A Match Comment<div class="brkts-popup-break"></div></div><div class="brkts-popup-break"></div></div></div></div>