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 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

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

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

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