Add ProtonDB button

Author: peterfour

_locales/en/messages.json

@@ -33,6 +33,9 @@
 	"view_on_pcgamingwiki": {
 		"message": "View on PCGamingWiki"
 	},
+	"view_on_protondb": {
+		"message": "View on ProtonDB"
+	},
 	"view_your_achievements": {
 		"message": "Personal achievements"
 	},
@@ -553,6 +556,9 @@
 	"options_button_pcgw": {
 		"message": "Display PCGamingWiki button on product pages"
 	},
+	"options_button_protondb": {
+		"message": "Display ProtonDB button on product pages"
+	},
 	"options_button_sub": {
 		"message": "Display a button on package pages"
 	},

_locales/fr/messages.json

@@ -31,6 +31,9 @@
 	"view_on_pcgamingwiki": {
 		"message": "Voir sur PCGamingWiki"
 	},
+	"view_on_protondb": {
+		"message": "Voir sur ProtonDB"
+	},
 	"view_your_achievements": {
 		"message": "Succès personnels"
 	},
@@ -531,6 +534,9 @@
 	"options_button_pcgw": {
 		"message": "Afficher le bouton PCGamingWiki sur les pages des produits"
 	},
+	"options_button_protondb": {
+		"message": "Afficher le bouton ProtonDB sur les pages des produits"
+	},
 	"options_button_sub": {
 		"message": "Afficher un bouton sur les pages des packages"
 	},

icons/protondb.svg

@@ -71,6 +71,7 @@
 
 				"icons/white.svg",
 				"icons/pcgamingwiki.svg",
+				"icons/protondb.svg",
 				"icons/steamhunters.svg",
 				"icons/image.svg",
 				"icons/achievements_completed.svg",

manifest.json

@@ -122,6 +122,10 @@ <h3 data-msg="options_header_buttons_and_links"></h3>
 			<input type="checkbox" class="option-check" data-option="button-pcgw" checked>
 			<div data-msg="options_button_pcgw"></div>
 		</label>
+		<label class="checkbox">
+			<input type="checkbox" class="option-check" data-option="button-protondb" checked>
+			<div data-msg="options_button_protondb"></div>
+		</label>
 		<label class="checkbox">
 			<input type="checkbox" class="option-check" data-option="button-sub" checked>
 			<div data-msg="options_button_sub"></div>

options/options.html

@@ -4,6 +4,7 @@
 GetOption( {
 	'button-gamehub': true,
 	'button-pcgw': true,
+	'button-protondb': true,
 }, ( items ) =>
 {
 	const container = document.querySelector( '.apphub_OtherSiteInfo' );
@@ -69,7 +70,7 @@ GetOption( {
 		{
 			const link = document.createElement( 'a' );
 			link.className = 'btnv6_blue_hoverfade btn_medium btn_steamdb';
-			link.href = 'https://pcgamingwiki.com/api/appid.php?appid=' + GetCurrentAppID() + '&utm_source=SteamDB';
+			link.href = 'https://pcgamingwiki.com/api/appid.php?appid=' + GetCurrentAppID() + '?utm_source=SteamDB';
 
 			const element = document.createElement( 'span' );
 			element.dataset.tooltipText = _t( 'view_on_pcgamingwiki' );
@@ -93,5 +94,34 @@ GetOption( {
 				responsiveMenu.append( link.cloneNode( true ) );
 			}
 		}
+
+		if( items[ 'button-protondb' ] )
+		{
+			const link = document.createElement( 'a' );
+			link.className = 'btnv6_blue_hoverfade btn_medium btn_steamdb';
+			link.href = 'https://www.protondb.com/app/' + GetCurrentAppID() + '?utm_source=SteamDB';
+
+			const element = document.createElement( 'span' );
+			element.dataset.tooltipText = _t( 'view_on_protondb' );
+			link.appendChild( element );
+
+			const image = document.createElement( 'img' );
+			image.className = 'ico16';
+			image.src = GetLocalResource( 'icons/protondb.svg' );
+
+			element.appendChild( image );
+
+			container.insertBefore( link, container.firstChild );
+
+			container.insertBefore( document.createTextNode( ' ' ), link.nextSibling );
+
+			const responsiveMenu = document.querySelector( '.apphub_ResponsiveMenuCtn' );
+
+			if( responsiveMenu )
+			{
+				responsiveMenu.append( document.createTextNode( ' ' ) );
+				responsiveMenu.append( link.cloneNode( true ) );
+			}
+		}
 	}
 } );

scripts/community/gamehub.js

@@ -14,6 +14,7 @@ else
 	GetOption( {
 		'button-app': true,
 		'button-pcgw': true,
+		'button-protondb': true,
 		'link-subid': true,
 		'online-stats': true,
 		'steamdb-lowest-price': true,
@@ -185,6 +186,64 @@ else
 			}
 		}
 
+		if( items[ 'button-protondb' ] )
+		{
+			let container = document.querySelector( '.apphub_OtherSiteInfo' );
+
+			if( !container )
+			{
+				// Steam China has no community hub
+				const headerStandardTop = document.querySelector( '.apphub_HeaderStandardTop' );
+
+				if( headerStandardTop )
+				{
+					container = document.createElement( 'div' );
+					container.className = 'apphub_OtherSiteInfo';
+					headerStandardTop.prepend( container );
+				}
+			}
+
+			if( container )
+			{
+				const link = document.createElement( 'a' );
+				link.className = 'btnv6_blue_hoverfade btn_medium btn_steamdb';
+				link.href = 'https://www.protondb.com/app/' + GetCurrentAppID() + '?utm_source=SteamDB';
+
+				const element = document.createElement( 'span' );
+				element.dataset.tooltipText = _t( 'view_on_protondb' );
+				link.appendChild( element );
+
+				const image = document.createElement( 'img' );
+				image.className = 'ico16';
+				image.src = GetLocalResource( 'icons/protondb.svg' );
+
+				element.appendChild( image );
+
+				container.insertBefore( link, container.firstChild );
+				container.insertBefore( document.createTextNode( ' ' ), link.nextSibling );
+			}
+
+			const lastLinkBar = document.querySelector( '#appDetailsUnderlinedLinks .linkbar:last-child' );
+
+			if( lastLinkBar )
+			{
+				const link = document.createElement( 'a' );
+				link.className = 'linkbar linkbar_steamdb';
+				link.href = 'https://www.protondb.com/app/' + GetCurrentAppID() + '?utm_source=SteamDB';
+
+				const image = document.createElement( 'img' );
+				image.src = GetLocalResource( 'icons/protondb.svg' );
+				link.append( image );
+
+				const span = document.createElement( 'span' );
+				span.className = 'social_account';
+				span.textContent = _t( 'view_on_protondb' );
+				link.append( span );
+
+				lastLinkBar.insertAdjacentElement( 'afterend', link );
+			}
+		}
+
 		if( items[ 'link-subid' ] )
 		{
 			// Find each "add to cart" button