Skip to content

feat(tournaments-ticker): add new redesigned ticker with variants for AB testing#7303

Open
Eetwalt wants to merge 45 commits intomainfrom
new-tournament-list
Open

feat(tournaments-ticker): add new redesigned ticker with variants for AB testing#7303
Eetwalt wants to merge 45 commits intomainfrom
new-tournament-list

Conversation

@Eetwalt
Copy link
Collaborator

@Eetwalt Eetwalt commented Mar 25, 2026

Summary

This PR introduces the redesigned tournament ticker for mainpages. We're rolling this out on a couple wikis first, so we're not going to replace the existing ticker before it's rolled out everywhere. This PR:

  • Adds Widget/Tournaments/Ticker/List with a tab-based phase navigation variant (default) and a collapsible variant (AB test - will most likely settle for one)
  • Adds a subtle tier pill variant with configurable colorScheme (full/top3) (Tier colors is AB test - will most likely settle for one)
  • Extracts data fetching into a reusable Widget/Tournaments/Ticker/Data module
  • Moves ChevronToggle from Widget/Participants/Team/ to Widget/GeneralCollapsible/ for broader reuse
  • Updates apexlegends, fortnite, leagueoflegends, pubgmobile, and trackmania to use the new widget

Notes

  • stylesheets/commons/TournamentTags.scss has hardcoded hex values. My thinking was doing the AB test like this, and make variables to skin when we settle on the approach to avoid double work.

How did you test this change?

|dev=ntl on the mainpages of wikis listed below + devtools

Variants:

  • Apex - 3 colors, tabs
  • Trackmania - 3 colors, collapsible
  • PUBGM - 5 colors, tabs
  • Fortnite - 5 colors, collapsible
  • LoL - 3 colors, tabs
image image

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Introduces a redesigned tournaments ticker for main pages, adding a new list-based widget (tabs + collapsible variants) and refactoring tournament data fetching into a shared module, while updating several wikis to use the new ticker.

Changes:

  • Added Widget/Tournaments/Ticker/List (with ListItem + PhaseCollapsible) and supporting mainpage styles for the new ticker UI.
  • Extracted tournament retrieval/sorting into reusable Widget/Tournaments/Ticker/Data, and refactored the existing ticker to use it.
  • Added a new subtle TierPill variant with optional colorScheme and moved ChevronToggle for broader reuse; updated several wiki mainpages to use the new ticker.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
stylesheets/commons/TournamentTags.scss Adds styling for the new subtle tier pill variant and top3 color scheme.
stylesheets/commons/Mainpage.scss Adds styles for the tournaments list items and the tabs/collapsible layouts.
lua/wikis/trackmania/MainPageLayout/data.lua Switches Trackmania mainpage to the new ticker list widget and configures collapsible/top3 scheme.
lua/wikis/pubgmobile/MainPageLayout/data.lua Switches PUBG Mobile mainpage to the new ticker list widget.
lua/wikis/leagueoflegends/MainPageLayout/data.lua Switches LoL mainpage to the new ticker list widget and sets top3 scheme.
lua/wikis/fortnite/MainPageLayout/data.lua Switches Fortnite mainpage to the new ticker list widget and enables collapsible variant.
lua/wikis/apexlegends/MainPageLayout/data.lua Switches Apex Legends mainpage to the new ticker list widget and sets top3 scheme.
lua/wikis/commons/Widget/Tournaments/Ticker/PhaseCollapsible.lua New collapsible phase container widget for the ticker.
lua/wikis/commons/Widget/Tournaments/Ticker/ListItem.lua New list row widget rendering icon, tier pill, optional game icon, and date range.
lua/wikis/commons/Widget/Tournaments/Ticker/List.lua New tabs/collapsible tournaments ticker list widget using shared data fetching.
lua/wikis/commons/Widget/Tournaments/Ticker/Data.lua New shared data retrieval + filtering/sorting for ticker(s).
lua/wikis/commons/Widget/Tournaments/Ticker.lua Refactors existing ticker to use Ticker/Data instead of inline fetching/sorting.
lua/wikis/commons/Widget/Tournament/TierPill.lua Adds subtle variant + configurable color scheme for tier pill display.
lua/wikis/commons/Widget/Participants/Team/Header.lua Updates ChevronToggle import to the new shared location.
lua/wikis/commons/Widget/GeneralCollapsible/ChevronToggle.lua Updates module header to reflect new shared module path.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@Eetwalt Eetwalt changed the title feat(tournaments-ticker): add list widget with tabs and collapsible variants feat(tournaments-ticker): add new redesigned ticker with variants for AB testing Mar 25, 2026
@ElectricalBoy ElectricalBoy added g: fortnite Fortnite g: apex Apex Legends g: leagueoflegends League of Legends g: pubgmobile PUBG (Mobile) g: trackmania Trackmania Games labels Mar 26, 2026
---@return Widget
function TournamentsTickerListWidget:render()
local data = TickerData.get(self.props)
local displayGameIcons = Logic.readBool(self.props.displayGameIcons)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
local displayGameIcons = Logic.readBool(self.props.displayGameIcons)
local displayGameIcons = self.props.displayGameIcons

(never going to be called from wikicode directly, annotations define as boolean already)

Copy link
Collaborator

@ElectricalBoy ElectricalBoy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm; comments are optional

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

optional:

  • I personally think that Module:TournamentsTicker/Query is a better name
  • maybe extract local functions to table level?

Comment on lines +139 to +152
display: none;
align-items: center;
justify-content: center;
padding: 0.125rem;
width: 1.25rem;
height: 1.25rem;
background-color: var( --clr-on-surface-light-primary-4 );
border-radius: 0.25rem;
flex-shrink: 0;
overflow: hidden;

@media ( max-width: 359px ) {
display: flex;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
display: none;
align-items: center;
justify-content: center;
padding: 0.125rem;
width: 1.25rem;
height: 1.25rem;
background-color: var( --clr-on-surface-light-primary-4 );
border-radius: 0.25rem;
flex-shrink: 0;
overflow: hidden;
@media ( max-width: 359px ) {
display: flex;
}
display: flex;
align-items: center;
justify-content: center;
padding: 0.125rem;
width: 1.25rem;
height: 1.25rem;
background-color: var( --clr-on-surface-light-primary-4 );
border-radius: 0.25rem;
flex-shrink: 0;
overflow: hidden;
@media ( min-width: 360px ) {
display: none;
}

optional; I think this is more readable

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

c: tournaments_ticker g: apex Apex Legends g: fortnite Fortnite g: leagueoflegends League of Legends g: pubgmobile PUBG (Mobile) g: trackmania Trackmania Games stylesheets Changes to stylesheets

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants