Sleazy Fork is available in English.

Hentai Heroes image viewer

Allows you to display any stage image of any harem girl, owned ones or not. Works also in event display and Places of Power. Includes zoom-in feature to display full-size girl images gallery (lightbox).

// ==UserScript==
// @name         Hentai Heroes image viewer
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Allows you to display any stage image of any harem girl, owned ones or not. Works also in event display and Places of Power. Includes zoom-in feature to display full-size girl images gallery (lightbox).
// @author       randomfapper34
// @match        http*://nutaku.haremheroes.com/*
// @match        http*://*.hentaiheroes.com/*
// @match        http*://*.gayharem.com/*
// @match        http*://*.comixharem.com/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js
// @grant        none
// @license      MIT
// ==/UserScript==

// gayharem image link head:    gh1
// hentaiharem image link head: hh2
// comixharem image link head:  ch

var $ = window.jQuery;
var haremHead = (function() {
    var haremType = ($('body#hh_gay').length > 0) ?
                    'gh1' :
                    ($('body#hh_comix').length > 0) ? 'ch' : 'hh2';
    return 'https://' + haremType;
})();
var wikiLink = (function() {
    var haremType = ($('body#hh_gay').length > 0) ?
                    'harem-battle.club/wiki/Gay-Harem/GH:' :
                    ($('body#hh_comix').length > 0) ? '' : 'harem-battle.club/wiki/Harem-Heroes/HH:';
    return haremType;
})();
var CurrentPage = window.location.pathname;
var sheet = (function() {
	var style = document.createElement('style');
	document.head.appendChild(style);
	return style.sheet;
})();
var imageExt = '-1200x.webp'; //old ext: '.png';
var icoExt = '-300x.webp';

$(document).ready(function() {
    //include lightbox css
    $(document.head).append(
        '<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css" rel="stylesheet" type="text/css">'
    );
    //define own css
    defineCss();
});

// current page: Activities (PoP)
if (CurrentPage.indexOf('activities') != -1)
{
    if ($('.pop_list').css('display') != 'none') return;

    setTimeout(async function () {
        var popElement = $('#activities #pop.canvas');
        var popImage = popElement.find('.pop_left_part img');
        var popRewardInfo = popElement.find('.pop_rewards_display.reward_wrap').attr('data-reward-display');
        var popImageIcon = popElement.find('.pop_rewards_display .shards_girl_ico img');
        //if girl is won, there is no shards data in popRewardInfo, and therefore no id. Use regex to get girl id from image link?
        var jsonReward = JSON.parse(popRewardInfo);
        if (!jsonReward.hasOwnProperty('shards')) return;
        var girlInfo = jsonReward.shards[0];
        var girlId = girlInfo.id_girl;
        var girlGrades = girlInfo.graded2.split('<g').length - 1;

        //check for image existance with high grades (always work no matter the webpage display chages)
        if (girlGrades == 0) {
            girlGrades = 5;
            var checkImageLink = haremHead + '.hh-content.com/pictures/girls/' + girlId + '/ava5' + imageExt;
            if (await checkUrlResponse(checkImageLink) === false) girlGrades = 3;
        }

        //create diamonds on the top part
        popElement.find('.diamond-bar').remove();
        var allDiamonds = '';
        for (var i = 0; i <= girlGrades; i++) {
            var diamondToAdd = '<div class="diamond unlocked" grade="' + i + '"></div>';
            allDiamonds += diamondToAdd;
        }
        popImage.before('<div class="diamond-bar-container"><div class="diamond-bar">' + allDiamonds + '</div></div>');

        //connect diamonds to image links
        var allLinks = popElement.find('.diamond');
        var linksArray = [];
        for (i = 0; i <= girlGrades; i++) {
            var imgLink = haremHead + '.hh-content.com/pictures/girls/' + girlId + '/ava' + i + imageExt;
            var icoLink = haremHead + '.hh-content.com/pictures/girls/' + girlId + '/ico' + i + icoExt;
            linksArray.push(imgLink);
            $(allLinks.get(i)).attr("link", imgLink);
            $(allLinks.get(i)).attr("icoLink", icoLink);
        }

        $( ".pop_left_part .diamond-bar .diamond" ).on('mouseenter', function() {
            var girlAvatarLink = $(this).attr('link');
            var girlIconLink = $(this).attr('icoLink');
            popImage.attr('src', girlAvatarLink);
            popImageIcon.attr('src', girlIconLink);
        });

        //create zooming event
        $(popImage).removeData('allImages');
        $(popImage).data('allImages', linksArray);
        $(popImage).on('mouseup', zoomIntoImage);
    }, 50);
}

