☰

Steam - Intigrate HowLongToBeat

Adds a button that shows the completion time for the "Main Story" and links to HowLongToBeat.

当前为 2022-09-23 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Steam - Intigrate HowLongToBeat
// @namespace    Threeskimo
// @author       Threeskimo
// @version      1.03
// @description  Adds a button that shows the completion time for the "Main Story" and links to HowLongToBeat.
// @icon         https://store.steampowered.com/favicon.ico
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// @match        https://store.steampowered.com/app/*
// @grant        GM_xmlhttpRequest
// @license      MIT
// ==/UserScript==

// Changelog //////////////////////////////////////////////////////////////////////////////////
// 1.03 : - Updated script to pull more accurate data by verifying game_name when possible.
//        - Added mobile integration.
// 1.02 : - HLTB updated to JSON responses. Updated script to account for this change.
// 1.01 : - Added "origin" and "referer" to GM_xmlhttpRequest headers as HLTB requires now.
// 1.0  : - Release.
///////////////////////////////////////////////////////////////////////////////////////////////


// Grab Steam game name (and get rid of symbols)
let appName = document.getElementsByClassName("apphub_AppName")[0].textContent.replace("’","'").replace(/[^a-z _0-9`~!@#$%^&*()-_=+|\\\]}[{;:'",<.>/?]/gi,'');

// Set HLTB URL
let hltbUrl = "https://howlongtobeat.com/api/search";

// Set POST string w/ correct game name
let hltbQuery = '{"searchType":"games","searchTerms":["'+appName+'"],"size":100}'

// Perform POST request
GM_xmlhttpRequest({
    method: "POST",
    url: hltbUrl,
    data: hltbQuery,
    headers: {
        "Content-Type": "application/json",
        "origin": "https://howlongtobeat.com",
        "referer": "https://howlongtobeat.com"
    },
    onload: function (response) {

        // Grab response
        let hltb = JSON.parse(response.responseText);

        //Determine if data is present in response by checking the page count.  If no data, set default HLTB button.
        let hltbPages = hltb['pageTotal'];
        if(hltbPages == null) {
            hltbTime = "HLTB";
            bgcolor = "ff8c00";
            console.log("\x1b[36m[HLTB-Response]: \x1b[37mNo Response");
        } else {

        //If data is present in response, let's rock!
        //Show response in console for debugging purposes (or comment to hide)
        let hltbstring = JSON.stringify(hltb);
        //console.log("\x1b[36m[HLTB-Response]: \x1b[37m" + hltbstring);

        //Make sure you have the right game_name (if possible, otherwise just use first result from response)
        let n = 0;
        let loop = hltb['count'];
        for (let i = 0; i < loop; i++) {
            let hltbName = hltb['data'][i]['game_name'];
            if (hltbName.toLowerCase() == appName.toLowerCase()) {
                console.log("\x1b[36m[HLTB-GameName]: \x1b[37m" + hltbName);
                n = i;
                break;
            }
        }

        // Extract time for "Main Story" and convert into hours
        hltbTime = hltb['data'][n]['comp_main'];
        hltbTime = hltbTime/60/60;                            // Convert to hours
        hltbTime = Math.round(hltbTime*2)/2;                  // Round to closes .5
        hltbTime = hltbTime.toString() .replace(".5","½");    // Convert .5 to ½ to be consistent with HLTB
        console.log("\x1b[36m[HLTB-MainTime]: \x1b[37m" + hltbTime);

        // Extract the Confidence level
        hltbConfidence = hltb['data'][n]['comp_main_count'];
        console.log("\x1b[36m[HLTB-Confidence]: \x1b[37m" + hltbConfidence);

        // If game exists but no time was returned ("--"), set button to default HLTB button
        if (!hltbTime || hltbTime == 0) {
            hltbTime = "HLTB";
            bgcolor = "ff8c00";
        } else {
            // Append "Hour(s)" to the end of the time
            if (hltbTime == 1 ) { hltbTime = hltbTime + " Hour"; } else { hltbTime = hltbTime + " Hours"; }

            // Determine what color to make button (based on HLTB confidence level).  These might not reflect how HLTB calculates their confidence, this is just a guess.
            if (hltbConfidence < 5 ) {
                bgcolor = "FF3A3A";
            } else if (hltbConfidence < 10) {
                bgcolor = "cc3b51";
            } else if (hltbConfidence < 15) {
                bgcolor = "824985";
            } else if (hltbConfidence < 20) {
                bgcolor = "5650a1";
            } else if (hltbConfidence < 25) {
                bgcolor = "485cab";
            } else if (hltbConfidence < 30) {
                bgcolor = "3a6db5";
            } else if (hltbConfidence >= 30) {
                bgcolor = "287FC2";
            } else {
                bgcolor = ""
            }
        }
        }
        //Display HLTB button next to "Community Hub" button
        $(".apphub_OtherSiteInfo").prepend(' <div class="apphub_OtherSiteInfo" style="float:left;padding-right:5px;"><a class="btnv6_blue_hoverfade btn_medium" href="https://howlongtobeat.com/?q='+appName+'" target="_blank" style="background-color:#'+bgcolor+';"><span style="color:white;">'+hltbTime+'</span></a></div>');
        //Or if on mobile (<500), display under the "Release Date"
        if ($(window).width() < 500 ) {
            $("#appHeaderGridContainer").append('<div class="grid_label grid_date">HLTB</div><div class="grid_content"><a class="btnv6_blue_hoverfade btn_small" href="https://howlongtobeat.com/?q='+appName+'" target="_blank" style="background-color:#'+bgcolor+';"><span style="color:white;">'+hltbTime+'</splan></a></div>');
        }
    }
});