normalize-mal-scores.js

/*
* Normalize your MyAnimeList scores
*
* This is a tool to organize your anime into a list according to how good they are
* and then assign them scores using the full scale from 1 to 10, following these (or other) percentages:
* 10: 3.5%, 9: 8%, 8: 10%, 7: 14%, 6: 14.5%, 5: 14.5%, 4: 14%, 3: 10%, 2: 8%, 1: 3.5%
*
* HOW TO USE:
* Go to a myanimelist.net anime/manga list, and choose the 'Completed' view.
* Open a JavaScript console on your browser and paste this code into it and press enter.
* The script will show you a view to organize your list with instructions.
*/

var url = window.location.href.split('?')[0];
var type = "";

if (url.indexOf("myanimelist.net/animelist") > -1) {
  type = "anime";
} else if (url.indexOf("myanimelist.net/mangalist") > -1) {
  type = "manga";
} else {
  alert("Execute this on a MyAnimeList.net anime/manga list page!");
  throw new Error("Execute this on a MyAnimeList.net anime/manga list page!");
}

// Works only on the 'Completed' page
if (getParameterByName('status') != 2) {
  alert("Execute this on the 'Completed' page! \nRedirecting. \nTry again after the page loads.");
  window.location.replace(url + "?status=2");
  throw new Error("Redirecting");
}

var username = url.split('/').pop();

var titles_old = document.querySelectorAll('div table tbody tr a.animetitle span');
var titles_new = document.querySelectorAll('tbody.list-item tr.list-table-data td.data.title a.link.sort');
var titles = [];

var distribution = [0.035, 0.08, 0.10, 0.14, 0.145, 0.145, 0.14, 0.10, 0.08, 0.035];

if (titles_old.length > titles_new.length) {
  for (var i = 0; i < titles_old.length; i++) {
    titles[i] = titles_old[i].innerHTML;
  }
} else {
  for (var i = 0; i < titles_new.length; i++) {
    titles[i] = titles_new[i].innerHTML;
  }
}

// All completed anime titles in 'titles'

document.body.innerHTML = '';

$('body').append(`
  <div class="intro">
    <h2>Normalize your scores on MyAnimeList</h2>
    <p>
      Drag and drop until the best anime is at the top and the worst at the bottom,<br>
      with anime of equal value to you being close to each other.
      When you press 'give scores', each show will be given a score according to this normalization:<br>
      <span id="percentages">10: 3.5%, 9: 8%, 8: 10%, 7: 14%, 6: 14.5%, 5: 14.5%, 4: 14%, 3: 10%, 2: 8%, 1: 3.5%</span>
    </p>
    <p>
      As you reorder the list, you can press 'give scores' to recalculate the scores according to the new order.<br>
      When you're done, you can then copy the scores to your list. Also works for a manga list.
    </p>
    <p>
      You can also export the list in its current order, and import a list by copy & pasting an exported list.<br>
      It is also possible to input your own percentages.
    </p>
  <div>
`);

$('body').append(`
  <table>
    <tr>
      <td><button type='button' onclick='done();'>Give scores</button></td>
      <td><button type='button' onclick='exportList();'>Export list</button></td>
      <td><button type='button' onclick='importList();'>Import list</button></td>
      <td><button type='button' onclick='inputPercentages()'>Input new percentages</button></td>
    </tr>
  </table>
`);

$('body').append("<button type='button' onclick='done();' class='scrollButton'>Give scores</button>");
$('.scrollButton').hide();

$('body').append("<ul id=sortable></ul>");

$('head').append(`
  <meta charset="utf-8">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <style>
    #sortable {
      position: absolute;
      list-style-type: none;
      left: 50%;
      width: 700px;
      margin-left: -440px;
      margin-top: 45px;
      cursor:default;
    }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; text-align: left;}
    #sortable li span { position: absolute; margin-left: -1.3em; }
    .score {
      width: 30px;
      height: 30px;
      left: 50%;
      position: absolute;
      margin-left:370px;
      margin-top:-25px;
      border: 1px solid #ccc;
      background-color: white;
      text-align: center;
    }
    table {
      position: absolute;
      left: 20%;
      width: 450px;
    }
    .scrollButton {
      position: fixed;
      top: 50px;
      left: 50px;
      z-index: 600;
      opacity: 1;
    }
    .intro {
      width: 800px;
      margin: 0 auto;
      font-size: 12px;
    }
  </style>
`);

updateDraggableList();

$.getScript( "https://code.jquery.com/ui/1.11.4/jquery-ui.js", function( data, textStatus, jqxhr ) {
  $( "#sortable" ).sortable();
  $( "#sortable" ).disableSelection();
});

function done() {
  var distr_index = 0;
  var shows_per_score = titles.length * distribution[distr_index];
  var show_count = 0;
  var score = 10;

  $(".score").each(function(index, value) {
    if (show_count >= shows_per_score) {
      score--;
      show_count = 0;
      distr_index++;
      shows_per_score = titles.length * distribution[distr_index];
    }

    $(value).html(score);
    show_count++;
  });
}

function exportList() {
  var list_text = "";
  $('.score').empty();

  $('#sortable li').each(function(index) {
      list_text += $(this).text();
      list_text += "<br>";
  });

  window.open('data:text/html;charset=utf-8,<style>html,body{margin: 0;padding: 0;}</style><div style="white-space: pre;width: 100%;max-width:650px;font-size: 18px;color:#444;height: 100%;border: none;outline: none;margin:40px auto;padding: 30px;">' + list_text + '<br><br><br><br></div>');
}

function importList() {
  var importedList = prompt("Paste your list here");
  var lines = importedList.split("\n");

  for (var i = 0; i < lines.length; i++) {
    if (lines[i] != "") titles[i] = lines[i];
  }

  updateDraggableList();
}

function updateDraggableList() {
  $('#sortable').empty();

  for (var i = 0; i < titles.length; i++) {
    $('#sortable').append("<li class='ui-state-default'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span>" +
      titles[i] +
      '<div class="score"></div>' +
      "</li>"
    );
  }
}

function inputPercentages() {
  var inputPercentages = prompt("Input new percentages (follow the given syntax):", "0.035 0.08 0.10 0.14 0.145 0.145 0.14 0.10 0.08 0.035");
  var newPercentages = inputPercentages.split(" ");
  var introText = "";
  var scoreNum = 10;

  for (var i = 0; i < newPercentages.length; i++) {
    distribution[i] = parseFloat(newPercentages[i]);
    introText += scoreNum + ": " + 100 * distribution[i] + "%";
    if (scoreNum != 1) introText += ",";
    introText += " ";
    scoreNum--;
  }

  $("#percentages").text(introText);
}

// Show 'Give scores' button next to the list while scrolling
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.scrollButton').fadeIn();
  } else {
    $('.scrollButton').fadeOut();
  }
});

function getParameterByName(name) {
  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
  return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}