feat: display available date for packs on boostercreator

_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"
+			}
+		}
 	}
 }

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"
+			]
 		}
 	]
 }

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 );
+} )() );

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 } ) );
+}

styles/boostercreator.css

@@ -0,0 +1,4 @@
+#booster_available_date {
+	color: #d94126;
+	margin-top: 8px;
+}