☰

Ukrainian Steam Improvements

Adds (1) the state flag for games that have Ukrainian language, (2) alert emojis for ua and ru -made games, (3) prices at the top, (4) more noticeable score over the game banner.

// ==UserScript==
// @name           Ukrainian Steam Improvements
// @description    Adds (1) the state flag for games that have Ukrainian language, (2) alert emojis for ua and ru -made games, (3) prices at the top, (4) more noticeable score over the game banner.
// @include        https://store.steampowered.com/*
// @grant          GM_addStyle
// @icon           https://community.akamai.steamstatic.com/public/images/countryflags/ua.gif
// @license        https://creativecommons.org/licenses/by-sa/4.0/
// @author         Prudten
// @version        1.1.2
// @namespace https://greasyfork.org/users/1235514
// ==/UserScript==
'use strict';

GM_addStyle(`
    .btn_red_steamui {
    border-radius: 2px;
    border: none;
    padding: 1px;
    display: inline-block;
    cursor: pointer;
    text-decoration: none !important;
    color: #D28BA9; !important;

    background: transparent;    text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.3 );}

    .btn_red_steamui > span {
        border-radius: 2px;
        display: block;


                    background: #D34320;
            background: -webkit-linear-gradient( top, #D34320 5%, #BC261B 95%);
    background: linear-gradient( to bottom, #D34320 5%, #BC261B 95%);
        background: linear-gradient( to right, #D94C22 5%, #BC261B 95%);    }

.btn_red_steamui:not(.btn_disabled):not(:disabled):not(.btn_active):not(.active):hover {
    text-decoration: none !important;
    color: #fff; !important;

    background: transparent;    }

    .btn_red_steamui:not(.btn_disabled):not(:disabled):not(.btn_active):not(.active):hover > span {
                    background: #8E0E29;
            background: -webkit-linear-gradient( top, #8E0E29 5%, #CE4221 95%);
    background: linear-gradient( to bottom, #8E0E29 5%, #CE4221 95%);
        background: linear-gradient( to right, #8E0E29 5%, #CE4221 95%);    }

    .btn_red_steamui.btn_active, btn_red_steamui.active {
    text-decoration: none !important;
    color: #fff; !important;

        background: transparent;            }

    .btn_red_steamui.btn_active > span, btn_red_steamui.active > span {
                    background: #8E0E29;
            background: -webkit-linear-gradient( top, #8E0E29 5%, #CE4221 95%);
    background: linear-gradient( to bottom, #8E0E29 5%, #CE4221 95%);
        background: linear-gradient( to right, #8E0E29 5%, #CE4221 95%);    }

.discount_block .discount_pct_red, .discount_pct_red {
            font-family: "Motiva Sans", Sans-serif;
        font-weight: normal; /* normal */

            font-weight: 500;
    color: #FF2611;
    background: #B00722;
    display: inline-block;
}

.game_purchase_discount .discount_pct_red,
.game_purchase_discount .bundle_base_discount {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    font-size: 25px;
    text-align: center;
    overflow: hidden;
    padding: 0 6px;
}

.image-container {
    position: relative;
    display: inline-block;
}

.overlay-text {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #A00000;
    font-size: 20px;
}

.box {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #FF0000;
    float: left;
    height: 40px;
    width: 40px;
    margin-bottom: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #272727;
    font-size: 25px;
    font-weight: bold;
    font-family: HelveticaNeue;
}

.score95 {
    background-color: #00D25F;
}
.score85 {
    background-color: #66CC33;
}
.score75 {
    background-color: #98DD75;
}
.score70 {
    background-color: #FFCC33;
}
.score55 {
    background-color: #FE9640;
}

`);


function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}

function isNumeric(str) {
    if (typeof str != "string") return false
    return !isNaN(str) && !isNaN(parseFloat(str))
}


