Skip to content

Commit

Permalink
refactor(match2): standardize input to ItemContainer (#5154)
Browse files Browse the repository at this point in the history 
* cleanup _createGameDetails a little bit

* extract more to `ContentItemContainer`

* move more display logic to widget

* safety

* typo

* update golden
  • Loading branch information
@Rathoz
Rathoz authored Dec 2, 2024
1 parent ea5e7b6 commit dde83a3
Show file tree
Hide file tree
Showing 8 changed files with 79 additions and 115 deletions.
28 changes: 10 additions & 18 deletions components/match2/wikis/apexlegends/game_summary.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,16 @@ end
---@param game table
---@return Widget
function CustomGameSummary._createGameDetails(game)
return MatchSummaryWidgets.ContentItemContainer{children = {
HtmlWidgets.Ul{
classes = {'panel-content__game-schedule'},
children = {
HtmlWidgets.Li{children =
HtmlWidgets.Div{
classes = {'panel-content__game-schedule__container'},
children = {
MatchSummaryWidgets.CountdownIcon{game = game, additionalClasses = {'panel-content__game-schedule__icon'}},
MatchSummaryWidgets.GameCountdown{game = game},
},
},
},
game.map and HtmlWidgets.Li{children = {
IconWidget{iconName = 'map', additionalClasses = {'panel-content__game-schedule__icon'}},
HtmlWidgets.Span{children = Page.makeInternalLink(game.map)},
}}} or nil,
}
return MatchSummaryWidgets.ContentItemContainer{contentClass = 'panel-content__game-schedule',
items = {
{
icon = MatchSummaryWidgets.CountdownIcon{game = game},
content = MatchSummaryWidgets.GameCountdown{game = game},
},
game.map and {
icon = IconWidget{iconName = 'map'},
content = HtmlWidgets.Span{children = Page.makeInternalLink(game.map)},
} or nil,
}
}
end
Expand Down
28 changes: 10 additions & 18 deletions components/match2/wikis/pubg/game_summary.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,16 @@ end
---@param game table
---@return Widget
function CustomGameSummary._createGameDetails(game)
return MatchSummaryWidgets.ContentItemContainer{children = {
HtmlWidgets.Ul{
classes = {'panel-content__game-schedule'},
children = {
HtmlWidgets.Li{children =
HtmlWidgets.Div{
classes = {'panel-content__game-schedule__container'},
children = {
MatchSummaryWidgets.CountdownIcon{game = game, additionalClasses = {'panel-content__game-schedule__icon'}},
MatchSummaryWidgets.GameCountdown{game = game},
},
},
},
game.map and HtmlWidgets.Li{children = {
IconWidget{iconName = 'map', additionalClasses = {'panel-content__game-schedule__icon'}},
HtmlWidgets.Span{children = Page.makeInternalLink(game.map)},
}}} or nil,
}
return MatchSummaryWidgets.ContentItemContainer{contentClass = 'panel-content__game-schedule',
items = {
{
icon = MatchSummaryWidgets.CountdownIcon{game = game},
content = MatchSummaryWidgets.GameCountdown{game = game},
},
game.map and {
icon = IconWidget{iconName = 'map'},
content = HtmlWidgets.Span{children = Page.makeInternalLink(game.map)},
} or nil,
}
}
end
Expand Down
28 changes: 10 additions & 18 deletions components/match2/wikis/pubgmobile/game_summary.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,16 @@ end
---@param game table
---@return Widget
function CustomGameSummary._createGameDetails(game)
return MatchSummaryWidgets.ContentItemContainer{children = {
HtmlWidgets.Ul{
classes = {'panel-content__game-schedule'},
children = {
HtmlWidgets.Li{children =
HtmlWidgets.Div{
classes = {'panel-content__game-schedule__container'},
children = {
MatchSummaryWidgets.CountdownIcon{game = game, additionalClasses = {'panel-content__game-schedule__icon'}},
MatchSummaryWidgets.GameCountdown{game = game},
},
},
},
game.map and HtmlWidgets.Li{children = {
IconWidget{iconName = 'map', additionalClasses = {'panel-content__game-schedule__icon'}},
HtmlWidgets.Span{children = Page.makeInternalLink(game.map)},
}}} or nil,
}
return MatchSummaryWidgets.ContentItemContainer{contentClass = 'panel-content__game-schedule',
items = {
{
icon = MatchSummaryWidgets.CountdownIcon{game = game},
content = MatchSummaryWidgets.GameCountdown{game = game},
},
game.map and {
icon = IconWidget{iconName = 'map'},
content = HtmlWidgets.Span{children = Page.makeInternalLink(game.map)},
} or nil,
}
}
end
Expand Down
25 changes: 24 additions & 1 deletion components/widget/match/summary/ffa/widget_match_summary_ffa_content_item_container.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
-- 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')

Expand All @@ -23,13 +24,35 @@ MatchSummaryFfaContentItem.defaultProps = {

---@return Widget
function MatchSummaryFfaContentItem:render()
local hasContentClass = self.props.contentClass ~= nil
local contentContainer = HtmlWidgets.Div{
classes = {'panel-content__container'},
attributes = {
['data-js-battle-royale'] = self.props.collapsible and 'collapsible-container' or nil,
role = 'tabpanel',
},
children = self.props.children,
children = HtmlWidgets.Ul{
classes = {self.props.contentClass},
children = Array.map(self.props.items, function(item)
return HtmlWidgets.Li{
classes = hasContentClass and {self.props.contentClass .. '__list-item'} or nil,
children = {
HtmlWidgets.Span{
classes = hasContentClass and {self.props.contentClass .. '__icon'} or nil,
children = item.icon,
},
HtmlWidgets.Span{
classes = hasContentClass and {self.props.contentClass .. '__title'} or nil,
children = item.title,
},
HtmlWidgets.Div{
classes = hasContentClass and {self.props.contentClass .. '__container'} or nil,
children = item.content,
},
},
}
end),
}
}

if not self.props.collapsible then
Expand Down
36 changes: 10 additions & 26 deletions components/widget/match/summary/ffa/widget_match_summary_ffa_games_schedule.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ local Class = require('Module:Class')
local Lua = require('Module:Lua')

local Widget = Lua.import('Module:Widget')
local HtmlWidgets = Lua.import('Module:Widget/Html/All')
local ContentItemContainer = Lua.import('Module:Widget/Match/Summary/Ffa/ContentItemContainer')
local CountdownIcon = Lua.import('Module:Widget/Match/Summary/Ffa/CountdownIcon')
local GameCountdown = Lua.import('Module:Widget/Match/Summary/Ffa/GameCountdown')
Expand All @@ -26,31 +25,16 @@ function MatchSummaryFfaGamesSchedule:render()
return nil
end

return ContentItemContainer{collapsed = true, collapsible = true, title = 'Schedule', children = {
HtmlWidgets.Ul{
classes = {'panel-content__game-schedule'},
children = Array.map(self.props.games, function (game, idx)
return HtmlWidgets.Li{
children = {
HtmlWidgets.Span{
children = CountdownIcon{
game = game,
additionalClasses = {'panel-content__game-schedule__icon'}
},
},
HtmlWidgets.Span{
classes = {'panel-content__game-schedule__title'},
children = 'Game ' .. idx .. ':',
},
HtmlWidgets.Div{
classes = {'panel-content__game-schedule__container'},
children = GameCountdown{game = game},
},
},
}
end)
}
}}
return ContentItemContainer{collapsed = true, collapsible = true, title = 'Schedule',
contentClass = 'panel-content__game-schedule',
items = Array.map(self.props.games, function (game, idx)
return {
icon = CountdownIcon{game = game},
title = 'Game ' .. idx .. ':',
content = GameCountdown{game = game},
}
end)
}
end

return MatchSummaryFfaGamesSchedule
43 changes: 12 additions & 31 deletions components/widget/match/summary/ffa/widget_match_summary_ffa_points_distribution.lua
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ local Class = require('Module:Class')
local Lua = require('Module:Lua')

local Widget = Lua.import('Module:Widget')
local WidgetUtil = Lua.import('Module:Widget/Util')
local HtmlWidgets = Lua.import('Module:Widget/Html/All')
local IconWidget = Lua.import('Module:Widget/Image/Icon/Fontawesome')
local ContentItemContainer = Lua.import('Module:Widget/Match/Summary/Ffa/ContentItemContainer')
local Trophy = Lua.import('Module:Widget/Match/Summary/Ffa/Trophy')
Expand All @@ -27,38 +25,21 @@ function MatchSummaryFfaPointsDistribution:render()
assert(self.props.killScore, 'No killscore provided')
assert(self.props.placementScore, 'No placement score table provided')
local function createItem(icon, title, score)
return HtmlWidgets.Li{
classes = {'panel-content__points-distribution__list-item'},
children = WidgetUtil.collect(
icon and HtmlWidgets.Span{
classes = {'panel-content__points-distribution__icon'},
children = icon,
} or nil,
HtmlWidgets.Span{
classes = {'panel-content__points-distribution__title'},
children = title,
},
HtmlWidgets.Span{
children = score .. ' ' .. 'point' .. (score ~= 1 and 's' or ''),
}
)
}
return {icon = icon, title = title, content = score .. ' ' .. 'point' .. (score ~= 1 and 's' or '')}
end

return ContentItemContainer{collapsed = true, collapsible = true, title = 'Points Distribution', children = {
HtmlWidgets.Ul{
classes = {'panel-content__points-distribution'},
children = WidgetUtil.collect(
createItem(IconWidget{iconName = 'kills'}, '1 kill', self.props.killScore),
Array.map(self.props.placementScore, function(slot)
local title = RankRange{rankStart = slot.rangeStart, rankEnd = slot.rangeEnd}
local icon = Trophy{place = slot.rangeStart}
return ContentItemContainer{collapsed = true, collapsible = true, title = 'Points Distribution',
contentClass = 'panel-content__points-distribution',
items = {
createItem(IconWidget{iconName = 'kills'}, '1 kill', self.props.killScore),
unpack(Array.map(self.props.placementScore, function(slot)
local title = RankRange{rankStart = slot.rangeStart, rankEnd = slot.rangeEnd}
local icon = Trophy{place = slot.rangeStart}

return createItem(icon, title, slot.score)
end)
)
},
}}
return createItem(icon, title, slot.score)
end))
}
}
end

return MatchSummaryFfaPointsDistribution
2 changes: 1 addition & 1 deletion spec/golden_masters/match2_matchlist_smoke_apexlegends.txt
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<div class="brkts-br-wrapper battle-royale" data-js-battle-royale-id="apexlegend" data-js-battle-royale-init-tab="0"><div class="navigation-tabs" data-js-battle-royale="navigation" role="tabpanel"><ul class="navigation-tabs__list" role="tablist"><li class="navigation-tabs__list-item" data-target-id="navigationContent1" role="tab" tabindex="0" data-js-battle-royale="navigation-tab" data-js-battle-royale-matchid="0001"><i class="fas fa-check icon--green navigation-tabs__list-item-icon"></i>Match</li></ul></div><div class="navigation-content-container"><div class="navigation-content" data-js-battle-royale-content-id="navigationContent1"><div class="panel-tabs" role="tabpanel"><ul class="panel-tabs__list" role="tablist"><li class="panel-tabs__list-item" data-js-battle-royale="panel-tab" role="tab" data-js-battle-royale-content-target-id="apexlegend_0001panel0" tabindex="0"><i class="fad fa-list-ol panel-tabs__list-icon"></i><h4 class="panel-tabs__title">Overall standings</h4></li></ul></div><div class="panel-content" id="apexlegend_0001panel0" data-js-battle-royale="panel-content"><div class="panel-content__collapsible is--collapsed" data-js-battle-royale="collapsible"><h5 class="panel-content__button" data-js-battle-royale="collapsible-button" tabindex="0"><i class="far fa-chevron-up panel-content__button-icon"></i><span>Points Distribution</span></h5><div class="panel-content__container" data-js-battle-royale="collapsible-container" role="tabpanel"><ul class="panel-content__points-distribution"><li class="panel-content__points-distribution__list-item"><span class="panel-content__points-distribution__icon"><i class="fas fa-skull"></i></span><span class="panel-content__points-distribution__title">1 kill</span><span>1 point</span></li><li class="panel-content__points-distribution__list-item"><span class="panel-content__points-distribution__icon"><i class="fas fa-trophy icon--gold"></i></span><span class="panel-content__points-distribution__title">1st - 2nd</span><span>0 points</span></li></ul></div></div><div class="panel-table" data-js-battle-royale="table"><div class="panel-table__row row--header " data-js-battle-royale="header-row"><div class="panel-table__cell cell--rank" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-hashtag panel-table__cell-icon"></i><span>Rank</span><div class="panel-table__sort"><i class="far fa-arrows-alt-v" data-js-battle-royale="sort-icon"></i></div></div></div><div class="panel-table__cell cell--team" data-sort-type="team"><div class="panel-table__cell-grouped"><i class="fas fa-users panel-table__cell-icon"></i><span>Team</span><div class="panel-table__sort"><i class="far fa-arrows-alt-v" data-js-battle-royale="sort-icon"></i></div></div></div><div class="panel-table__cell cell--total-points" data-sort-type="total-points"><div class="panel-table__cell-grouped"><i class="fas fa-star panel-table__cell-icon"></i><span class="d-none d-md-block">Total Points</span><span class="d-block d-md-none">Pts.</span><div class="panel-table__sort"><i class="far fa-arrows-alt-v" data-js-battle-royale="sort-icon"></i></div></div></div><div class="panel-table__cell cell--game-container-nav-holder" data-js-battle-royale="game-nav-holder"><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div></div><div class="panel-table__row" data-js-battle-royale="row"><div class="panel-table__cell cell--rank " data-sort-val="1" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-trophy panel-table__cell-icon icon--gold"></i><span>1st</span></div></div><div class="panel-table__cell cell--team " data-sort-val="abc" data-sort-type="team"><div class="panel-table__cell-grouped"><div class="block-players-wrapper"><div class="block-player"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[abc|A]]</span></div></div></div></div><div class="panel-table__cell cell--total-points " data-sort-val="3" data-sort-type="total-points"><div class="panel-table__cell-grouped">3</div></div><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div><div class="panel-table__row" data-js-battle-royale="row"><div class="panel-table__cell cell--rank " data-sort-val="2" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-trophy panel-table__cell-icon icon--silver"></i><span>2nd</span></div></div><div class="panel-table__cell cell--team " data-sort-val="B" data-sort-type="team"><div class="panel-table__cell-grouped"><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="panel-table__cell cell--total-points " data-sort-val="2" data-sort-type="total-points"><div class="panel-table__cell-grouped">2</div></div><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div></div></div></div></div></div>
<div class="brkts-br-wrapper battle-royale" data-js-battle-royale-id="apexlegend" data-js-battle-royale-init-tab="0"><div class="navigation-tabs" data-js-battle-royale="navigation" role="tabpanel"><ul class="navigation-tabs__list" role="tablist"><li class="navigation-tabs__list-item" data-target-id="navigationContent1" role="tab" tabindex="0" data-js-battle-royale="navigation-tab" data-js-battle-royale-matchid="0001"><i class="fas fa-check icon--green navigation-tabs__list-item-icon"></i>Match</li></ul></div><div class="navigation-content-container"><div class="navigation-content" data-js-battle-royale-content-id="navigationContent1"><div class="panel-tabs" role="tabpanel"><ul class="panel-tabs__list" role="tablist"><li class="panel-tabs__list-item" data-js-battle-royale="panel-tab" role="tab" data-js-battle-royale-content-target-id="apexlegend_0001panel0" tabindex="0"><i class="fad fa-list-ol panel-tabs__list-icon"></i><h4 class="panel-tabs__title">Overall standings</h4></li></ul></div><div class="panel-content" id="apexlegend_0001panel0" data-js-battle-royale="panel-content"><div class="panel-content__collapsible is--collapsed" data-js-battle-royale="collapsible"><h5 class="panel-content__button" data-js-battle-royale="collapsible-button" tabindex="0"><i class="far fa-chevron-up panel-content__button-icon"></i><span>Points Distribution</span></h5><div class="panel-content__container" data-js-battle-royale="collapsible-container" role="tabpanel"><ul class="panel-content__points-distribution"><li class="panel-content__points-distribution__list-item"><span class="panel-content__points-distribution__icon"><i class="fas fa-skull"></i></span><span class="panel-content__points-distribution__title">1 kill</span><div class="panel-content__points-distribution__container">1 point</div></li><li class="panel-content__points-distribution__list-item"><span class="panel-content__points-distribution__icon"><i class="fas fa-trophy icon--gold"></i></span><span class="panel-content__points-distribution__title">1st - 2nd</span><div class="panel-content__points-distribution__container">0 points</div></li></ul></div></div><div class="panel-table" data-js-battle-royale="table"><div class="panel-table__row row--header " data-js-battle-royale="header-row"><div class="panel-table__cell cell--rank" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-hashtag panel-table__cell-icon"></i><span>Rank</span><div class="panel-table__sort"><i class="far fa-arrows-alt-v" data-js-battle-royale="sort-icon"></i></div></div></div><div class="panel-table__cell cell--team" data-sort-type="team"><div class="panel-table__cell-grouped"><i class="fas fa-users panel-table__cell-icon"></i><span>Team</span><div class="panel-table__sort"><i class="far fa-arrows-alt-v" data-js-battle-royale="sort-icon"></i></div></div></div><div class="panel-table__cell cell--total-points" data-sort-type="total-points"><div class="panel-table__cell-grouped"><i class="fas fa-star panel-table__cell-icon"></i><span class="d-none d-md-block">Total Points</span><span class="d-block d-md-none">Pts.</span><div class="panel-table__sort"><i class="far fa-arrows-alt-v" data-js-battle-royale="sort-icon"></i></div></div></div><div class="panel-table__cell cell--game-container-nav-holder" data-js-battle-royale="game-nav-holder"><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div></div><div class="panel-table__row" data-js-battle-royale="row"><div class="panel-table__cell cell--rank " data-sort-val="1" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-trophy panel-table__cell-icon icon--gold"></i><span>1st</span></div></div><div class="panel-table__cell cell--team " data-sort-val="abc" data-sort-type="team"><div class="panel-table__cell-grouped"><div class="block-players-wrapper"><div class="block-player"><span class="name" style="overflow:hidden;text-overflow:ellipsis;white-space:pre">[[abc|A]]</span></div></div></div></div><div class="panel-table__cell cell--total-points " data-sort-val="3" data-sort-type="total-points"><div class="panel-table__cell-grouped">3</div></div><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div><div class="panel-table__row" data-js-battle-royale="row"><div class="panel-table__cell cell--rank " data-sort-val="2" data-sort-type="rank"><div class="panel-table__cell-grouped"><i class="fas fa-trophy panel-table__cell-icon icon--silver"></i><span>2nd</span></div></div><div class="panel-table__cell cell--team " data-sort-val="B" data-sort-type="team"><div class="panel-table__cell-grouped"><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="panel-table__cell cell--total-points " data-sort-val="2" data-sort-type="total-points"><div class="panel-table__cell-grouped">2</div></div><div class="panel-table__cell cell--game-container" data-js-battle-royale="game-container"></div></div></div></div></div></div></div>
4 changes: 2 additions & 2 deletions stylesheets/commons/BattleRoyale/Panel.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,11 +166,11 @@ Author(s): Elysienna
font-size: 0.75rem;
color: #3c585d;

&.icon--green {
& > i.icon--green {
color: #1d7c1d;
}

&.icon--red {
& > i.icon--red {
color: #b81414;
}
}
Expand Down

0 comments on commit dde83a3

Please sign in to comment.