From afc6934e516995100206ec9961b5a46c509d7e76 Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Mon, 17 Jun 2024 16:16:26 +0200 Subject: [PATCH 01/19] Adding dota2 filter styles --- stylesheets/commons/FilterButtons.less | 47 ++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/stylesheets/commons/FilterButtons.less b/stylesheets/commons/FilterButtons.less index 5281fb10fc4..dd5695f9a15 100644 --- a/stylesheets/commons/FilterButtons.less +++ b/stylesheets/commons/FilterButtons.less @@ -58,6 +58,53 @@ Author(s): Elysienna animation-duration: 0.8s; } +.dota2-test { + .filter-buttons { + display: flex; + justify-content: start; + flex-flow: row wrap; + font-size: 10pt; + margin: 0.125rem; + align-items: center; + } + + .filter-button { + display: flex; + align-items: center; + border-radius: 8px; + padding: 6px 12px; + font-weight: 700; + flex-grow: initial; + + .theme--light & { + color: var(--clr-on-primary-container,#ffffff); + background-color: var(--clr-primary-container,#1f3d7a); + border-color: var(--clr-primary-container,#1f3d7a); + } + + .theme--dark & { + color: #ffffff; + background-color: var( --clr-surface-3, #282828 ); + border-color: var( --clr-surface-3, #282828 ); + } + } + + .filter-button--active { + + .theme--light & { + color: #ffffff; + background-color: var(--clr-wiki-primary,#1f3d7a); + border-color: var(--clr-wiki-primary,#1f3d7a); + } + + .theme--dark & { + color: #ffffff; + background-color: var(--clr-wiki-theme-primary,#1f3d7a); + border-color: var(--clr-wiki-theme-primary,#1f3d7a); + } + } +} + /* Keyframes filter effects */ @keyframes fadeIn { From 0b53e5d77215936350dc9977e8176d691c561c2d Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Mon, 17 Jun 2024 16:21:53 +0200 Subject: [PATCH 02/19] Fixing pipeline --- stylesheets/commons/FilterButtons.less | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/stylesheets/commons/FilterButtons.less b/stylesheets/commons/FilterButtons.less index dd5695f9a15..b4d248190d4 100644 --- a/stylesheets/commons/FilterButtons.less +++ b/stylesheets/commons/FilterButtons.less @@ -73,13 +73,13 @@ Author(s): Elysienna align-items: center; border-radius: 8px; padding: 6px 12px; - font-weight: 700; + font-weight: bold; flex-grow: initial; .theme--light & { - color: var(--clr-on-primary-container,#ffffff); - background-color: var(--clr-primary-container,#1f3d7a); - border-color: var(--clr-primary-container,#1f3d7a); + color: var( --clr-on-primary-container, #ffffff ); + background-color: var( --clr-primary-container, #1f3d7a ); + border-color: var( --clr-primary-container, #1f3d7a ); } .theme--dark & { @@ -90,17 +90,16 @@ Author(s): Elysienna } .filter-button--active { - .theme--light & { color: #ffffff; - background-color: var(--clr-wiki-primary,#1f3d7a); - border-color: var(--clr-wiki-primary,#1f3d7a); + background-color: var( --clr-wiki-primary, #1f3d7a ); + border-color: var( --clr-wiki-primary, #1f3d7a ); } .theme--dark & { color: #ffffff; - background-color: var(--clr-wiki-theme-primary,#1f3d7a); - border-color: var(--clr-wiki-theme-primary,#1f3d7a); + background-color: var( --clr-wiki-theme-primary, #1f3d7a ); + border-color: var( --clr-wiki-theme-primary, #1f3d7a ); } } } From 1e5b185592e616dca4e64b1a1728c7b2cf35c14a Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Fri, 21 Jun 2024 10:48:11 +0200 Subject: [PATCH 03/19] Adding new match ticker display component --- .../match_ticker/commons/match_ticker.lua | 4 +- .../match_ticker_display_components_new.lua | 382 ++++++++++++++++++ stylesheets/commons/MatchTicker.less | 124 ++++++ 3 files changed, 508 insertions(+), 2 deletions(-) create mode 100644 components/match_ticker/commons/match_ticker_display_components_new.lua create mode 100644 stylesheets/commons/MatchTicker.less diff --git a/components/match_ticker/commons/match_ticker.lua b/components/match_ticker/commons/match_ticker.lua index 77339afd908..af23028eb82 100644 --- a/components/match_ticker/commons/match_ticker.lua +++ b/components/match_ticker/commons/match_ticker.lua @@ -165,9 +165,9 @@ function MatchTicker:init(args) config.wrapperClasses = wrapperClasses if config.newStyle then - self.DisplayComponents = Lua.import('Module:MatchTicker/DisplayComponents/New') + MatchTicker.DisplayComponents = Lua.import('Module:MatchTicker/DisplayComponents/New') else - self.DisplayComponents = Lua.import('Module:MatchTicker/DisplayComponents') + MatchTicker.DisplayComponents = Lua.import('Module:MatchTicker/DisplayComponents') end self.config = config diff --git a/components/match_ticker/commons/match_ticker_display_components_new.lua b/components/match_ticker/commons/match_ticker_display_components_new.lua new file mode 100644 index 00000000000..b8303c431a4 --- /dev/null +++ b/components/match_ticker/commons/match_ticker_display_components_new.lua @@ -0,0 +1,382 @@ +--- +-- @Liquipedia +-- wiki=commons +-- page=Module:MatchTicker/DisplayComponents/New +-- +-- Please see https://github.com/Liquipedia/Lua-Modules to contribute +-- + +-- Holds DisplayComponents for the MatchTicker module + +local Abbreviation = require('Module:Abbreviation') +local Array = require('Module:Array') +local Class = require('Module:Class') +local Countdown = require('Module:Countdown') +local DateExt = require('Module:Date/Ext') +local String = require('Module:StringUtils') +local LeagueIcon = require('Module:LeagueIcon') +local Logic = require('Module:Logic') +local Lua = require('Module:Lua') +local Table = require('Module:Table') +local Timezone = require('Module:Timezone') +local StreamLinks = require('Module:Links/Stream') + +local HighlightConditions = Lua.import('Module:HighlightConditions') + +local OpponentLibraries = require('Module:OpponentLibraries') +local Opponent = OpponentLibraries.Opponent +local OpponentDisplay = OpponentLibraries.OpponentDisplay + +local VS = 'VS' +local SCORE_STATUS = 'S' +local CURRENT_PAGE = mw.title.getCurrentTitle().text +local HIGHLIGHT_CLASS = 'tournament-highlighted-bg' +local TOURNAMENT_DEFAULT_ICON = 'Generic_Tournament_icon.png' +local NOW = os.date('%Y-%m-%d %H:%M', os.time(os.date('!*t') --[[@as osdateparam]])) + +---Display class for the header of a match ticker +---@class MatchTickerHeader +---@operator call(string|number|nil): MatchTickerHeader +---@field root Html +local Header = Class.new( + function(self, text) + self.root = mw.html.create('div') + :addClass('infobox-header') + :wikitext(text) + end +) + +---@param class string? +---@return MatchTickerHeader +function Header:addClass(class) + self.root:addClass(class) + return self +end + +---@return Html +function Header:create() + return mw.html.create('div'):node(self.root) +end + +---Display class for matches shown within a match ticker +---@class MatchTickerVersus +---@operator call(table): MatchTickerVersus +---@field root Html +---@field match table +local Versus = Class.new( + function(self, match) + self.root = mw.html.create('div'):addClass('versus') + self.match = match + end +) + +---@return Html +function Versus:create() + local bestof = self:bestof() + local scores = self:scores() + local upperText, lowerText + + if bestof then + upperText = scores or VS + lowerText = bestof + elseif scores then + upperText = scores + lowerText = VS + end + + if not lowerText then + return self.root:wikitext(VS) + end + + return self.root + :node(mw.html.create('div') + :addClass('versus-upper') + :node(upperText or VS) + ):node(mw.html.create('div') + :addClass('versus-lower') + :wikitext('(' .. lowerText .. ')') + ) +end + +---@return string? +function Versus:bestof() + local bestof = tonumber(self.match.bestof) or 0 + if bestof > 0 then + return Abbreviation.make('(Bo' .. bestof .. ')', '(Best of ' .. bestof .. ')') + end +end + +---@return string? +---@return string? +function Versus:scores() + if self.match.date > NOW then + return + end + + local scores = {} + + Array.forEach(self.match.match2opponents, function(opponent, opponentIndex) + local score = Logic.isNotEmpty(opponent.status) and opponent.status ~= SCORE_STATUS and opponent.status + or tonumber(opponent.score) or -1 + + table.insert(scores, score) + end) + + return table.concat(scores, ' : ') +end + +---Display class for matches shown within a match ticker +---@class MatchTickerScoreBoard +---@operator call(table): MatchTickerScoreBoard +---@field root Html +---@field match table +local ScoreBoard = Class.new( + function(self, match) + self.root = mw.html.create('div'):addClass('match-scoreboard') + self.match = match + end +) + +---@return Html +function ScoreBoard:create() + local match = self.match + local winner = tonumber(match.winner) + + return self.root + :node(self:opponent(match.match2opponents[1], winner == 1, true):addClass('team-left')) + :node(self:versus()) + :node(self:opponent(match.match2opponents[2], winner == 2):addClass('team-right')) +end + +---@param opponentData table +---@param isWinner boolean +---@param flip boolean? +---@return Html +function ScoreBoard:opponent(opponentData, isWinner, flip) + local opponent = Opponent.fromMatch2Record(opponentData) + ---@cast opponent -nil + if Opponent.isEmpty(opponent) or Opponent.isTbd(opponent) and opponent.type ~= Opponent.literal then + opponent = Opponent.tbd(Opponent.literal) + end + + local opponentName = Opponent.toName(opponent) + if not opponentName then + mw.logObject(opponent, 'Invalid Opponent, Opponent.toName returns nil') + opponentName = '' + end + + local opponentDisplay = mw.html.create('div') + :node(OpponentDisplay.InlineOpponent{ + opponent = opponent, + teamStyle = 'short', + flip = flip, + showLink = opponentName:gsub('_', ' ') ~= CURRENT_PAGE + }) + + return opponentDisplay +end + +---@return Html +function ScoreBoard:versus() + return Versus(self.match):create() +end + +---Display class for matches shown within a match ticker +---@class MatchTickerDetails +---@operator call(table): MatchTickerMatch +---@field root Html +---@field hideTournament boolean +---@field onlyHighlightOnValue string? +---@field match table +local Details = Class.new( + function(self, args) + assert(args.match, 'No Match passed to MatchTickerDetails class') + self.root = mw.html.create('div'):addClass('match-details') + self.hideTournament = args.hideTournament + self.onlyHighlightOnValue = args.onlyHighlightOnValue + self.match = args.match + end +) + +---@return Html +function Details:create() + local highlightCondition = HighlightConditions.match or HighlightConditions.tournament + if highlightCondition(self.match, {onlyHighlightOnValue = self.onlyHighlightOnValue}) then + self.root:addClass(HIGHLIGHT_CLASS) + end + + return self.root + :node(self:streams()) + :node(self:tournament()) + :node(self:countdown()) +end + +---@return Html +function Details:countdown() + local match = self.match + + local dateString + if Logic.readBool(match.dateexact) then + local timestamp = DateExt.readTimestamp(match.date) + (Timezone.getOffset(match.extradata.timezoneid) or 0) + dateString = DateExt.formatTimestamp('F j, Y - H:i', timestamp) .. ' ' + .. (Timezone.getTimezoneString(match.extradata.timezoneid) or (Timezone.getTimezoneString('UTC'))) + else + dateString = mw.getContentLanguage():formatDate('F j, Y', match.date) .. (Timezone.getTimezoneString('UTC')) + end + + dateString = 'June 22, 2024 - 02:00' .. (Timezone.getTimezoneString('UTC')) + + local countdownArgs = { + date = dateString, + finished = match.finished + } + + local countdownDisplay = mw.html.create('span') + :addClass('match-countdown') + :node(Countdown._create(countdownArgs)) + + return countdownDisplay +end + +---@return Html? +function Details:streams() + local match = self.match + local streams = mw.html.create('div') + :addClass('match-streams') + + if Table.isNotEmpty(match.stream) then + local streams = {} + + -- Copy from Module:Countdown + -- New format stream (twitch_en_2) + for rawHost, stream in pairs(match.stream) do + -- Check if its a new format stream + if #(mw.text.split(rawHost, '_', true)) == 3 then + -- Parse the string + local key = StreamLinks.StreamKey(rawHost) + -- Not allowed to add new keys while iterating it, add to another table + streams[key:toString()] = stream + else + streams[rawHost] = stream + end + end + + for platformName, targetStream in pairs(streams) do + -- TODO + end + else + links:node(mw.html.create('span') + :wikitext('no streams') + ) + end + + return links +end + +---@return Html? +function Details:tournament() + if self.hideTournament then + return + end + + local match = self.match + + local icon = LeagueIcon.display{ + icon = Logic.emptyOr(match.icon, TOURNAMENT_DEFAULT_ICON), + iconDark = match.icondark, + link = match.pagename, + name = match.tournament, + options = {noTemplate = true}, + } + + local displayName = Logic.emptyOr( + match.tickername, + match.tournament, + match.parent:gsub('_', ' ') + ) + + return mw.html.create('div') + :addClass('tournament') + :node(mw.html.create('div') + :addClass('tournament-icon') + :node(mw.html.create('div') + :wikitext(icon) + ) + ) + :node(mw.html.create('div') + :addClass('tournament-text') + :wikitext('[[' .. match.pagename .. '|' .. displayName .. ']]') + ) + +end + +---Display class for matches shown within a match ticker +---@class MatchTickerMatch +---@operator call({config: MatchTickerConfig, match: table}): MatchTickerMatch +---@field root Html +---@field config MatchTickerConfig +---@field match table +local Match = Class.new( + function(self, args) + self.root = mw.html.create('div'):addClass('match') + self.config = args.config + self.match = args.match + end +) + +---@return Html +function Match:create() + self.root:node(self:standardMatchRow()) + self.root:node(self:detailsRow()) + + return self.root +end + +---@param inheritedHeader string? +---@return string? +function Match:_expandHeader(inheritedHeader) + if not inheritedHeader then + return + end + + local headerArray = mw.text.split(inheritedHeader, '!') + + local index = 1 + if String.isEmpty(headerArray[1]) then + index = 2 + end + + local headerInput = 'brkts-header-' .. headerArray[index] + local expandedHeader = mw.message.new('brkts-header-' .. headerArray[index]) + ---@diagnostic disable-next-line: param-type-mismatch + :params(headerArray[index + 1] or ''):plain() --[[@as string]] + local failedExpandedHeader = '⧼' .. headerInput .. '⧽' + if Logic.isEmpty(expandedHeader) or failedExpandedHeader == expandedHeader then + return inheritedHeader + end + + return expandedHeader +end + +---@return Html +function Match:standardMatchRow() + return ScoreBoard(self.match):create() +end + +---@return Html +function Match:detailsRow() + return Details{ + match = self.match, + hideTournament = self.config.hideTournament, + isBrMatch = isBrMatch, + onlyHighlightOnValue = self.config.onlyHighlightOnValue + }:create() +end + +return { + Header = Header, + Match = Match, + Details = Details, + ScoreBoard = ScoreBoard, + Versus = Versus, +} diff --git a/stylesheets/commons/MatchTicker.less b/stylesheets/commons/MatchTicker.less new file mode 100644 index 00000000000..14412a3e55b --- /dev/null +++ b/stylesheets/commons/MatchTicker.less @@ -0,0 +1,124 @@ +/******************************************************************************* +Template(s): Match Ticker +Author(s): Nadox +*******************************************************************************/ +.dota2-test { + .match-section-header { + display: flex; + flex-direction: column; + padding: 1rem; + gap: 0.5em; + } + + .match { + border-bottom: 1px solid + var(--table-border-color, var(--clr-border, #bbbbbb)) !important; + padding: 0.75rem 1rem; + font-size: 0.875rem; + } + + .match-scoreboard { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + margin-bottom: 0.5rem; + + > div { + flex: 1; + } + + .team-left { + display: flex; + justify-content: right; + } + + .versus { + flex: 0 1 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .versus-lower { + font-size: 0.75rem; + color: var(--clr-secondary); + } + } + } + + .match-details { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0.75rem; + border-radius: 0.5rem; + font-size: 0.75rem; + + .theme--light & { + background-color: #0000000a; + } + + .theme--dark & { + background-color: #ffffff0a; + } + + .timer-hidden { + display: none; + } + + .tournament { + display: flex; + gap: 0.5rem; + justify-content: center; + align-items: center; + } + + .timer-object-countdown, + .timer-object-date { + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-weight: bold; + + &.timer-object-countdown-live { + .theme--light & { + color: #ffffff; + background-color: #b81414; + } + + .theme--dark & { + color: #2e0505; + background-color: #f5a3a3; + } + } + + &.timer-object-countdown-completed { + .theme--light & { + color: #ffffff; + background-color: #1d7c1d; + } + + .theme--dark & { + color: #0a290a; + background-color: #adebad; + } + } + + &:not(.timer-object-countdown-live) { + color: var(--clr-on-background); + + .theme--light & { + background-color: #00000014; + } + + .theme--dark & { + background-color: #ffffff14; + } + } + } + } + + .timer-object-separator { + display: none; + } +} From 2e254342cfd3bb8c036fef498e015dfa932440db Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Fri, 21 Jun 2024 10:54:21 +0200 Subject: [PATCH 04/19] Reverting previous changes --- javascript/commons/Countdown.js | 27 --- stylesheets/commons/FilterButtons.less | 280 ++++++++++++------------- 2 files changed, 140 insertions(+), 167 deletions(-) diff --git a/javascript/commons/Countdown.js b/javascript/commons/Countdown.js index 68bac62d98a..5066525ba26 100644 --- a/javascript/commons/Countdown.js +++ b/javascript/commons/Countdown.js @@ -45,9 +45,6 @@ liquipedia.countdown = { countdownChild.classList.add( 'timer-object-countdown' ); timerObjectNode.appendChild( countdownChild ); } ); - - liquipedia.countdown.setupCountdownsIfSwitchExists(); - // Only run when the window is actually in the front, not in background tabs (on browsers that support it) mw.loader.using( 'mediawiki.visibleTimeout' ).then( ( require ) => { liquipedia.countdown.timeoutFunctions = require( 'mediawiki.visibleTimeout' ); @@ -56,29 +53,6 @@ liquipedia.countdown = { } ); } }, - setupCountdownsIfSwitchExists: function() { - const switchElements = document.querySelectorAll( '.switch[data-trigger-event]' ); - - switchElements.forEach( ( switchElem ) => { - if ( switchElem.dataset && switchElem.dataset.triggerEvent === 'countdown' ) { - const isChecked = switchElem.classList.contains( 'switch-on' ); - liquipedia.countdown.toggleCountdowns( isChecked ); - - document.addEventListener('switchTriggered', function(event) { - console.log('SWITCH TRIGGERED!'); - if (event.detail.event === 'countdown') { - liquipedia.countdown.toggleCountdowns(event.detail.value); - } - }); - } - }); - }, - toggleCountdowns: function( isCountdownToggled ) { - liquipedia.countdown.timerObjectNodes.forEach( ( timerObjectNode ) => { - timerObjectNode.querySelector( '.timer-object-date' ).classList.toggle( 'timer-hidden', isCountdownToggled ); - timerObjectNode.querySelector( '.timer-object-countdown' ).classList.toggle( 'timer-hidden', !isCountdownToggled ); - }); - }, parseTimerObjectNodeToDateObj: function( timerObjectNode ) { if ( timerObjectNode.dataset.timestamp === 'error' ) { return false; @@ -197,7 +171,6 @@ liquipedia.countdown = { if ( timerObjectNode.dataset.finished !== 'finished' ) { html += streamsarr.join( ' ' ); } - console.log(html); timerObjectNode.querySelector( '.timer-object-countdown' ).innerHTML = html; }, getStreamName: function( url ) { diff --git a/stylesheets/commons/FilterButtons.less b/stylesheets/commons/FilterButtons.less index 38b74ffd397..1b02f3db8c1 100644 --- a/stylesheets/commons/FilterButtons.less +++ b/stylesheets/commons/FilterButtons.less @@ -3,186 +3,186 @@ Template(s): Filter buttons Author(s): Elysienna, Nadox *******************************************************************************/ .filter-category--hidden { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; - opacity: 0; + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; + opacity: 0; } .filter-buttons { - font-size: 10pt; - display: flex; - margin: 0.125rem; - justify-content: center; - align-items: center; - flex-flow: row wrap; + font-size: 10pt; + display: flex; + margin: 0.125rem; + justify-content: center; + align-items: center; + flex-flow: row wrap; } .filter-button { - margin-top: 0.375rem; - padding: 0.125rem; - text-overflow: ellipsis; - overflow: hidden; - text-align: center; - background-color: transparent; - border: 0.125rem solid var(--clr-primary-container, #c1cee8); - color: var(--clr-primary, #3366cc); - border-radius: 0.25rem; - transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, - color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + margin-top: 0.375rem; + padding: 0.125rem; + text-overflow: ellipsis; + overflow: hidden; + text-align: center; + background-color: transparent; + border: 0.125rem solid var(--clr-primary-container, #c1cee8); + color: var(--clr-primary, #3366cc); + border-radius: 0.25rem; + transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, + color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .filter-button-all { - padding: 0.125rem; - max-width: none; - margin-right: 0.5rem; + padding: 0.125rem; + max-width: none; + margin-right: 0.5rem; } .filter-button:not(:first-child) { - flex-grow: 1; - max-width: 33%; + flex-grow: 1; + max-width: 33%; } .filter-button:not(:last-child) { - margin-right: 0.5rem; + margin-right: 0.5rem; } .filter-button:hover { - background-color: var(--clr-primary, #3366cc); - border-color: var(--clr-primary, #3366cc); - color: var(--clr-on-primary, #ffffff); - cursor: pointer; + background-color: var(--clr-primary, #3366cc); + border-color: var(--clr-primary, #3366cc); + color: var(--clr-on-primary, #ffffff); + cursor: pointer; } .filter-button:focus { - outline: 0; - box-shadow: 0 0.5rem 0.625rem 0.125rem rgba(0, 0, 0, 0.1), - 0 0 0 0.1875rem #c2d1f0; + outline: 0; + box-shadow: 0 0.5rem 0.625rem 0.125rem rgba(0, 0, 0, 0.1), + 0 0 0 0.1875rem #c2d1f0; } .filter-button--active { - color: var(--clr-on-primary-container, #ffffff); - background-color: var(--clr-primary-container, #1f3d7a); - border-color: var(--clr-primary-container, #1f3d7a); + color: var(--clr-on-primary-container, #ffffff); + background-color: var(--clr-primary-container, #1f3d7a); + border-color: var(--clr-primary-container, #1f3d7a); } .filter-effect-fade { - animation-name: fadeIn; - animation-duration: 0.8s; + animation-name: fadeIn; + animation-duration: 0.8s; } .filter-effect-bounce { - animation-name: bounceIn; - animation-duration: 0.8s; + animation-name: bounceIn; + animation-duration: 0.8s; } .dota2-test { - .filter-button { - display: flex; - align-items: center; - border-radius: 0.5rem; - padding: 0 0.75rem; - font-weight: bold; - flex-grow: initial; - position: relative; - border: 0; - min-height: 2rem; - color: #3366cc; - font-size: 0.875rem; - - .theme--light & { - color: var(--clr-wiki-theme-primary); - } - - .theme--dark & { - color: #ffffff; - } - - &:not(.is--active)::after { - content: ""; - opacity: 0.12; - position: absolute; - inset: 0; - z-index: -1; - border-radius: 0.5rem; - background-color: #c1cee8; - - .theme--light & { - background-color: var(--clr-wiki-theme-primary); - } - - .theme--dark & { - background-color: #ffffff; - } - } - - &:hover { - color: #ffffff; - background-color: var(--clr-wiki-theme-primary, #1f3d7a); - - &::after { - opacity: 0.24; - } - } - - &.filter-button--active { - background-color: var(--clr-wiki-theme-primary, #1f3d7a); - color: #ffffff; - } - } + .filter-button { + display: flex; + align-items: center; + border-radius: 0.5rem; + padding: 0 0.75rem; + font-weight: bold; + flex-grow: initial; + position: relative; + border: 0; + min-height: 2rem; + color: #3366cc; + font-size: 0.875rem; + + .theme--light & { + color: var(--clr-wiki-theme-primary); + } + + .theme--dark & { + color: #ffffff; + } + + &:not(.is--active)::after { + content: ""; + opacity: 0.12; + position: absolute; + inset: 0; + z-index: -1; + border-radius: 0.5rem; + background-color: #c1cee8; + + .theme--light & { + background-color: var(--clr-wiki-theme-primary); + } + + .theme--dark & { + background-color: #ffffff; + } + } + + &:hover { + color: #ffffff; + background-color: var(--clr-wiki-theme-primary, #1f3d7a); + + &::after { + opacity: 0.24; + } + } + + &.filter-button--active { + background-color: var(--clr-wiki-theme-primary, #1f3d7a); + color: #ffffff; + } + } } /* Keyframes filter effects */ @keyframes fadeIn { - from { - opacity: 0; - } + from { + opacity: 0; + } - to { - opacity: 1; - } + to { + opacity: 1; + } } @keyframes bounceIn { - from { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - 0% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - 20% { - transform: scale3d(1.1, 1.1, 1.1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - 40% { - transform: scale3d(0.9, 0.9, 0.9); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - 80% { - transform: scale3d(0.97, 0.97, 0.97); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - to { - opacity: 1; - transform: scale3d(1, 1, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } + from { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 0% { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 20% { + transform: scale3d(1.1, 1.1, 1.1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 40% { + transform: scale3d(0.9, 0.9, 0.9); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 60% { + opacity: 1; + transform: scale3d(1.03, 1.03, 1.03); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + 80% { + transform: scale3d(0.97, 0.97, 0.97); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + + to { + opacity: 1; + transform: scale3d(1, 1, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } } From 701a006805aea07da84f6c4f9d53a92c345a2ffa Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Fri, 21 Jun 2024 10:57:05 +0200 Subject: [PATCH 05/19] Reverting previous changes --- javascript/commons/Countdown.js | 519 ++++++++++++------------- stylesheets/commons/FilterButtons.less | 68 ++-- 2 files changed, 292 insertions(+), 295 deletions(-) diff --git a/javascript/commons/Countdown.js b/javascript/commons/Countdown.js index 5066525ba26..2013edee896 100644 --- a/javascript/commons/Countdown.js +++ b/javascript/commons/Countdown.js @@ -6,99 +6,98 @@ liquipedia.countdown = { timeoutFunctions: null, timerObjectNodes: null, lastCountdownId: null, - init: function() { + init: function () { // // Cancels last countdown loop if it exists to prevent multiple countdowns running at the same time - if ( liquipedia.countdown.timeoutFunctions && liquipedia.countdown.lastCountdownId ) { - liquipedia.countdown.timeoutFunctions.clear( liquipedia.countdown.lastCountdownId ); + if (liquipedia.countdown.timeoutFunctions && liquipedia.countdown.lastCountdownId) { + liquipedia.countdown.timeoutFunctions.clear(liquipedia.countdown.lastCountdownId); } - liquipedia.countdown.timerObjectNodes = document.querySelectorAll( '.timer-object' ); - if ( liquipedia.countdown.timerObjectNodes.length > 0 ) { - mw.loader.using( 'user.options', () => { - liquipedia.countdown.timerObjectNodes.forEach( ( timerObjectNode ) => { - const dateObject = liquipedia.countdown.parseTimerObjectNodeToDateObj( timerObjectNode ); - const dateChild = document.createElement( 'span' ); - if ( typeof dateObject === 'object' ) { - const disableTimeZoneAdjust = mw.user.options.get( 'teamliquidintegration-disable-countdown-timezone-adjust' ) === '1' || mw.user.options.get( 'teamliquidintegration-disable-countdown-timezone-adjust' ) === 1; - if ( disableTimeZoneAdjust ) { + liquipedia.countdown.timerObjectNodes = document.querySelectorAll('.timer-object'); + if (liquipedia.countdown.timerObjectNodes.length > 0) { + mw.loader.using('user.options', () => { + liquipedia.countdown.timerObjectNodes.forEach((timerObjectNode) => { + const dateObject = liquipedia.countdown.parseTimerObjectNodeToDateObj(timerObjectNode); + const dateChild = document.createElement('span'); + if (typeof dateObject === 'object') { + const disableTimeZoneAdjust = mw.user.options.get('teamliquidintegration-disable-countdown-timezone-adjust') === '1' || mw.user.options.get('teamliquidintegration-disable-countdown-timezone-adjust') === 1; + if (disableTimeZoneAdjust) { dateChild.innerHTML = timerObjectNode.innerHTML; } else { - dateChild.innerHTML = liquipedia.countdown.getCorrectTimeZoneString( dateObject ); + dateChild.innerHTML = liquipedia.countdown.getCorrectTimeZoneString(dateObject); } } else { dateChild.innerHTML = timerObjectNode.innerHTML; } - dateChild.classList.add( 'timer-object-date' ); + dateChild.classList.add('timer-object-date'); timerObjectNode.innerHTML = ''; - timerObjectNode.appendChild( dateChild ); + timerObjectNode.appendChild(dateChild); let separatorChild; - if ( typeof timerObjectNode.dataset.separator !== 'undefined' ) { - separatorChild = document.createElement( 'span' ); + if (typeof timerObjectNode.dataset.separator !== 'undefined') { + separatorChild = document.createElement('span'); separatorChild.innerText = timerObjectNode.dataset.separator; - separatorChild.classList.add( 'timer-object-separator' ); + separatorChild.classList.add('timer-object-separator'); } else { - separatorChild = document.createElement( 'br' ); - separatorChild.classList.add( 'timer-object-separator' ); + separatorChild = document.createElement('br'); + separatorChild.classList.add('timer-object-separator'); } - timerObjectNode.appendChild( separatorChild ); - const countdownChild = document.createElement( 'span' ); - countdownChild.classList.add( 'timer-object-countdown' ); - timerObjectNode.appendChild( countdownChild ); - } ); + timerObjectNode.appendChild(separatorChild); + const countdownChild = document.createElement('span'); + countdownChild.classList.add('timer-object-countdown'); + timerObjectNode.appendChild(countdownChild); + }); // Only run when the window is actually in the front, not in background tabs (on browsers that support it) - mw.loader.using( 'mediawiki.visibleTimeout' ).then( ( require ) => { - liquipedia.countdown.timeoutFunctions = require( 'mediawiki.visibleTimeout' ); + mw.loader.using('mediawiki.visibleTimeout').then((require) => { + liquipedia.countdown.timeoutFunctions = require('mediawiki.visibleTimeout'); liquipedia.countdown.runCountdown(); - } ); - } ); + }); + }); } }, - parseTimerObjectNodeToDateObj: function( timerObjectNode ) { - if ( timerObjectNode.dataset.timestamp === 'error' ) { + parseTimerObjectNodeToDateObj: function (timerObjectNode) { + if (timerObjectNode.dataset.timestamp === 'error') { return false; } - return new Date( 1000 * parseInt( timerObjectNode.dataset.timestamp ) ); + return new Date(1000 * parseInt(timerObjectNode.dataset.timestamp)); }, - runCountdown: function() { - console.log( 'Running countdown: ' + liquipedia.countdown.timerObjectNodes.length); - liquipedia.countdown.timerObjectNodes.forEach( ( timerObjectNode ) => { - liquipedia.countdown.setCountdownString( timerObjectNode ); - } ); + runCountdown: function () { + liquipedia.countdown.timerObjectNodes.forEach((timerObjectNode) => { + liquipedia.countdown.setCountdownString(timerObjectNode); + }); liquipedia.countdown.lastCountdownId = liquipedia.countdown.timeoutFunctions.set( liquipedia.countdown.runCountdown, 1000 ); }, - setCountdownString: function( timerObjectNode ) { - const streamsarr = [ ]; + setCountdownString: function (timerObjectNode) { + const streamsarr = []; let datestr = '', live = 'LIVE!'; - if ( typeof timerObjectNode.dataset.countdownEndText !== 'undefined' ) { + if (typeof timerObjectNode.dataset.countdownEndText !== 'undefined') { live = timerObjectNode.dataset.countdownEndText; } - if ( timerObjectNode.dataset.timestamp !== 'error' ) { - const differenceInSeconds = Math.floor( parseInt( timerObjectNode.dataset.timestamp ) - ( Date.now().valueOf() / 1000 ) ); - if ( differenceInSeconds <= 0 ) { - if ( differenceInSeconds > -43200 && timerObjectNode.dataset.finished !== 'finished' ) { + if (timerObjectNode.dataset.timestamp !== 'error') { + const differenceInSeconds = Math.floor(parseInt(timerObjectNode.dataset.timestamp) - (Date.now().valueOf() / 1000)); + if (differenceInSeconds <= 0) { + if (differenceInSeconds > -43200 && timerObjectNode.dataset.finished !== 'finished') { datestr = '' + live + ''; } } else { let differenceInSecondsMath = differenceInSeconds; - const weeks = Math.floor( differenceInSecondsMath / 604800 ); + const weeks = Math.floor(differenceInSecondsMath / 604800); differenceInSecondsMath = differenceInSecondsMath % 604800; - const days = Math.floor( differenceInSecondsMath / 86400 ); + const days = Math.floor(differenceInSecondsMath / 86400); differenceInSecondsMath = differenceInSecondsMath % 86400; - const hours = Math.floor( differenceInSecondsMath / 3600 ); + const hours = Math.floor(differenceInSecondsMath / 3600); differenceInSecondsMath = differenceInSecondsMath % 3600; - const minutes = Math.floor( differenceInSecondsMath / 60 ); - const seconds = Math.floor( differenceInSecondsMath % 60 ); - if ( differenceInSeconds >= 604800 ) { + const minutes = Math.floor(differenceInSecondsMath / 60); + const seconds = Math.floor(differenceInSecondsMath % 60); + if (differenceInSeconds >= 604800) { datestr = weeks + 'w ' + days + 'd'; - } else if ( differenceInSeconds >= 86400 ) { + } else if (differenceInSeconds >= 86400) { datestr = days + 'd ' + hours + 'h ' + minutes + 'm'; - } else if ( differenceInSeconds >= 3600 ) { + } else if (differenceInSeconds >= 3600) { datestr = hours + 'h ' + minutes + 'm ' + seconds + 's'; - } else if ( differenceInSeconds >= 60 ) { + } else if (differenceInSeconds >= 60) { datestr = minutes + 'm ' + seconds + 's'; } else { datestr = seconds + 's'; @@ -107,220 +106,220 @@ liquipedia.countdown = { } else { datestr = ''; // DATE ERROR! } - if ( timerObjectNode.dataset.streamTwitch ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamTwitch) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamTwitch2 ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamTwitch2) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamYoutube ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamYoutube) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamAfreeca ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamAfreeca) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamAfreecatv ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamAfreecatv) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamBilibili ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamBilibili) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamBooyah ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamBooyah) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamCc163 ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamCc163) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamDailymotion ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamDailymotion) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamDouyu ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamDouyu) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamFacebook ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamFacebook) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamHuomao ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamHuomao) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamHuya ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamHuya) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamKick ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamKick) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamLoco ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamLoco) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamMildom ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamMildom) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamNimo ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamNimo) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamTrovo ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamTrovo) { + streamsarr.push(''); } - if ( timerObjectNode.dataset.streamTl ) { - streamsarr.push( '' ); + if (timerObjectNode.dataset.streamTl) { + streamsarr.push(''); } let html = '' + datestr + ''; - if ( datestr.length > 0 && streamsarr.length > 0 ) { + if (datestr.length > 0 && streamsarr.length > 0) { html += ' - '; } - if ( timerObjectNode.dataset.finished !== 'finished' ) { - html += streamsarr.join( ' ' ); + if (timerObjectNode.dataset.finished !== 'finished') { + html += streamsarr.join(' '); } - timerObjectNode.querySelector( '.timer-object-countdown' ).innerHTML = html; + timerObjectNode.querySelector('.timer-object-countdown').innerHTML = html; }, - getStreamName: function( url ) { - return url.replace( /\s/g, '_' ); + getStreamName: function (url) { + return url.replace(/\s/g, '_'); }, - timeZoneAbbr: new Map( [ - [ 'Acre Time', 'ACT' ], - [ 'Afghanistan Time', 'AFT' ], - [ 'Alaska Daylight Time', 'AKDT' ], - [ 'Alaska Standard Time', 'AKST' ], - [ 'Amazon Time', 'AMT' ], - [ 'Arabic Standard Time', 'AST' ], - [ 'Argentina Standard Time', 'ART' ], - [ 'Armenia Time', 'AMT' ], - [ 'Atlantic Daylight Time', 'ADT' ], - [ 'Atlantic Standard Time', 'AST' ], - [ 'Australian Central Daylight Time', 'ACDT' ], - [ 'Australian Central Standard Time', 'ACST' ], - [ 'Australian Central Western Standard Time', 'ACWST' ], - [ 'Australian Eastern Daylight Time', 'AEDT' ], - [ 'Australian Eastern Standard Time', 'AEST' ], - [ 'Australian Western Standard Time', 'AWST' ], - [ 'Aqtobe Time', 'AQTT' ], - [ 'Azerbaijan Summer Time', 'AZST' ], - [ 'Azerbaijan Time', 'AZT' ], - [ 'Azores Summer Time', 'AZOST' ], - [ 'Azores Standard Time', '' ], - [ 'Bangladesh Standard Time', 'BST' ], - [ 'Bhutan Time', 'BTT' ], - [ 'Bolivia Time', 'BOT' ], - [ 'Brasilia Standard Time', 'BRT' ], - [ 'Brasilia Summer Time', 'BRST' ], - [ 'British Summer Time', 'BST' ], - [ 'Brunei Darussalam Time', 'BNT' ], - [ 'Cape Verde Standard Time', 'CVT' ], - [ 'Center Indonesia Time', 'WITA' ], - [ 'Central Africa Time', 'CAT' ], - [ 'Central Daylight Time', 'CDT' ], - [ 'Central European Summer Time', 'CEST' ], - [ 'Central European Standard Time', 'CET' ], - [ 'Central Standard Time', 'CT' ], - [ 'Chatham Standard Time', 'CHAST' ], - [ 'Chile Standard Time', 'CLT' ], - [ 'China Standard Time', 'CST' ], - [ 'Colombia Standard Time', 'COT' ], - [ 'Cuba Daylight Time', 'CDT' ], - [ 'Cuba Standard Time', 'CST' ], - [ 'East Africa Time', 'EAT' ], - [ 'East Kazakhstan Time', 'ALMT' ], - [ 'Easter Island Standard Time', 'EAST' ], - [ 'Eastern Daylight Time', 'EDT' ], - [ 'Eastern European Standard Time', 'EET' ], - [ 'Eastern European Summer Time', 'EEST' ], - [ 'Eastern Standard Time', 'EST' ], - [ 'Fiji Standard Time', 'FJST' ], - [ 'French Guiana Time', 'GFT' ], - [ 'Georgia Standard Time', 'GET' ], - [ 'Greenwich Mean Time', 'GMT' ], - [ 'Gulf Standard Time', 'GST' ], - [ 'Guyana Time', 'GYT' ], - [ 'Hawaii-Aleutian Daylight Time', 'HDT' ], - [ 'Hawaii-Aleutian Standard Time', 'HST' ], - [ 'Hong Kong Standard Time', 'HKT' ], - [ 'Hovd Standard Time', 'HOVST' ], - [ 'India Standard Time', 'IST' ], - [ 'Indochina Time', 'ICT' ], - [ 'Iran Daylight Time', 'IRDT' ], - [ 'Iran Standard Time', 'IRST' ], - [ 'Irkutsk Standard Time', 'IRKST' ], - [ 'Israel Daylight Time', 'IDT' ], - [ 'Israel Standard Time', 'IST' ], - [ 'Japan Standard Time', 'JST' ], - [ 'Korean Standard Time', 'KST' ], - [ 'Krasnoyarsk Standard Time', 'KRAST' ], - [ 'Line Islands Time', 'LINT' ], - [ 'Lord Howe Standard Time', 'LHST' ], - [ 'Magadan Standard Time', 'MAGT' ], - [ 'Malaysia Time', 'MYT' ], - [ 'Marquesas Time', 'MART' ], - [ 'Mauritius Standard Time', 'MUT' ], - [ 'Mexican Pacific Standard Time', 'PST' ], - [ 'Moscow Standard Time', 'MSK' ], - [ 'Mountain Daylight Time', 'MDT' ], - [ 'Mountain Standard Time', 'MST' ], - [ 'Myanmar Time', 'MMT' ], - [ 'Nepal Time', 'NPT' ], - [ 'New Zealand Daylight Time', 'NZDT' ], - [ 'New Zealand Standard Time', 'NZST' ], - [ 'Newfoundland Daylight Time', 'NDT' ], - [ 'Newfoundland Standard Time', 'NDT' ], - [ 'Norfolk Island Time', 'NFT' ], - [ 'Novosibirsk Standard Time', 'NOVST' ], - [ 'Omsk Standard Time', 'OMST' ], - [ 'Pacific Daylight Time', 'PDT' ], - [ 'Pacific Standard Time', 'PST' ], - [ 'Pakistan Standard Time', 'PKT' ], - [ 'Papua New Guinea Time', 'PGT' ], - [ 'Paraguay Standard Time', 'PYST' ], - [ 'Petropavlovsk-Kamchatski Standard Time', 'PETT' ], - [ 'Philippine Standard Time', 'PHT' ], - [ 'Pyongyang Time', 'PYT' ], - [ 'Sakhalin Standard Time', 'SAKT' ], - [ 'Samara Standard Time', 'SAMT' ], - [ 'Singapore Standard Time', 'SGT' ], - [ 'Solomon Islands Time', 'SBT' ], - [ 'South Africa Standard Time', 'SAST' ], - [ 'St. Pierre & Miquelon Daylight Time', 'PMDT' ], - [ 'St. Pierre & Miquelon Standard Time', 'PMST' ], - [ 'Taipei Standard Time', 'TST' ], - [ 'Tonga Standard Time', 'TOT' ], - [ 'Turkey Time', 'TRT' ], - [ 'Ulaanbaatar Standard Time', 'ULAST' ], - [ 'Uruguay Standard Time', 'UYT' ], - [ 'Uzbekistan Standard Time', 'UZT' ], - [ 'Venezuelan Standard Time', 'VET' ], - [ 'Vladivostok Standard Time', 'VLAT' ], - [ 'West Africa Standard Time', 'WAST' ], - [ 'West Greenland Summer Time', 'WGST' ], - [ 'West Greenland Standard Time', 'WGT' ], - [ 'Western European Summer Time', 'WEST' ], - [ 'Western Indonesia Time', 'WIB' ], - [ 'Yakutsk Standard Time', 'YAKT' ], - [ 'Yekaterinburg Standard Time', 'YEKT' ] - ] ), - getMonthNameFromMonthNumber: function( newFutureMonth ) { - const monthNames = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; - return monthNames[ newFutureMonth ]; + timeZoneAbbr: new Map([ + ['Acre Time', 'ACT'], + ['Afghanistan Time', 'AFT'], + ['Alaska Daylight Time', 'AKDT'], + ['Alaska Standard Time', 'AKST'], + ['Amazon Time', 'AMT'], + ['Arabic Standard Time', 'AST'], + ['Argentina Standard Time', 'ART'], + ['Armenia Time', 'AMT'], + ['Atlantic Daylight Time', 'ADT'], + ['Atlantic Standard Time', 'AST'], + ['Australian Central Daylight Time', 'ACDT'], + ['Australian Central Standard Time', 'ACST'], + ['Australian Central Western Standard Time', 'ACWST'], + ['Australian Eastern Daylight Time', 'AEDT'], + ['Australian Eastern Standard Time', 'AEST'], + ['Australian Western Standard Time', 'AWST'], + ['Aqtobe Time', 'AQTT'], + ['Azerbaijan Summer Time', 'AZST'], + ['Azerbaijan Time', 'AZT'], + ['Azores Summer Time', 'AZOST'], + ['Azores Standard Time', ''], + ['Bangladesh Standard Time', 'BST'], + ['Bhutan Time', 'BTT'], + ['Bolivia Time', 'BOT'], + ['Brasilia Standard Time', 'BRT'], + ['Brasilia Summer Time', 'BRST'], + ['British Summer Time', 'BST'], + ['Brunei Darussalam Time', 'BNT'], + ['Cape Verde Standard Time', 'CVT'], + ['Center Indonesia Time', 'WITA'], + ['Central Africa Time', 'CAT'], + ['Central Daylight Time', 'CDT'], + ['Central European Summer Time', 'CEST'], + ['Central European Standard Time', 'CET'], + ['Central Standard Time', 'CT'], + ['Chatham Standard Time', 'CHAST'], + ['Chile Standard Time', 'CLT'], + ['China Standard Time', 'CST'], + ['Colombia Standard Time', 'COT'], + ['Cuba Daylight Time', 'CDT'], + ['Cuba Standard Time', 'CST'], + ['East Africa Time', 'EAT'], + ['East Kazakhstan Time', 'ALMT'], + ['Easter Island Standard Time', 'EAST'], + ['Eastern Daylight Time', 'EDT'], + ['Eastern European Standard Time', 'EET'], + ['Eastern European Summer Time', 'EEST'], + ['Eastern Standard Time', 'EST'], + ['Fiji Standard Time', 'FJST'], + ['French Guiana Time', 'GFT'], + ['Georgia Standard Time', 'GET'], + ['Greenwich Mean Time', 'GMT'], + ['Gulf Standard Time', 'GST'], + ['Guyana Time', 'GYT'], + ['Hawaii-Aleutian Daylight Time', 'HDT'], + ['Hawaii-Aleutian Standard Time', 'HST'], + ['Hong Kong Standard Time', 'HKT'], + ['Hovd Standard Time', 'HOVST'], + ['India Standard Time', 'IST'], + ['Indochina Time', 'ICT'], + ['Iran Daylight Time', 'IRDT'], + ['Iran Standard Time', 'IRST'], + ['Irkutsk Standard Time', 'IRKST'], + ['Israel Daylight Time', 'IDT'], + ['Israel Standard Time', 'IST'], + ['Japan Standard Time', 'JST'], + ['Korean Standard Time', 'KST'], + ['Krasnoyarsk Standard Time', 'KRAST'], + ['Line Islands Time', 'LINT'], + ['Lord Howe Standard Time', 'LHST'], + ['Magadan Standard Time', 'MAGT'], + ['Malaysia Time', 'MYT'], + ['Marquesas Time', 'MART'], + ['Mauritius Standard Time', 'MUT'], + ['Mexican Pacific Standard Time', 'PST'], + ['Moscow Standard Time', 'MSK'], + ['Mountain Daylight Time', 'MDT'], + ['Mountain Standard Time', 'MST'], + ['Myanmar Time', 'MMT'], + ['Nepal Time', 'NPT'], + ['New Zealand Daylight Time', 'NZDT'], + ['New Zealand Standard Time', 'NZST'], + ['Newfoundland Daylight Time', 'NDT'], + ['Newfoundland Standard Time', 'NDT'], + ['Norfolk Island Time', 'NFT'], + ['Novosibirsk Standard Time', 'NOVST'], + ['Omsk Standard Time', 'OMST'], + ['Pacific Daylight Time', 'PDT'], + ['Pacific Standard Time', 'PST'], + ['Pakistan Standard Time', 'PKT'], + ['Papua New Guinea Time', 'PGT'], + ['Paraguay Standard Time', 'PYST'], + ['Petropavlovsk-Kamchatski Standard Time', 'PETT'], + ['Philippine Standard Time', 'PHT'], + ['Pyongyang Time', 'PYT'], + ['Sakhalin Standard Time', 'SAKT'], + ['Samara Standard Time', 'SAMT'], + ['Singapore Standard Time', 'SGT'], + ['Solomon Islands Time', 'SBT'], + ['South Africa Standard Time', 'SAST'], + ['St. Pierre & Miquelon Daylight Time', 'PMDT'], + ['St. Pierre & Miquelon Standard Time', 'PMST'], + ['Taipei Standard Time', 'TST'], + ['Tonga Standard Time', 'TOT'], + ['Turkey Time', 'TRT'], + ['Ulaanbaatar Standard Time', 'ULAST'], + ['Uruguay Standard Time', 'UYT'], + ['Uzbekistan Standard Time', 'UZT'], + ['Venezuelan Standard Time', 'VET'], + ['Vladivostok Standard Time', 'VLAT'], + ['West Africa Standard Time', 'WAST'], + ['West Greenland Summer Time', 'WGST'], + ['West Greenland Standard Time', 'WGT'], + ['Western European Summer Time', 'WEST'], + ['Western Indonesia Time', 'WIB'], + ['Yakutsk Standard Time', 'YAKT'], + ['Yekaterinburg Standard Time', 'YEKT'] + ]), + getMonthNameFromMonthNumber: function (newFutureMonth) { + const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; + return monthNames[newFutureMonth]; }, - getTimeZoneNameLong: function( dateObject ) { + getTimeZoneNameLong: function (dateObject) { let date; let result; - const dateTimeFormat = new Intl.DateTimeFormat( 'en', { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, timeZoneName: 'long' } ); - if ( typeof Intl.DateTimeFormat.prototype.formatToParts === 'function' ) { - date = dateTimeFormat.formatToParts( dateObject ); - date.forEach( ( element ) => { - if ( element.type === 'timeZoneName' ) { + const dateTimeFormat = new Intl.DateTimeFormat('en', { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, timeZoneName: 'long' }); + if (typeof Intl.DateTimeFormat.prototype.formatToParts === 'function') { + date = dateTimeFormat.formatToParts(dateObject); + date.forEach((element) => { + if (element.type === 'timeZoneName') { result = element.value; } - } ); + }); } else { - date = dateTimeFormat.format( dateObject ); - if ( date.includes( ',' ) ) { - result = date.split( ',' )[ 1 ].trim(); + date = dateTimeFormat.format(dateObject); + if (date.includes(',')) { + result = date.split(',')[1].trim(); } else { - result = date.split( ' ' ).slice( 2 ).join( ' ' ).trim(); + result = date.split(' ').slice(2).join(' ').trim(); } } return result; }, - getCorrectTimeZoneString: function( dateObject ) { + getCorrectTimeZoneString: function (dateObject) { const userTime = { localYear: dateObject.getFullYear(), localMonth: dateObject.getMonth(), @@ -340,68 +339,68 @@ liquipedia.countdown = { dateObjectHours: dateObject.getHours(), dateObjectMinutes: dateObject.getMinutes(), - timeZoneName: liquipedia.countdown.getTimeZoneNameLong( dateObject ) + timeZoneName: liquipedia.countdown.getTimeZoneNameLong(dateObject) }; let calculatedOffsetHours = 0; - const calculatedOffsetMinutes = ( userTime.localMinutes - userTime.utcMinutes ); + const calculatedOffsetMinutes = (userTime.localMinutes - userTime.utcMinutes); let offsetMinutesAsString = ''; let offsetHoursWithSign = '+0'; let finalTimeZoneAbbr = ''; - if ( userTime.localDay === userTime.utcDay ) { + if (userTime.localDay === userTime.utcDay) { calculatedOffsetHours = userTime.localHours - userTime.utcHours; - } else if ( userTime.localMonth === userTime.utcMonth ) { + } else if (userTime.localMonth === userTime.utcMonth) { // Month is same, so no problems comparing dates - if ( userTime.localDay > userTime.utcDay ) { + if (userTime.localDay > userTime.utcDay) { // +24 Hours because of the next day - calculatedOffsetHours = -( userTime.utcHours ) + userTime.localHours + 24; - } else if ( userTime.localDay < userTime.utcDay ) { + calculatedOffsetHours = -(userTime.utcHours) + userTime.localHours + 24; + } else if (userTime.localDay < userTime.utcDay) { // -24 Hours because of the day before - calculatedOffsetHours = -( userTime.utcHours ) + userTime.localHours - 24; + calculatedOffsetHours = -(userTime.utcHours) + userTime.localHours - 24; } - } else if ( ( userTime.localMonth > userTime.utcMonth && userTime.localYear === userTime.utcYear ) || userTime.localYear > userTime.utcYear ) { + } else if ((userTime.localMonth > userTime.utcMonth && userTime.localYear === userTime.utcYear) || userTime.localYear > userTime.utcYear) { // +24 Hours because of the next day (in next month or year) - calculatedOffsetHours = -( userTime.utcHours ) + userTime.localHours + 24; - } else if ( ( userTime.localMonth < userTime.utcMonth && userTime.localYear === userTime.utcYear ) || userTime.localYear < userTime.utcYear ) { + calculatedOffsetHours = -(userTime.utcHours) + userTime.localHours + 24; + } else if ((userTime.localMonth < userTime.utcMonth && userTime.localYear === userTime.utcYear) || userTime.localYear < userTime.utcYear) { // -24 Hours because of the day before (in previous month or year) - calculatedOffsetHours = -( userTime.utcHours ) + userTime.localHours - 24; + calculatedOffsetHours = -(userTime.utcHours) + userTime.localHours - 24; } - const calculatedOffsetInMinutes = ( calculatedOffsetHours * 60 ) + calculatedOffsetMinutes; + const calculatedOffsetInMinutes = (calculatedOffsetHours * 60) + calculatedOffsetMinutes; - if ( calculatedOffsetHours > 0 ) { - if ( calculatedOffsetInMinutes % 60 !== 0 ) { - offsetMinutesAsString = ':' + Math.abs( calculatedOffsetMinutes ); + if (calculatedOffsetHours > 0) { + if (calculatedOffsetInMinutes % 60 !== 0) { + offsetMinutesAsString = ':' + Math.abs(calculatedOffsetMinutes); } - } else if ( calculatedOffsetHours < 0 ) { - if ( calculatedOffsetInMinutes % 60 !== 0 ) { - offsetMinutesAsString = ':' + Math.abs( calculatedOffsetMinutes ); + } else if (calculatedOffsetHours < 0) { + if (calculatedOffsetInMinutes % 60 !== 0) { + offsetMinutesAsString = ':' + Math.abs(calculatedOffsetMinutes); } } let finalTimeZoneName = 'UTC' + offsetHoursWithSign + offsetMinutesAsString; - if ( calculatedOffsetHours < 0 ) { - offsetHoursWithSign = '-' + Math.abs( calculatedOffsetHours ); - } else if ( calculatedOffsetHours > 0 ) { - offsetHoursWithSign = '+' + Math.abs( calculatedOffsetHours ); + if (calculatedOffsetHours < 0) { + offsetHoursWithSign = '-' + Math.abs(calculatedOffsetHours); + } else if (calculatedOffsetHours > 0) { + offsetHoursWithSign = '+' + Math.abs(calculatedOffsetHours); } - if ( !liquipedia.countdown.timeZoneAbbr.has( userTime.timeZoneName ) ) { + if (!liquipedia.countdown.timeZoneAbbr.has(userTime.timeZoneName)) { // ('0' + calculatedOffsetMinutes).slice(-2), because of the leading zero - finalTimeZoneName = 'UTC' + offsetHoursWithSign + ':' + ( '0' + calculatedOffsetMinutes ).slice( -2 ); + finalTimeZoneName = 'UTC' + offsetHoursWithSign + ':' + ('0' + calculatedOffsetMinutes).slice(-2); finalTimeZoneAbbr = 'UTC' + offsetHoursWithSign + offsetMinutesAsString; } else { - finalTimeZoneAbbr = liquipedia.countdown.timeZoneAbbr.get( userTime.timeZoneName ); + finalTimeZoneAbbr = liquipedia.countdown.timeZoneAbbr.get(userTime.timeZoneName); finalTimeZoneName = userTime.timeZoneName + ' (UTC' + offsetHoursWithSign + offsetMinutesAsString + ')'; } - const strLocalTime1 = ( liquipedia.countdown.getMonthNameFromMonthNumber( userTime.dateObjectMonth ) ) + ' ' + userTime.dateObjectDay + ', ' + userTime.dateObjectYear + ' - ' + ( '0' + userTime.dateObjectHours ).slice( -2 ) + ':' + ( '0' + userTime.dateObjectMinutes ).slice( -2 ); - const strLocalTime2 = ' ' + finalTimeZoneAbbr + ''; const dateObjectString = strLocalTime1 + strLocalTime2 + strLocalTime3; return dateObjectString; } }; -liquipedia.core.modules.push( 'countdown' ); +liquipedia.core.modules.push('countdown'); diff --git a/stylesheets/commons/FilterButtons.less b/stylesheets/commons/FilterButtons.less index 1b02f3db8c1..b9e0d43d2fb 100644 --- a/stylesheets/commons/FilterButtons.less +++ b/stylesheets/commons/FilterButtons.less @@ -3,8 +3,8 @@ Template(s): Filter buttons Author(s): Elysienna, Nadox *******************************************************************************/ .filter-category--hidden { - clip: rect(0 0 0 0); - clip-path: inset(50%); + clip: rect( 0 0 0 0 ); + clip-path: inset( 50% ); height: 1px; overflow: hidden; position: absolute; @@ -29,11 +29,10 @@ Author(s): Elysienna, Nadox overflow: hidden; text-align: center; background-color: transparent; - border: 0.125rem solid var(--clr-primary-container, #c1cee8); - color: var(--clr-primary, #3366cc); + border: 0.125rem solid var( --clr-primary-container, #c1cee8 ); + color: var( --clr-primary, #3366cc ); border-radius: 0.25rem; - transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, - color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .filter-button-all { @@ -42,32 +41,31 @@ Author(s): Elysienna, Nadox margin-right: 0.5rem; } -.filter-button:not(:first-child) { +.filter-button:not( :first-child ) { flex-grow: 1; max-width: 33%; } -.filter-button:not(:last-child) { +.filter-button:not( :last-child ) { margin-right: 0.5rem; } .filter-button:hover { - background-color: var(--clr-primary, #3366cc); - border-color: var(--clr-primary, #3366cc); - color: var(--clr-on-primary, #ffffff); + background-color: var( --clr-primary, #3366cc ); + border-color: var( --clr-primary, #3366cc ); + color: var( --clr-on-primary, #ffffff ); cursor: pointer; } .filter-button:focus { outline: 0; - box-shadow: 0 0.5rem 0.625rem 0.125rem rgba(0, 0, 0, 0.1), - 0 0 0 0.1875rem #c2d1f0; + box-shadow: 0 0.5rem 0.625rem 0.125rem rgba( 0, 0, 0, 0.1 ), 0 0 0 0.1875rem #c2d1f0; } .filter-button--active { - color: var(--clr-on-primary-container, #ffffff); - background-color: var(--clr-primary-container, #1f3d7a); - border-color: var(--clr-primary-container, #1f3d7a); + color: var( --clr-on-primary-container, #ffffff ); + background-color: var( --clr-primary-container, #1f3d7a ); + border-color: var( --clr-primary-container, #1f3d7a ); } .filter-effect-fade { @@ -95,14 +93,14 @@ Author(s): Elysienna, Nadox font-size: 0.875rem; .theme--light & { - color: var(--clr-wiki-theme-primary); + color: var( --clr-wiki-theme-primary ); } .theme--dark & { color: #ffffff; } - &:not(.is--active)::after { + &:not( .is--active )::after { content: ""; opacity: 0.12; position: absolute; @@ -112,7 +110,7 @@ Author(s): Elysienna, Nadox background-color: #c1cee8; .theme--light & { - background-color: var(--clr-wiki-theme-primary); + background-color: var( --clr-wiki-theme-primary ); } .theme--dark & { @@ -122,7 +120,7 @@ Author(s): Elysienna, Nadox &:hover { color: #ffffff; - background-color: var(--clr-wiki-theme-primary, #1f3d7a); + background-color: var( --clr-wiki-theme-primary, #1f3d7a ); &::after { opacity: 0.24; @@ -130,7 +128,7 @@ Author(s): Elysienna, Nadox } &.filter-button--active { - background-color: var(--clr-wiki-theme-primary, #1f3d7a); + background-color: var( --clr-wiki-theme-primary, #1f3d7a ); color: #ffffff; } } @@ -150,39 +148,39 @@ Author(s): Elysienna, Nadox @keyframes bounceIn { from { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 ); } 0% { opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transform: scale3d( 0.3, 0.3, 0.3 ); + animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 ); } 20% { - transform: scale3d(1.1, 1.1, 1.1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transform: scale3d( 1.1, 1.1, 1.1 ); + animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 ); } 40% { - transform: scale3d(0.9, 0.9, 0.9); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transform: scale3d( 0.9, 0.9, 0.9 ); + animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 ); } 60% { opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transform: scale3d( 1.03, 1.03, 1.03 ); + animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 ); } 80% { - transform: scale3d(0.97, 0.97, 0.97); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transform: scale3d( 0.97, 0.97, 0.97 ); + animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 ); } to { opacity: 1; - transform: scale3d(1, 1, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transform: scale3d( 1, 1, 1 ); + animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 ); } -} +} \ No newline at end of file From 8dc6b7780158ac927b379a9f277f5fdc600f0379 Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Fri, 21 Jun 2024 11:11:14 +0200 Subject: [PATCH 06/19] Fixing pipeline --- javascript/commons/Countdown.js | 512 ++++++++++++------------- stylesheets/commons/FilterButtons.less | 2 +- stylesheets/commons/MatchTicker.less | 237 ++++++------ 3 files changed, 376 insertions(+), 375 deletions(-) diff --git a/javascript/commons/Countdown.js b/javascript/commons/Countdown.js index 2013edee896..6499e109584 100644 --- a/javascript/commons/Countdown.js +++ b/javascript/commons/Countdown.js @@ -8,96 +8,96 @@ liquipedia.countdown = { lastCountdownId: null, init: function () { // // Cancels last countdown loop if it exists to prevent multiple countdowns running at the same time - if (liquipedia.countdown.timeoutFunctions && liquipedia.countdown.lastCountdownId) { - liquipedia.countdown.timeoutFunctions.clear(liquipedia.countdown.lastCountdownId); + if ( liquipedia.countdown.timeoutFunctions && liquipedia.countdown.lastCountdownId ) { + liquipedia.countdown.timeoutFunctions.clear( liquipedia.countdown.lastCountdownId ); } - liquipedia.countdown.timerObjectNodes = document.querySelectorAll('.timer-object'); - if (liquipedia.countdown.timerObjectNodes.length > 0) { - mw.loader.using('user.options', () => { - liquipedia.countdown.timerObjectNodes.forEach((timerObjectNode) => { - const dateObject = liquipedia.countdown.parseTimerObjectNodeToDateObj(timerObjectNode); - const dateChild = document.createElement('span'); - if (typeof dateObject === 'object') { - const disableTimeZoneAdjust = mw.user.options.get('teamliquidintegration-disable-countdown-timezone-adjust') === '1' || mw.user.options.get('teamliquidintegration-disable-countdown-timezone-adjust') === 1; - if (disableTimeZoneAdjust) { + liquipedia.countdown.timerObjectNodes = document.querySelectorAll( '.timer-object' ); + if ( liquipedia.countdown.timerObjectNodes.length > 0 ) { + mw.loader.using( 'user.options', () => { + liquipedia.countdown.timerObjectNodes.forEach( ( timerObjectNode ) => { + const dateObject = liquipedia.countdown.parseTimerObjectNodeToDateObj( timerObjectNode ); + const dateChild = document.createElement( 'span' ); + if ( typeof dateObject === 'object' ) { + const disableTimeZoneAdjust = mw.user.options.get( 'teamliquidintegration-disable-countdown-timezone-adjust' ) === '1' || mw.user.options.get( 'teamliquidintegration-disable-countdown-timezone-adjust' ) === 1; + if ( disableTimeZoneAdjust ) { dateChild.innerHTML = timerObjectNode.innerHTML; } else { - dateChild.innerHTML = liquipedia.countdown.getCorrectTimeZoneString(dateObject); + dateChild.innerHTML = liquipedia.countdown.getCorrectTimeZoneString( dateObject ); } } else { dateChild.innerHTML = timerObjectNode.innerHTML; } - dateChild.classList.add('timer-object-date'); + dateChild.classList.add( 'timer-object-date' ); timerObjectNode.innerHTML = ''; - timerObjectNode.appendChild(dateChild); + timerObjectNode.appendChild( dateChild ); let separatorChild; - if (typeof timerObjectNode.dataset.separator !== 'undefined') { - separatorChild = document.createElement('span'); + if ( typeof timerObjectNode.dataset.separator !== 'undefined' ) { + separatorChild = document.createElement( 'span' ); separatorChild.innerText = timerObjectNode.dataset.separator; - separatorChild.classList.add('timer-object-separator'); + separatorChild.classList.add( 'timer-object-separator' ); } else { - separatorChild = document.createElement('br'); - separatorChild.classList.add('timer-object-separator'); + separatorChild = document.createElement( 'br' ); + separatorChild.classList.add( 'timer-object-separator' ); } - timerObjectNode.appendChild(separatorChild); - const countdownChild = document.createElement('span'); - countdownChild.classList.add('timer-object-countdown'); - timerObjectNode.appendChild(countdownChild); - }); + timerObjectNode.appendChild( separatorChild ); + const countdownChild = document.createElement( 'span' ); + countdownChild.classList.add( 'timer-object-countdown' ); + timerObjectNode.appendChild( countdownChild ); + } ); // Only run when the window is actually in the front, not in background tabs (on browsers that support it) - mw.loader.using('mediawiki.visibleTimeout').then((require) => { - liquipedia.countdown.timeoutFunctions = require('mediawiki.visibleTimeout'); + mw.loader.using( 'mediawiki.visibleTimeout' ).then( ( require ) => { + liquipedia.countdown.timeoutFunctions = require( 'mediawiki.visibleTimeout' ); liquipedia.countdown.runCountdown(); - }); - }); + } ); + } ); } }, - parseTimerObjectNodeToDateObj: function (timerObjectNode) { - if (timerObjectNode.dataset.timestamp === 'error') { + parseTimerObjectNodeToDateObj: function ( timerObjectNode ) { + if ( timerObjectNode.dataset.timestamp === 'error' ) { return false; } - return new Date(1000 * parseInt(timerObjectNode.dataset.timestamp)); + return new Date( 1000 * parseInt( timerObjectNode.dataset.timestamp ) ); }, runCountdown: function () { - liquipedia.countdown.timerObjectNodes.forEach((timerObjectNode) => { - liquipedia.countdown.setCountdownString(timerObjectNode); - }); + liquipedia.countdown.timerObjectNodes.forEach( ( timerObjectNode ) => { + liquipedia.countdown.setCountdownString( timerObjectNode ); + } ); liquipedia.countdown.lastCountdownId = liquipedia.countdown.timeoutFunctions.set( liquipedia.countdown.runCountdown, 1000 ); }, - setCountdownString: function (timerObjectNode) { + setCountdownString: function ( timerObjectNode ) { const streamsarr = []; let datestr = '', live = 'LIVE!'; - if (typeof timerObjectNode.dataset.countdownEndText !== 'undefined') { + if ( typeof timerObjectNode.dataset.countdownEndText !== 'undefined' ) { live = timerObjectNode.dataset.countdownEndText; } - if (timerObjectNode.dataset.timestamp !== 'error') { - const differenceInSeconds = Math.floor(parseInt(timerObjectNode.dataset.timestamp) - (Date.now().valueOf() / 1000)); - if (differenceInSeconds <= 0) { - if (differenceInSeconds > -43200 && timerObjectNode.dataset.finished !== 'finished') { + if ( timerObjectNode.dataset.timestamp !== 'error' ) { + const differenceInSeconds = Math.floor( parseInt( timerObjectNode.dataset.timestamp ) - ( Date.now().valueOf() / 1000 ) ); + if ( differenceInSeconds <= 0 ) { + if ( differenceInSeconds > -43200 && timerObjectNode.dataset.finished !== 'finished' ) { datestr = '' + live + ''; } } else { let differenceInSecondsMath = differenceInSeconds; - const weeks = Math.floor(differenceInSecondsMath / 604800); + const weeks = Math.floor( differenceInSecondsMath / 604800 ); differenceInSecondsMath = differenceInSecondsMath % 604800; - const days = Math.floor(differenceInSecondsMath / 86400); + const days = Math.floor( differenceInSecondsMath / 86400 ); differenceInSecondsMath = differenceInSecondsMath % 86400; - const hours = Math.floor(differenceInSecondsMath / 3600); + const hours = Math.floor( differenceInSecondsMath / 3600 ); differenceInSecondsMath = differenceInSecondsMath % 3600; - const minutes = Math.floor(differenceInSecondsMath / 60); - const seconds = Math.floor(differenceInSecondsMath % 60); - if (differenceInSeconds >= 604800) { + const minutes = Math.floor( differenceInSecondsMath / 60 ); + const seconds = Math.floor( differenceInSecondsMath % 60 ); + if ( differenceInSeconds >= 604800 ) { datestr = weeks + 'w ' + days + 'd'; - } else if (differenceInSeconds >= 86400) { + } else if ( differenceInSeconds >= 86400 ) { datestr = days + 'd ' + hours + 'h ' + minutes + 'm'; - } else if (differenceInSeconds >= 3600) { + } else if ( differenceInSeconds >= 3600 ) { datestr = hours + 'h ' + minutes + 'm ' + seconds + 's'; - } else if (differenceInSeconds >= 60) { + } else if ( differenceInSeconds >= 60 ) { datestr = minutes + 'm ' + seconds + 's'; } else { datestr = seconds + 's'; @@ -106,220 +106,220 @@ liquipedia.countdown = { } else { datestr = ''; // DATE ERROR! } - if (timerObjectNode.dataset.streamTwitch) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamTwitch ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamTwitch2) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamTwitch2 ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamYoutube) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamYoutube ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamAfreeca) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamAfreeca ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamAfreecatv) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamAfreecatv ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamBilibili) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamBilibili ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamBooyah) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamBooyah ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamCc163) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamCc163 ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamDailymotion) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamDailymotion ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamDouyu) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamDouyu ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamFacebook) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamFacebook ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamHuomao) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamHuomao ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamHuya) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamHuya ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamKick) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamKick ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamLoco) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamLoco ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamMildom) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamMildom ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamNimo) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamNimo ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamTrovo) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamTrovo ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamTl) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamTl ) { + streamsarr.push( '' ); } let html = '' + datestr + ''; - if (datestr.length > 0 && streamsarr.length > 0) { + if ( datestr.length > 0 && streamsarr.length > 0 ) { html += ' - '; } - if (timerObjectNode.dataset.finished !== 'finished') { - html += streamsarr.join(' '); + if ( timerObjectNode.dataset.finished !== 'finished' ) { + html += streamsarr.join( ' ' ); } - timerObjectNode.querySelector('.timer-object-countdown').innerHTML = html; + timerObjectNode.querySelector( '.timer-object-countdown' ).innerHTML = html; }, - getStreamName: function (url) { - return url.replace(/\s/g, '_'); + getStreamName: function ( url ) { + return url.replace( /\s/g, '_' ); }, - timeZoneAbbr: new Map([ - ['Acre Time', 'ACT'], - ['Afghanistan Time', 'AFT'], - ['Alaska Daylight Time', 'AKDT'], - ['Alaska Standard Time', 'AKST'], - ['Amazon Time', 'AMT'], - ['Arabic Standard Time', 'AST'], - ['Argentina Standard Time', 'ART'], - ['Armenia Time', 'AMT'], - ['Atlantic Daylight Time', 'ADT'], - ['Atlantic Standard Time', 'AST'], - ['Australian Central Daylight Time', 'ACDT'], - ['Australian Central Standard Time', 'ACST'], - ['Australian Central Western Standard Time', 'ACWST'], - ['Australian Eastern Daylight Time', 'AEDT'], - ['Australian Eastern Standard Time', 'AEST'], - ['Australian Western Standard Time', 'AWST'], - ['Aqtobe Time', 'AQTT'], - ['Azerbaijan Summer Time', 'AZST'], - ['Azerbaijan Time', 'AZT'], - ['Azores Summer Time', 'AZOST'], - ['Azores Standard Time', ''], - ['Bangladesh Standard Time', 'BST'], - ['Bhutan Time', 'BTT'], - ['Bolivia Time', 'BOT'], - ['Brasilia Standard Time', 'BRT'], - ['Brasilia Summer Time', 'BRST'], - ['British Summer Time', 'BST'], - ['Brunei Darussalam Time', 'BNT'], - ['Cape Verde Standard Time', 'CVT'], - ['Center Indonesia Time', 'WITA'], - ['Central Africa Time', 'CAT'], - ['Central Daylight Time', 'CDT'], - ['Central European Summer Time', 'CEST'], - ['Central European Standard Time', 'CET'], - ['Central Standard Time', 'CT'], - ['Chatham Standard Time', 'CHAST'], - ['Chile Standard Time', 'CLT'], - ['China Standard Time', 'CST'], - ['Colombia Standard Time', 'COT'], - ['Cuba Daylight Time', 'CDT'], - ['Cuba Standard Time', 'CST'], - ['East Africa Time', 'EAT'], - ['East Kazakhstan Time', 'ALMT'], - ['Easter Island Standard Time', 'EAST'], - ['Eastern Daylight Time', 'EDT'], - ['Eastern European Standard Time', 'EET'], - ['Eastern European Summer Time', 'EEST'], - ['Eastern Standard Time', 'EST'], - ['Fiji Standard Time', 'FJST'], - ['French Guiana Time', 'GFT'], - ['Georgia Standard Time', 'GET'], - ['Greenwich Mean Time', 'GMT'], - ['Gulf Standard Time', 'GST'], - ['Guyana Time', 'GYT'], - ['Hawaii-Aleutian Daylight Time', 'HDT'], - ['Hawaii-Aleutian Standard Time', 'HST'], - ['Hong Kong Standard Time', 'HKT'], - ['Hovd Standard Time', 'HOVST'], - ['India Standard Time', 'IST'], - ['Indochina Time', 'ICT'], - ['Iran Daylight Time', 'IRDT'], - ['Iran Standard Time', 'IRST'], - ['Irkutsk Standard Time', 'IRKST'], - ['Israel Daylight Time', 'IDT'], - ['Israel Standard Time', 'IST'], - ['Japan Standard Time', 'JST'], - ['Korean Standard Time', 'KST'], - ['Krasnoyarsk Standard Time', 'KRAST'], - ['Line Islands Time', 'LINT'], - ['Lord Howe Standard Time', 'LHST'], - ['Magadan Standard Time', 'MAGT'], - ['Malaysia Time', 'MYT'], - ['Marquesas Time', 'MART'], - ['Mauritius Standard Time', 'MUT'], - ['Mexican Pacific Standard Time', 'PST'], - ['Moscow Standard Time', 'MSK'], - ['Mountain Daylight Time', 'MDT'], - ['Mountain Standard Time', 'MST'], - ['Myanmar Time', 'MMT'], - ['Nepal Time', 'NPT'], - ['New Zealand Daylight Time', 'NZDT'], - ['New Zealand Standard Time', 'NZST'], - ['Newfoundland Daylight Time', 'NDT'], - ['Newfoundland Standard Time', 'NDT'], - ['Norfolk Island Time', 'NFT'], - ['Novosibirsk Standard Time', 'NOVST'], - ['Omsk Standard Time', 'OMST'], - ['Pacific Daylight Time', 'PDT'], - ['Pacific Standard Time', 'PST'], - ['Pakistan Standard Time', 'PKT'], - ['Papua New Guinea Time', 'PGT'], - ['Paraguay Standard Time', 'PYST'], - ['Petropavlovsk-Kamchatski Standard Time', 'PETT'], - ['Philippine Standard Time', 'PHT'], - ['Pyongyang Time', 'PYT'], - ['Sakhalin Standard Time', 'SAKT'], - ['Samara Standard Time', 'SAMT'], - ['Singapore Standard Time', 'SGT'], - ['Solomon Islands Time', 'SBT'], - ['South Africa Standard Time', 'SAST'], - ['St. Pierre & Miquelon Daylight Time', 'PMDT'], - ['St. Pierre & Miquelon Standard Time', 'PMST'], - ['Taipei Standard Time', 'TST'], - ['Tonga Standard Time', 'TOT'], - ['Turkey Time', 'TRT'], - ['Ulaanbaatar Standard Time', 'ULAST'], - ['Uruguay Standard Time', 'UYT'], - ['Uzbekistan Standard Time', 'UZT'], - ['Venezuelan Standard Time', 'VET'], - ['Vladivostok Standard Time', 'VLAT'], - ['West Africa Standard Time', 'WAST'], - ['West Greenland Summer Time', 'WGST'], - ['West Greenland Standard Time', 'WGT'], - ['Western European Summer Time', 'WEST'], - ['Western Indonesia Time', 'WIB'], - ['Yakutsk Standard Time', 'YAKT'], - ['Yekaterinburg Standard Time', 'YEKT'] - ]), - getMonthNameFromMonthNumber: function (newFutureMonth) { - const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; - return monthNames[newFutureMonth]; + timeZoneAbbr: new Map( [ + [ 'Acre Time', 'ACT' ], + [ 'Afghanistan Time', 'AFT' ], + [ 'Alaska Daylight Time', 'AKDT' ], + [ 'Alaska Standard Time', 'AKST' ], + [ 'Amazon Time', 'AMT' ], + [ 'Arabic Standard Time', 'AST' ], + [ 'Argentina Standard Time', 'ART' ], + [ 'Armenia Time', 'AMT' ], + [ 'Atlantic Daylight Time', 'ADT' ], + [ 'Atlantic Standard Time', 'AST' ], + [ 'Australian Central Daylight Time', 'ACDT' ], + [ 'Australian Central Standard Time', 'ACST' ], + [ 'Australian Central Western Standard Time', 'ACWST' ], + [ 'Australian Eastern Daylight Time', 'AEDT' ], + [ 'Australian Eastern Standard Time', 'AEST' ], + [ 'Australian Western Standard Time', 'AWST' ], + [ 'Aqtobe Time', 'AQTT' ], + [ 'Azerbaijan Summer Time', 'AZST' ], + [ 'Azerbaijan Time', 'AZT' ], + [ 'Azores Summer Time', 'AZOST' ], + [ 'Azores Standard Time', '' ], + [ 'Bangladesh Standard Time', 'BST' ], + [ 'Bhutan Time', 'BTT' ], + [ 'Bolivia Time', 'BOT' ], + [ 'Brasilia Standard Time', 'BRT' ], + [ 'Brasilia Summer Time', 'BRST' ], + [ 'British Summer Time', 'BST' ], + [ 'Brunei Darussalam Time', 'BNT' ], + [ 'Cape Verde Standard Time', 'CVT' ], + [ 'Center Indonesia Time', 'WITA' ], + [ 'Central Africa Time', 'CAT' ], + [ 'Central Daylight Time', 'CDT' ], + [ 'Central European Summer Time', 'CEST' ], + [ 'Central European Standard Time', 'CET' ], + [ 'Central Standard Time', 'CT' ], + [ 'Chatham Standard Time', 'CHAST' ], + [ 'Chile Standard Time', 'CLT' ], + [ 'China Standard Time', 'CST' ], + [ 'Colombia Standard Time', 'COT' ], + [ 'Cuba Daylight Time', 'CDT' ], + [ 'Cuba Standard Time', 'CST' ], + [ 'East Africa Time', 'EAT' ], + [ 'East Kazakhstan Time', 'ALMT' ], + [ 'Easter Island Standard Time', 'EAST' ], + [ 'Eastern Daylight Time', 'EDT' ], + [ 'Eastern European Standard Time', 'EET' ], + [ 'Eastern European Summer Time', 'EEST' ], + [ 'Eastern Standard Time', 'EST' ], + [ 'Fiji Standard Time', 'FJST' ], + [ 'French Guiana Time', 'GFT' ], + [ 'Georgia Standard Time', 'GET' ], + [ 'Greenwich Mean Time', 'GMT' ], + [ 'Gulf Standard Time', 'GST' ], + [ 'Guyana Time', 'GYT' ], + [ 'Hawaii-Aleutian Daylight Time', 'HDT' ], + [ 'Hawaii-Aleutian Standard Time', 'HST' ], + [ 'Hong Kong Standard Time', 'HKT' ], + [ 'Hovd Standard Time', 'HOVST' ], + [ 'India Standard Time', 'IST' ], + [ 'Indochina Time', 'ICT' ], + [ 'Iran Daylight Time', 'IRDT' ], + [ 'Iran Standard Time', 'IRST' ], + [ 'Irkutsk Standard Time', 'IRKST' ], + [ 'Israel Daylight Time', 'IDT' ], + [ 'Israel Standard Time', 'IST' ], + [ 'Japan Standard Time', 'JST' ], + [ 'Korean Standard Time', 'KST' ], + [ 'Krasnoyarsk Standard Time', 'KRAST' ], + [ 'Line Islands Time', 'LINT' ], + [ 'Lord Howe Standard Time', 'LHST' ], + [ 'Magadan Standard Time', 'MAGT' ], + [ 'Malaysia Time', 'MYT' ], + [ 'Marquesas Time', 'MART' ], + [ 'Mauritius Standard Time', 'MUT' ], + [ 'Mexican Pacific Standard Time', 'PST' ], + [ 'Moscow Standard Time', 'MSK' ], + [ 'Mountain Daylight Time', 'MDT' ], + [ 'Mountain Standard Time', 'MST' ], + [ 'Myanmar Time', 'MMT' ], + [ 'Nepal Time', 'NPT' ], + [ 'New Zealand Daylight Time', 'NZDT' ], + [ 'New Zealand Standard Time', 'NZST' ], + [ 'Newfoundland Daylight Time', 'NDT' ], + [ 'Newfoundland Standard Time', 'NDT' ], + [ 'Norfolk Island Time', 'NFT' ], + [ 'Novosibirsk Standard Time', 'NOVST' ], + [ 'Omsk Standard Time', 'OMST' ], + [ 'Pacific Daylight Time', 'PDT' ], + [ 'Pacific Standard Time', 'PST' ], + [ 'Pakistan Standard Time', 'PKT' ], + [ 'Papua New Guinea Time', 'PGT' ], + [ 'Paraguay Standard Time', 'PYST' ], + [ 'Petropavlovsk-Kamchatski Standard Time', 'PETT' ], + [ 'Philippine Standard Time', 'PHT' ], + [ 'Pyongyang Time', 'PYT' ], + [ 'Sakhalin Standard Time', 'SAKT' ], + [ 'Samara Standard Time', 'SAMT' ], + [ 'Singapore Standard Time', 'SGT' ], + [ 'Solomon Islands Time', 'SBT' ], + [ 'South Africa Standard Time', 'SAST' ], + [ 'St. Pierre & Miquelon Daylight Time', 'PMDT' ], + [ 'St. Pierre & Miquelon Standard Time', 'PMST' ], + [ 'Taipei Standard Time', 'TST' ], + [ 'Tonga Standard Time', 'TOT' ], + [ 'Turkey Time', 'TRT' ], + [ 'Ulaanbaatar Standard Time', 'ULAST' ], + [ 'Uruguay Standard Time', 'UYT' ], + [ 'Uzbekistan Standard Time', 'UZT' ], + [ 'Venezuelan Standard Time', 'VET' ], + [ 'Vladivostok Standard Time', 'VLAT' ], + [ 'West Africa Standard Time', 'WAST' ], + [ 'West Greenland Summer Time', 'WGST' ], + [ 'West Greenland Standard Time', 'WGT' ], + [ 'Western European Summer Time', 'WEST' ], + [ 'Western Indonesia Time', 'WIB' ], + [ 'Yakutsk Standard Time', 'YAKT' ], + [ 'Yekaterinburg Standard Time', 'YEKT' ] + ] ), + getMonthNameFromMonthNumber: function ( newFutureMonth ) { + const monthNames = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; + return monthNames[ newFutureMonth ]; }, - getTimeZoneNameLong: function (dateObject) { + getTimeZoneNameLong: function ( dateObject ) { let date; let result; - const dateTimeFormat = new Intl.DateTimeFormat('en', { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, timeZoneName: 'long' }); - if (typeof Intl.DateTimeFormat.prototype.formatToParts === 'function') { - date = dateTimeFormat.formatToParts(dateObject); - date.forEach((element) => { - if (element.type === 'timeZoneName') { + const dateTimeFormat = new Intl.DateTimeFormat( 'en', { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, timeZoneName: 'long' } ); + if ( typeof Intl.DateTimeFormat.prototype.formatToParts === 'function' ) { + date = dateTimeFormat.formatToParts( dateObject ); + date.forEach( ( element ) => { + if ( element.type === 'timeZoneName' ) { result = element.value; } - }); + } ); } else { - date = dateTimeFormat.format(dateObject); - if (date.includes(',')) { - result = date.split(',')[1].trim(); + date = dateTimeFormat.format( dateObject ); + if ( date.includes( ',' ) ) { + result = date.split( ',' )[ 1 ].trim(); } else { - result = date.split(' ').slice(2).join(' ').trim(); + result = date.split( ' ' ).slice( 2 ).join( ' ' ).trim(); } } return result; }, - getCorrectTimeZoneString: function (dateObject) { + getCorrectTimeZoneString: function ( dateObject ) { const userTime = { localYear: dateObject.getFullYear(), localMonth: dateObject.getMonth(), @@ -339,68 +339,68 @@ liquipedia.countdown = { dateObjectHours: dateObject.getHours(), dateObjectMinutes: dateObject.getMinutes(), - timeZoneName: liquipedia.countdown.getTimeZoneNameLong(dateObject) + timeZoneName: liquipedia.countdown.getTimeZoneNameLong( dateObject ) }; let calculatedOffsetHours = 0; - const calculatedOffsetMinutes = (userTime.localMinutes - userTime.utcMinutes); + const calculatedOffsetMinutes = ( userTime.localMinutes - userTime.utcMinutes ); let offsetMinutesAsString = ''; let offsetHoursWithSign = '+0'; let finalTimeZoneAbbr = ''; - if (userTime.localDay === userTime.utcDay) { + if ( userTime.localDay === userTime.utcDay ) { calculatedOffsetHours = userTime.localHours - userTime.utcHours; - } else if (userTime.localMonth === userTime.utcMonth) { + } else if ( userTime.localMonth === userTime.utcMonth ) { // Month is same, so no problems comparing dates - if (userTime.localDay > userTime.utcDay) { + if ( userTime.localDay > userTime.utcDay ) { // +24 Hours because of the next day - calculatedOffsetHours = -(userTime.utcHours) + userTime.localHours + 24; - } else if (userTime.localDay < userTime.utcDay) { + calculatedOffsetHours = -( userTime.utcHours ) + userTime.localHours + 24; + } else if ( userTime.localDay < userTime.utcDay ) { // -24 Hours because of the day before - calculatedOffsetHours = -(userTime.utcHours) + userTime.localHours - 24; + calculatedOffsetHours = -( userTime.utcHours ) + userTime.localHours - 24; } - } else if ((userTime.localMonth > userTime.utcMonth && userTime.localYear === userTime.utcYear) || userTime.localYear > userTime.utcYear) { + } else if ( ( userTime.localMonth > userTime.utcMonth && userTime.localYear === userTime.utcYear ) || userTime.localYear > userTime.utcYear ) { // +24 Hours because of the next day (in next month or year) - calculatedOffsetHours = -(userTime.utcHours) + userTime.localHours + 24; - } else if ((userTime.localMonth < userTime.utcMonth && userTime.localYear === userTime.utcYear) || userTime.localYear < userTime.utcYear) { + calculatedOffsetHours = -( userTime.utcHours ) + userTime.localHours + 24; + } else if ( ( userTime.localMonth < userTime.utcMonth && userTime.localYear === userTime.utcYear ) || userTime.localYear < userTime.utcYear ) { // -24 Hours because of the day before (in previous month or year) - calculatedOffsetHours = -(userTime.utcHours) + userTime.localHours - 24; + calculatedOffsetHours = -( userTime.utcHours ) + userTime.localHours - 24; } - const calculatedOffsetInMinutes = (calculatedOffsetHours * 60) + calculatedOffsetMinutes; + const calculatedOffsetInMinutes = ( calculatedOffsetHours * 60 ) + calculatedOffsetMinutes; - if (calculatedOffsetHours > 0) { - if (calculatedOffsetInMinutes % 60 !== 0) { - offsetMinutesAsString = ':' + Math.abs(calculatedOffsetMinutes); + if ( calculatedOffsetHours > 0 ) { + if ( calculatedOffsetInMinutes % 60 !== 0 ) { + offsetMinutesAsString = ':' + Math.abs( calculatedOffsetMinutes ); } - } else if (calculatedOffsetHours < 0) { - if (calculatedOffsetInMinutes % 60 !== 0) { - offsetMinutesAsString = ':' + Math.abs(calculatedOffsetMinutes); + } else if ( calculatedOffsetHours < 0 ) { + if ( calculatedOffsetInMinutes % 60 !== 0 ) { + offsetMinutesAsString = ':' + Math.abs( calculatedOffsetMinutes ); } } let finalTimeZoneName = 'UTC' + offsetHoursWithSign + offsetMinutesAsString; - if (calculatedOffsetHours < 0) { - offsetHoursWithSign = '-' + Math.abs(calculatedOffsetHours); - } else if (calculatedOffsetHours > 0) { - offsetHoursWithSign = '+' + Math.abs(calculatedOffsetHours); + if ( calculatedOffsetHours < 0 ) { + offsetHoursWithSign = '-' + Math.abs( calculatedOffsetHours ); + } else if ( calculatedOffsetHours > 0 ) { + offsetHoursWithSign = '+' + Math.abs( calculatedOffsetHours ); } - if (!liquipedia.countdown.timeZoneAbbr.has(userTime.timeZoneName)) { + if ( !liquipedia.countdown.timeZoneAbbr.has( userTime.timeZoneName ) ) { // ('0' + calculatedOffsetMinutes).slice(-2), because of the leading zero - finalTimeZoneName = 'UTC' + offsetHoursWithSign + ':' + ('0' + calculatedOffsetMinutes).slice(-2); + finalTimeZoneName = 'UTC' + offsetHoursWithSign + ':' + ( '0' + calculatedOffsetMinutes ).slice( -2 ); finalTimeZoneAbbr = 'UTC' + offsetHoursWithSign + offsetMinutesAsString; } else { - finalTimeZoneAbbr = liquipedia.countdown.timeZoneAbbr.get(userTime.timeZoneName); + finalTimeZoneAbbr = liquipedia.countdown.timeZoneAbbr.get( userTime.timeZoneName ); finalTimeZoneName = userTime.timeZoneName + ' (UTC' + offsetHoursWithSign + offsetMinutesAsString + ')'; } - const strLocalTime1 = (liquipedia.countdown.getMonthNameFromMonthNumber(userTime.dateObjectMonth)) + ' ' + userTime.dateObjectDay + ', ' + userTime.dateObjectYear + ' - ' + ('0' + userTime.dateObjectHours).slice(-2) + ':' + ('0' + userTime.dateObjectMinutes).slice(-2); - const strLocalTime2 = ' ' + finalTimeZoneAbbr + ''; const dateObjectString = strLocalTime1 + strLocalTime2 + strLocalTime3; return dateObjectString; } }; -liquipedia.core.modules.push('countdown'); +liquipedia.core.modules.push( 'countdown' ); diff --git a/stylesheets/commons/FilterButtons.less b/stylesheets/commons/FilterButtons.less index b9e0d43d2fb..8a30ebd1074 100644 --- a/stylesheets/commons/FilterButtons.less +++ b/stylesheets/commons/FilterButtons.less @@ -183,4 +183,4 @@ Author(s): Elysienna, Nadox transform: scale3d( 1, 1, 1 ); animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 ); } -} \ No newline at end of file +} diff --git a/stylesheets/commons/MatchTicker.less b/stylesheets/commons/MatchTicker.less index 14412a3e55b..2e3888ee248 100644 --- a/stylesheets/commons/MatchTicker.less +++ b/stylesheets/commons/MatchTicker.less @@ -3,122 +3,123 @@ Template(s): Match Ticker Author(s): Nadox *******************************************************************************/ .dota2-test { - .match-section-header { - display: flex; - flex-direction: column; - padding: 1rem; - gap: 0.5em; - } - - .match { - border-bottom: 1px solid - var(--table-border-color, var(--clr-border, #bbbbbb)) !important; - padding: 0.75rem 1rem; - font-size: 0.875rem; - } - - .match-scoreboard { - display: flex; - justify-content: center; - align-items: center; - gap: 2rem; - margin-bottom: 0.5rem; - - > div { - flex: 1; - } - - .team-left { - display: flex; - justify-content: right; - } - - .versus { - flex: 0 1 auto; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - .versus-lower { - font-size: 0.75rem; - color: var(--clr-secondary); - } - } - } - - .match-details { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0.75rem; - border-radius: 0.5rem; - font-size: 0.75rem; - - .theme--light & { - background-color: #0000000a; - } - - .theme--dark & { - background-color: #ffffff0a; - } - - .timer-hidden { - display: none; - } - - .tournament { - display: flex; - gap: 0.5rem; - justify-content: center; - align-items: center; - } - - .timer-object-countdown, - .timer-object-date { - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-weight: bold; - - &.timer-object-countdown-live { - .theme--light & { - color: #ffffff; - background-color: #b81414; - } - - .theme--dark & { - color: #2e0505; - background-color: #f5a3a3; - } - } - - &.timer-object-countdown-completed { - .theme--light & { - color: #ffffff; - background-color: #1d7c1d; - } - - .theme--dark & { - color: #0a290a; - background-color: #adebad; - } - } - - &:not(.timer-object-countdown-live) { - color: var(--clr-on-background); - - .theme--light & { - background-color: #00000014; - } - - .theme--dark & { - background-color: #ffffff14; - } - } - } - } - - .timer-object-separator { - display: none; - } + .match-section-header { + display: flex; + flex-direction: column; + padding: 1rem; + gap: 0.5em; + } + + .match { + border-bottom: + 1px solid + var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important; + padding: 0.75rem 1rem; + font-size: 0.875rem; + } + + .match-scoreboard { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; + margin-bottom: 0.5rem; + + > div { + flex: 1; + } + + .team-left { + display: flex; + justify-content: right; + } + + .versus { + flex: 0 1 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .versus-lower { + font-size: 0.75rem; + color: var( --clr-secondary ); + } + } + } + + .match-details { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0.75rem; + border-radius: 0.5rem; + font-size: 0.75rem; + + .theme--light & { + background-color: #0000000a; + } + + .theme--dark & { + background-color: #ffffff0a; + } + + .timer-hidden { + display: none; + } + + .tournament { + display: flex; + gap: 0.5rem; + justify-content: center; + align-items: center; + } + + .timer-object-countdown, + .timer-object-date { + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-weight: bold; + + &.timer-object-countdown-live { + .theme--light & { + color: #ffffff; + background-color: #b81414; + } + + .theme--dark & { + color: #2e0505; + background-color: #f5a3a3; + } + } + + &.timer-object-countdown-completed { + .theme--light & { + color: #ffffff; + background-color: #1d7c1d; + } + + .theme--dark & { + color: #0a290a; + background-color: #adebad; + } + } + + &:not( .timer-object-countdown-live ) { + color: var( --clr-on-background ); + + .theme--light & { + background-color: #00000014; + } + + .theme--dark & { + background-color: #ffffff14; + } + } + } + } + + .timer-object-separator { + display: none; + } } From fe9cdba0115aaf9b4f8b61d8346cf9cf250e1049 Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Tue, 25 Jun 2024 14:20:29 +0200 Subject: [PATCH 07/19] Adding stream links + removing unused logic --- .../match_ticker_display_components_new.lua | 97 ++++++++----------- stylesheets/commons/MatchTicker.less | 9 +- 2 files changed, 49 insertions(+), 57 deletions(-) diff --git a/components/match_ticker/commons/match_ticker_display_components_new.lua b/components/match_ticker/commons/match_ticker_display_components_new.lua index b8303c431a4..9ba026a64f0 100644 --- a/components/match_ticker/commons/match_ticker_display_components_new.lua +++ b/components/match_ticker/commons/match_ticker_display_components_new.lua @@ -7,13 +7,14 @@ -- -- Holds DisplayComponents for the MatchTicker module +-- It contains the new html structure intented to be use for the new Dota2 Main Page (for now) +-- Will most likely be expanded to other games in the future and other pages local Abbreviation = require('Module:Abbreviation') local Array = require('Module:Array') local Class = require('Module:Class') local Countdown = require('Module:Countdown') local DateExt = require('Module:Date/Ext') -local String = require('Module:StringUtils') local LeagueIcon = require('Module:LeagueIcon') local Logic = require('Module:Logic') local Lua = require('Module:Lua') @@ -35,8 +36,8 @@ local TOURNAMENT_DEFAULT_ICON = 'Generic_Tournament_icon.png' local NOW = os.date('%Y-%m-%d %H:%M', os.time(os.date('!*t') --[[@as osdateparam]])) ---Display class for the header of a match ticker ----@class MatchTickerHeader ----@operator call(string|number|nil): MatchTickerHeader +---@class NewMatchTickerHeader +---@operator call(string|number|nil): NewMatchTickerHeader ---@field root Html local Header = Class.new( function(self, text) @@ -47,7 +48,7 @@ local Header = Class.new( ) ---@param class string? ----@return MatchTickerHeader +---@return NewMatchTickerHeader function Header:addClass(class) self.root:addClass(class) return self @@ -59,8 +60,8 @@ function Header:create() end ---Display class for matches shown within a match ticker ----@class MatchTickerVersus ----@operator call(table): MatchTickerVersus +---@class NewMatchTickerVersus +---@operator call(table): NewMatchTickerVersus ---@field root Html ---@field match table local Versus = Class.new( @@ -102,7 +103,7 @@ end function Versus:bestof() local bestof = tonumber(self.match.bestof) or 0 if bestof > 0 then - return Abbreviation.make('(Bo' .. bestof .. ')', '(Best of ' .. bestof .. ')') + return Abbreviation.make('Bo' .. bestof, 'Best of ' .. bestof) end end @@ -126,8 +127,8 @@ function Versus:scores() end ---Display class for matches shown within a match ticker ----@class MatchTickerScoreBoard ----@operator call(table): MatchTickerScoreBoard +---@class NewMatchTickerScoreBoard +---@operator call(table): NewMatchTickerScoreBoard ---@field root Html ---@field match table local ScoreBoard = Class.new( @@ -181,9 +182,9 @@ function ScoreBoard:versus() return Versus(self.match):create() end ----Display class for matches shown within a match ticker ----@class MatchTickerDetails ----@operator call(table): MatchTickerMatch +---Display class for the details of a match displayed at the bottom of a match ticker +---@class NewMatchTickerDetails +---@operator call(table): NewMatchTickerMatch ---@field root Html ---@field hideTournament boolean ---@field onlyHighlightOnValue string? @@ -211,6 +212,7 @@ function Details:create() :node(self:countdown()) end +---It will display both countdown and date of the match so the user can select which one to show ---@return Html function Details:countdown() local match = self.match @@ -224,8 +226,6 @@ function Details:countdown() dateString = mw.getContentLanguage():formatDate('F j, Y', match.date) .. (Timezone.getTimezoneString('UTC')) end - dateString = 'June 22, 2024 - 02:00' .. (Timezone.getTimezoneString('UTC')) - local countdownArgs = { date = dateString, finished = match.finished @@ -241,33 +241,44 @@ end ---@return Html? function Details:streams() local match = self.match - local streams = mw.html.create('div') + local links = mw.html.create('div') :addClass('match-streams') if Table.isNotEmpty(match.stream) then local streams = {} - -- Copy from Module:Countdown - -- New format stream (twitch_en_2) + -- Standardize the stream data to always use the platform as key (because of the new format ex: twitch_en_2) for rawHost, stream in pairs(match.stream) do - -- Check if its a new format stream - if #(mw.text.split(rawHost, '_', true)) == 3 then - -- Parse the string + local streamParts = mw.text.split(rawHost, '_', true) + if #streamParts == 3 then local key = StreamLinks.StreamKey(rawHost) - -- Not allowed to add new keys while iterating it, add to another table - streams[key:toString()] = stream + streams[key.platform] = stream else streams[rawHost] = stream end end + local streamLinks = '' + + -- Iterate over the streams and create the different links for platformName, targetStream in pairs(streams) do - -- TODO + local streamLink = mw.ext.StreamPage.resolve_stream(platformName, targetStream) + + if streamLink then + -- Default values + local url = 'Special:Stream/' .. platformName .. '/' .. streamLink + local icon = '' + + -- TL.net specific + if platformName == 'stream' then + url = 'https://tl.net/video/streams/' .. streamLink + end + + streamLinks = streamLinks .. '[[' .. url .. '|' .. icon .. ']]' + end end - else - links:node(mw.html.create('span') - :wikitext('no streams') - ) + + links:wikitext(streamLinks) end return links @@ -296,7 +307,7 @@ function Details:tournament() ) return mw.html.create('div') - :addClass('tournament') + :addClass('match-tournament') :node(mw.html.create('div') :addClass('tournament-icon') :node(mw.html.create('div') @@ -311,8 +322,8 @@ function Details:tournament() end ---Display class for matches shown within a match ticker ----@class MatchTickerMatch ----@operator call({config: MatchTickerConfig, match: table}): MatchTickerMatch +---@class NewMatchTickerMatch +---@operator call({config: MatchTickerConfig, match: table}): NewMatchTickerMatch ---@field root Html ---@field config MatchTickerConfig ---@field match table @@ -332,32 +343,6 @@ function Match:create() return self.root end ----@param inheritedHeader string? ----@return string? -function Match:_expandHeader(inheritedHeader) - if not inheritedHeader then - return - end - - local headerArray = mw.text.split(inheritedHeader, '!') - - local index = 1 - if String.isEmpty(headerArray[1]) then - index = 2 - end - - local headerInput = 'brkts-header-' .. headerArray[index] - local expandedHeader = mw.message.new('brkts-header-' .. headerArray[index]) - ---@diagnostic disable-next-line: param-type-mismatch - :params(headerArray[index + 1] or ''):plain() --[[@as string]] - local failedExpandedHeader = '⧼' .. headerInput .. '⧽' - if Logic.isEmpty(expandedHeader) or failedExpandedHeader == expandedHeader then - return inheritedHeader - end - - return expandedHeader -end - ---@return Html function Match:standardMatchRow() return ScoreBoard(self.match):create() diff --git a/stylesheets/commons/MatchTicker.less b/stylesheets/commons/MatchTicker.less index 2e3888ee248..ca28dee82a0 100644 --- a/stylesheets/commons/MatchTicker.less +++ b/stylesheets/commons/MatchTicker.less @@ -64,11 +64,18 @@ Author(s): Nadox background-color: #ffffff0a; } + .match-streams { + display: flex; + align-items: center; + justify-content: center; + gap: 0.25rem; + } + .timer-hidden { display: none; } - .tournament { + .match-tournament { display: flex; gap: 0.5rem; justify-content: center; From c639faa8a0fcf8b92e2f393814d08486473f453d Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Tue, 25 Jun 2024 14:33:49 +0200 Subject: [PATCH 08/19] Fixing pipeline --- .../commons/match_ticker_display_components_new.lua | 1 - stylesheets/commons/MatchTicker.less | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/components/match_ticker/commons/match_ticker_display_components_new.lua b/components/match_ticker/commons/match_ticker_display_components_new.lua index 9ba026a64f0..956bcaad9cd 100644 --- a/components/match_ticker/commons/match_ticker_display_components_new.lua +++ b/components/match_ticker/commons/match_ticker_display_components_new.lua @@ -353,7 +353,6 @@ function Match:detailsRow() return Details{ match = self.match, hideTournament = self.config.hideTournament, - isBrMatch = isBrMatch, onlyHighlightOnValue = self.config.onlyHighlightOnValue }:create() end diff --git a/stylesheets/commons/MatchTicker.less b/stylesheets/commons/MatchTicker.less index ca28dee82a0..896f1bdd643 100644 --- a/stylesheets/commons/MatchTicker.less +++ b/stylesheets/commons/MatchTicker.less @@ -11,9 +11,7 @@ Author(s): Nadox } .match { - border-bottom: - 1px solid - var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important; + border-bottom: 1px solid var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important; padding: 0.75rem 1rem; font-size: 0.875rem; } From 5b446a7b0eceae138501f9fc606e881954c58a27 Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Wed, 26 Jun 2024 09:30:55 +0200 Subject: [PATCH 09/19] Renaming class --- .../commons/match_ticker_custom.lua | 2 +- stylesheets/commons/MatchTicker.less | 168 +++++++++--------- 2 files changed, 85 insertions(+), 85 deletions(-) diff --git a/components/match_ticker/commons/match_ticker_custom.lua b/components/match_ticker/commons/match_ticker_custom.lua index 8299ac1a72d..7ce33296b20 100644 --- a/components/match_ticker/commons/match_ticker_custom.lua +++ b/components/match_ticker/commons/match_ticker_custom.lua @@ -51,7 +51,7 @@ end function CustomMatchTicker.newMainPage(frame) local args = Arguments.getArgs(frame) args.newStyle = true - return MatchTicker(args):query():create() + return MatchTicker(args):query():create():addClass('new-match-style') end ---Entry point for display on player pages diff --git a/stylesheets/commons/MatchTicker.less b/stylesheets/commons/MatchTicker.less index 896f1bdd643..b04d2113796 100644 --- a/stylesheets/commons/MatchTicker.less +++ b/stylesheets/commons/MatchTicker.less @@ -2,7 +2,7 @@ Template(s): Match Ticker Author(s): Nadox *******************************************************************************/ -.dota2-test { +.new-match-style { .match-section-header { display: flex; flex-direction: column; @@ -14,117 +14,117 @@ Author(s): Nadox border-bottom: 1px solid var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important; padding: 0.75rem 1rem; font-size: 0.875rem; - } - - .match-scoreboard { - display: flex; - justify-content: center; - align-items: center; - gap: 2rem; - margin-bottom: 0.5rem; - - > div { - flex: 1; - } - .team-left { + .match-scoreboard { display: flex; - justify-content: right; - } - - .versus { - flex: 0 1 auto; - display: flex; - flex-direction: column; justify-content: center; align-items: center; + gap: 2rem; + margin-bottom: 0.5rem; - .versus-lower { - font-size: 0.75rem; - color: var( --clr-secondary ); + > div { + flex: 1; } - } - } - .match-details { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0.75rem; - border-radius: 0.5rem; - font-size: 0.75rem; - - .theme--light & { - background-color: #0000000a; - } + .team-left { + display: flex; + justify-content: right; + } + + .versus { + flex: 0 1 auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; - .theme--dark & { - background-color: #ffffff0a; + .versus-lower { + font-size: 0.75rem; + color: var( --clr-secondary ); + } + } } - .match-streams { + .match-details { display: flex; + justify-content: space-between; align-items: center; - justify-content: center; - gap: 0.25rem; - } + padding: 0.5rem 0.75rem; + border-radius: 0.5rem; + font-size: 0.75rem; - .timer-hidden { - display: none; - } + .theme--light & { + background-color: #0000000a; + } - .match-tournament { - display: flex; - gap: 0.5rem; - justify-content: center; - align-items: center; - } + .theme--dark & { + background-color: #ffffff0a; + } - .timer-object-countdown, - .timer-object-date { - padding: 0.25rem 0.5rem; - border-radius: 0.25rem; - font-weight: bold; + .match-streams { + display: flex; + align-items: center; + justify-content: center; + gap: 0.25rem; + } - &.timer-object-countdown-live { - .theme--light & { - color: #ffffff; - background-color: #b81414; - } + .timer-hidden { + display: none; + } - .theme--dark & { - color: #2e0505; - background-color: #f5a3a3; - } + .match-tournament { + display: flex; + gap: 0.5rem; + justify-content: center; + align-items: center; } - &.timer-object-countdown-completed { - .theme--light & { - color: #ffffff; - background-color: #1d7c1d; + .timer-object-countdown, + .timer-object-date { + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-weight: bold; + + &.timer-object-countdown-live { + .theme--light & { + color: #ffffff; + background-color: #b81414; + } + + .theme--dark & { + color: #2e0505; + background-color: #f5a3a3; + } } - .theme--dark & { - color: #0a290a; - background-color: #adebad; + &.timer-object-countdown-completed { + .theme--light & { + color: #ffffff; + background-color: #1d7c1d; + } + + .theme--dark & { + color: #0a290a; + background-color: #adebad; + } } - } - &:not( .timer-object-countdown-live ) { - color: var( --clr-on-background ); + &:not( .timer-object-countdown-live ) { + color: var( --clr-on-background ); - .theme--light & { - background-color: #00000014; - } + .theme--light & { + background-color: #00000014; + } - .theme--dark & { - background-color: #ffffff14; + .theme--dark & { + background-color: #ffffff14; + } } } } - } - .timer-object-separator { - display: none; + .timer-object-separator { + display: none; + } } } From 759a32e7b45029bfebbad3c96c5bcfcb48aefd07 Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Mon, 1 Jul 2024 10:39:04 +0200 Subject: [PATCH 10/19] Reusing Versus + adding comments --- .../match_ticker_display_components.lua | 9 +- .../match_ticker_display_components_new.lua | 110 ++---------------- stylesheets/commons/MatchTicker.less | 24 +++- 3 files changed, 34 insertions(+), 109 deletions(-) diff --git a/components/match_ticker/commons/match_ticker_display_components.lua b/components/match_ticker/commons/match_ticker_display_components.lua index 5c867587eb6..44a2b1daf18 100644 --- a/components/match_ticker/commons/match_ticker_display_components.lua +++ b/components/match_ticker/commons/match_ticker_display_components.lua @@ -98,7 +98,7 @@ function Versus:create() return self.root :node(mw.html.create('div') - :css('line-height', '1.1'):node(upperText or VS) + :addClass('versus-upper'):node(upperText or VS) ):node(mw.html.create('div') :addClass('versus-lower'):wikitext('(' .. lowerText .. ')') ) @@ -123,6 +123,7 @@ function Versus:scores() local scores, scores2 = {}, {} local hasSecondScore + local delimiter = ':' local setWinner = function(score, opponentIndex) if winner == opponentIndex then @@ -135,7 +136,7 @@ function Versus:scores() local score = Logic.isNotEmpty(opponent.status) and opponent.status ~= SCORE_STATUS and opponent.status or tonumber(opponent.score) or -1 - table.insert(scores, setWinner(score ~= -1 and score or 0, opponentIndex)) + table.insert(scores, '' .. setWinner(score ~= -1 and score or 0, opponentIndex) .. '' ) local score2 = tonumber((opponent.extradata or {}).score2) or 0 table.insert(scores2, setWinner(score2, opponentIndex)) @@ -145,10 +146,10 @@ function Versus:scores() end) if hasSecondScore then - return table.concat(scores, ':'), table.concat(scores2, ':') + return table.concat(scores, delimiter), table.concat(scores2, delimiter) end - return table.concat(scores, ':') + return table.concat(scores, delimiter) end ---Display class for matches shown within a match ticker diff --git a/components/match_ticker/commons/match_ticker_display_components_new.lua b/components/match_ticker/commons/match_ticker_display_components_new.lua index 956bcaad9cd..2552226dae7 100644 --- a/components/match_ticker/commons/match_ticker_display_components_new.lua +++ b/components/match_ticker/commons/match_ticker_display_components_new.lua @@ -10,8 +10,6 @@ -- It contains the new html structure intented to be use for the new Dota2 Main Page (for now) -- Will most likely be expanded to other games in the future and other pages -local Abbreviation = require('Module:Abbreviation') -local Array = require('Module:Array') local Class = require('Module:Class') local Countdown = require('Module:Countdown') local DateExt = require('Module:Date/Ext') @@ -21,6 +19,8 @@ local Lua = require('Module:Lua') local Table = require('Module:Table') local Timezone = require('Module:Timezone') local StreamLinks = require('Module:Links/Stream') +local Page = require('Module:Page') +local DefaultMatchTickerDisplayComponents = require('Module:MatchTicker/DisplayComponents') local HighlightConditions = Lua.import('Module:HighlightConditions') @@ -28,103 +28,9 @@ local OpponentLibraries = require('Module:OpponentLibraries') local Opponent = OpponentLibraries.Opponent local OpponentDisplay = OpponentLibraries.OpponentDisplay -local VS = 'VS' -local SCORE_STATUS = 'S' local CURRENT_PAGE = mw.title.getCurrentTitle().text local HIGHLIGHT_CLASS = 'tournament-highlighted-bg' local TOURNAMENT_DEFAULT_ICON = 'Generic_Tournament_icon.png' -local NOW = os.date('%Y-%m-%d %H:%M', os.time(os.date('!*t') --[[@as osdateparam]])) - ----Display class for the header of a match ticker ----@class NewMatchTickerHeader ----@operator call(string|number|nil): NewMatchTickerHeader ----@field root Html -local Header = Class.new( - function(self, text) - self.root = mw.html.create('div') - :addClass('infobox-header') - :wikitext(text) - end -) - ----@param class string? ----@return NewMatchTickerHeader -function Header:addClass(class) - self.root:addClass(class) - return self -end - ----@return Html -function Header:create() - return mw.html.create('div'):node(self.root) -end - ----Display class for matches shown within a match ticker ----@class NewMatchTickerVersus ----@operator call(table): NewMatchTickerVersus ----@field root Html ----@field match table -local Versus = Class.new( - function(self, match) - self.root = mw.html.create('div'):addClass('versus') - self.match = match - end -) - ----@return Html -function Versus:create() - local bestof = self:bestof() - local scores = self:scores() - local upperText, lowerText - - if bestof then - upperText = scores or VS - lowerText = bestof - elseif scores then - upperText = scores - lowerText = VS - end - - if not lowerText then - return self.root:wikitext(VS) - end - - return self.root - :node(mw.html.create('div') - :addClass('versus-upper') - :node(upperText or VS) - ):node(mw.html.create('div') - :addClass('versus-lower') - :wikitext('(' .. lowerText .. ')') - ) -end - ----@return string? -function Versus:bestof() - local bestof = tonumber(self.match.bestof) or 0 - if bestof > 0 then - return Abbreviation.make('Bo' .. bestof, 'Best of ' .. bestof) - end -end - ----@return string? ----@return string? -function Versus:scores() - if self.match.date > NOW then - return - end - - local scores = {} - - Array.forEach(self.match.match2opponents, function(opponent, opponentIndex) - local score = Logic.isNotEmpty(opponent.status) and opponent.status ~= SCORE_STATUS and opponent.status - or tonumber(opponent.score) or -1 - - table.insert(scores, score) - end) - - return table.concat(scores, ' : ') -end ---Display class for matches shown within a match ticker ---@class NewMatchTickerScoreBoard @@ -174,12 +80,18 @@ function ScoreBoard:opponent(opponentData, isWinner, flip) showLink = opponentName:gsub('_', ' ') ~= CURRENT_PAGE }) + if isWinner then + opponentDisplay:addClass('match-winner') + end + return opponentDisplay end ---@return Html function ScoreBoard:versus() - return Versus(self.match):create() + return mw.html.create('div') + :addClass('versus') + :node(DefaultMatchTickerDisplayComponents.Versus(self.match):create()) end ---Display class for the details of a match displayed at the bottom of a match ticker @@ -316,7 +228,7 @@ function Details:tournament() ) :node(mw.html.create('div') :addClass('tournament-text') - :wikitext('[[' .. match.pagename .. '|' .. displayName .. ']]') + :wikitext(Page.makeInternalLink({}, displayName, match.pagename)) ) end @@ -358,9 +270,7 @@ function Match:detailsRow() end return { - Header = Header, Match = Match, Details = Details, ScoreBoard = ScoreBoard, - Versus = Versus, } diff --git a/stylesheets/commons/MatchTicker.less b/stylesheets/commons/MatchTicker.less index b04d2113796..4989e0f1a59 100644 --- a/stylesheets/commons/MatchTicker.less +++ b/stylesheets/commons/MatchTicker.less @@ -2,6 +2,12 @@ Template(s): Match Ticker Author(s): Nadox *******************************************************************************/ + +// Backwards compatibility for previous display component +.versus-upper { + line-height: 1.1; +} + .new-match-style { .match-section-header { display: flex; @@ -11,7 +17,7 @@ Author(s): Nadox } .match { - border-bottom: 1px solid var( --table-border-color, var( --clr-border, #bbbbbb ) ) !important; + border-bottom: 1px solid var( --table-border-color, var( --clr-border, #bbbbbb ) ); padding: 0.75rem 1rem; font-size: 0.875rem; @@ -38,11 +44,23 @@ Author(s): Nadox justify-content: center; align-items: center; + .versus-upper { + display: flex; + gap: 0.25rem; + align-items: center; + justify-content: center; + } + .versus-lower { font-size: 0.75rem; color: var( --clr-secondary ); + text-align: center; } } + + .match-winner { + font-weight: bold; + } } .match-details { @@ -68,10 +86,6 @@ Author(s): Nadox gap: 0.25rem; } - .timer-hidden { - display: none; - } - .match-tournament { display: flex; gap: 0.5rem; From 05a30644f044d69ff656d728a159425382d73367 Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Wed, 10 Jul 2024 09:49:33 +0200 Subject: [PATCH 11/19] Implementing feedbacks --- components/match_ticker/commons/match_ticker.lua | 15 +++++++++++---- .../commons/match_ticker_display_components.lua | 2 +- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/components/match_ticker/commons/match_ticker.lua b/components/match_ticker/commons/match_ticker.lua index af23028eb82..a8de4a94527 100644 --- a/components/match_ticker/commons/match_ticker.lua +++ b/components/match_ticker/commons/match_ticker.lua @@ -164,12 +164,19 @@ function MatchTicker:init(args) end config.wrapperClasses = wrapperClasses - if config.newStyle then - MatchTicker.DisplayComponents = Lua.import('Module:MatchTicker/DisplayComponents/New') - else - MatchTicker.DisplayComponents = Lua.import('Module:MatchTicker/DisplayComponents') + --- Extract externally if it grows + ---@param matchTickerConfig MatchTickerConfig + ---@return unknown # Todo: Add interface for MatchTickerDisplay + local MatchTickerDisplayFactory = function(matchTickerConfig) + if matchTickerConfig.newStyle then + return Lua.import('Module:MatchTicker/DisplayComponents/New') + else + return Lua.import('Module:MatchTicker/DisplayComponents') + end end + MatchTicker.DisplayComponents = MatchTickerDisplayFactory(config) + self.config = config return self diff --git a/components/match_ticker/commons/match_ticker_display_components.lua b/components/match_ticker/commons/match_ticker_display_components.lua index 44a2b1daf18..6e54c949db8 100644 --- a/components/match_ticker/commons/match_ticker_display_components.lua +++ b/components/match_ticker/commons/match_ticker_display_components.lua @@ -139,7 +139,7 @@ function Versus:scores() table.insert(scores, '' .. setWinner(score ~= -1 and score or 0, opponentIndex) .. '' ) local score2 = tonumber((opponent.extradata or {}).score2) or 0 - table.insert(scores2, setWinner(score2, opponentIndex)) + table.insert(scores2, '' .. setWinner(score2, opponentIndex) .. '' ) if score2 > 0 then hasSecondScore = true end From 386255c65fc33fdeeb84cb0a75b3cba90453863e Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Mon, 15 Jul 2024 12:28:45 +0200 Subject: [PATCH 12/19] Refactoring stream display logic --- .../match_ticker_display_components_new.lua | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/components/match_ticker/commons/match_ticker_display_components_new.lua b/components/match_ticker/commons/match_ticker_display_components_new.lua index 2552226dae7..192a945b213 100644 --- a/components/match_ticker/commons/match_ticker_display_components_new.lua +++ b/components/match_ticker/commons/match_ticker_display_components_new.lua @@ -32,6 +32,13 @@ local CURRENT_PAGE = mw.title.getCurrentTitle().text local HIGHLIGHT_CLASS = 'tournament-highlighted-bg' local TOURNAMENT_DEFAULT_ICON = 'Generic_Tournament_icon.png' +local PLATFORM_TO_ICON = { + cc163 = 'cc', + huomao = 'huomaotv', + huya = 'huyatv', + himo = 'nimotv', +} + ---Display class for matches shown within a match ticker ---@class NewMatchTickerScoreBoard ---@operator call(table): NewMatchTickerScoreBoard @@ -156,6 +163,8 @@ function Details:streams() local links = mw.html.create('div') :addClass('match-streams') + mw.logObject(match.stream, 'match.stream') + if Table.isNotEmpty(match.stream) then local streams = {} @@ -177,16 +186,17 @@ function Details:streams() local streamLink = mw.ext.StreamPage.resolve_stream(platformName, targetStream) if streamLink then - -- Default values - local url = 'Special:Stream/' .. platformName .. '/' .. streamLink - local icon = '' + local newStreamLink = nil + local icon = '' -- TL.net specific if platformName == 'stream' then - url = 'https://tl.net/video/streams/' .. streamLink + newStreamLink = Page.makeExternalLink(icon, 'https://tl.net/video/streams/' .. streamLink) + else + newStreamLink = Page.makeInternalLink({}, icon, 'Special:Stream/' .. platformName .. '/' .. streamLink) end - streamLinks = streamLinks .. '[[' .. url .. '|' .. icon .. ']]' + streamLinks = streamLinks .. newStreamLink end end From 3178186c64c9bdd2e2ec81b1553e55e59bfb74b0 Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Mon, 15 Jul 2024 12:58:06 +0200 Subject: [PATCH 13/19] Fixing pipeline --- .../commons/match_ticker_display_components_new.lua | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/components/match_ticker/commons/match_ticker_display_components_new.lua b/components/match_ticker/commons/match_ticker_display_components_new.lua index 192a945b213..cfe16c431fe 100644 --- a/components/match_ticker/commons/match_ticker_display_components_new.lua +++ b/components/match_ticker/commons/match_ticker_display_components_new.lua @@ -186,17 +186,16 @@ function Details:streams() local streamLink = mw.ext.StreamPage.resolve_stream(platformName, targetStream) if streamLink then - local newStreamLink = nil local icon = '' -- TL.net specific if platformName == 'stream' then - newStreamLink = Page.makeExternalLink(icon, 'https://tl.net/video/streams/' .. streamLink) + streamLinks = streamLinks .. + Page.makeExternalLink(icon, 'https://tl.net/video/streams/' .. streamLink) else - newStreamLink = Page.makeInternalLink({}, icon, 'Special:Stream/' .. platformName .. '/' .. streamLink) + streamLinks = streamLinks .. + Page.makeInternalLink({}, icon, 'Special:Stream/' .. platformName .. '/' .. streamLink) end - - streamLinks = streamLinks .. newStreamLink end end From 65fc46942c16c67389ad22828d0c8f0cee1cabbe Mon Sep 17 00:00:00 2001 From: Killian Mer <32543621+KilMer56@users.noreply.github.com> Date: Mon, 15 Jul 2024 14:46:56 +0200 Subject: [PATCH 14/19] Update components/match_ticker/commons/match_ticker_display_components_new.lua Co-authored-by: hjpalpha <75081997+hjpalpha@users.noreply.github.com> --- .../commons/match_ticker_display_components_new.lua | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/match_ticker/commons/match_ticker_display_components_new.lua b/components/match_ticker/commons/match_ticker_display_components_new.lua index cfe16c431fe..22ba44295ef 100644 --- a/components/match_ticker/commons/match_ticker_display_components_new.lua +++ b/components/match_ticker/commons/match_ticker_display_components_new.lua @@ -162,9 +162,6 @@ function Details:streams() local match = self.match local links = mw.html.create('div') :addClass('match-streams') - - mw.logObject(match.stream, 'match.stream') - if Table.isNotEmpty(match.stream) then local streams = {} From 34154fc726f4b30053e316ccda762a4d7398d2a7 Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Mon, 15 Jul 2024 15:00:31 +0200 Subject: [PATCH 15/19] Extracting factory --- .../match_ticker/commons/match_ticker.lua | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/components/match_ticker/commons/match_ticker.lua b/components/match_ticker/commons/match_ticker.lua index a8de4a94527..3c2df9a9e92 100644 --- a/components/match_ticker/commons/match_ticker.lua +++ b/components/match_ticker/commons/match_ticker.lua @@ -164,24 +164,23 @@ function MatchTicker:init(args) end config.wrapperClasses = wrapperClasses - --- Extract externally if it grows - ---@param matchTickerConfig MatchTickerConfig - ---@return unknown # Todo: Add interface for MatchTickerDisplay - local MatchTickerDisplayFactory = function(matchTickerConfig) - if matchTickerConfig.newStyle then - return Lua.import('Module:MatchTicker/DisplayComponents/New') - else - return Lua.import('Module:MatchTicker/DisplayComponents') - end - end - - MatchTicker.DisplayComponents = MatchTickerDisplayFactory(config) - self.config = config + MatchTicker.DisplayComponents = self:displayFactory() + return self end +--- Extract externally if it grows +---@return unknown # Todo: Add interface for MatchTickerDisplay +function MatchTicker:displayFactory() + if self.config.newStyle then + return Lua.import('Module:MatchTicker/DisplayComponents/New') + else + return Lua.import('Module:MatchTicker/DisplayComponents') + end +end + ---queries the matches and filters them for unwanted ones ---@param matches table? ---@return MatchTicker From 91fe53c5c1d266343ff543150099948fc2adcf9e Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Mon, 15 Jul 2024 16:49:48 +0200 Subject: [PATCH 16/19] Using new stream links logic --- .../match_ticker_display_components_new.lua | 43 +------------------ stylesheets/commons/MatchTicker.less | 2 +- 2 files changed, 3 insertions(+), 42 deletions(-) diff --git a/components/match_ticker/commons/match_ticker_display_components_new.lua b/components/match_ticker/commons/match_ticker_display_components_new.lua index 22ba44295ef..24fdf693f39 100644 --- a/components/match_ticker/commons/match_ticker_display_components_new.lua +++ b/components/match_ticker/commons/match_ticker_display_components_new.lua @@ -32,13 +32,6 @@ local CURRENT_PAGE = mw.title.getCurrentTitle().text local HIGHLIGHT_CLASS = 'tournament-highlighted-bg' local TOURNAMENT_DEFAULT_ICON = 'Generic_Tournament_icon.png' -local PLATFORM_TO_ICON = { - cc163 = 'cc', - huomao = 'huomaotv', - huya = 'huyatv', - himo = 'nimotv', -} - ---Display class for matches shown within a match ticker ---@class NewMatchTickerScoreBoard ---@operator call(table): NewMatchTickerScoreBoard @@ -162,41 +155,9 @@ function Details:streams() local match = self.match local links = mw.html.create('div') :addClass('match-streams') + if Table.isNotEmpty(match.stream) then - local streams = {} - - -- Standardize the stream data to always use the platform as key (because of the new format ex: twitch_en_2) - for rawHost, stream in pairs(match.stream) do - local streamParts = mw.text.split(rawHost, '_', true) - if #streamParts == 3 then - local key = StreamLinks.StreamKey(rawHost) - streams[key.platform] = stream - else - streams[rawHost] = stream - end - end - - local streamLinks = '' - - -- Iterate over the streams and create the different links - for platformName, targetStream in pairs(streams) do - local streamLink = mw.ext.StreamPage.resolve_stream(platformName, targetStream) - - if streamLink then - local icon = '' - - -- TL.net specific - if platformName == 'stream' then - streamLinks = streamLinks .. - Page.makeExternalLink(icon, 'https://tl.net/video/streams/' .. streamLink) - else - streamLinks = streamLinks .. - Page.makeInternalLink({}, icon, 'Special:Stream/' .. platformName .. '/' .. streamLink) - end - end - end - - links:wikitext(streamLinks) + links:wikitext(StreamLinks.display(StreamLinks.filterStreams(match.stream))) end return links diff --git a/stylesheets/commons/MatchTicker.less b/stylesheets/commons/MatchTicker.less index 4989e0f1a59..78a4381c707 100644 --- a/stylesheets/commons/MatchTicker.less +++ b/stylesheets/commons/MatchTicker.less @@ -123,7 +123,7 @@ Author(s): Nadox } } - &:not( .timer-object-countdown-live ) { + &:not( .timer-object-countdown-live, .timer-object-countdown-completed ) { color: var( --clr-on-background ); .theme--light & { From 372e5b02f6c0f4363ad75addabccc986423655c9 Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Mon, 15 Jul 2024 17:11:00 +0200 Subject: [PATCH 17/19] Moving Factory + Fixing CI --- .../match_ticker/commons/match_ticker.lua | 25 +- javascript/commons/Countdown.js | 546 +++++++++--------- 2 files changed, 286 insertions(+), 285 deletions(-) diff --git a/components/match_ticker/commons/match_ticker.lua b/components/match_ticker/commons/match_ticker.lua index 3c2df9a9e92..04e3617728a 100644 --- a/components/match_ticker/commons/match_ticker.lua +++ b/components/match_ticker/commons/match_ticker.lua @@ -58,6 +58,17 @@ local DEFAULT_RECENT_ORDER = 'date desc, liquipediatier asc, tournament asc' local DEFAULT_LIVE_HOURS = 8 local NOW = os.date('%Y-%m-%d %H:%M', os.time(os.date('!*t') --[[@as osdateparam]])) +--- Extract externally if it grows +---@param matchTickerConfig MatchTickerConfig +---@return unknown # Todo: Add interface for MatchTickerDisplay +local MatchTickerDisplayFactory = function (matchTickerConfig) + if matchTickerConfig.newStyle then + return Lua.import('Module:MatchTicker/DisplayComponents/New') + else + return Lua.import('Module:MatchTicker/DisplayComponents') + end +end + ---@class MatchTickerConfig ---@field tournaments string[] ---@field limit integer @@ -164,23 +175,13 @@ function MatchTicker:init(args) end config.wrapperClasses = wrapperClasses - self.config = config + MatchTicker.DisplayComponents = MatchTickerDisplayFactory(config) - MatchTicker.DisplayComponents = self:displayFactory() + self.config = config return self end ---- Extract externally if it grows ----@return unknown # Todo: Add interface for MatchTickerDisplay -function MatchTicker:displayFactory() - if self.config.newStyle then - return Lua.import('Module:MatchTicker/DisplayComponents/New') - else - return Lua.import('Module:MatchTicker/DisplayComponents') - end -end - ---queries the matches and filters them for unwanted ones ---@param matches table? ---@return MatchTicker diff --git a/javascript/commons/Countdown.js b/javascript/commons/Countdown.js index f57b710da7b..d23c15fc3cb 100644 --- a/javascript/commons/Countdown.js +++ b/javascript/commons/Countdown.js @@ -9,131 +9,131 @@ liquipedia.countdown = { lastCountdownId: null, init: function () { // // Cancels last countdown loop if it exists to prevent multiple countdowns running at the same time - if (liquipedia.countdown.timeoutFunctions && liquipedia.countdown.lastCountdownId) { - liquipedia.countdown.timeoutFunctions.clear(liquipedia.countdown.lastCountdownId); + if ( liquipedia.countdown.timeoutFunctions && liquipedia.countdown.lastCountdownId ) { + liquipedia.countdown.timeoutFunctions.clear( liquipedia.countdown.lastCountdownId ); } - liquipedia.countdown.timerObjectNodes = document.querySelectorAll('.timer-object'); - if (liquipedia.countdown.timerObjectNodes.length > 0) { - mw.loader.using('user.options', () => { - liquipedia.countdown.timerObjectNodes.forEach((timerObjectNode) => { - const dateObject = liquipedia.countdown.parseTimerObjectNodeToDateObj(timerObjectNode); - const dateChild = document.createElement('span'); - if (typeof dateObject === 'object') { - const disableTimeZoneAdjust = mw.user.options.get('teamliquidintegration-disable-countdown-timezone-adjust') === '1' || mw.user.options.get('teamliquidintegration-disable-countdown-timezone-adjust') === 1; - if (disableTimeZoneAdjust) { + liquipedia.countdown.timerObjectNodes = document.querySelectorAll( '.timer-object' ); + if ( liquipedia.countdown.timerObjectNodes.length > 0 ) { + mw.loader.using( 'user.options', () => { + liquipedia.countdown.timerObjectNodes.forEach( ( timerObjectNode ) => { + const dateObject = liquipedia.countdown.parseTimerObjectNodeToDateObj( timerObjectNode ); + const dateChild = document.createElement( 'span' ); + if ( typeof dateObject === 'object' ) { + const disableTimeZoneAdjust = mw.user.options.get( 'teamliquidintegration-disable-countdown-timezone-adjust' ) === '1' || mw.user.options.get( 'teamliquidintegration-disable-countdown-timezone-adjust' ) === 1; + if ( disableTimeZoneAdjust ) { dateChild.innerHTML = timerObjectNode.innerHTML; } else { - dateChild.innerHTML = liquipedia.countdown.getCorrectTimeZoneString(dateObject); + dateChild.innerHTML = liquipedia.countdown.getCorrectTimeZoneString( dateObject ); } } else { dateChild.innerHTML = timerObjectNode.innerHTML; } - dateChild.classList.add('timer-object-date'); + dateChild.classList.add( 'timer-object-date' ); timerObjectNode.innerHTML = ''; - timerObjectNode.appendChild(dateChild); + timerObjectNode.appendChild( dateChild ); let separatorChild; - if (typeof timerObjectNode.dataset.separator !== 'undefined') { - separatorChild = document.createElement('span'); + if ( typeof timerObjectNode.dataset.separator !== 'undefined' ) { + separatorChild = document.createElement( 'span' ); separatorChild.innerText = timerObjectNode.dataset.separator; - separatorChild.classList.add('timer-object-separator'); + separatorChild.classList.add( 'timer-object-separator' ); } else { - separatorChild = document.createElement('br'); - separatorChild.classList.add('timer-object-separator'); + separatorChild = document.createElement( 'br' ); + separatorChild.classList.add( 'timer-object-separator' ); } - timerObjectNode.appendChild(separatorChild); - const countdownChild = document.createElement('span'); - countdownChild.classList.add('timer-object-countdown'); - timerObjectNode.appendChild(countdownChild); - }); + timerObjectNode.appendChild( separatorChild ); + const countdownChild = document.createElement( 'span' ); + countdownChild.classList.add( 'timer-object-countdown' ); + timerObjectNode.appendChild( countdownChild ); + } ); liquipedia.countdown.setupCountdownsIfSwitchToggleExists(); // Only run when the window is actually in the front, not in background tabs (on browsers that support it) - mw.loader.using('mediawiki.visibleTimeout').then((require) => { - liquipedia.countdown.timeoutFunctions = require('mediawiki.visibleTimeout'); + mw.loader.using( 'mediawiki.visibleTimeout' ).then( ( require ) => { + liquipedia.countdown.timeoutFunctions = require( 'mediawiki.visibleTimeout' ); liquipedia.countdown.runCountdown(); - }); - }); + } ); + } ); } }, setupCountdownsIfSwitchToggleExists: function () { - const switchToggleGroup = liquipedia.switchButtons.getSwitchGroup('countdown'); - if (!switchToggleGroup || switchToggleGroup.type !== 'toggle' || switchToggleGroup.value === null) { + const switchToggleGroup = liquipedia.switchButtons.getSwitchGroup( 'countdown' ); + if ( !switchToggleGroup || switchToggleGroup.type !== 'toggle' || switchToggleGroup.value === null ) { return; } // Default state - liquipedia.countdown.toggleCountdowns(switchToggleGroup.value); + liquipedia.countdown.toggleCountdowns( switchToggleGroup.value ); // Reacting state switch - switchToggleGroup.nodes.forEach((switchNode) => { - switchNode.addEventListener(liquipedia.switchButtons.triggerEventName, (event) => { - liquipedia.countdown.toggleCountdowns(event.detail.value); - }); - }); + switchToggleGroup.nodes.forEach( ( switchNode ) => { + switchNode.addEventListener( liquipedia.switchButtons.triggerEventName, ( event ) => { + liquipedia.countdown.toggleCountdowns( event.detail.value ); + } ); + } ); }, - toggleCountdowns: function (isCountdownToggled) { - liquipedia.countdown.timerObjectNodes.forEach((timerObjectNode) => { - timerObjectNode.querySelector('.timer-object-date').classList.toggle(this.timerHiddenClass, isCountdownToggled); - timerObjectNode.querySelector('.timer-object-countdown').classList.toggle(this.timerHiddenClass, !isCountdownToggled); - }); + toggleCountdowns: function ( isCountdownToggled ) { + liquipedia.countdown.timerObjectNodes.forEach( ( timerObjectNode ) => { + timerObjectNode.querySelector( '.timer-object-date' ).classList.toggle( this.timerHiddenClass, isCountdownToggled ); + timerObjectNode.querySelector( '.timer-object-countdown' ).classList.toggle( this.timerHiddenClass, !isCountdownToggled ); + } ); }, - parseTimerObjectNodeToDateObj: function (timerObjectNode) { - if (timerObjectNode.dataset.timestamp === 'error') { + parseTimerObjectNodeToDateObj: function ( timerObjectNode ) { + if ( timerObjectNode.dataset.timestamp === 'error' ) { return false; } - return new Date(1000 * parseInt(timerObjectNode.dataset.timestamp)); + return new Date( 1000 * parseInt( timerObjectNode.dataset.timestamp ) ); }, runCountdown: function () { - liquipedia.countdown.timerObjectNodes.forEach((timerObjectNode) => { - liquipedia.countdown.setCountdownString(timerObjectNode); - }); + liquipedia.countdown.timerObjectNodes.forEach( ( timerObjectNode ) => { + liquipedia.countdown.setCountdownString( timerObjectNode ); + } ); liquipedia.countdown.lastCountdownId = liquipedia.countdown.timeoutFunctions.set( liquipedia.countdown.runCountdown, 1000 ); }, - setCountdownString: function (timerObjectNode) { + setCountdownString: function ( timerObjectNode ) { const streamsarr = []; - const countdownElem = timerObjectNode.querySelector('.timer-object-countdown'); + const countdownElem = timerObjectNode.querySelector( '.timer-object-countdown' ); let datestr = '', live = 'LIVE'; - if (typeof timerObjectNode.dataset.countdownEndText !== 'undefined') { + if ( typeof timerObjectNode.dataset.countdownEndText !== 'undefined' ) { live = timerObjectNode.dataset.countdownEndText; } - if (timerObjectNode.dataset.timestamp !== 'error') { - if (timerObjectNode.dataset.finished === 'finished') { - countdownElem.classList.add('timer-object-countdown-completed'); + if ( timerObjectNode.dataset.timestamp !== 'error' ) { + if ( timerObjectNode.dataset.finished === 'finished' ) { + countdownElem.classList.add( 'timer-object-countdown-completed' ); datestr = 'COMPLETED'; } else { const differenceInSeconds = Math.floor( - parseInt(timerObjectNode.dataset.timestamp) - (Date.now().valueOf() / 1000) + parseInt( timerObjectNode.dataset.timestamp ) - ( Date.now().valueOf() / 1000 ) ); - if (differenceInSeconds <= 0) { - if (differenceInSeconds > -43200 && timerObjectNode.dataset.finished !== 'finished') { - countdownElem.classList.add('timer-object-countdown-live'); + if ( differenceInSeconds <= 0 ) { + if ( differenceInSeconds > -43200 && timerObjectNode.dataset.finished !== 'finished' ) { + countdownElem.classList.add( 'timer-object-countdown-live' ); datestr = live; } } else { let differenceInSecondsMath = differenceInSeconds; - const weeks = Math.floor(differenceInSecondsMath / 604800); + const weeks = Math.floor( differenceInSecondsMath / 604800 ); differenceInSecondsMath = differenceInSecondsMath % 604800; - const days = Math.floor(differenceInSecondsMath / 86400); + const days = Math.floor( differenceInSecondsMath / 86400 ); differenceInSecondsMath = differenceInSecondsMath % 86400; - const hours = Math.floor(differenceInSecondsMath / 3600); + const hours = Math.floor( differenceInSecondsMath / 3600 ); differenceInSecondsMath = differenceInSecondsMath % 3600; - const minutes = Math.floor(differenceInSecondsMath / 60); - const seconds = Math.floor(differenceInSecondsMath % 60); - if (differenceInSeconds >= 604800) { + const minutes = Math.floor( differenceInSecondsMath / 60 ); + const seconds = Math.floor( differenceInSecondsMath % 60 ); + if ( differenceInSeconds >= 604800 ) { datestr = weeks + 'w ' + days + 'd'; - } else if (differenceInSeconds >= 86400) { + } else if ( differenceInSeconds >= 86400 ) { datestr = days + 'd ' + hours + 'h ' + minutes + 'm'; - } else if (differenceInSeconds >= 3600) { + } else if ( differenceInSeconds >= 3600 ) { datestr = hours + 'h ' + minutes + 'm ' + seconds + 's'; - } else if (differenceInSeconds >= 60) { + } else if ( differenceInSeconds >= 60 ) { datestr = minutes + 'm ' + seconds + 's'; } else { datestr = seconds + 's'; @@ -143,221 +143,221 @@ liquipedia.countdown = { } else { datestr = ''; // DATE ERROR! } - if (timerObjectNode.dataset.streamTwitch) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamTwitch ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamTwitch2) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamTwitch2 ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamYoutube) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamYoutube ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamAfreeca) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamAfreeca ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamAfreecatv) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamAfreecatv ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamBilibili) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamBilibili ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamBooyah) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamBooyah ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamCc163) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamCc163 ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamDailymotion) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamDailymotion ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamDouyu) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamDouyu ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamFacebook) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamFacebook ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamHuomao) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamHuomao ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamHuya) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamHuya ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamKick) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamKick ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamLoco) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamLoco ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamMildom) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamMildom ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamNimo) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamNimo ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamTrovo) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamTrovo ) { + streamsarr.push( '' ); } - if (timerObjectNode.dataset.streamTl) { - streamsarr.push(''); + if ( timerObjectNode.dataset.streamTl ) { + streamsarr.push( '' ); } let html = '' + datestr + ''; - if (datestr.length > 0 && streamsarr.length > 0) { + if ( datestr.length > 0 && streamsarr.length > 0 ) { html += ' - '; } - if (timerObjectNode.dataset.finished !== 'finished') { - html += streamsarr.join(' '); + if ( timerObjectNode.dataset.finished !== 'finished' ) { + html += streamsarr.join( ' ' ); } countdownElem.innerHTML = html; }, - getStreamName: function (url) { - return url.replace(/\s/g, '_'); + getStreamName: function ( url ) { + return url.replace( /\s/g, '_' ); }, - timeZoneAbbr: new Map([ - ['Acre Time', 'ACT'], - ['Afghanistan Time', 'AFT'], - ['Alaska Daylight Time', 'AKDT'], - ['Alaska Standard Time', 'AKST'], - ['Amazon Time', 'AMT'], - ['Arabic Standard Time', 'AST'], - ['Argentina Standard Time', 'ART'], - ['Armenia Time', 'AMT'], - ['Atlantic Daylight Time', 'ADT'], - ['Atlantic Standard Time', 'AST'], - ['Australian Central Daylight Time', 'ACDT'], - ['Australian Central Standard Time', 'ACST'], - ['Australian Central Western Standard Time', 'ACWST'], - ['Australian Eastern Daylight Time', 'AEDT'], - ['Australian Eastern Standard Time', 'AEST'], - ['Australian Western Standard Time', 'AWST'], - ['Aqtobe Time', 'AQTT'], - ['Azerbaijan Summer Time', 'AZST'], - ['Azerbaijan Time', 'AZT'], - ['Azores Summer Time', 'AZOST'], - ['Azores Standard Time', ''], - ['Bangladesh Standard Time', 'BST'], - ['Bhutan Time', 'BTT'], - ['Bolivia Time', 'BOT'], - ['Brasilia Standard Time', 'BRT'], - ['Brasilia Summer Time', 'BRST'], - ['British Summer Time', 'BST'], - ['Brunei Darussalam Time', 'BNT'], - ['Cape Verde Standard Time', 'CVT'], - ['Center Indonesia Time', 'WITA'], - ['Central Africa Time', 'CAT'], - ['Central Daylight Time', 'CDT'], - ['Central European Summer Time', 'CEST'], - ['Central European Standard Time', 'CET'], - ['Central Standard Time', 'CT'], - ['Chatham Standard Time', 'CHAST'], - ['Chile Standard Time', 'CLT'], - ['China Standard Time', 'CST'], - ['Colombia Standard Time', 'COT'], - ['Cuba Daylight Time', 'CDT'], - ['Cuba Standard Time', 'CST'], - ['East Africa Time', 'EAT'], - ['East Kazakhstan Time', 'ALMT'], - ['Easter Island Standard Time', 'EAST'], - ['Eastern Daylight Time', 'EDT'], - ['Eastern European Standard Time', 'EET'], - ['Eastern European Summer Time', 'EEST'], - ['Eastern Standard Time', 'EST'], - ['Ecuador Time', 'ECT'], - ['Fiji Standard Time', 'FJST'], - ['French Guiana Time', 'GFT'], - ['Georgia Standard Time', 'GET'], - ['Greenwich Mean Time', 'GMT'], - ['Gulf Standard Time', 'GST'], - ['Guyana Time', 'GYT'], - ['Hawaii-Aleutian Daylight Time', 'HDT'], - ['Hawaii-Aleutian Standard Time', 'HST'], - ['Hong Kong Standard Time', 'HKT'], - ['Hovd Standard Time', 'HOVST'], - ['India Standard Time', 'IST'], - ['Indochina Time', 'ICT'], - ['Iran Daylight Time', 'IRDT'], - ['Iran Standard Time', 'IRST'], - ['Irkutsk Standard Time', 'IRKST'], - ['Israel Daylight Time', 'IDT'], - ['Israel Standard Time', 'IST'], - ['Japan Standard Time', 'JST'], - ['Korean Standard Time', 'KST'], - ['Krasnoyarsk Standard Time', 'KRAST'], - ['Line Islands Time', 'LINT'], - ['Lord Howe Standard Time', 'LHST'], - ['Magadan Standard Time', 'MAGT'], - ['Malaysia Time', 'MYT'], - ['Marquesas Time', 'MART'], - ['Mauritius Standard Time', 'MUT'], - ['Mexican Pacific Standard Time', 'PST'], - ['Moscow Standard Time', 'MSK'], - ['Mountain Daylight Time', 'MDT'], - ['Mountain Standard Time', 'MST'], - ['Myanmar Time', 'MMT'], - ['Nepal Time', 'NPT'], - ['New Zealand Daylight Time', 'NZDT'], - ['New Zealand Standard Time', 'NZST'], - ['Newfoundland Daylight Time', 'NDT'], - ['Newfoundland Standard Time', 'NDT'], - ['Norfolk Island Time', 'NFT'], - ['Novosibirsk Standard Time', 'NOVST'], - ['Omsk Standard Time', 'OMST'], - ['Pacific Daylight Time', 'PDT'], - ['Pacific Standard Time', 'PST'], - ['Pakistan Standard Time', 'PKT'], - ['Papua New Guinea Time', 'PGT'], - ['Paraguay Standard Time', 'PYST'], - ['Petropavlovsk-Kamchatski Standard Time', 'PETT'], - ['Philippine Standard Time', 'PHT'], - ['Pyongyang Time', 'PYT'], - ['Sakhalin Standard Time', 'SAKT'], - ['Samara Standard Time', 'SAMT'], - ['Singapore Standard Time', 'SGT'], - ['Solomon Islands Time', 'SBT'], - ['South Africa Standard Time', 'SAST'], - ['St. Pierre & Miquelon Daylight Time', 'PMDT'], - ['St. Pierre & Miquelon Standard Time', 'PMST'], - ['Taipei Standard Time', 'TST'], - ['Tonga Standard Time', 'TOT'], - ['Turkey Time', 'TRT'], - ['Ulaanbaatar Standard Time', 'ULAST'], - ['Uruguay Standard Time', 'UYT'], - ['Uzbekistan Standard Time', 'UZT'], - ['Venezuelan Standard Time', 'VET'], - ['Vladivostok Standard Time', 'VLAT'], - ['West Africa Standard Time', 'WAST'], - ['West Greenland Summer Time', 'WGST'], - ['West Greenland Standard Time', 'WGT'], - ['Western European Summer Time', 'WEST'], - ['Western Indonesia Time', 'WIB'], - ['Yakutsk Standard Time', 'YAKT'], - ['Yekaterinburg Standard Time', 'YEKT'] - ]), - getMonthNameFromMonthNumber: function (newFutureMonth) { - const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; - return monthNames[newFutureMonth]; + timeZoneAbbr: new Map( [ + [ 'Acre Time', 'ACT' ], + [ 'Afghanistan Time', 'AFT' ], + [ 'Alaska Daylight Time', 'AKDT' ], + [ 'Alaska Standard Time', 'AKST' ], + [ 'Amazon Time', 'AMT' ], + [ 'Arabic Standard Time', 'AST' ], + [ 'Argentina Standard Time', 'ART' ], + [ 'Armenia Time', 'AMT' ], + [ 'Atlantic Daylight Time', 'ADT' ], + [ 'Atlantic Standard Time', 'AST' ], + [ 'Australian Central Daylight Time', 'ACDT' ], + [ 'Australian Central Standard Time', 'ACST' ], + [ 'Australian Central Western Standard Time', 'ACWST' ], + [ 'Australian Eastern Daylight Time', 'AEDT' ], + [ 'Australian Eastern Standard Time', 'AEST' ], + [ 'Australian Western Standard Time', 'AWST' ], + [ 'Aqtobe Time', 'AQTT' ], + [ 'Azerbaijan Summer Time', 'AZST' ], + [ 'Azerbaijan Time', 'AZT' ], + [ 'Azores Summer Time', 'AZOST' ], + [ 'Azores Standard Time', '' ], + [ 'Bangladesh Standard Time', 'BST' ], + [ 'Bhutan Time', 'BTT' ], + [ 'Bolivia Time', 'BOT' ], + [ 'Brasilia Standard Time', 'BRT' ], + [ 'Brasilia Summer Time', 'BRST' ], + [ 'British Summer Time', 'BST' ], + [ 'Brunei Darussalam Time', 'BNT' ], + [ 'Cape Verde Standard Time', 'CVT' ], + [ 'Center Indonesia Time', 'WITA' ], + [ 'Central Africa Time', 'CAT' ], + [ 'Central Daylight Time', 'CDT' ], + [ 'Central European Summer Time', 'CEST' ], + [ 'Central European Standard Time', 'CET' ], + [ 'Central Standard Time', 'CT' ], + [ 'Chatham Standard Time', 'CHAST' ], + [ 'Chile Standard Time', 'CLT' ], + [ 'China Standard Time', 'CST' ], + [ 'Colombia Standard Time', 'COT' ], + [ 'Cuba Daylight Time', 'CDT' ], + [ 'Cuba Standard Time', 'CST' ], + [ 'East Africa Time', 'EAT' ], + [ 'East Kazakhstan Time', 'ALMT' ], + [ 'Easter Island Standard Time', 'EAST' ], + [ 'Eastern Daylight Time', 'EDT' ], + [ 'Eastern European Standard Time', 'EET' ], + [ 'Eastern European Summer Time', 'EEST' ], + [ 'Eastern Standard Time', 'EST' ], + [ 'Ecuador Time', 'ECT' ], + [ 'Fiji Standard Time', 'FJST' ], + [ 'French Guiana Time', 'GFT' ], + [ 'Georgia Standard Time', 'GET' ], + [ 'Greenwich Mean Time', 'GMT' ], + [ 'Gulf Standard Time', 'GST' ], + [ 'Guyana Time', 'GYT' ], + [ 'Hawaii-Aleutian Daylight Time', 'HDT' ], + [ 'Hawaii-Aleutian Standard Time', 'HST' ], + [ 'Hong Kong Standard Time', 'HKT' ], + [ 'Hovd Standard Time', 'HOVST' ], + [ 'India Standard Time', 'IST' ], + [ 'Indochina Time', 'ICT' ], + [ 'Iran Daylight Time', 'IRDT' ], + [ 'Iran Standard Time', 'IRST' ], + [ 'Irkutsk Standard Time', 'IRKST' ], + [ 'Israel Daylight Time', 'IDT' ], + [ 'Israel Standard Time', 'IST' ], + [ 'Japan Standard Time', 'JST' ], + [ 'Korean Standard Time', 'KST' ], + [ 'Krasnoyarsk Standard Time', 'KRAST' ], + [ 'Line Islands Time', 'LINT' ], + [ 'Lord Howe Standard Time', 'LHST' ], + [ 'Magadan Standard Time', 'MAGT' ], + [ 'Malaysia Time', 'MYT' ], + [ 'Marquesas Time', 'MART' ], + [ 'Mauritius Standard Time', 'MUT' ], + [ 'Mexican Pacific Standard Time', 'PST' ], + [ 'Moscow Standard Time', 'MSK' ], + [ 'Mountain Daylight Time', 'MDT' ], + [ 'Mountain Standard Time', 'MST' ], + [ 'Myanmar Time', 'MMT' ], + [ 'Nepal Time', 'NPT' ], + [ 'New Zealand Daylight Time', 'NZDT' ], + [ 'New Zealand Standard Time', 'NZST' ], + [ 'Newfoundland Daylight Time', 'NDT' ], + [ 'Newfoundland Standard Time', 'NDT' ], + [ 'Norfolk Island Time', 'NFT' ], + [ 'Novosibirsk Standard Time', 'NOVST' ], + [ 'Omsk Standard Time', 'OMST' ], + [ 'Pacific Daylight Time', 'PDT' ], + [ 'Pacific Standard Time', 'PST' ], + [ 'Pakistan Standard Time', 'PKT' ], + [ 'Papua New Guinea Time', 'PGT' ], + [ 'Paraguay Standard Time', 'PYST' ], + [ 'Petropavlovsk-Kamchatski Standard Time', 'PETT' ], + [ 'Philippine Standard Time', 'PHT' ], + [ 'Pyongyang Time', 'PYT' ], + [ 'Sakhalin Standard Time', 'SAKT' ], + [ 'Samara Standard Time', 'SAMT' ], + [ 'Singapore Standard Time', 'SGT' ], + [ 'Solomon Islands Time', 'SBT' ], + [ 'South Africa Standard Time', 'SAST' ], + [ 'St. Pierre & Miquelon Daylight Time', 'PMDT' ], + [ 'St. Pierre & Miquelon Standard Time', 'PMST' ], + [ 'Taipei Standard Time', 'TST' ], + [ 'Tonga Standard Time', 'TOT' ], + [ 'Turkey Time', 'TRT' ], + [ 'Ulaanbaatar Standard Time', 'ULAST' ], + [ 'Uruguay Standard Time', 'UYT' ], + [ 'Uzbekistan Standard Time', 'UZT' ], + [ 'Venezuelan Standard Time', 'VET' ], + [ 'Vladivostok Standard Time', 'VLAT' ], + [ 'West Africa Standard Time', 'WAST' ], + [ 'West Greenland Summer Time', 'WGST' ], + [ 'West Greenland Standard Time', 'WGT' ], + [ 'Western European Summer Time', 'WEST' ], + [ 'Western Indonesia Time', 'WIB' ], + [ 'Yakutsk Standard Time', 'YAKT' ], + [ 'Yekaterinburg Standard Time', 'YEKT' ] + ] ), + getMonthNameFromMonthNumber: function ( newFutureMonth ) { + const monthNames = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; + return monthNames[ newFutureMonth ]; }, - getTimeZoneNameLong: function (dateObject) { + getTimeZoneNameLong: function ( dateObject ) { let date; let result; - const dateTimeFormat = new Intl.DateTimeFormat('en', { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, timeZoneName: 'long' }); - if (typeof Intl.DateTimeFormat.prototype.formatToParts === 'function') { - date = dateTimeFormat.formatToParts(dateObject); - date.forEach((element) => { - if (element.type === 'timeZoneName') { + const dateTimeFormat = new Intl.DateTimeFormat( 'en', { timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone, timeZoneName: 'long' } ); + if ( typeof Intl.DateTimeFormat.prototype.formatToParts === 'function' ) { + date = dateTimeFormat.formatToParts( dateObject ); + date.forEach( ( element ) => { + if ( element.type === 'timeZoneName' ) { result = element.value; } - }); + } ); } else { - date = dateTimeFormat.format(dateObject); - if (date.includes(',')) { - result = date.split(',')[1].trim(); + date = dateTimeFormat.format( dateObject ); + if ( date.includes( ',' ) ) { + result = date.split( ',' )[ 1 ].trim(); } else { - result = date.split(' ').slice(2).join(' ').trim(); + result = date.split( ' ' ).slice( 2 ).join( ' ' ).trim(); } } return result; }, - getCorrectTimeZoneString: function (dateObject) { + getCorrectTimeZoneString: function ( dateObject ) { const userTime = { localYear: dateObject.getFullYear(), localMonth: dateObject.getMonth(), @@ -377,68 +377,68 @@ liquipedia.countdown = { dateObjectHours: dateObject.getHours(), dateObjectMinutes: dateObject.getMinutes(), - timeZoneName: liquipedia.countdown.getTimeZoneNameLong(dateObject) + timeZoneName: liquipedia.countdown.getTimeZoneNameLong( dateObject ) }; let calculatedOffsetHours = 0; - const calculatedOffsetMinutes = (userTime.localMinutes - userTime.utcMinutes); + const calculatedOffsetMinutes = ( userTime.localMinutes - userTime.utcMinutes ); let offsetMinutesAsString = ''; let offsetHoursWithSign = '+0'; let finalTimeZoneAbbr = ''; - if (userTime.localDay === userTime.utcDay) { + if ( userTime.localDay === userTime.utcDay ) { calculatedOffsetHours = userTime.localHours - userTime.utcHours; - } else if (userTime.localMonth === userTime.utcMonth) { + } else if ( userTime.localMonth === userTime.utcMonth ) { // Month is same, so no problems comparing dates - if (userTime.localDay > userTime.utcDay) { + if ( userTime.localDay > userTime.utcDay ) { // +24 Hours because of the next day - calculatedOffsetHours = -(userTime.utcHours) + userTime.localHours + 24; - } else if (userTime.localDay < userTime.utcDay) { + calculatedOffsetHours = -( userTime.utcHours ) + userTime.localHours + 24; + } else if ( userTime.localDay < userTime.utcDay ) { // -24 Hours because of the day before - calculatedOffsetHours = -(userTime.utcHours) + userTime.localHours - 24; + calculatedOffsetHours = -( userTime.utcHours ) + userTime.localHours - 24; } - } else if ((userTime.localMonth > userTime.utcMonth && userTime.localYear === userTime.utcYear) || userTime.localYear > userTime.utcYear) { + } else if ( ( userTime.localMonth > userTime.utcMonth && userTime.localYear === userTime.utcYear ) || userTime.localYear > userTime.utcYear ) { // +24 Hours because of the next day (in next month or year) - calculatedOffsetHours = -(userTime.utcHours) + userTime.localHours + 24; - } else if ((userTime.localMonth < userTime.utcMonth && userTime.localYear === userTime.utcYear) || userTime.localYear < userTime.utcYear) { + calculatedOffsetHours = -( userTime.utcHours ) + userTime.localHours + 24; + } else if ( ( userTime.localMonth < userTime.utcMonth && userTime.localYear === userTime.utcYear ) || userTime.localYear < userTime.utcYear ) { // -24 Hours because of the day before (in previous month or year) - calculatedOffsetHours = -(userTime.utcHours) + userTime.localHours - 24; + calculatedOffsetHours = -( userTime.utcHours ) + userTime.localHours - 24; } - const calculatedOffsetInMinutes = (calculatedOffsetHours * 60) + calculatedOffsetMinutes; + const calculatedOffsetInMinutes = ( calculatedOffsetHours * 60 ) + calculatedOffsetMinutes; - if (calculatedOffsetHours > 0) { - if (calculatedOffsetInMinutes % 60 !== 0) { - offsetMinutesAsString = ':' + Math.abs(calculatedOffsetMinutes); + if ( calculatedOffsetHours > 0 ) { + if ( calculatedOffsetInMinutes % 60 !== 0 ) { + offsetMinutesAsString = ':' + Math.abs( calculatedOffsetMinutes ); } - } else if (calculatedOffsetHours < 0) { - if (calculatedOffsetInMinutes % 60 !== 0) { - offsetMinutesAsString = ':' + Math.abs(calculatedOffsetMinutes); + } else if ( calculatedOffsetHours < 0 ) { + if ( calculatedOffsetInMinutes % 60 !== 0 ) { + offsetMinutesAsString = ':' + Math.abs( calculatedOffsetMinutes ); } } let finalTimeZoneName = 'UTC' + offsetHoursWithSign + offsetMinutesAsString; - if (calculatedOffsetHours < 0) { - offsetHoursWithSign = '-' + Math.abs(calculatedOffsetHours); - } else if (calculatedOffsetHours > 0) { - offsetHoursWithSign = '+' + Math.abs(calculatedOffsetHours); + if ( calculatedOffsetHours < 0 ) { + offsetHoursWithSign = '-' + Math.abs( calculatedOffsetHours ); + } else if ( calculatedOffsetHours > 0 ) { + offsetHoursWithSign = '+' + Math.abs( calculatedOffsetHours ); } - if (!liquipedia.countdown.timeZoneAbbr.has(userTime.timeZoneName)) { + if ( !liquipedia.countdown.timeZoneAbbr.has( userTime.timeZoneName ) ) { // ('0' + calculatedOffsetMinutes).slice(-2), because of the leading zero - finalTimeZoneName = 'UTC' + offsetHoursWithSign + ':' + ('0' + calculatedOffsetMinutes).slice(-2); + finalTimeZoneName = 'UTC' + offsetHoursWithSign + ':' + ( '0' + calculatedOffsetMinutes ).slice( -2 ); finalTimeZoneAbbr = 'UTC' + offsetHoursWithSign + offsetMinutesAsString; } else { - finalTimeZoneAbbr = liquipedia.countdown.timeZoneAbbr.get(userTime.timeZoneName); + finalTimeZoneAbbr = liquipedia.countdown.timeZoneAbbr.get( userTime.timeZoneName ); finalTimeZoneName = userTime.timeZoneName + ' (UTC' + offsetHoursWithSign + offsetMinutesAsString + ')'; } - const strLocalTime1 = (liquipedia.countdown.getMonthNameFromMonthNumber(userTime.dateObjectMonth)) + ' ' + userTime.dateObjectDay + ', ' + userTime.dateObjectYear + ' - ' + ('0' + userTime.dateObjectHours).slice(-2) + ':' + ('0' + userTime.dateObjectMinutes).slice(-2); - const strLocalTime2 = ' ' + finalTimeZoneAbbr + ''; const dateObjectString = strLocalTime1 + strLocalTime2 + strLocalTime3; return dateObjectString; } }; -liquipedia.core.modules.push('countdown'); +liquipedia.core.modules.push( 'countdown' ); From f4961defd5cd484644e32ee37c5c68d7861edfa9 Mon Sep 17 00:00:00 2001 From: Killian Mer <32543621+KilMer56@users.noreply.github.com> Date: Mon, 15 Jul 2024 17:19:19 +0200 Subject: [PATCH 18/19] Update components/match_ticker/commons/match_ticker_display_components_new.lua Co-authored-by: Rikard Blixt --- .../commons/match_ticker_display_components_new.lua | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/match_ticker/commons/match_ticker_display_components_new.lua b/components/match_ticker/commons/match_ticker_display_components_new.lua index 24fdf693f39..2571b7fd252 100644 --- a/components/match_ticker/commons/match_ticker_display_components_new.lua +++ b/components/match_ticker/commons/match_ticker_display_components_new.lua @@ -156,9 +156,7 @@ function Details:streams() local links = mw.html.create('div') :addClass('match-streams') - if Table.isNotEmpty(match.stream) then - links:wikitext(StreamLinks.display(StreamLinks.filterStreams(match.stream))) - end + links:wikitext(table.concat(StreamLinks.buildDisplays(StreamLinks.filterStreams(match.stream)) or {})) return links end From ec3813dc6e271edf8aa1a1af428a61c75d32dd08 Mon Sep 17 00:00:00 2001 From: KmerTeamLiquid Date: Mon, 15 Jul 2024 17:22:44 +0200 Subject: [PATCH 19/19] Removing unused variable --- .../match_ticker/commons/match_ticker_display_components_new.lua | 1 - 1 file changed, 1 deletion(-) diff --git a/components/match_ticker/commons/match_ticker_display_components_new.lua b/components/match_ticker/commons/match_ticker_display_components_new.lua index 2571b7fd252..9473a9ff0db 100644 --- a/components/match_ticker/commons/match_ticker_display_components_new.lua +++ b/components/match_ticker/commons/match_ticker_display_components_new.lua @@ -16,7 +16,6 @@ local DateExt = require('Module:Date/Ext') local LeagueIcon = require('Module:LeagueIcon') local Logic = require('Module:Logic') local Lua = require('Module:Lua') -local Table = require('Module:Table') local Timezone = require('Module:Timezone') local StreamLinks = require('Module:Links/Stream') local Page = require('Module:Page')