refactor: standings to widget3

lua/wikis/commons/Standings/Table.lua

@@ -1,3 +1,3 @@
 ---
 -- @Liquipedia
 -- page=Module:Standings/Table
@@ -37,7 +37,7 @@
 ---@field startingPoints number?
 
 ---@param frame Frame
----@return Widget
+---@return Renderable
 function StandingsTable.fromTemplate(frame)
 	local args = Arguments.getArgs(frame)
 	local tableType = args.tabletype

lua/wikis/commons/Widget/Standings/Ffa.lua

@@ -1,3 +1,3 @@
 ---
 -- @Liquipedia
 -- page=Module:Widget/Standings/Ffa
@@ -8,13 +8,12 @@
 local Lua = require('Module:Lua')
 
 local Array = Lua.import('Module:Array')
-local Class = Lua.import('Module:Class')
 local Logic = Lua.import('Module:Logic')
 local String = Lua.import('Module:StringUtils')
 
 local WidgetUtil = Lua.import('Module:Widget/Util')
-local Widget = Lua.import('Module:Widget')
-local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Component = Lua.import('Module:Widget/Component')
+local Html = Lua.import('Module:Widget/Html')
 local Label = Lua.import('Module:Widget/Basic/Label')
 local RoundSelector = Lua.import('Module:Widget/Standings/RoundSelector')
 local PlacementChange = Lua.import('Module:Widget/Standings/PlacementChange')
@@ -29,21 +28,16 @@
 	nc = '-',
 }
 
----@class StandingsFfaWidgetProps
----@field standings StandingsModel
+local Helpers = {}
 
----@class StandingsFfaWidget: Widget
----@operator call(StandingsFfaWidgetProps): StandingsFfaWidget
----@field props StandingsFfaWidgetProps
-local StandingsFfaWidget = Class.new(Widget)
-
----@return Widget?
-function StandingsFfaWidget:render()
-	if not self.props.standings then
+---@param props {standings?: StandingsModel}
+---@return Renderable?
+local function StandingsFfa(props)
+	local standings = props.standings
+	if not standings then
 		return
 	end
 