if(window.location.toString().includes("app")) {
    // check translations
    var cells = document.getElementsByClassName("ellipsis");
    var title = document.getElementsByClassName("apphub_AppName")[0];
    var oldTitle = title.innerHTML;
    var uagif = "<img src=\"https://community.akamai.steamstatic.com/public/images/countryflags/ua.gif\">";

    var notSupported = ["\n                  Не підтримується                ",
                        "\n\t\t\t\t\tНе підтримується\t\t\t\t"];
    var russian      = ["\n                Russian           ",
                        "\n\t\t\t\tRussian\t\t\t",
                        "\n                російська           ",
                        "\n\t\t\t\tросійська\t\t\t"];
    var ukrainian    = ["\n                Ukrainian           ",
                        "\n\t\t\t\tUkrainian\t\t\t",
                        "\n                українська           ",
                        "\n\t\t\t\tукраїнська\t\t\t"];

    var sunflower = "🌻"
    Array.prototype.forEach.call(cells, function(cell) {
        if (russian.includes(cell.textContent) &&
        !notSupported.includes(cell.nextSibling.nextSibling.textContent)) {
            sunflower = "";
        };
    });

    Array.prototype.forEach.call(cells, function(cell) {
        if (ukrainian.includes(cell.textContent) &&
        !notSupported.includes(cell.nextSibling.nextSibling.textContent)) {
            var original_ua = cell.textContent.split(/(\p{L}.*)/u);
            cell.innerHTML = original_ua[0] + uagif + " " + original_ua[1];
            title.innerHTML = `${oldTitle} ${sunflower}${uagif}`;
        };
    });

    // check if it's Ukrainian
    oldTitle = title.innerHTML;
    var imgs = document.getElementsByTagName("img");
    var ridne = "93f3a9d4a6868bbaadc90dbbeeecfa13770a59a1";
    Array.prototype.forEach.call(imgs, function(img) {
        var imgName = img.src.split("/").pop()
        if ((imgName == `${ridne}.jpg`) ||
        (imgName == `${ridne}_medium.jpg`) ||
        (imgName == `${ridne}_full.jpg`)) {
            title.innerHTML = `💙💛 ${oldTitle}`;
        };
    });

    // check if it's made by 🐷🐶
    oldTitle = title.innerHTML;
    var prices = document.querySelectorAll('.game_purchase_price, .discount_final_price');
    var btns = document.querySelectorAll('.btn_green_steamui, .btn_blue_steamui');
    var dscs = document.querySelectorAll('.discount_pct');
    var roosnya = false;
    var niroosni = ["329f37319a1d6a0c79c67a388414278e3b2996c0.jpg",
                    "329f37319a1d6a0c79c67a388414278e3b2996c0_medium.jpg",
                    "329f37319a1d6a0c79c67a388414278e3b2996c0_full.jpg",
                    "992f3008daabfe9a3a795896a407525ce11b1cc5.jpg",
                    "992f3008daabfe9a3a795896a407525ce11b1cc5_medium.jpg",
                    "992f3008daabfe9a3a795896a407525ce11b1cc5_full.jpg",
                    "5d05c9a196c34e3860fcb34a389c8d0cd6801de8.jpg",
                    "5d05c9a196c34e3860fcb34a389c8d0cd6801de8_medium.jpg",
                    "5d05c9a196c34e3860fcb34a389c8d0cd6801de8_full.jpg"];

    Array.prototype.forEach.call(imgs, function(img) {
        var imgName = img.src.split("/").pop();
        if (!roosnya && niroosni.includes(imgName)) {
            roosnya = true;
            title.innerHTML = `🐷🐶 <font color="red">${oldTitle}</font>`;
            Array.prototype.forEach.call(prices, function(price) {
                var oldPrice = price.innerHTML;
                price.innerHTML = `<font color="red">${oldPrice}</font> 🐷🐶`;
            });
            Array.prototype.forEach.call(btns, function(btn) {
                btn.classList.remove('btn_green_steamui','btn_blue_steamui');
                btn.classList.add('btn_red_steamui');
            });
            Array.prototype.forEach.call(dscs, function(dsc) {
                dsc.classList.remove('discount_pct');
                dsc.classList.add('discount_pct_red');
            });
        };
    });

    // add elements to the top right corner
    var hub = document.getElementsByClassName("btnv6_blue_hoverfade")[0];
    hub.innerHTML = "\n                    <span>✚</span>\n                ";

    var price = document.createElement("div");
    price.classList.add('btnv6_blue_hoverfade','btn_medium');
    insertAfter(price, hub);

    // check if it's not a demo
    if ((document.getElementsByClassName("game_purchase_action").length > 1) &&
    (document.getElementById("demoGameBtn"))) {
        var priceNode = document.getElementsByClassName("game_purchase_action")[1];
    } else {
        var priceNode = document.getElementsByClassName("game_purchase_action")[0];
    };

    // check if it's not released yet
    if (document.getElementsByClassName("game_area_comingsoon")[0]) {
        var priceText = "В розробці";
        if (roosnya) {
            priceText = `<font color="red">${priceText}</font> 🐷🐶`;
        };
    // check the price if it's been released
    } else if (priceNode.getElementsByClassName("game_purchase_price").length > 0) {
        var priceText = priceNode.getElementsByClassName("game_purchase_price")[0].innerHTML;
        // check if it's a free game
        if (document.getElementById("freeGameBtn")) {
            priceText = `<font color="#beee11">${priceText}</font>`;
        };
    // check if it's on sale
    } else if (priceNode.getElementsByClassName("discount_final_price").length > 0) {
        var priceText = priceNode.getElementsByClassName("discount_final_price")[0].innerHTML;

        var discount = document.createElement("div");
        discount.classList.add('btnv6_blue_hoverfade','btn_medium');
        insertAfter(discount, hub);

        if (roosnya) {
            var discountText = priceNode.getElementsByClassName("discount_pct_red")[0].innerHTML;
            discount.innerHTML = `<span><font color="red">${discountText}</font></span>`;
        } else {
            var discountText = priceNode.getElementsByClassName("discount_pct")[0].innerHTML;
            //discount.innerHTML = `<span><font color="#66cc33">${discountText}</font></span>`;
            discount.innerHTML = `<span><font color="#a3cf06">${discountText}</font></span>`;
            //discount.innerHTML = `<span><font color="#beee11">${discountText}</font></span>`;
        };
        discount.insertAdjacentText('beforebegin', `\n                `);
    } else if ((priceNode.getElementsByClassName("game_purchase_price").length === 0) && 
    (priceNode.getElementsByClassName("btn_addtocart").length > 0)) {
        var priceText = `<font color="#beee11">Безкоштовно</font>`;
    };

    price.innerHTML = `<span>${priceText}</span>`;
    price.insertAdjacentText('beforebegin', `\n                `);

    // add score
    var banner = document.getElementsByClassName("game_header_image_full")[0];
    var banner_parent = banner.parentNode;
    var banner_wrapper = document.createElement('div');
    banner_wrapper.classList.add("image-container");
    banner_parent.replaceChild(banner_wrapper, banner);
    banner_wrapper.appendChild(banner);

    var score_txt = document.getElementsByClassName("user_reviews_summary_row")[1];
    if (!score_txt.hasAttribute("data-tooltip-html")) {
        score_txt = document.getElementsByClassName("user_reviews_summary_row")[0];
    };

    score_txt = score_txt.getAttribute("data-tooltip-html").split('%', 1);

    if (isNumeric(score_txt[0])) {
        var score_int = parseInt(score_txt);

        var score = document.createElement("div");
        score.classList.add('box');
        score.textContent = score_txt;

        if (score_int > 95) {
            score.classList.add('score95');
        } else if (score_int >= 85) {
            score.classList.add('score85');
        } else if (score_int >= 75) {
            score.classList.add('score75');
        } else if (score_int >= 70) {
            score.classList.add('score70');
        } else if (score_int >= 55) {
            score.classList.add('score55');
        };

        banner_wrapper.appendChild(score);
    };
};