// current page: Event box
if (CurrentPage.indexOf('event') != -1)
{
    var eventGirlElementSelector = ".nc-event-list-rewards-container .nc-event-list-reward-container"
    var rewardBox = ".nc-event-reward-container.selected ";
    var eventGirlImageSelector = ".canvas " + rewardBox + " .nc-event-reward-preview";
    var eventGirlInfoSelector = ".canvas " + rewardBox + " .nc-event-reward-info";

    setTimeout(function () {
        $(eventGirlElementSelector + ".selected").click();
    }, 50);

    $(eventGirlElementSelector).on('click', function() {
        setTimeout(async function () {
            var girlImageDiv = $(eventGirlImageSelector);
            var girlInfoDiv = $(eventGirlInfoSelector);
            var girlInfo = girlInfoDiv.find('.new_girl_info .girl_tooltip_grade');
            var girlGrades = girlInfo.find('g').length;
            var girlIconImage = $(".nc-event-list-rewards-container > .nc-event-list-reward-container.selected img");
            var girlImage = girlImageDiv.children('img');
            girlImageDiv.find('.diamond-bar').remove();

            //find girl id from image src
            var girlImageSrc = girlImage.attr('src');
            var startPosition = girlImageSrc.indexOf('pictures/girls/') + 'pictures/girls/'.length;
            var girlIdStr = girlImageSrc.substring(startPosition, girlImageSrc.lastIndexOf('/ava'));
            if (isNaN(girlIdStr))
                return;
            var girlId = parseInt(girlIdStr);

            //check for image existance with high grades (always work no matter the webpage display chages)
            if (girlGrades == 0) {
                girlGrades = 5;
                var checkImageLink = haremHead + '.hh-content.com/pictures/girls/' + girlId + '/ava' + girlGrades + imageExt;
                if (await checkUrlResponse(checkImageLink) === false) girlGrades = 3;
            }

            //create diamonds on the top part
            var allDiamonds = '';
            for (var i = 0; i <= girlGrades; i++) {
                var diamondToAdd = '<div class="diamond unlocked" grade="' + i + '"></div>';
                allDiamonds += diamondToAdd;
            }
            girlImage.before('<div class="diamond-bar">' + allDiamonds + '</div>');

            //connect diamonds to image links
            var allLinks = girlImageDiv.find('.diamond');
            var linksArray = [];
            for (i = 0; i <= girlGrades; i++) {
                var imgLink = haremHead + '.hh-content.com/pictures/girls/' + girlId + '/ava' + i + imageExt;
                var icoLink = haremHead + '.hh-content.com/pictures/girls/' + girlId + '/ico' + i + icoExt;
                linksArray.push(imgLink);
                $(allLinks.get(i)).attr("link", imgLink);
                $(allLinks.get(i)).attr("icoLink", icoLink);
            }

            $( rewardBox + " .diamond-bar .diamond" ).on('mouseenter', function() {
                var girlAvatarLink = $(this).attr('link');
                var girlIconLink = $(this).attr('icoLink');
                girlImage.attr('src', girlAvatarLink);
                girlIconImage.attr('src', girlIconLink);
            });

            //create zooming event
            $(girlImage).removeData('allImages');
            $(girlImage).data('allImages', linksArray);
            $(girlImage).off('mouseup', zoomIntoImage);
            $(girlImage).on('mouseup', zoomIntoImage);
        }, 10);
    });
}

