Anime Recommendations - MAL

Get new anime recommendations based on your list.

اعتبارا من 20-05-2022. شاهد أحدث إصدار.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

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

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

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

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

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

ستحتاج إلى تثبيت إضافة مثل Stylus لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتتمكن من تثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

(لدي بالفعل مثبت أنماط للمستخدم، دعني أقم بتثبيته!)

// ==UserScript==
// @name         Anime Recommendations - MAL
// @namespace    https://greasyfork.org/en/users/670188-hacker09?sort=daily_installs
// @version      4
// @description  Get new anime recommendations based on your list.
// @author       hacker09
// @match        https://myanimelist.net/profile/*
// @icon         https://t3.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://myanimelist.net&size=64
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @run-at       document-end
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(async function() {
  'use strict';
  var $ = window.jQuery; //Defines That The Symbol $ Is A jQuery
  var css = 'overflow: hidden;'; //Suppose the user has chosen to see 20 or less recs
  var NumberORGenre = '?k='; //Assume the user wants numbers over genres

  if (GM_getValue('RecsAmount') === undefined || GM_getValue('RecsAmount') === null) { //If the variable doesn't exist yet define the variables
    GM_setValue('RecsAmount', '20'); //Set the user choice as 20 by default
    GM_setValue('Genre', ''); //Set the user choice as nothing by default
  } //Finishes the if condition

  if (GM_getValue('RecsAmount').match(/2[1-9]|3\d|40/) !== null) //If the user chose to see more than 20 recs
  { //Starts the if condition
    css = 'overflow-y: hidden; height: 130px;'; //Change the css
  } //Finishes the if condition

  const response = await (await fetch('https://api.makichan.xyz/anime/mal/' + location.href.split('/')[4] + '?k=' + GM_getValue('RecsAmount') + GM_getValue('Genre') )).json(); //Fetch

  document.querySelector("#statistics").insertAdjacentHTML('AfterEnd', `<div class="fav-slide-block mb12"><h5 style="cursor: pointer;"></h5><div class="btn-fav-slide-side left" id="recsArrows" style="display: none; left: 0px; opacity: 1;"><span class="btn-inner"></span></div><div class="btn-fav-slide-side right" id="recsArrows" style="display: none; right: 0px; opacity: 1;"><span class="btn-inner"></span></div><div class="fav-slide-outer" style="${css}"><ul class="fav-slide" data-slide="10" style="width: max-content;" id="anime_recs"></ul></div></div>`); //Add the base html

  response.recommendations.forEach(function(el) { //Foreach recommendation
    var year = ''; //Suppose the year is always = null
    if (el.release_year !== null) { //If the year is not null
      year = '·' + el.release_year; //Make the variable year hold the year for the recommendation entry
    } //Finishes the if condition

    document.querySelector("#anime_recs").insertAdjacentHTML('Beforeend', `<li class="btn-fav" title="${el.title}"><a href="https://myanimelist.net/anime/${el.mal}" class="link bg-center"><span class="title fs10">${el.title}</span><span class="users" style="left: 41px;top: 15px;">${el.affinity.toString().split('0.')[1] + '%'}</span><span class="users">${el.format.toUpperCase()}${year}</span><img src="${el.cover_url}" width="70" height="110" class="image lazyloaded" alt="${el.title}"></a></li>`); //Show all recs
  }); //Finishes adding all recommendations html to the page

  document.querySelectorAll("h5")[2].onclick = function() {
    var AmountInput = prompt('Enter a number between 1-40 of recommendations to be shown'); //Gets the user input
    var GenreInput = prompt('Write one of the following genres: action, adventure, comedy, drama, ecchi, fantasy, hentai, horror, mahou_shoujo, mecha, music, mistery, psychological, romance, sci-fi, slice_of_life, sports, supernatural, thriller\n\n*Press enter to disable Genre filtering.'); //Gets the user input
    GM_setValue("RecsAmount", AmountInput); //Defines the variable as the AmountInput
    GM_setValue("Genre", GenreInput); //Defines the variable as the GenreInput

    if (GenreInput !== '') //If the variable GenreInput isn't blank
    { //Starts the if condition
      GM_setValue("Genre", '&genre=' + GenreInput); //Defines the variable as '?genre=' + GenreInput
    } //Finishes the if condition

    location.reload(); //Reloads the page
  }; //Finishes the onclick event listener

  var h5index = 4; //Suppose that the user isn't using the script "Remove Anything Related To Manga On MAL And On Anime.Plus" by default
  if (document.querySelectorAll("div.user-statistics-stats.mt16")[1] === undefined) //If the user is using the script "Remove Anything Related To Manga On MAL And On Anime.Plus"
  { //Starts the if condition
    h5index = 2; //Change the index number
  } //Finishes the if condition

  document.querySelectorAll("h5")[h5index].innerText = 'Anime Recommendations (' + document.querySelectorAll("#anime_recs > li").length + ')'; //Show the amount of recs shown

  if (GM_getValue('RecsAmount').match(/1[1-9]|20/) !== null || GM_getValue('RecsAmount').match(/\d+/) === null) //If the user chose to see less than 21 recs and not more than 10 recs
  { //Starts the if condition

    document.querySelector("div.fav-slide-block.mb12").onmouseover = function() { //When the row is hovered
      document.querySelectorAll("#recsArrows").forEach(el => el.style.display = '') //Show the arrows
    }; //Finishes the onmouseover event listener

    document.querySelector("div.fav-slide-block.mb12").onmouseout = function() { //When the mouse leaves the row
      document.querySelectorAll("#recsArrows").forEach(el => el.style.display = 'none'); //Hide the arrows
    }; //Finishes the onmouseout event listener

    document.querySelectorAll("#recsArrows").forEach(function(el) { //Foeach arrow
      var LeftOrRight = ''; //Suppose the right arrow is clicked
      if (el.className.match('left') !== null) { //If the left arrow is clicked
        LeftOrRight = '-'; //Decrease the number
      } //Finishes the if condition

      el.onclick = function() //If the recommendation row arrows are clicked
      { //Starts the onclick event listener
        $("div.fav-slide-outer").animate({ scrollLeft: LeftOrRight + document.querySelectorAll("#anime_recs > li").length * 80 }, 1000); //Go right depending on the amount of recs added to the page
      }; //Finishes the onclick event listener
    }); //Finishes the foreach loop
  } //Finishes the if condition
})();