-	local standings = self.props.standings
 	local activeRounds = (Array.maxBy(
 		Array.filter(standings.rounds, function(round) return round.started end),
 		function (round) return round.round end
@@ -53,24 +47,24 @@
 		classes = {'standings-ffa'},
 		columns = WidgetUtil.collect(
 			{align = 'center'},
-			self:_showRoundColumns() and {align = 'center'} or nil,
+			Helpers._showRoundColumns(standings) and {align = 'center'} or nil,
 			{align = 'left'},
 			Array.map(standings.tiebreakers, function(tiebreaker)
 				if not tiebreaker.title then
 					return
 				end
 				return {align = 'center'}
 			end),
-			self:_showRoundColumns() and Array.rep({align = 'center'}, #standings.rounds) or nil
+			Helpers._showRoundColumns(standings) and Array.rep({align = 'center'}, #standings.rounds) or nil
 		),
 		title = String.nilIfEmpty(standings.title),
 		children = WidgetUtil.collect(
-			self:_headerRow(),
+			Helpers._headerRow(standings),
 			Array.map(standings.rounds, function (round)
 				if round.round > activeRounds then
 					return
 				end
-				return self:_createRoundBody(round)
+				return Helpers._createRoundBody(standings, round)
 			end)
 		),
 		striped = false
@@ -80,13 +74,13 @@
 		return standingsTable
 	end
 
-	local hasFutureRounds = self:_hasFutureRounds()
+	local hasFutureRounds = Helpers._hasFutureRounds(standings)
 
-	return HtmlWidgets.Div{
+	return Html.Div{
 		classes = {'standings-ffa-wrapper', 'toggle-area', 'toggle-area-' .. activeRounds},
 		attributes = {['data-toggle-area'] = activeRounds},
 		children = WidgetUtil.collect(
-			activeRounds > 0 and HtmlWidgets.Div{
+			activeRounds > 0 and Html.Div{
 				classes = {'standings-ffa-controls'},
 				children = {
 					RoundSelector{
@@ -105,42 +99,41 @@
 end
 
 ---@private
+---@param standings StandingsModel
 ---@return boolean
-function StandingsFfaWidget:_hasFutureRounds()
-	local standings = self.props.standings
+function Helpers._hasFutureRounds(standings)
 	return not standings.rounds[#standings.rounds].started
 end
 
 ---@private
+---@param standings StandingsModel
 ---@return boolean
-function StandingsFfaWidget:_showRoundColumns()
-	local standings = self.props.standings
+function Helpers._showRoundColumns(standings)
 	return #standings.rounds > 1
 end
 
 ---@private
----@return Widget
-function StandingsFfaWidget:_headerRow()
-	local standings = self.props.standings
-
+---@param standings StandingsModel
+---@return Renderable
+function Helpers._headerRow(standings)
 	---@param text string?
-	---@return Widget
+	---@return Renderable
 	local makeHeaderCell = function(text)
 		return TableWidgets.CellHeader{children = text}
 	end
 
 	return TableWidgets.TableHeader{children = {
 		TableWidgets.Row{children = WidgetUtil.collect(
 			makeHeaderCell('#'),
-			self:_showRoundColumns() and makeHeaderCell() or nil,
+			Helpers._showRoundColumns(standings) and makeHeaderCell() or nil,
 			makeHeaderCell('Participant'),
 			Array.map(standings.tiebreakers, function(tiebreaker)
 				if not tiebreaker.title then
 					return
 				end
 				return makeHeaderCell(tiebreaker.title)
 			end),
-			self:_showRoundColumns() and Array.map(standings.rounds, function(round)
+			Helpers._showRoundColumns(standings) and Array.map(standings.rounds, function(round)
 				return TableWidgets.CellHeader{
 					classes = {'standings-ffa-detail'},
 					children = round.title,
@@ -151,10 +144,10 @@
 end
 
 ---@private
+---@param standings StandingsModel
 ---@param round StandingsRound
----@return Widget
-function StandingsFfaWidget:_createRoundBody(round)
-	local standings = self.props.standings
+---@return Renderable
+function Helpers._createRoundBody(standings, round)
 	return TableWidgets.TableBody{children = Array.map(round.opponents, function (slot)
 		return TableWidgets.Row{
 			attributes = {
@@ -169,7 +162,7 @@
 					},
 					labelScheme = 'placement',
 				}},
-				self:_showRoundColumns() and TableWidgets.Cell{
+				Helpers._showRoundColumns(standings) and TableWidgets.Cell{
 					children = PlacementChange{change = slot.positionChangeFromPreviousRound}
 				} or nil,
 				TableWidgets.Cell{children = OpponentDisplay.BlockOpponent{
@@ -187,7 +180,7 @@
 						children = slot.tiebreakerValues[tiebreaker.id] and slot.tiebreakerValues[tiebreaker.id].display or ''
 					}
 				end),
-				self:_showRoundColumns() and Array.map(standings.rounds, function (columnRound)
+				Helpers._showRoundColumns(standings) and Array.map(standings.rounds, function (columnRound)
 					local text
 					if columnRound.round <= round.round then
 						local opponent = Array.find(columnRound.opponents, function(columnSlot)
@@ -212,4 +205,4 @@
 	end)}
 end
 
-return StandingsFfaWidget
+return Component.component(StandingsFfa)

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

@@ -1,3 +1,3 @@
 ---
 -- @Liquipedia
 -- page=Module:Widget/Standings/MatchOverview
@@ -8,29 +8,19 @@
 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 Component = Lua.import('Module:Widget/Component')
+local HtmlWidgets = Lua.import('Module:Widget/Html')
 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(MatchOverviewWidgetProps): MatchOverviewWidget
----@field props MatchOverviewWidgetProps
-local MatchOverviewWidget = Class.new(Widget)
-
----@return Widget?
-function MatchOverviewWidget:render()
-	local match = self.props.match
-	local opponentIndexToShow = tonumber(self.props.showOpponent)
+---@param props {match: MatchGroupUtilMatch, showOpponent: integer}
+---@return Renderable?
+local function MatchOverviewWidget(props)
+	local match = props.match
+	local opponentIndexToShow = tonumber(props.showOpponent)
 	if not match or not opponentIndexToShow or #match.opponents ~= 2 then
 		return
 	end
@@ -45,13 +35,37 @@
 		return
 	end
 
+	local phase = match.phase
+	local resultType
+
+	if match.phase ~= 'finished' then
+		resultType = 'default'
+	elseif match.winner == opponentIndexToShow then
+		resultType = 'loss'
+	elseif match.winner == 0 then
+		resultType = 'draw'
+	else
+		resultType = 'win'
+	end
+
 	return HtmlWidgets.Div{
 		classes = {'standings-match-overview'},
 		children = WidgetUtil.collect(
-			self:_createResultDisplay(
-				OpponentDisplay.InlineScore(leftOpponent),
-				OpponentDisplay.InlineScore(opponentToShow)
-			),
+			phase ~= 'upcoming' and Label{
+				labelScheme = 'standings-result',
+				labelType = 'result-' .. resultType,
+				children = {
+					HtmlWidgets.Span{
+						css = resultType == 'win' and {['font-weight'] = 'bold'} or nil,
+						children = OpponentDisplay.InlineScore(leftOpponent)
+					},
+					HtmlWidgets.Span{children = ':'},
+					HtmlWidgets.Span{
+						css = resultType == 'loss' and {['font-weight'] = 'bold'} or nil,
+						children = OpponentDisplay.InlineScore(opponentToShow)
+					}
+				}
+			} or nil,
 			OpponentDisplay.InlineOpponent{
 				opponent = opponentToShow,
 				overflow = 'ellipsis',
@@ -61,54 +75,4 @@
 	}
 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 VNode?
-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
-
-return MatchOverviewWidget
+return Component.component(MatchOverviewWidget)