// current page: Harem
if (CurrentPage.indexOf('harem') != -1)
{
    var callback = function(mutationsList) {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(node => {
                    if (node.outerHTML) {
                        node.addEventListener('click', onGirlClick, false);
                    }
                });
            }
        }
    };

    const targetNode = document.querySelector('#harem_left div.girls_list');
    const config = { childList: true };
    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
    $( ".girls_list div[id_girl]" ).on('click', onGirlClick);

    function onGirlClick(event) {
        var girlId = $(this).children('[girl]').attr('girl');
        var girlGrades = $(this).find('.graded').children().length;
        var girlName = $(this).find('div.right h4')[0].innerText;
        updateInfo(girlId, girlGrades, girlName);
    }

    setTimeout(function () {
        //update view of girl currently selected when loading the harem
        $("#harem_left div.girls_list div[girl].opened").click();
    }, 200);

    function updateInfo(girlId, girlGrades, girlName)
    {
        setTimeout(function () {
            var haremRight = $('#harem_right');
            haremRight.children('[girl]').each( function() {
                if (girlId == 0) girlId = $(this).attr('girl');

                var notOwned = $(this).children('.missing_girl');
                var girlImageDiv = $(this).find('.avatar-box');
                var girlIconDiv = $("#harem_left div.girls_list div[girl].opened div.left img");

                if (notOwned.length > 0) {
                    //create diamonds on the bottom part
                    var allDiamonds = '';
                    for (var i = 0; i <= girlGrades; i++) {
                        var diamondToAdd = '<div class="diamond locked" grade="' + i + '"></div>';
                        allDiamonds += diamondToAdd;
                    }

                    $(this).find('.middle_part').css('margin', '0');
                    $(this).find('.dialog-box').after('<h3>' + girlName + '</h3>');
                    $(this).find('img.avatar').wrap('<div class="avatar-box"></div>');
                    $(this).find('.avatar-box').css('margin-top', '23px');
                    $(this).find('.avatar-box').after('<div class="diamond-bar">' + allDiamonds + '</div>');
                }

                //update for any girl (owned or not)
                var wikiBase = wikiLink;
                if (wikiBase != '') {
                    $(this).find('h3').wrap('<div class="WikiLink"></div>').wrap('<a href="https://' + wikiBase + girlName + '" target="_blank"></a>');
                }
                var allLinks = $(this).find('.diamond');
                var linksArray = [];
                for (i = 0; i <= girlGrades; i++) {
                    var imgLink = haremHead + '.hh-content.com/pictures/girls/' + girlId + '/ava' + i + imageExt;
                    var icoLink = haremHead + '.hh-content.com/pictures/girls/' + girlId + '/ico' + i + icoExt;
                    linksArray.push(imgLink);
                    $(allLinks.get(i)).attr("link", imgLink);
                    $(allLinks.get(i)).attr("icoLink", icoLink);
                }
                $('.avatar-box img.avatar').removeData('allImages');
                $('.avatar-box img.avatar').data('allImages', linksArray);
                if (notOwned) $('.avatar-box img.avatar').attr('src', linksArray[0]);

                $('.variation_block .big_border').on('click', function() {
                    var girlId = $(this).children('[girl]').attr('girl');
                    var girlGrades = $(this).find('.graded').children().length;
                    setTimeout(function() {
                        updateInfo(girlId, girlGrades, girlName);
                    }, 50);
                });

                $( ".diamond-bar .diamond" ).on('mouseenter', function() {
                    var mainParent = $(this).closest('.middle_part');
                    var girlAvatar = mainParent.find('img.avatar');
                    var girlAvatarLink = $(this).attr('link');
                    var girlIconLink = $(this).attr('icoLink');
                    girlIconDiv.attr('src', girlIconLink);
                    girlAvatar.attr('src', girlAvatarLink);
                });

                $('.avatar-box img.avatar').on('mouseup', zoomIntoImage);
            });
        }, 0);
    }
}

