adds a slideshow interface for each compo listed

demozoo_compo_slideshow.js

// ==UserScript==
// @name         Demozoo Compo Slideshow
// @namespace    http://tampermonkey.net/
// @version      0.3.2
// @description  show a slidehow of the better screenshots rather than thumbnails
// @author       ps
// @match        https://demozoo.org/parties/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=demozoo.org
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    addEventListener('keydown', (event) => {
        var e = event || window.event;

        if (e.keyCode == '38') {
            // up arrow
        }
        else if (e.keyCode == '40') {
            // down arrow
        }
        else if (e.keyCode == '37') {
            // left arrow
            //var active_prod = 0;
            //var num_prods = 0;
            if (active_prod>0) turnOn(active_prod-1);
        }
        else if (e.keyCode == '39') {
            // right arrow
             if (active_prod<num_prods-1) turnOn(active_prod+1);
        }
        else if ((e.keyCode == '106') || (e.keyCode == '107')) {
            // * or +
            // scale up image
            var tt_img = document.getElementById("tt_img_"+active_prod);
            if (tt_img != undefined) {
                var scale = tt_img.style.scale;
                //console.log(scale);
                if (scale != '') {
                    tt_img.style.scale = parseInt(scale,10)+1;
                } else {
                    tt_img.style.scale = 2;
                }

                tt_img.style.transformOrigin = "center "+to_top+"px";
            }
        }
        else if ((e.keyCode == '111') || (e.keyCode == '109')) {
            // / or -
            // scale down image
            var tt_img2 = document.getElementById("tt_img_"+active_prod);
            if (tt_img2 != undefined) {
                var scale2 = tt_img2.style.scale;
                console.log(scale2);
                if (scale2 != '') {
                    tt_img2.style.scale = parseInt(scale2,10)-1;
                } else {
                    tt_img2.style.scale = 1;
                }
            }
        }
        else if (e.keyCode == '13') {
            // return
            document.body.style.overflowY = 'hidden';
            document.body.style.cursor = 'none';
            turnOn(active_prod);
        }
        else if (e.keyCode == '27') {
            // esc

            // kill slideshow overlay
            var tt_div = document.getElementById("fs_tt");
            if (tt_div) tt_div.remove();

            // show scroll bar again
            document.body.style.overflowY = 'auto';
            document.body.style.cursor = 'auto';
        }
        else if (e.keyCode == '33') {
            // pgup
            var tt_img3 = document.getElementById("tt_img_"+active_prod);
            if (tt_img3 != undefined) {
                var new_pos = to_top - 10;
                if (new_pos < 0) {
                    to_top = 0;
                } else {
                    to_top = new_pos;
                }
                tt_img3.style.transformOrigin = "center "+to_top+"px";
            }

        }
         else if (e.keyCode == '34') {
            // pgdn
             var tt_img4 = document.getElementById("tt_img_"+active_prod);
             if (tt_img4 != undefined) {
                 var new_pos4 = to_top + 10;
                 to_top = new_pos4;
                 tt_img4.style.transformOrigin = "center "+to_top+"px";
             }
        }
        //console.log(e.keyCode);
    });

    addEventListener("wheel", (event) => {
        //console.log(event.deltaY);
        var tt_img = document.getElementById("tt_img_"+active_prod);
        if (tt_img != undefined) {
            var new_pos = to_top + event.deltaY/10;
            if (new_pos < 0) {
                to_top = 0;
            } else {
                to_top = new_pos;
            }

            tt_img.style.transformOrigin = "center "+to_top+"px";
        }
    });

    function updateLoadCounter() {
        load_counter++;
        console.log(load_counter + " " + num_prods + " " + active_prod);

        if (load_counter == num_prods) {
            // hide scroll bar
            document.body.style.overflowY = 'hidden';
            document.body.style.cursor = 'none';
            turnOn(active_prod);
        }
    }

    function tryOtherExtensionsIfNeeded(tt_div, tt_image, endpath, imageTypes) {
        var fired = false;
        var tt_image_id = tt_image.id;
        tt_image.addEventListener("error",function(){
            if (fired) {
                return;
            }
            fired = true;
            if (imageTypes.length == 0) {
                console.log("We have run out of image types to try!");
            } else {
                var ext = imageTypes.pop();
                // remove previous
                var prev_img = document.getElementById(tt_image_id);
                if (prev_img) prev_img.remove();
                // add new
                tt_image = new Image();
                tt_image.addEventListener("load",function(){
                    console.log("loaded image");
                    updateLoadCounter();
                },false);
                if (tt_image_id != undefined) {
                    tt_image.setAttribute("id", tt_image_id);
                    tt_image.setAttribute("style", "display:none;max-width:-webkit-fill-available;max-height:-webkit-fill-available;image-rendering:pixelated;");
                    //console.log(tt_image.width);
                }
                var newpath = endpath.substring(0, endpath.length-3) + ext;
                console.log(newpath);
                tt_image.src = newpath;
                //tt_image.setAttribute("style", "max-height:");
                //setImageSource(tt_image, demo_num, ext);
                //addImage(tt_image, tt_div);
                tt_div.appendChild(tt_image);
                tryOtherExtensionsIfNeeded(tt_div, tt_image, endpath, imageTypes.slice(0));
            }
        },false);
    }

    var i;

    // get the party name
    var partyname = "";
    var pn = document.getElementsByClassName("party_name");
    for (i = 0; i < pn.length; i++) {
        partyname = pn[i].childNodes[1].innerHTML;
        //console.log(partyname);
    }

    // put the party name on the results menu
    var res = document.getElementsByClassName("results_menu");
    for (i = 0; i < res.length; i++) {
        var title = res[i].childNodes[1];
        title.innerHTML += " " + partyname;
    }

    var active_prod = 0;
    var num_prods = 0;
    var to_top = 0;

    function turnOn(this_id) {

        // hide previous thing
        var this_img = document.getElementById("tt_img_"+active_prod);
        if (this_img) this_img.style.display = 'none';
        var this_blabla = document.getElementById("tt_blabla_"+active_prod);
        if (this_blabla) this_blabla.style.display = 'none';

        active_prod = this_id;

        // show new thing
        var tt_img = document.getElementById("tt_img_"+this_id);
        if (tt_img) {
            tt_img.style.display = 'block';
            //console.log(tt_img.clientWidth + " " + tt_img.clientHeight);
            // upscale if needed
            if (tt_img.clientWidth != 0) {
                var tt_scale = 1;
                while ((window.innerWidth > tt_img.clientWidth*tt_scale) && (window.innerHeight > tt_img.clientHeight*tt_scale)) {
                    tt_scale++;
                }
                if (tt_scale > 1) tt_img.style.scale = tt_scale-1;
            }
        }
        var tt_blabla = document.getElementById("tt_blabla_"+this_id);
        if (tt_blabla) tt_blabla.style.display = 'block';

        to_top = 0;
    }

    var load_counter = 0;

    // add listeners for slideshow viewer on each competition
    var listcompos = document.getElementsByClassName("competition__heading");
    for (i=0; i<listcompos.length; i++) {
        //console.log(listcompos[i].innerHTML);
        listcompos[i].addEventListener("click", function (e) {
            //console.log('this event ' + this.innerHTML);
            var ranks = this.parentNode.getElementsByClassName("result__ranking");
            var titles = this.parentNode.getElementsByClassName("result__title");
            var metadatas = this.parentNode.getElementsByClassName("meta");
            var authors = this.parentNode.getElementsByClassName("result__author");
            var links = this.parentNode.getElementsByClassName("media--thumbnail");
            //console.log(links);

            var tt_div = document.createElement("div");
            tt_div.setAttribute("id", "fs_tt");
            tt_div.setAttribute("style", "background:#ededed;position:fixed;z-index:1000;left:0px;top:0px;width:100%;height:100%;display:flex;align-items:center;justify-content:center;");
            document.body.appendChild(tt_div);

            num_prods = titles.length;
            load_counter = 0;
            active_prod = titles.length-1;

            for (var j=0; j<titles.length; j++) {
                var rank = ranks[j].innerText;
                var url = titles[j].childNodes[1].href;
                var prod_name = '';
                if (titles[j].childNodes[1] != undefined); prod_name = titles[j].childNodes[1].innerText;
                var metadata = metadatas[j].innerText;
                var author_name = '';
                if (authors[j].childNodes[1] != undefined) author_name = authors[j].innerText;
                var thumbnail_link = links[j].childNodes[1].src;
                //console.log(thumbnail_link);

                if (thumbnail_link != undefined) {
                    var tt_image = new Image();
                    tt_image.addEventListener("load",function(){
                        console.log("loaded image");
                        updateLoadCounter();
                    },false);
                    var str = thumbnail_link;
                    //console.log(str);
                    var tidx = 34; // https://media.demozoo.org/screens/t/77/66/03d6.316229.png replace /t/ with /o/ to get the original image instead of the thumbnail
                    var endpath = str.substring(0, tidx) + 'o' + str.substring(tidx + 1);
                    //console.log(endpath);
                    tt_image.src = endpath;
                    //var tt_image_id = "tt_img_"+j;
                    tt_image.setAttribute("id", "tt_img_"+j);
                    tt_image.setAttribute("style", "display:none;max-width:-webkit-fill-available;max-height:-webkit-fill-available;image-rendering:pixelated;");
                    //setImageSource(tt_image, demo_num, "jpg");
                    tryOtherExtensionsIfNeeded(tt_div, tt_image, endpath, ["gif","png","jpg"]);
                    tt_div.appendChild(tt_image);
                    //tt_div.style.display = 'none';
                } else {
                    // no thumbnail, no loader
                    //load_counter++;
                    console.log("no thumbnail");
                    updateLoadCounter();
                }

                var pname = partyname;
                if (partyname.slice(-1) === ":") pname = partyname.slice(0, -1); //when there is a tagline for the party, they add a : on the partyname
                var tt_blabla = document.createElement("div");
                tt_blabla.setAttribute("id", "tt_blabla_"+j);
                tt_blabla.setAttribute("style", "z-index:1002;display:none;font-family:Tahoma;font-size:2em;position:fixed;bottom:1em;left:1em;background-color:rgba(200,200,200,0.5);text-shadow:0em 0em .5em white;padding:0.5em 1em;color:black;");
                tt_blabla.innerHTML = "<div style=\"\">" + this.innerHTML + " @ " + pname + "</div>";
                tt_blabla.innerHTML += "<div>" + rank + " :: <i>" + prod_name + "</i> by <b>" + author_name + "</b></div>";
                tt_blabla.innerHTML += "<div style=\"font-size:50%;margin-top:.5em;\">" + metadata + "</div>";
                //console.log(rank + " " + prod_name + " " + author_name + " " + url);
                tt_div.appendChild(tt_blabla);
            }

        });
    }

})();