☰

ProtonDB SteamPlay Integration

Adds game ratings from ProtonDB to the Steam Store

  1. // ==UserScript==
  2. // @name ProtonDB SteamPlay Integration
  3. // @description Adds game ratings from ProtonDB to the Steam Store
  4. // @version 0.3.0
  5. // @author Phlebiac
  6. // @match https://store.steampowered.com/app/*
  7. // @connect www.protondb.com
  8. // @run-at document-end
  9. // @noframes
  10. // @license MIT; https://opensource.org/licenses/MIT
  11. // @namespace Phlebiac/ProtonDB
  12. // @icon https://www.protondb.com/sites/protondb/images/apple-touch-icon.png
  13. // @grant GM_addStyle
  14. // @grant GM_getValue
  15. // @grant GM_setValue
  16. // @grant GM_xmlhttpRequest
  17. // @grant unsafeWindow
  18. // ==/UserScript==
  19.  
  20. /*  Inspired by / some ideas and code from:
  21.  *    https://openuserjs.org/install/DanMan/Steam_Play_Community_Rating_Notice.user.js
  22.  *    https://raw.githubusercontent.com/guihkx/user-scripts/master/scripts/protondb-integration-for-steam.user.js
  23.  */
  24.  
  25. ;(async () => {
  26.   'use strict'
  27.  
  28.   const PROTONDB_TIERS = [
  29.     'pending',
  30.     'borked',
  31.     'bronze',
  32.     'silver',
  33.     'gold',
  34.     'platinum'
  35.   ]
  36.   const PROTONDB_CONFIDENCE_LEVELS = ['low', 'moderate', 'good', 'strong']
  37.   const PROTONDB_HOMEPAGE = 'https://www.protondb.com'
  38.  
  39.   let userPrefs = {
  40.     open_in_new_tab: GM_getValue('open_in_new_tab', false),
  41.     skip_native_games: GM_getValue('skip_native_games', true),
  42.     show_confidence_level: GM_getValue('show_confidence_level', true)
  43.   }
  44.  
  45.   const appId = getCurrentAppId();
  46.  
  47.   if (!appId) {
  48.     return;
  49.   }
  50.   if (userPrefs.skip_native_games) {
  51.     if (document.querySelector('span.platform_img.linux') !== null) {
  52.       log('Ignoring native Linux game:', appId);
  53.       return;
  54.     }
  55.   }
  56.   injectCSS();
  57.  
  58.   GM_xmlhttpRequest({
  59.     method: 'GET',
  60.     url: `${PROTONDB_HOMEPAGE}/api/v1/reports/summaries/${appId}.json`,
  61.     onload: addRatingToStorePage
  62.   })
  63.  
  64.   function getCurrentAppId() {
  65.     const urlPath = window.location.pathname;
  66.     const appId = urlPath.match(/\/app\/(\d+)/);
  67.  
  68.     if (appId === null) {
  69.       log('Unable to get AppId from URL path:', urlPath);
  70.       return false;
  71.     }
  72.     return appId[1];
  73.   }
  74.  
  75.   function addRatingToStorePage(response) {
  76.     let reports = {};
  77.     let tier = 'N/A';
  78.  
  79.     if (response.status === 200) {
  80.       try {
  81.         reports = JSON.parse(response.responseText);
  82.         tier = reports.tier;
  83.       } catch (err) {
  84.         log('Unable to parse ProtonDB response as JSON:', response);
  85.         log('Javascript error:', err);
  86.         tier = 'error';
  87.       }
  88.       if (!PROTONDB_TIERS.includes(tier)) {
  89.         log('Unknown tier:', tier);
  90.         tier = 'unknown';
  91.       }
  92.     } else if (response.status === 404) {
  93.       log(`App ${appId} doesn't have a page on ProtonDB yet`);
  94.       tier = 'N/A';
  95.     } else {
  96.       log('Got unexpected HTTP code from ProtonDB:', response.status);
  97.       tier = 'error';
  98.     }
  99.     
  100.     let confidence, tooltip = '';
  101.     if ('confidence' in reports && PROTONDB_CONFIDENCE_LEVELS.includes(reports.confidence)) {
  102.       confidence = reports.confidence;
  103.       tooltip = `Confidence: ${confidence}`;
  104.       if ('total' in reports) {
  105.         tooltip += ` with ${reports.total} reports`;
  106.       }
  107.       tooltip += ' | ';
  108.     }
  109.     
  110.     let target = document.querySelector('.game_area_purchase_platform');
  111.     if (target) {
  112.       let node = Object.assign(document.createElement('span'), {
  113.         className: 'protondb_rating_row' 
  114.       });
  115.       node.appendChild(preferencesDialog());
  116.       node.appendChild(createBadge(tier, confidence, tooltip, appId));
  117.       target.insertBefore(node, target.firstChild);
  118.     }
  119.   }
  120.  
  121.   function createBadge(tier, confidence, tooltip, appId) {
  122.     let confidence_style = confidence && userPrefs.show_confidence_level ?` protondb_confidence_${confidence}` : '';
  123.     return Object.assign(document.createElement('a'), {
  124.       textContent: tier,
  125.       className: `protondb_rating_link protondb_rating_${tier}${confidence_style}`,
  126.       title: tooltip + 'View on www.protondb.com',
  127.       href: `${PROTONDB_HOMEPAGE}/app/${appId}`,
  128.       target: userPrefs.open_in_new_tab ? '_blank' : '_self'
  129.     });
  130.   }
  131.  
  132.   function preferencesDialog() {
  133.     const container = Object.assign(document.createElement('span'), {
  134.       className: 'protondb_prefs_icon',
  135.       title: 'Preferences for ProtonDB SteamPlay Integration',
  136.       textContent: '⚙'
  137.     })
  138.  
  139.     container.addEventListener('click', () => {
  140.       const html = `
  141.       <div class="protondb_prefs">
  142.         <div class="newmodal_prompt_description">
  143.           New preferences will only take effect after you refresh the page.
  144.         </div>
  145.         <blockquote>
  146.           <div>
  147.             <input type="checkbox" id="protondb_open_in_new_tab" ${ userPrefs.open_in_new_tab ? 'checked' : '' } />
  148.             <label for="protondb_open_in_new_tab">Open ProtonDB links in new tab</label>
  149.           </div>
  150.           <div>
  151.             <input type="checkbox" id="protondb_skip_native_games" ${ userPrefs.skip_native_games ? 'checked' : '' } />
  152.             <label for="protondb_skip_native_games">Don't check native Linux games</label>
  153.           </div>
  154.           <div>
  155.             <input type="checkbox" id="protondb_show_confidence_level" ${ userPrefs.show_confidence_level ? 'checked' : '' } />
  156.             <label for="protondb_show_confidence_level">Style based on confidence level of ratings</label>
  157.           </div>
  158.         </blockquote>
  159.       </div>`
  160.  
  161.       unsafeWindow.ShowDialog('ProtonDB SteamPlay Prefs', html);
  162.  
  163.       // Handle preferences changes
  164.       const inputs = document.querySelectorAll('.protondb_prefs input');
  165.  
  166.       for (const input of inputs) {
  167.         input.addEventListener('change', event => {
  168.           const target = event.target;
  169.           const prefName = target.id.replace('protondb_', '');
  170.  
  171.           switch (target.type) {
  172.             case 'text':
  173.               userPrefs[prefName] = target.value;
  174.               GM_setValue(prefName, target.value);
  175.               break;
  176.             case 'checkbox':
  177.               userPrefs[prefName] = target.checked;
  178.               GM_setValue(prefName, target.checked);
  179.               break;
  180.             default:
  181.               break;
  182.           }
  183.         })
  184.       }
  185.     })
  186.  
  187.     return container;
  188.   }
  189.  
  190.   function injectCSS() {
  191.     GM_addStyle(`
  192.       .protondb_rating_row {
  193.         text-transform: capitalize;
  194.         vertical-align: top;
  195.       }
  196.       .protondb_rating_link {
  197.         background: #4d4b49 url('https://support.steampowered.com/images/custom/platform_steamplay.png') no-repeat -51px center;
  198.         display: inline-block;
  199.         line-height: 19px;
  200.         font-size: 14px;
  201.         padding: 1px 10px 2px 79px;
  202.         margin-right: 1ex;
  203.         color: #b0aeac;
  204.       }
  205.       .protondb_rating_borked {
  206.         color: #FF1919 !important;
  207.       }
  208.       .protondb_rating_bronze {
  209.         color: #CD7F32 !important;
  210.       }
  211.       .protondb_rating_silver {
  212.         color: #C0C0C0 !important;
  213.       }
  214.       .protondb_rating_gold {
  215.         color: #FFD799 !important;
  216.       }
  217.       .protondb_rating_platinum {
  218.         color: #B4C7DC !important;
  219.       }
  220.       .protondb_confidence_low {
  221.         font-style: italic;
  222.       }
  223.       .protondb_confidence_moderate {
  224.         font-weight: normal;
  225.       }
  226.       .protondb_confidence_good {
  227.         font-weight: bold;
  228.       }
  229.       .protondb_confidence_strong {
  230.         font-variant: small-caps;
  231.         font-weight: bold;
  232.       }
  233.       .protondb_prefs_icon {
  234.         font-size: 16px;
  235.         padding: 0 4px;
  236.         cursor: pointer;
  237.       }
  238.       .protondb_prefs input[type="checkbox"], .protondb_prefs label {
  239.         line-height: 20px;
  240.         vertical-align: middle;
  241.         display: inline-block;
  242.         color: #66c0f4;
  243.         cursor: pointer;
  244.       }
  245.       .protondb_prefs blockquote {
  246.         margin: 15px 0 5px 10px;
  247.       }`)
  248.   }
  249.  
  250.   function log() {
  251.     console.log('[ProtonDB SteamPlay Integration]', ...arguments)
  252.   }
  253. })()