refactor: cleanup match ticker step 1

lua/wikis/commons/HiddenDataBox.lua

@@ -1,3 +1,3 @@
 ---
 -- @Liquipedia
 -- page=Module:HiddenDataBox
@@ -14,7 +14,6 @@
 local I18n = Lua.import('Module:I18n')
 local Info = Lua.import('Module:Info', {loadData = true})
 local MatchTicker = Lua.import('Module:MatchTicker')
-local MatchTickerEntityDisplay = Lua.import('Module:MatchTicker/DisplayComponents/Entity')
 local Namespace = Lua.import('Module:Namespace')
 local ReferenceCleaner = Lua.import('Module:ReferenceCleaner')
 local String = Lua.import('Module:StringUtils')
@@ -229,7 +228,7 @@
 		return nil
 	end
 
-	local result = Logic.tryCatch(
+	return Logic.tryCatch(
 		function()
 			local matchTicker = MatchTicker{
 				tournament = mw.title.getCurrentTitle().prefixedText,
@@ -238,23 +237,14 @@
 				ongoing = true,
 				hideTournament = true,
 				queryByParent = false,
+				entityStyle = true,
 			}
-			matchTicker:query()
-			return matchTicker
+			return matchTicker:query():create()
 		end,
 		function()
 			return nil
 		end
 	)
-
-	if not result or not result.matches or #result.matches == 0 then
-		return nil
-	end
-
-	return MatchTickerEntityDisplay.Container{
-		config = result.config,
-		matches = result.matches,
-	}:create()
 end
 
 return Class.export(HiddenDataBox, {exports = {'run'}})

lua/wikis/commons/Infobox/League.lua

@@ -1,3 +1,3 @@
 ---
 -- @Liquipedia
 -- page=Module:Infobox/League
@@ -355,7 +355,7 @@
 		return nil
 	end
 
-	local result = Logic.tryCatch(
+	return Logic.tryCatch(
 		function()
 			local matchTicker = MatchTicker{
 				tournament = self.pagename,
@@ -364,24 +364,14 @@
 				ongoing = true,
 				hideTournament = true,
 				queryByParent = true,
+				entityStyle = true,
 			}
-			matchTicker:query()
-			return matchTicker
+			return matchTicker:query():create()
 		end,
 		function()
 			return nil
 		end
 	)
-
-	if not result or not result.matches or #result.matches == 0 then
-		return nil
-	end
-
-	local EntityDisplay = Lua.import('Module:MatchTicker/DisplayComponents/Entity')
-	return EntityDisplay.Container{
-		config = result.config,
-		matches = result.matches,
-	}:create()
 end
 
 ---@param args table

lua/wikis/commons/Infobox/Person.lua

@@ -1,3 +1,3 @@
 ---
 -- @Liquipedia
 -- page=Module:Infobox/Person
@@ -210,32 +210,22 @@
 		return nil
 	end
 
-	local result = Logic.tryCatch(
+	return Logic.tryCatch(
 		function()
 			local matchTicker = MatchTicker{
 				player = self.pagename,
 				limit = 5,
 				upcoming = true,
 				ongoing = true,
 				hideTournament = false,
+				entityStyle = true,
 			}
-			matchTicker:query()
-			return matchTicker
+			return matchTicker:query():create()
 		end,
 		function()
 			return nil
 		end
 	)
-
-	if not result or not result.matches or #result.matches == 0 then
-		return nil
-	end
-
-	local EntityDisplay = Lua.import('Module:MatchTicker/DisplayComponents/Entity')
-	return EntityDisplay.Container{
-		config = result.config,
-		matches = result.matches,
-	}:create()
 end
 
 function Person:_parseArgs()

lua/wikis/commons/Infobox/Team.lua

@@ -1,3 +1,3 @@
 ---
 -- @Liquipedia
 -- page=Module:Infobox/Team
@@ -308,32 +308,22 @@
 		return nil
 	end
 
-	local result = Logic.tryCatch(
+	return Logic.tryCatch(
 		function()
 			local matchTicker = MatchTicker{
 				team = self.pagename,
 				limit = 5,
 				upcoming = true,
 				ongoing = true,
 				hideTournament = false,
+				entityStyle = true,
 			}
-			matchTicker:query()
-			return matchTicker
+			return matchTicker:query():create()
 		end,
 		function()
 			return nil
 		end
 	)
-
-	if not result or not result.matches or #result.matches == 0 then
-		return nil
-	end
-
-	local EntityDisplay = Lua.import('Module:MatchTicker/DisplayComponents/Entity')
-	return EntityDisplay.Container{
-		config = result.config,
-		matches = result.matches,
-	}:create()
 end
 
 ---@param location string?

lua/wikis/commons/Infobox/UnofficialWorldChampion.lua

@@ -1,3 +1,3 @@
 ---
 -- @Liquipedia
 -- page=Module:Infobox/UnofficialWorldChampion
@@ -214,32 +214,22 @@
 		return nil
 	end
 
-	local result = Logic.tryCatch(
+	return Logic.tryCatch(
 		function()
 			local matchTicker = MatchTicker{
 				team = currentChampion.template,
 				limit = 5,
 				upcoming = true,
 				ongoing = true,
 				hideTournament = false,
+				entityStyle = true,
 			}
-			matchTicker:query()
-			return matchTicker
+			return matchTicker:query():create()
 		end,
 		function()
 			return nil
 		end
 	)
-
-	if not result or not result.matches or #result.matches == 0 then
-		return nil
-	end
-
-	local EntityDisplay = Lua.import('Module:MatchTicker/DisplayComponents/Entity')
-	return EntityDisplay.Container{
-		config = result.config,
-		matches = result.matches,
-	}:create()
 end
 
 ---@param args table

lua/wikis/commons/MatchTicker.lua

@@ -1,3 +1,3 @@
 ---
 -- @Liquipedia
 -- page=Module:MatchTicker
@@ -11,6 +11,7 @@
 local Class = Lua.import('Module:Class')
 local FnUtil = Lua.import('Module:FnUtil')
 local Game = Lua.import('Module:Game')
+local I18n = Lua.import('Module:I18n')
 local Logic = Lua.import('Module:Logic')
 local Lpdb = Lua.import('Module:Lpdb')
 local Operator = Lua.import('Module:Operator')
@@ -24,6 +25,11 @@
 local MatchGroupUtil = Lua.import('Module:MatchGroup/Util/Custom')
 local Tournament = Lua.import('Module:Tournament')
 
+local Html = Lua.import('Module:Widget/Html')
+local MatchCard = Lua.import('Module:Widget/Match/Card')
+local Carousel = Lua.import('Module:Widget/Basic/Carousel')
+local Switch = Lua.import('Module:Widget/Switch')
+
 local Condition = Lua.import('Module:Condition')
 local ConditionTree = Condition.Tree
 local ConditionNode = Condition.Node
@@ -63,36 +69,7 @@
 local DEFAULT_ORDER = 'date asc, liquipediatier asc, tournament asc'
 local DEFAULT_RECENT_ORDER = 'date desc, liquipediatier asc, tournament asc'
 local NOW = os.date('%Y-%m-%d %H:%M', os.time(os.date('!*t') --[[@as osdateparam]]))
-
----@class MatchTickerMatchInterface
----@operator call({config: MatchTickerConfig, match: table}): MatchTickerMatchInterface
----@field config MatchTickerConfig
----@field match table
----@field create fun(self: MatchTickerMatchInterface): Widget|Html?
-
----@class MatchTickerContainerInterface
----@operator call({config: MatchTickerConfig, matches: table[]}): MatchTickerContainerInterface
----@field config MatchTickerConfig
----@field matches table[]
----@field create fun(self: MatchTickerContainerInterface): Widget|Html?
-
---- Extract externally if it grows
----@param matchTickerConfig MatchTickerConfig
----@return {Container?: MatchTickerContainerInterface, Match: MatchTickerMatchInterface}
-local MatchTickerDisplayFactory = function (matchTickerConfig)
-	assert(not (matchTickerConfig.entityStyle and matchTickerConfig.newStyle),
-		"Invalid MatchTicker configuration: 'entityStyle' and 'newStyle' are mutually exclusive. " ..
-		"Choose one display mode: use 'entityStyle' for carousel-based entity display, " ..
-		"'newStyle' for new-style match cards, or neither for legacy display.")
-
-	if matchTickerConfig.entityStyle then
-		return Lua.import('Module:MatchTicker/DisplayComponents/Entity')
-	elseif matchTickerConfig.newStyle then
-		return Lua.import('Module:MatchTicker/DisplayComponents/New')
-	else
-		return Lua.import('Module:MatchTicker/DisplayComponents')
-	end
-end
+local TABLE_OF_CONTENTS = '__TOC__'
 
 ---@class MatchTickerConfig
 ---@field tournaments string[]
@@ -117,8 +94,7 @@
 ---@field tierTypes string[]?
 ---@field regions string[]?
 ---@field games string[]?
----@field newStyle boolean?
----@field entityStyle boolean?
+---@field variant 'vertical' | 'horizontal'
 ---@field featuredOnly boolean?
 ---@field displayGameIcons boolean?
 
@@ -174,9 +150,9 @@
 		games = args.games and Array.map(Array.parseCommaSeparatedString(args.games), function (game)
 					return Game.toIdentifier{game=game}
 				end) or nil,
-		newStyle = Logic.readBool(args.newStyle),
 		featuredOnly = Logic.readBool(args.featuredOnly),
-		displayGameIcons = Logic.readBool(args.displayGameIcons)
+		displayGameIcons = Logic.readBool(args.displayGameIcons),
+		variant = Logic.readBool(args.entityStyle) and 'horizontal' or 'vertical',
 	}
 
 	--min 1 of them has to be set; recent can not be set while any of the others is set
@@ -220,8 +196,6 @@
 	end
 	config.wrapperClasses = wrapperClasses
 
-	MatchTicker.DisplayComponents = MatchTickerDisplayFactory(config)
-
 	self.config = config
 
 	return self
@@ -565,43 +539,85 @@
 	return Tournament.getTournament(tournamentPage)
 end)
 
----@param header MatchTickerHeader?
----@return Html
-function MatchTicker:create(header)
-	if not self.matches and not self.config.showInfoForEmptyResults then
-		return mw.html.create()
-	end
-
-	local wrapper = mw.html.create('div')
+local function HorizontalLayout(matchCards, config)
+	local carousel = Carousel{
+		children = matchCards,
+		itemWidth = '12.5rem',
+		gap = '0.5rem',
+	}
 
-	for _, class in pairs(self.config.wrapperClasses) do
-		wrapper:addClass(class)
-	end
+	return Html.Div{
+		css = {['margin-bottom'] = '1rem'},
+		children = {
+			Html.Div{
+				classes = {'mw-heading', 'mw-heading2'},
+				children = {
+					Html.H2{
+						css = {border = 'unset'},
+						children = I18n.translate('matchticker-upcoming-matches'),
+					},
+				},
+			},
+			Switch{
+				label = 'Show countdown',
+				switchGroup = 'countdown',
+				storeValue = true,
+				defaultActive = true,
+				css = {margin = '0.75rem 0 1rem'},
+				content = carousel,
+			},
+			Html.Div{
+				css = {['margin-top'] = '1rem'},
+				children = {
+					TABLE_OF_CONTENTS,
+				},
+			},
+		},
+	}
+end
 
-	if header then
-		wrapper:node(header:create())
+---@param header Renderable?
+---@return Renderable?
+function MatchTicker:create(header)
+	if not self.matches and not self.config.showInfoForEmptyResults then
+		return
 	end
 
-	if not self.matches then
-		return wrapper:css('text-align', 'center'):wikitext('No Results found.')
+	if not self.matches or #self.matches == 0 then
+		return Html.Div{
+			classes = self.config.wrapperClasses,
+			css = {['text-align'] = 'center'},
+			children = Array.extend({header}, {'No Results found.'}),
+		}
 	end
 
-	if MatchTicker.DisplayComponents.Container then
-		local container = MatchTicker.DisplayComponents.Container{
-			config = self.config,
-			matches = self.matches
-		}:create()
+	local matchCards = Array.map(self.matches, function(match)
+		return MatchCard{
+			match = MatchGroupUtil.matchFromRecord(match),
+			hideTournament = self.config.hideTournament,
+			displayGameIcons = self.config.displayGameIcons,
+			onlyHighlightOnValue = self.config.onlyHighlightOnValue,
+			variant = self.config.variant == 'horizontal' and 'vertical' or nil,
+			gameData = {
+				asGame = match.asGame,
+				gameIds = match.asGameIndexes,
+				map = match.map,
+				mapDisplayName = match.extradata and match.extradata.displayname or nil
+			}
+		}
+	end)
 
-		if container then
-			wrapper:node(container)
-		end
-	else
-		Array.forEach(self.matches or {}, function(match)
-			wrapper:node(MatchTicker.DisplayComponents.Match{config = self.config, match = match}:create())
-		end)
+	if self.config.variant == 'vertical' then
+		return Html.Div{
+			classes = self.config.wrapperClasses,
+			children = Array.extend({header}, matchCards),
+		}
 	end
 
-	return wrapper
+	return Html.Div{
+		classes = self.config.wrapperClasses,
+		children = Array.extend({header}, HorizontalLayout(matchCards, self.config)),
+	}
 end
 
 return MatchTicker