From 010242c4544b0bb77d4def862f6dc5bfbe47f176 Mon Sep 17 00:00:00 2001 From: Jack Nolddor <1280022+nolddor@users.noreply.github.com> Date: Fri, 18 Jul 2025 22:45:04 +0200 Subject: [PATCH 1/7] feat: display available date for packs on boostercreator --- manifest.json | 16 +++++++++ scripts/community/boostercreator.js | 7 ++++ scripts/community/boostercreator_injected.js | 35 ++++++++++++++++++++ styles/boostercreator.css | 4 +++ 4 files changed, 62 insertions(+) create mode 100644 scripts/community/boostercreator.js create mode 100644 scripts/community/boostercreator_injected.js create mode 100644 styles/boostercreator.css diff --git a/manifest.json b/manifest.json index 52cab21d..b90a2661 100644 --- a/manifest.json +++ b/manifest.json @@ -78,6 +78,7 @@ "scripts/community/multibuy_injected.js", "scripts/community/profile_award_injected.js", "scripts/community/tradeoffer_injected.js", + "scripts/community/boostercreator_injected.js", "scripts/store/account_licenses_injected.js", "scripts/store/invalidate_cache_injected.js", "scripts/store/registerkey_injected.js", @@ -593,6 +594,21 @@ [ "scripts/community/market_ssa.js" ] + }, + { + "run_at": "document_end", + "matches": + [ + "https://steamcommunity.com/tradingcards/boostercreator*" + ], + "js": + [ + "scripts/community/boostercreator.js" + ], + "css": + [ + "styles/boostercreator.css" + ] } ] } diff --git a/scripts/community/boostercreator.js b/scripts/community/boostercreator.js new file mode 100644 index 00000000..fa0bc357 --- /dev/null +++ b/scripts/community/boostercreator.js @@ -0,0 +1,7 @@ +'use strict'; + +const script = document.createElement( 'script' ); +script.id = 'steamdb_boostercreator'; +script.type = 'text/javascript'; +script.src = GetLocalResource( 'scripts/community/boostercreator_injected.js' ); +document.head.appendChild( script ); diff --git a/scripts/community/boostercreator_injected.js b/scripts/community/boostercreator_injected.js new file mode 100644 index 00000000..0876838c --- /dev/null +++ b/scripts/community/boostercreator_injected.js @@ -0,0 +1,35 @@ +'use strict'; + +/** @type {HTMLSelectElement} */ +const gameSelector = document.querySelector( '#booster_game_selector' ); + +if( gameSelector ) +{ + // Add a container for the available date before the game selector + const availableDateContainer = document.createElement( 'div' ); + availableDateContainer.id = 'booster_available_date'; + gameSelector.after( availableDateContainer ); + + // Add an event listener to update the available date when the game selector changes + gameSelector.addEventListener( 'change', updateBoosterAvailableDate ); + + // Initialize the available date when the script loads + updateBoosterAvailableDate(); +} + +function updateBoosterAvailableDate( ) +{ + const availableDateContainer = document.getElementById( 'booster_available_date' ); + const selectedGame = gameSelector.value; + + const availableDate = window.CBoosterCreatorPage.sm_rgBoosterData[ selectedGame ]?.available_at_time; + + if( availableDate ) + { + availableDateContainer.textContent = `You will not be able to create another Booster Pack this game until ${availableDate}.`; + } + else + { + availableDateContainer.textContent = ''; + } +} diff --git a/styles/boostercreator.css b/styles/boostercreator.css new file mode 100644 index 00000000..bf60d01b --- /dev/null +++ b/styles/boostercreator.css @@ -0,0 +1,4 @@ +#booster_available_date { + color: #d94126; + margin-top: 6px; +} From 0b4e39118118c8d7c5e0312221ab3d6df43b8d70 Mon Sep 17 00:00:00 2001 From: Jack Nolddor <1280022+nolddor@users.noreply.github.com> Date: Fri, 18 Jul 2025 22:51:36 +0200 Subject: [PATCH 2/7] fix: minor typo --- scripts/community/boostercreator_injected.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/community/boostercreator_injected.js b/scripts/community/boostercreator_injected.js index 0876838c..c10097f5 100644 --- a/scripts/community/boostercreator_injected.js +++ b/scripts/community/boostercreator_injected.js @@ -26,7 +26,7 @@ function updateBoosterAvailableDate( ) if( availableDate ) { - availableDateContainer.textContent = `You will not be able to create another Booster Pack this game until ${availableDate}.`; + availableDateContainer.textContent = `You will not be able to create another Booster Pack for this game until ${availableDate}.`; } else { From a96480f4381aaadae4f47381576c2700928f342b Mon Sep 17 00:00:00 2001 From: Jack Nolddor <1280022+nolddor@users.noreply.github.com> Date: Fri, 18 Jul 2025 22:53:20 +0200 Subject: [PATCH 3/7] fix: indentation --- manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manifest.json b/manifest.json index b90a2661..7f86ffa9 100644 --- a/manifest.json +++ b/manifest.json @@ -595,7 +595,7 @@ "scripts/community/market_ssa.js" ] }, - { + { "run_at": "document_end", "matches": [ From 001a9afe18fa7d818cb165b4cb8676fa17200e3f Mon Sep 17 00:00:00 2001 From: Jack Nolddor <1280022+nolddor@users.noreply.github.com> Date: Fri, 18 Jul 2025 22:55:35 +0200 Subject: [PATCH 4/7] chore: add bigger margin for text --- styles/boostercreator.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/boostercreator.css b/styles/boostercreator.css index bf60d01b..bb4319fa 100644 --- a/styles/boostercreator.css +++ b/styles/boostercreator.css @@ -1,4 +1,4 @@ #booster_available_date { color: #d94126; - margin-top: 6px; + margin-top: 8px; } From d137df0627d726724b6c8bb4c171a0e8b1bf4868 Mon Sep 17 00:00:00 2001 From: Jack Nolddor <1280022+nolddor@users.noreply.github.com> Date: Sat, 19 Jul 2025 10:20:33 +0200 Subject: [PATCH 5/7] feat: localize shown text --- _locales/en/messages.json | 11 ++++++ scripts/community/boostercreator.js | 38 ++++++++++++++++++++ scripts/community/boostercreator_injected.js | 28 ++++----------- 3 files changed, 56 insertions(+), 21 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 70ef927e..d32fbce3 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -700,5 +700,16 @@ }, "options_builtin_achievements_csrating": { "message": "Display CS rating history on CS2 achievements page" + }, + + "boostercreator_available_at_date": { + "message": "You will not be able to create another Booster Pack for this game until $available_date$.", + "description": "\"Booster Pack\" should match how Steam itself name it at: https://steamcommunity.com/tradingcards/boostercreator/", + "placeholders": { + "available_date": { + "content": "$1", + "example": "19 Jul @ 6:44pm" + } + } } } diff --git a/scripts/community/boostercreator.js b/scripts/community/boostercreator.js index fa0bc357..b6308a90 100644 --- a/scripts/community/boostercreator.js +++ b/scripts/community/boostercreator.js @@ -1,5 +1,43 @@ 'use strict'; +/** @type {HTMLSelectElement} */ +const gameSelector = document.querySelector( '#booster_game_selector' ); + +if( gameSelector ) +{ + // Add a `div` container to display the booster pack available date + const availableDateContainer = document.createElement( 'div' ); + availableDateContainer.id = 'booster_available_date'; + gameSelector.after( availableDateContainer ); + + // Add an event listener to catch the details about the choosen booster pack + // This data is sent by `boostercreator_injected.js` when the game selector changes + gameSelector.addEventListener( 'boosterPackChange', function( event ) + { + /** @type {CustomEvent<{ available_at_time?: string }>} */ + const customEvent = /** @type {CustomEvent} */ ( event ); + displayBoosterAvailableDate( customEvent.detail?.available_at_time ); + } ); +} + +/** + * @param {string | undefined} availableDate + */ +function displayBoosterAvailableDate( availableDate ) +{ + const availableDateContainer = document.getElementById( 'booster_available_date' ); + + if( availableDate ) + { + availableDateContainer.textContent = _t( 'boostercreator_available_at_date', [ availableDate ] ); + } + else + { + availableDateContainer.textContent = ''; + } +} + +// Inject a script into the page, so we can access page Steam variables const script = document.createElement( 'script' ); script.id = 'steamdb_boostercreator'; script.type = 'text/javascript'; diff --git a/scripts/community/boostercreator_injected.js b/scripts/community/boostercreator_injected.js index c10097f5..aa4d1b38 100644 --- a/scripts/community/boostercreator_injected.js +++ b/scripts/community/boostercreator_injected.js @@ -5,31 +5,17 @@ const gameSelector = document.querySelector( '#booster_game_selector' ); if( gameSelector ) { - // Add a container for the available date before the game selector - const availableDateContainer = document.createElement( 'div' ); - availableDateContainer.id = 'booster_available_date'; - gameSelector.after( availableDateContainer ); + // Add an event listener to catch when the game selector changes and emit new rgBoosterData + gameSelector.addEventListener( 'change', emitBoosterAvailableDate ); - // Add an event listener to update the available date when the game selector changes - gameSelector.addEventListener( 'change', updateBoosterAvailableDate ); - - // Initialize the available date when the script loads - updateBoosterAvailableDate(); + // Emit rgBoosterData for current selection when the script loads + emitBoosterAvailableDate(); } -function updateBoosterAvailableDate( ) +function emitBoosterAvailableDate( ) { - const availableDateContainer = document.getElementById( 'booster_available_date' ); const selectedGame = gameSelector.value; + const rgBoosterData = window.CBoosterCreatorPage.sm_rgBoosterData[ selectedGame ]; - const availableDate = window.CBoosterCreatorPage.sm_rgBoosterData[ selectedGame ]?.available_at_time; - - if( availableDate ) - { - availableDateContainer.textContent = `You will not be able to create another Booster Pack for this game until ${availableDate}.`; - } - else - { - availableDateContainer.textContent = ''; - } + gameSelector.dispatchEvent( new CustomEvent( 'boosterPackChange', { detail: rgBoosterData } ) ); } From a6a847264a38f2daa684ace3f0cf1d6cb7c1e91f Mon Sep 17 00:00:00 2001 From: Jack Nolddor <1280022+nolddor@users.noreply.github.com> Date: Sat, 19 Jul 2025 10:47:54 +0200 Subject: [PATCH 6/7] chore: change customevent name --- scripts/community/boostercreator.js | 2 +- scripts/community/boostercreator_injected.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/community/boostercreator.js b/scripts/community/boostercreator.js index b6308a90..e9ca9608 100644 --- a/scripts/community/boostercreator.js +++ b/scripts/community/boostercreator.js @@ -12,7 +12,7 @@ if( gameSelector ) // Add an event listener to catch the details about the choosen booster pack // This data is sent by `boostercreator_injected.js` when the game selector changes - gameSelector.addEventListener( 'boosterPackChange', function( event ) + gameSelector.addEventListener( 'steamdb-booster-game-change', function( event ) { /** @type {CustomEvent<{ available_at_time?: string }>} */ const customEvent = /** @type {CustomEvent} */ ( event ); diff --git a/scripts/community/boostercreator_injected.js b/scripts/community/boostercreator_injected.js index aa4d1b38..8d109ae1 100644 --- a/scripts/community/boostercreator_injected.js +++ b/scripts/community/boostercreator_injected.js @@ -17,5 +17,5 @@ function emitBoosterAvailableDate( ) const selectedGame = gameSelector.value; const rgBoosterData = window.CBoosterCreatorPage.sm_rgBoosterData[ selectedGame ]; - gameSelector.dispatchEvent( new CustomEvent( 'boosterPackChange', { detail: rgBoosterData } ) ); + gameSelector.dispatchEvent( new CustomEvent( 'steamdb-booster-game-change', { detail: rgBoosterData } ) ); } From bffc567d8696008054a66baaac875d8eefd8573c Mon Sep 17 00:00:00 2001 From: Jack Nolddor <1280022+nolddor@users.noreply.github.com> Date: Sat, 19 Jul 2025 10:54:09 +0200 Subject: [PATCH 7/7] chore: return earlier when possible --- scripts/community/boostercreator.js | 52 ++++++++++++++++------------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/scripts/community/boostercreator.js b/scripts/community/boostercreator.js index e9ca9608..57a90ab6 100644 --- a/scripts/community/boostercreator.js +++ b/scripts/community/boostercreator.js @@ -1,10 +1,15 @@ 'use strict'; -/** @type {HTMLSelectElement} */ -const gameSelector = document.querySelector( '#booster_game_selector' ); - -if( gameSelector ) +( ( () => { + /** @type {HTMLSelectElement} */ + const gameSelector = document.querySelector( '#booster_game_selector' ); + + if( !gameSelector ) + { + return; + } + // Add a `div` container to display the booster pack available date const availableDateContainer = document.createElement( 'div' ); availableDateContainer.id = 'booster_available_date'; @@ -18,28 +23,27 @@ if( gameSelector ) const customEvent = /** @type {CustomEvent} */ ( event ); displayBoosterAvailableDate( customEvent.detail?.available_at_time ); } ); -} -/** - * @param {string | undefined} availableDate - */ -function displayBoosterAvailableDate( availableDate ) -{ - const availableDateContainer = document.getElementById( 'booster_available_date' ); - if( availableDate ) - { - availableDateContainer.textContent = _t( 'boostercreator_available_at_date', [ availableDate ] ); - } - else + /** + * @param {string | undefined} availableDate + */ + function displayBoosterAvailableDate( availableDate ) { - availableDateContainer.textContent = ''; + if( availableDate ) + { + availableDateContainer.textContent = _t( 'boostercreator_available_at_date', [ availableDate ] ); + } + else + { + availableDateContainer.textContent = ''; + } } -} -// Inject a script into the page, so we can access page Steam variables -const script = document.createElement( 'script' ); -script.id = 'steamdb_boostercreator'; -script.type = 'text/javascript'; -script.src = GetLocalResource( 'scripts/community/boostercreator_injected.js' ); -document.head.appendChild( script ); + // Inject a script into the page, so we can access page Steam variables + const script = document.createElement( 'script' ); + script.id = 'steamdb_boostercreator'; + script.type = 'text/javascript'; + script.src = GetLocalResource( 'scripts/community/boostercreator_injected.js' ); + document.head.appendChild( script ); +} )() );