☰

Greasy Fork is available in English.

MAL tierlist

make tierlist on seasonal anime page (V0.5 ordered tierlist instead of automatic sort)

// ==UserScript==
// @name         MAL tierlist
// @namespace    pepe
// @version      0.5.2
// @description  make tierlist on seasonal anime page (V0.5 ordered tierlist instead of automatic sort)
// @author       pepe
// @match        https://myanimelist.net/anime/season*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=myanimelist.net
// @require      https://code.jquery.com/ui/1.13.2/jquery-ui.js
// @license      MIT
// @grant        none
// ==/UserScript==

/* global $ */
/* global html2canvas */

(function() {

// for image downloading but doesnt work yet, so its not included
// @require https://html2canvas.hertzen.com/dist/html2canvas.js

  // fix padding in header to fit tierlist in older seasons
  if(document.querySelectorAll('.navtab')[0].textContent == 'Current Season'){
      document.head.innerHTML += `<style>
      .dark-mode .navi-seasonal .horiznav_nav ul li a {
         padding: 5px 8px;
      }
      </style>`
  }

  let tierlist_html = `
    <div id="tierlist">

  <style>
  :root {
    --image-width: 80px;
    --image-height: 113px;
  }
  ul.droptrue { list-style-type: none; margin: 0px; float: left; margin-right: 0px; padding: 0px; min-width: 100%; min-height: 80px;}
  ul.droptrue li { float: left; margin: 2px; font-size: 16px; height: var(--image-height); overflow: hidden;}
  .grid-container {
    margin-top: 2px;
    display: none;
    grid-template-columns: 1fr 11fr;
    grid-gap: 0px;
  }
  .grid-container1 {
    grid-template-columns: 1fr 4fr 3fr 2fr 2fr;
  }
  .grid-container2 {
    grid-template-columns: 1fr 11fr;
  }
.textarea {
  display: flex; align-items: center; text-align: center; height: var(--image-height); width: auto; padding: 0px!important; border: 0px!important; justify-content: center;
}
ul {display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
    margin: 2px;
    padding: 0;
}
.dropfalse div { height: 100%; font-size:14px!important;width:90px;}

#tier_s div, #header_s div { background-color: #2e51a2;}
#tier1 div, #header_1 div { background-color: green;}
#tier2 div, #header_2 div { background-color: oklch(0.70 0.18 126.62 / 1);}
#tier3 div, #header_3 div { background-color: oklch(0.75 0.2 70.66 / 1);}
#tier4 div { background-color: orangered;}
#tier5 div { background-color: darkred;}
  </style>

<a href="#" style="position: absolute; right: 0; padding-top: 30px;"
    onClick="
      event.preventDefault();
      document.querySelector('#contentWrapper').style.display = 'block';
      document.querySelectorAll('.grid-container')[0].style.display = 'none';
      document.querySelectorAll('.grid-container')[1].style.display = 'none';
      document.documentElement.scrollTop = localStorage.getItem('scrollPosition');
    "
>CLOSE VIEW</a>

<a id="deletetierlist" href="#" style="position: absolute; right: 0; padding-top: 7px; color: orange;" >DELETE SAVE</a>


${generateTiers()}
<!--
<ul id="tier_s" class="dropfalse">
 <div class="textarea" contenteditable="true">S</div>
</ul>
<ul id="s" class="droptrue"></ul>

<ul id="tier1" class="dropfalse">
 <div class="textarea" contenteditable="true">A</div>
</ul>
<ul id="sortable1" class="droptrue"></ul>

<ul id="tier2" class="dropfalse">
  <div class="textarea" contenteditable="true">B</div>
</ul>
<ul id="sortable2" class="droptrue"></ul>

<ul id="tier3" class="dropfalse">
  <div class="textarea" contenteditable="true">C</div>
</ul>
<ul id="sortable3" class="droptrue"></ul>

<ul id="tier4" class="dropfalse">
  <div class="textarea" contenteditable="true">D</div>
</ul>
<ul id="sortable4" class="droptrue"></ul>

<ul id="tier5" class="dropfalse">
  <div class="textarea" contenteditable="true">E</div>
</ul>
<ul id="sortable5" class="droptrue"></ul>
-->


<!-- this grid not in image -->
<div class="grid-container grid-container2">

<ul id="tier_last" class="dropfalse">
  <div class="textarea" contenteditable="true">F</div>
</ul>
<ul id="last" class="droptrue"></ul>

</div>

</div>
`
function generateTiers(){
    let tiers = 'S,A,B,C,D,E'

    let html = tiers.split(/[, ]/).map((tier, i) =>
`<ul id="tier${i==0?'_s':i}" class="dropfalse">
     <div class="textarea" contenteditable="true">${tier}</div>
</ul>
<ul id="${i==0?'s':'sortable'+i}" class="droptrue"></ul>`)

    return `<div class="grid-container">`+html.join('\n')+`</div>`
}
function generateGridTiers(){
    let tiers = 'S,A,B,C,D,E'

    let html = `<div class="grid-container grid-container1"><ul id="tier_header" class="dropfalse" style="height: var(--image-height)">
</ul>
<ul id="header_s" class="dropfalse"><div class="textarea" contenteditable="true">Carry</div></ul>
<ul id="header_1" class="dropfalse"><div class="textarea" contenteditable="true">Tactical</div></ul>
<ul id="header_2" class="dropfalse"><div class="textarea" contenteditable="true">Dark Horse</div></ul>
<ul id="header_3" class="dropfalse"><div class="textarea" contenteditable="true">Misc</div></ul>`

   html += tiers.split(/[, ]/).map((tier, i) =>
`<ul id="tier${i==0?'_s':i}" class="dropfalse">
     <div class="textarea" contenteditable="true">${tier}</div>
</ul>
${createColumns(tier)}`).join('\n')

    return html+`</div>`
}
    function createColumns(tier){
        return Array.from(Array(4)).map((v,i) => `<ul id="${tier==0?'s'+i:`sortable${i}${tier}`}" class="droptrue"></ul>`).join('\n')
    }
    // <div class="button">
    //   <a id="download" href="#">Download button</a>
    // </div>

    create_tierlist_button:{

        let tierlist_button = document.createElement(`li`)
        tierlist_button.innerHTML = `<a id="createtier" href="#" class="navtab ">Tierlist</a>`
        tierlist_button.onclick = function(event){
            event.preventDefault(); // disable default link click, interferes with scroll
            RenderTierlist();
        }
        let seasonal_header = document.querySelector('.horiznav_nav ul')
        seasonal_header.append(tierlist_button);

    }

    function RenderTierlist(){
        localStorage.setItem('scrollPosition', document.documentElement.scrollTop)

        // prevent duplicate from being rendered, insert html
        try{document.getElementById('tierlist').remove();}catch(e){}
        document.querySelector('#contentWrapper').insertAdjacentHTML("afterend", tierlist_html);

        // hide seasonal, show tier
        document.querySelector('#contentWrapper').style.display = 'none';
        document.querySelectorAll('.grid-container')[0].style.display = 'grid';
        document.querySelectorAll('.grid-container')[1].style.display = 'grid';

        // jqueryui sortable
        $( "ul.droptrue" ).sortable({
            connectWith: "ul.droptrue"
        });

        // loop seasonal images and put them to tierlist
        let new_shows = document.querySelectorAll('.js-seasonal-anime-list-key-1:nth-child(1) .js-anime-type-1 img')
        let season = document.querySelector("#content .season_nav .on").textContent
        let tierlist = JSON.parse(localStorage.getItem(season));
        let tiersOrdered = Array.from({length: tierlist?.tiers?.length}, i => []);

        // create ordered list
        for(let anime of new_shows){
            let id = anime.parentElement.href.match(/(?<=anime\/)\d+/)[0]
            let members = anime.parentElement.parentElement.parentElement.querySelector('.member').textContent
            members = members.match(/[\d.]+/) * ( members.match(/M/) ? 1000000 : ( members.match(/K/) ? 1000 : 1 ) )
            if(members < 3000) continue; // skip if low members

            if(tierlist && tierlist[id]){ // old tierlist by sort
                document.querySelector('#'+tierlist[id]).innerHTML += `<li id="${id}" class="">${anime.outerHTML.replace('167', '80')}</li>`
            }else if(tierlist && tierlist.version == 2 && tierlist.tiers.flat().includes(id)){ // new ordered tierlist
                for(let tier_index of Object.keys(tierlist.tiers)){
                    if(!tierlist.tiers[tier_index].includes(id)) continue

                    let anime_index = tierlist.tiers[tier_index].indexOf(id)
                    let element = `<li id="${id}" class="">${anime.outerHTML.replace('167', '80')}</li>`

                    tiersOrdered[tier_index] ??= []
                    tiersOrdered[tier_index][anime_index] = element
                }
            }else{ // add shows to last tier by default
                document.querySelector('#last').innerHTML += `<li id="${id}" class="">${anime.outerHTML.replace('167', '80')}</li>`
            }
        }

        // insert anime to tierlist
        if(tierlist && tierlist.version == 2){
            for(let tier_index of Object.keys(tierlist.tiers)){
                let tier_row = document.getElementsByClassName('grid-container')[0].querySelectorAll('ul.droptrue')[tier_index]
                tier_row.innerHTML = tiersOrdered[tier_index].join('\n')
            }
        }

        // tier label names
        let tier_names = tierlist?.tier_names ?? JSON.parse(localStorage.getItem('tier_names'+season))
        if(tier_names){
            for(let [i, textareas] of document.querySelectorAll('ul div.textarea').entries()){
                textareas.innerText = tier_names[i]
            }
            // document.querySelectorAll('ul div.textarea').entries().forEach((i, textareas) => { textareas.innerText = tier_names[i] })
        }

        document.querySelector('#menu').scrollIntoView(); // window.scrollTo(0, 50);

        // automatic save when making tierlist
        // https://stackoverflow.com/questions/3219758/detect-changes-in-the-dom/3219767#3219767
        var targetNode = document.getElementsByClassName('grid-container')[0];
        var config = { subtree: true, childList: true, characterData: true,}; // works with this config

        var observer = new MutationObserver(SaveTierlistV2);
        observer.observe(targetNode, config); // detect dom change when creating tierlist

        // delete button event
        document.querySelector('#deletetierlist').onclick = function(event){
            event.preventDefault(); // disable default link click

            if (confirm('Delete tierlist from localstorage?')) {
                let season = document.querySelector("#content .season_nav .on").textContent
                localStorage.removeItem(season);
                localStorage.removeItem('tier_names'+season);
                RenderTierlist();
            }
        };
    }

    function SaveTierlist(){
        let season = document.querySelector("#content .season_nav .on").textContent
        let tierlist = {}
        for(let tier of document.getElementsByClassName('grid-container')[0].querySelectorAll('ul.droptrue')){
            for(let anime of tier.querySelectorAll('li')){
                tierlist[anime.id] = tier.id
            }
        }
        localStorage.setItem(season, JSON.stringify(tierlist));

        let tier_names = Array.from(document.querySelectorAll('ul div.textarea')).map(tier => tier.textContent)
        localStorage.setItem('tier_names'+season, JSON.stringify(tier_names));
    }

    function SaveTierlistV2(){
        let season = document.querySelector("#content .season_nav .on").textContent
        let tierlist = {version:2}

        tierlist.tiers = Array.from(document.querySelectorAll('.grid-container')[0].querySelectorAll('ul.droptrue')).map(tier => Array.from(tier.querySelectorAll('li')).map(anime => anime.id))
        tierlist.tier_names = Array.from(document.querySelectorAll('ul div.textarea')).map(tier => tier.textContent)

        localStorage.setItem(season, JSON.stringify(tierlist));
    }

    // anime count per season
    let seasonal = document.querySelectorAll('.seasonal-anime-list:nth-child(1) .seasonal-anime'),
        count = 0,
        cours = 0
    Array.from(seasonal).forEach(anime => {
        let [episodes, duration] = Array.from(anime.querySelectorAll('.info .item:nth-child(2) span')).map(info => parseInt(info.textContent) ?? 0)
        let members = anime.querySelector('.member').textContent
            members = members.match(/[\d.]+/) * ( members.match(/M/) ? 1000000 : ( members.match(/K/) ? 1000 : 1 ) )
        if(duration > 15 || members > 2000) count++
        if(episodes > 10) cours += episodes/13
    })
    document.querySelectorAll('.anime-header')[0].innerText += ` (${count})`//+` (${cours.toFixed(0)})`

    // buggy, zooms images
    // https://www.geeksforgeeks.org/how-to-take-screenshot-of-a-div-using-javascript/
    // download image button
    //     document.getElementById('download').addEventListener("click", function() {
    //         function download(canvas, filename) {
    //             const data = canvas.toDataURL("image/png;base64");
    //             const donwloadLink = document.querySelector("#download");
    //             donwloadLink.download = filename;
    //             donwloadLink.href = data;
    //         }

    //        html2canvas(document.querySelector(".grid-container"), {
    //            useCORS: true,
    //            onrendered: function (canvas) {
    //                document.body.appendChild(canvas);
    //            }}).then((canvas) => {
    //            // document.body.appendChild(canvas);

    //            download(canvas, "seasonal tierlist");
    //        });
    //     });

})();