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).

Versión del día 21/06/2020. Echa un vistazo a la versión más reciente.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey to install this script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==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; }');
}