//zoom into image with lightbox, event only on left click
function zoomIntoImage(e)
{
    if (e.which != 1) return;

    var linksArray = $(this).data('allImages');
    var girlAvatarLink = $(this).attr('src');
    var indexOfQuestion = girlAvatarLink.lastIndexOf('?');
    if (indexOfQuestion >= 0) girlAvatarLink = girlAvatarLink.slice(0, indexOfQuestion);
    var indexOfCurrent = linksArray.indexOf(girlAvatarLink);

    var allImages = [];
    for (var i = 0; i < linksArray.length; i++) {
        allImages.push({
            src  : linksArray[i].toString(),
            type : 'image',
            opts : {
                caption : i == 0 ? 'Default' : 'Stage ' + i
            }
        });
    }

    $.fancybox.open(allImages, {
        loop : true,
        keyboard: true,
        transitionEffect: "tube"
    }, indexOfCurrent);
}

//checks for any errors in url (like image 404)
async function checkUrlResponse(url)
{
    let result = false;

    await fetch(url.toString())
    .then(function(response) {
        if (response.status >= 200 && response.status <= 299) {
            return response;
        } else {
            throw Error(response.statusText);
        }
    }).then(function(response) {
        result = true;
    }).catch(function(error) {
    });

    return result;
}

function defineCss()
{
    sheet.insertRule('#harem_left div[girl]>.left>img, #harem_right>div[girl] .middle_part div.avatar-box img.avatar, #shops #girls_list .g1 .girl-ico>img {'
                     + 'image-rendering: initial; }');

    sheet.insertRule('#harem_right .WikiLink a {'
                     + 'text-decoration: none; }');

    sheet.insertRule('#harem_right .diamond-bar {'
                     + 'margin-top: 4px; }');

    sheet.insertRule('.rewards-stats .diamond-bar {'
                     + 'position: static;'
                     + 'justify-content: center;'
                     + 'margin-top: 42px;'
                     + 'margin-bottom: -40px; }');

    sheet.insertRule('.generic-girl-image .diamond-bar, .nc-event-reward-preview .diamond-bar {'
                     + 'justify-content: center;'
                     + 'z-index: 1;'
                     + 'width: 100%; }');

    sheet.insertRule('.rewards-stats .avatars-drawn-bottom-part .diamond-bar {'
                     + 'margin-top: 275px; }');

    sheet.insertRule('.rewards-stats .avatars-drawn-bottom-part img {'
                     + 'margin-top: -275px; }');

    sheet.insertRule('.nc-event-reward-preview .diamond-bar {'
                     + 'margin-top: -25px; }');

    sheet.insertRule('.rewards-stats .diamond-bar .diamond.unlocked, .pop_left_part .diamond-bar .diamond.unlocked, .generic-girl-image .diamond-bar .diamond.unlocked {'
                     + 'cursor: default; }');

    sheet.insertRule('.pop_left_part .diamond-bar-container {'
                     + 'z-index: 5;'
                     + 'position: absolute; }');

    sheet.insertRule('.pop_left_part .diamond-bar {'
                     + 'position: relative;'
                     + 'left: 50%; }');

    sheet.insertRule('#harem_right .diamond-bar .diamond:hover, .rewards-stats .diamond-bar .diamond:hover, .pop_left_part .diamond-bar .diamond:hover, .generic-girl-image .diamond-bar .diamond:hover, .nc-event-reward-preview .diamond-bar .diamond:hover {'
                     + 'border: 2px solid #FE00FE; }');

    sheet.insertRule('.avatar-box img, .event-widget.special-fullscreen-view .widget .rewards-stats .reward img, .generic-girl-image img, .nc-event-reward-preview img {'
                     + 'cursor: zoom-in; }');

    sheet.insertRule('#pop.canvas .pop_left_part img.pop_left_fade_page {'
                     + 'margin-bottom: 10px;'
                     + 'cursor: zoom-in; }');
}