refactor(match2): use grid layout for ban table

lua/wikis/commons/MatchSummary/Base.lua

@@ -313,7 +313,7 @@ end
 
 ---@param mapVetoes table
 ---@param options {game: string?, emptyMapDisplay: string?}?
----@return {firstVeto: integer?, vetoFormat: string?, vetoRounds: table[]}?
+---@return MapVetoProps?
 function MatchSummary.preProcessMapVeto(mapVetoes, options)
 	if Logic.isEmpty(mapVetoes) then
 		return

lua/wikis/commons/Widget/Match/Summary/Character.lua

@@ -9,37 +9,33 @@ local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
 local CharacterIcon = Lua.import('Module:CharacterIcon')
-local Class = Lua.import('Module:Class')
 
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local Div = HtmlWidgets.Div
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
+local Div = Html.Div
 
----@class MatchSummaryCharacter: Widget
----@operator call(table): MatchSummaryCharacter
-local MatchSummaryCharacter = Class.new(Widget)
-
-MatchSummaryCharacter.defaultProps = {
+local defaultProps = {
 	showName = false,
 	flipped = false,
 }
 
----@return Widget[]?
-function MatchSummaryCharacter:render()
+---@param props {character: string, date: string?, size: string?, showName: boolean?, bg: string?, flipped: boolean?}
+---@return VNode?
+local function MatchSummaryCharacter(props)
 	local characterIcon = CharacterIcon.Icon{
-		character = self.props.character,
-		date = self.props.date,
-		size = self.props.size
+		character = props.character,
+		date = props.date,
+		size = props.size
 	}
 	local children = { characterIcon }
-	if self.props.showName then
-		children = {characterIcon, ' ', self.props.character}
+	if props.showName then
+		children = {characterIcon, ' ', props.character}
 	end
 
 	return Div{
-		classes = {self.props.bg},
-		children = self.props.flipped and Array.reverse(children) or children
+		classes = {props.bg},
+		children = props.flipped and Array.reverse(children) or children
 	}
 end
 
-return MatchSummaryCharacter
+return Component.component(MatchSummaryCharacter, defaultProps)

lua/wikis/commons/Widget/Match/Summary/CharacterBanTable.lua

@@ -8,38 +8,35 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 local Logic = Lua.import('Module:Logic')
 
 local Icon = Lua.import('Module:Icon')
 
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local Tr, Th, Td = HtmlWidgets.Tr, HtmlWidgets.Th, HtmlWidgets.Td
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
+local Div = Html.Div
 local Characters = Lua.import('Module:Widget/Match/Summary/Characters')
-local Collapsible = Lua.import('Module:Widget/Match/Summary/Collapsible')
+local GeneralCollapsible = Lua.import('Module:Widget/GeneralCollapsible/Default')
 local WidgetUtil = Lua.import('Module:Widget/Util')
 
----@class MatchSummaryCharacterBanTable: Widget
----@operator call(table): MatchSummaryCharacterBanTable
-local MatchSummaryCharacterBanTable = Class.new(Widget)
-MatchSummaryCharacterBanTable.defaultProps = {
+local defaultProps = {
 	flipped = false,
 }
 
 local ICONS = {
 	left = Icon.makeIcon{iconName = 'startleft', size = '110%'},
 	right = Icon.makeIcon{iconName = 'startright', size = '110%'},
-	empty = '[[File:NoCheck.png|link=|16px]]',
+	empty = Html.Span{},
 }
 
----@return Widget[]?
-function MatchSummaryCharacterBanTable:render()
-	if Logic.isDeepEmpty(self.props.bans) then
+---@param props {bans: {[1]: string[]?, [2]: string[]?, start: integer?}[], date: string?}
+---@return VNode?
+local function MatchSummaryCharacterBanTable(props)
+	if Logic.isDeepEmpty(props.bans) then
 		return nil
 	end
 
-	local hasStartIndicator = Array.any(self.props.bans, function(banData)
+	local hasStartIndicator = Array.any(props.bans, function(banData)
 		return Logic.isNotEmpty(banData.start)
 	end)
 
@@ -55,55 +52,33 @@ function MatchSummaryCharacterBanTable:render()
 		return ICONS.right
 	end
 
-	local rows = Array.map(self.props.bans, function(banData, gameNumber)
-		if Logic.isDeepEmpty(banData) then
-			return nil
-		end
-		return Tr{
-			classes = {'brkts-popup-mapveto__ban-round'},
-			children = WidgetUtil.collect(
-				Td{
-					classes = {'brkts-popup-mapveto__ban-round-picks'},
-					children = {Characters{characters = banData[1], flipped = false, date = self.props.date}}
-				},
-				hasStartIndicator and Td{
-					children = {startIndicator(1, banData.start)}
-				} or nil,
-				Td{
-					classes = {'brkts-popup-mapveto__ban-round-title'},
-					children = {'Game ' .. gameNumber},
-				},
-				hasStartIndicator and Td{
-					children = {startIndicator(2, banData.start)}
-				} or nil,
-				Td{
-					classes = {'brkts-popup-mapveto__ban-round-picks'},
-					children = {Characters{characters = banData[2], flipped = true, date = self.props.date}}
-				}
-			),
-		}
-	end)
-
-	return Collapsible{
-		tableClasses = {},
-		header =
-			Tr{
+	return GeneralCollapsible{
+		classes = {'brkts-popup-veto-wrapper', hasStartIndicator and 'veto-indicator' or nil},
+		shouldCollapse = true,
+		collapseAreaClasses = {'brkts-popup-veto'},
+		titleClasses = {'brkts-popup-veto-header'};
+		title = 'Bans',
+		children = Array.map(props.bans, function(banData, gameNumber)
+			if Logic.isDeepEmpty(banData) then
+				return nil
+			end
+			return Div{
+				classes = {'brkts-popup-veto-row'},
 				children = WidgetUtil.collect(
-				Th{
-					classes = {'brkts-popup-mapveto__header-fill'},
-				},
-				hasStartIndicator and Th{} or nil,
-				Th{
-					classes = {'brkts-popup-mapveto__header-title'},
-					children = {'Bans'}
-				},
-				hasStartIndicator and Th{} or nil,
-				Th{
-					classes = {'brkts-popup-mapveto__header-fill'},
-				}
-		)},
-		children = rows,
+					Characters{characters = banData[1], flipped = false, date = props.date},
+					Div{
+						classes = {'brkts-popup-veto-row-indicator'},
+						children = WidgetUtil.collect(
+							hasStartIndicator and startIndicator(1, banData.start) or nil,
+							'Game ' .. gameNumber,
+							hasStartIndicator and startIndicator(2, banData.start) or nil
+						)
+					},
+					Characters{characters = banData[2], flipped = true, date = props.date}
+				),
+			}
+		end)
 	}
 end
 
-return MatchSummaryCharacterBanTable
+return Component.component(MatchSummaryCharacterBanTable, defaultProps)

lua/wikis/commons/Widget/Match/Summary/Characters.lua

@@ -8,51 +8,57 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
-local Div = HtmlWidgets.Div
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
+local Div = Html.Div
 local Character = Lua.import('Module:Widget/Match/Summary/Character')
 
 local BASE_SIZE = 24 -- From brkts-champion-icon in Brackets.less
 local HOVER_MODIFIER = 2.5 -- From brkts-champion-icon in Brackets.less
 
----@class MatchSummaryCharacters: Widget
----@operator call(table): MatchSummaryCharacters
-local MatchSummaryCharacters = Class.new(Widget)
-MatchSummaryCharacters.defaultProps = {
+---@class MatchSummaryCharactersProps
+---@field characters string[]?
+---@field flipped boolean?
+---@field date string?
+---@field bg string?
+---@field hideOnMobile boolean?
+---@field css table<string, string|number?>?
+---@field size number?
+
+local defaultProps = {
 	flipped = false,
 	hideOnMobile = false,
 	size = BASE_SIZE * HOVER_MODIFIER,
 }
 
----@return Widget[]?
-function MatchSummaryCharacters:render()
-	if not self.props.characters then
+---@param props MatchSummaryCharactersProps
+---@return VNode?
+local function MatchSummaryCharacters(props)
+	if not props.characters then
 		return nil
 	end
-	local flipped = self.props.flipped
+	local flipped = props.flipped
 
 	return Div{
 		classes = Array.extend(
 			'brkts-popup-body-element-thumbs',
 			'brkts-champion-icon',
 			flipped and 'brkts-popup-body-element-thumbs-right' or nil,
-			self.props.hideOnMobile and 'mobile-hide' or nil
+			props.hideOnMobile and 'mobile-hide' or nil
 		),
-		css = self.props.css,
-		children = Array.map(self.props.characters, function(character)
+		css = props.css,
+		children = Array.map(props.characters, function(character)
 			return Character{
 				character = character,
-				date = self.props.date,
-				bg = self.props.bg,
-				showName = #self.props.characters == 1,
+				date = props.date,
+				bg = props.bg,
+				showName = #props.characters == 1,
 				flipped = flipped,
-				size = self.props.size .. 'px',
+				size = props.size .. 'px',
 			}
 		end)
 	}
 end
 
-return MatchSummaryCharacters
+return Component.component(MatchSummaryCharacters, defaultProps)

lua/wikis/commons/Widget/Match/Summary/MapVeto.lua

@@ -8,42 +8,39 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 local Logic = Lua.import('Module:Logic')
 
-local Widget = Lua.import('Module:Widget')
+local Component = Lua.import('Module:Widget/Component')
 local WidgetUtil = Lua.import('Module:Widget/Util')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local GeneralCollapsible = Lua.import('Module:Widget/GeneralCollapsible/Default')
 local MapVetoStart = Lua.import('Module:Widget/Match/Summary/MapVetoStart')
 local MapVetoRound = Lua.import('Module:Widget/Match/Summary/MapVetoRound')
 
----@class MatchSummaryMapVeto: Widget
----@operator call(table): MatchSummaryMapVeto
-local MatchSummaryMapVeto = Class.new(Widget)
+---@class MapVetoProps
+---@field vetoFormat string
+---@field firstVeto integer?
+---@field vetoRounds {type: VetoTypes, map1: VetoMap?, map2: VetoMap?}[]
 
----@return Widget?
-function MatchSummaryMapVeto:render()
-	if Logic.isEmpty(self.props.vetoRounds) then
+---@param props MapVetoProps
+---@return VNode?
+local function MatchSummaryMapVeto(props)
+	if Logic.isEmpty(props.vetoRounds) then
 		return
 	end
 
-	return HtmlWidgets.Div{
-		classes = {'brkts-popup-mapveto'},
-		children = HtmlWidgets.Table{
-			classes = {'wikitable-striped', 'collapsible', 'collapsed'},
-			children = WidgetUtil.collect(
-				HtmlWidgets.Tr{children = {
-					HtmlWidgets.Th{css = {width = '33%'}},
-					HtmlWidgets.Th{css = {width = '34%', ['text-align'] = 'center'}, children = 'Map Veto'},
-					HtmlWidgets.Th{css = {width = '33%'}},
-				}},
-				MapVetoStart{firstVeto = self.props.firstVeto, vetoFormat = self.props.vetoFormat},
-				Array.map(self.props.vetoRounds, function(veto)
-					return MapVetoRound{vetoType = veto.type, map1 = veto.map1, map2 = veto.map2}
-				end)
-			)
-		}
+	return GeneralCollapsible{
+		classes = {'brkts-popup-veto-wrapper'},
+		shouldCollapse = true,
+		collapseAreaClasses = {'brkts-popup-veto'},
+		titleClasses = {'brkts-popup-veto-header'};
+		title = 'Map Veto',
+		children = WidgetUtil.collect(
+			MapVetoStart{firstVeto = props.firstVeto, vetoFormat = props.vetoFormat},
+			Array.map(props.vetoRounds, function(veto)
+				return MapVetoRound{vetoType = veto.type, map1 = veto.map1, map2 = veto.map2}
+			end)
+		)
 	}
 end
 
-return MatchSummaryMapVeto
+return Component.component(MatchSummaryMapVeto)