☰

Hentai Heroes image viewer

Allows you to display any stage image of any harem girl, owned ones or not. Works also in event display. Includes zoom-in feature to display fullsize image (lightbox).

当前为 2020-06-21 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Hentai Heroes image viewer
// @namespace    http://tampermonkey.net/
// @version      0.5
// @description  Allows you to display any stage image of any harem girl, owned ones or not. Works also in event display. Includes zoom-in feature to display fullsize image (lightbox).
// @author       randomfapper34
// @match		 http*://nutaku.haremheroes.com/*
// @match        http*://*.hentaiheroes.com/*
// @require      https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js
// @grant        none
// ==/UserScript==

var $ = window.jQuery;
var CurrentPage = window.location.pathname;
var sheet = (function() {
	var style = document.createElement('style');
	document.head.appendChild(style);
	return style.sheet;
})();

$(document).ready(function() {
    //include lightbox css
    $(document.head).append(
        '<link href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" rel="stylesheet" type="text/css">'
    );
    //define own css
    defineCss();
});

// current page: Home
if (CurrentPage.indexOf('home') != -1)
{
    var eventGirlElementSelector = ".event-widget .widget .rewards-block-tape .girl_reward";

    //update view of girl currently selected when loading event info box
    $( ".event-thumbnail" ).on('click', function() {
        setTimeout(function () {
            $(eventGirlElementSelector + "[active_view]").click();
        }, 100);
    });

    $(eventGirlElementSelector).on('click', async function() {
        var girlId = $(this).attr('girl');
        var girlImageDiv = $( ".event-widget.special-fullscreen-view .widget .rewards-stats .reward" );
        var girlImage = girlImageDiv.children('img');

        var allImages = '';
        for (var i = 0; i <= 5; i++) {
            var imgLink = 'https://hh2.hh-content.com/pictures/girls/' + girlId + '/ava' + i + '.png';
            var fullLink = '<span link="' + imgLink + '">' + i + ' </span>';

            //only check for image existance with high grades (no way to check it outside of harem so far)
            if (i > 3 ) {
                //if there is no 4th grade, don't check anything more
                if (await checkUrlResponse(imgLink) === false)  {
                    i = 6;
                    continue;
                }
            }
            allImages += fullLink;
        }

        girlImageDiv.prepend('<div class="girl_images">images: ' + allImages + '</div>');
        var imagesDiv = girlImageDiv.children('div.girl_images');
        imagesDiv.css("position", "absolute");
        imagesDiv.css("top", "0");

        $( ".girl_images span" ).on('mouseenter', function() {
            var girlAvatarLink = $(this).attr('link');
            girlImage.attr('src', girlAvatarLink);
        });

        $(girlImage).on('mouseup', zoomIntoImage);
    });
}

// current page: Harem
if (CurrentPage.indexOf('harem') != -1)
{
    var haremRight = $('#harem_right');

    $( ".girls_list div[id_girl]" ).on('click', function() {
        var girlId = $(this).children('[girl]').attr('girl');
        var girlGrades = $(this).find('.graded').children().length;
        var girlClass = $(this).find('.icon').attr('carac');
        updateInfo(girlId, girlGrades, girlClass);
    });

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

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

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

                var allImages = '';
                for (var i = 0; i <= girlGrades; i++) {
                    var selectedAvatar = $(this).find('.diamond.selected').attr('grade');
                    selectedAvatar = (selectedAvatar === undefined) ? '/avb0' : '/ava' + selectedAvatar;
                    var baseLink = 'https://hh2.hh-content.com/pictures/girls/' + girlId + selectedAvatar + '.png';
                    var imgLink = 'https://hh2.hh-content.com/pictures/girls/' + girlId + '/ava' + i + '.png';
                    var icoLink = 'https://hh2.hh-content.com/pictures/girls/' + girlId + '/ico' + i + '.png';
                    var fullLink = '<span link="' + imgLink + '" baseLink="' + baseLink + '" icoLink="' + icoLink + '">' + i + ' </span>';
                    allImages += fullLink;
                }

                if (!girl.own) {
                    $(this).find('.middle_part').css('margin', '0');
                    $(this).find('.dialog-box').after('<h3>' + girl.Name + '<span carac="class' + girlClass + '"></span></h3>');
                    $(this).find('img.avatar').wrap('<div class="avatar-box"></div>');
                } else {
                    girlImageDiv.css('margin-top', '0px');
                    girlImageDiv.css('height', '390px');
                }
                //update for any girl (owned or not)
                $(this).find('h3').after('<div class="WikiLink">id: ' + girlId + ' <a href="https://harem-battle.club/wiki/Harem-Heroes/HH:' + girl.Name + '" target="_blank">(wiki page)</a></div>');
                $(this).find('.WikiLink').append('<br/><div class="girl_images">images: ' + allImages + '</div>');
                $(this).find('.girl-rarity').remove();

                $('.variation_block .big_border').on('click', function() {
                    var girlId = $(this).children('[girl]').attr('girl');
                    var girlGrades = $(this).find('.graded').children().length;
                    setTimeout(function() {
                        var girlClass = $(".girls_list div[id_girl] div[girl].opened").find('.icon').attr('carac');
                        updateInfo(girlId, girlGrades, girlClass);
                    }, 50);
                });

                $( ".girl_images span" ).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 girlAvatarLink = $(this).attr('src');
    $.fancybox.open({
        src  : girlAvatarLink.toString(),
        type : 'image'
    });
}

//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_right .WikiLink a {'
                     + 'color: #87CEFA;'
                     + 'text-decoration: none; }');

    sheet.insertRule('#harem_right .WikiLink a:hover {'
                     + 'color: #B14;'
                     + 'text-decoration: underline; }');

    sheet.insertRule('#harem_right .WikiLink {'
                     + 'font-size: 12px; }');

    sheet.insertRule('#harem_right .WikiLinkDialogbox a {'
                     + 'text-decoration: none;'
                     + 'color: #24a0ff !important; }');

    sheet.insertRule('.girl_images span {'
                     + '-webkit-text-stroke: 0px #FE00FE; }');

    sheet.insertRule('.girl_images span:hover {'
                     + '-webkit-text-stroke: 0.75px #FE00FE; }');

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