// insert html inside a text
// and replace specific part of that text
// i.e. insert a tag inside a text node
// from https://stackoverflow.com/a/29301739
// huy znaye yak vono robe ale krasyvo
var matchText = function(node, regex, callback, excludeElements) { 

    excludeElements || (excludeElements = ['script', 'style', 'iframe', 'canvas']);
    var child = node.firstChild;

    while (child) {
        switch (child.nodeType) {
        case 1:
            if (excludeElements.indexOf(child.tagName.toLowerCase()) > -1)
                break;
            matchText(child, regex, callback, excludeElements);
            break;
        case 3:
            var bk = 0;
            child.data.replace(regex, function(all) {
                var args = [].slice.call(arguments),
                    offset = args[args.length - 2],
                    newTextNode = child.splitText(offset+bk), tag;
                bk -= child.data.length + all.length;

                newTextNode.data = newTextNode.data.substr(all.length);
                tag = callback.apply(window, [child].concat(args));
                child.parentNode.insertBefore(tag, newTextNode);
                child = newTextNode;
            });
            regex.lastIndex = 0;
            break;
        }

        child = child.nextSibling;
    }

    return node;
};

// add spaces before ₴ sign
matchText(document.body, new RegExp("₴", "g"), function(node, match, offset) {
    var hryvnia = document.createElement("span");
    hryvnia.style.cssText += "font-family: 'Calibri Light'; font-weight: bold; font-size: 110%;";
    hryvnia.innerHTML = " ₴";
    return hryvnia;
});