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/manifest.json b/manifest.json index 52cab21d..7f86ffa9 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..57a90ab6 --- /dev/null +++ b/scripts/community/boostercreator.js @@ -0,0 +1,49 @@ +'use strict'; + +( ( () => +{ + /** @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'; + 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( 'steamdb-booster-game-change', 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 ) + { + 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 ); +} )() ); diff --git a/scripts/community/boostercreator_injected.js b/scripts/community/boostercreator_injected.js new file mode 100644 index 00000000..8d109ae1 --- /dev/null +++ b/scripts/community/boostercreator_injected.js @@ -0,0 +1,21 @@ +'use strict'; + +/** @type {HTMLSelectElement} */ +const gameSelector = document.querySelector( '#booster_game_selector' ); + +if( gameSelector ) +{ + // Add an event listener to catch when the game selector changes and emit new rgBoosterData + gameSelector.addEventListener( 'change', emitBoosterAvailableDate ); + + // Emit rgBoosterData for current selection when the script loads + emitBoosterAvailableDate(); +} + +function emitBoosterAvailableDate( ) +{ + const selectedGame = gameSelector.value; + const rgBoosterData = window.CBoosterCreatorPage.sm_rgBoosterData[ selectedGame ]; + + gameSelector.dispatchEvent( new CustomEvent( 'steamdb-booster-game-change', { detail: rgBoosterData } ) ); +} diff --git a/styles/boostercreator.css b/styles/boostercreator.css new file mode 100644 index 00000000..bb4319fa --- /dev/null +++ b/styles/boostercreator.css @@ -0,0 +1,4 @@ +#booster_available_date { + color: #d94126; + margin-top: 8px; +}