Skip to content

Instantly share code, notes, and snippets.

@Armster15

Armster15/AniList Stars to Smileys.user.js

Last active May 22, 2022 20:25
Show Gist options
  • Save Armster15/b82176835de0965485a72d64c0c09bac to your computer and use it in GitHub Desktop.
Save Armster15/b82176835de0965485a72d64c0c09bac to your computer and use it in GitHub Desktop.
Download ZIP
Converts the 5 star system to fire, smiley, meh, and frown icons, effectively creating a 4 point smiley system :)
Raw
AniList Stars to Smileys.user.js
// ==UserScript==
// @name AniList Stars to Smileys
// @version 1.0.0
// @description Converts the 5 star system to fire, smiley, meh, and frown icons
// @author Armster15
// @license The Unlicense
// @match https://anilist.co/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=anilist.co
// @grant none
// @namespace https://gist.github.com/Armster15/b82176835de0965485a72d64c0c09bac
// @supportURL https://gist.github.com/Armster15/b82176835de0965485a72d64c0c09bac
// ==/UserScript==
(function () {
"use strict";
// Creates a "locationchange" event for SPAs
// https://stackoverflow.com/a/52809105/5721784
(() => {
let oldPushState = history.pushState;
history.pushState = function pushState() {
let ret = oldPushState.apply(this, arguments);
window.dispatchEvent(new Event('pushstate'));
window.dispatchEvent(new Event('locationchange'));
return ret;
};
let oldReplaceState = history.replaceState;
history.replaceState = function replaceState() {
let ret = oldReplaceState.apply(this, arguments);
window.dispatchEvent(new Event('replacestate'));
window.dispatchEvent(new Event('locationchange'));
return ret;
};
window.addEventListener('popstate', () => {
window.dispatchEvent(new Event('locationchange'));
});
})();
var fire = `
<svg
color="#FF6004"
class="svg-inline--fa fa-w-16 fa-lg"
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<path
fill="currentColor"
d="M323.56 51.2c-20.8 19.3-39.58 39.59-56.22 59.97C240.08 73.62 206.28 35.53 168 0 69.74 91.17 0 209.96 0 281.6 0 408.85 100.29 512 224 512s224-103.15 224-230.4c0-53.27-51.98-163.14-124.44-230.4zM224 464c-97.05 0-176-81.83-176-182.4 0-45.37 44.3-133.21 120.16-214.09 22.34 23.36 42.82 47.72 60.34 71.86l36.62 50.44 39.41-48.29c5.83-7.15 11.85-14.15 18.01-20.97C368.89 177.96 400 250.42 400 281.6 400 382.17 321.05 464 224 464zm89.47-220.84l-51.3 58.52S181.75 198.98 175.69 192C133.27 242.86 112 272.62 112 306.41 112 374.23 163.37 416 226.5 416c25.26 0 48.62-7.87 67.58-21.13 43.08-30.14 53.18-88.58 29.26-134.24-2.95-5.62-6.24-11.48-9.87-17.47z"
id="path9" />
<path
style="fill:rgb(var(--color-foreground)); stroke-width:0.657253"
d="M 208.34917,462.95026 C 148.75683,457.26836 95.688794,420.24186 68.111449,365.10398 57.112287,343.11236 51.002612,321.05848 48.901858,295.7638 47.061974,273.61018 50.478248,254.77464 61.239942,227.73813 80.181365,180.15174 115.27228,126.65831 160.33926,76.668812 l 7.91007,-8.774065 1.97547,2.263018 c 1.0865,1.244659 5.23858,5.784516 9.22684,10.088569 21.21067,22.890126 34.57992,39.772216 68.00407,85.872446 9.57946,13.21247 17.62842,23.89387 17.88657,23.73645 0.25815,-0.15742 10.25943,-12.2712 22.22506,-26.91953 21.14571,-25.88658 32.38202,-39.26866 34.32834,-40.88397 0.79133,-0.65674 2.16955,0.84072 8.1964,8.90545 36.71368,49.12786 65.07231,108.41967 69.17406,144.62809 1.28294,11.32526 -0.97885,34.31072 -4.98053,50.6146 -12.69478,51.72189 -47.2754,95.58317 -93.92104,119.12739 -28.59385,14.43264 -60.79456,20.59979 -92.0154,17.623 z m 29.99968,-47.26752 c 13.30767,-1.34312 27.09428,-5.14477 39.01187,-10.7575 30.40937,-14.32166 49.79559,-38.8418 56.94603,-72.02665 1.28441,-5.96092 1.48701,-8.82642 1.48701,-21.03209 0,-12.18879 -0.20305,-15.06856 -1.47739,-20.95297 -3.0748,-14.19827 -7.46126,-25.24118 -15.83627,-39.8679 -2.26895,-3.96265 -4.3542,-7.45053 -4.63389,-7.75085 -0.27968,-0.30033 -11.9697,12.51965 -25.97782,28.48884 l -25.4693,29.03488 -1.46174,-1.54147 c -0.80396,-0.84781 -15.02447,-18.84365 -31.60114,-39.99077 -35.19685,-44.90115 -52.51575,-66.7471 -53.29928,-67.23135 -0.60762,-0.37552 -3.49068,2.9567 -16.08827,18.59464 -29.74512,36.92396 -43.06591,60.00826 -46.96728,81.3921 -1.34899,7.39396 -1.33636,23.20501 0.0258,32.31265 6.72413,44.95831 37.00007,77.34569 82.63214,88.39493 3.49968,0.8474 9.12203,1.86092 12.49409,2.25226 3.37206,0.39135 7.01831,0.81497 8.10277,0.94139 4.43586,0.51712 15.72767,0.38428 22.11265,-0.26014 z"
id="path258" />
</svg>
`.trim();
var smiley = `
<svg
color="rgb(123,213,85)"
class="svg-inline--fa fa-w-16 fa-lg"
viewBox="0 0 496 512"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<path
fill="currentColor"
d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"
class=""
id="path302" />
<path
style="fill:rgb(var(--color-foreground));stroke-width:0.633663"
d="M 230.48319,454.93383 C 193.12176,451.61605 157.32024,437.63308 126.72753,414.41006 117.1983,407.1764 99.235222,389.55838 91.845418,380.19802 67.931274,349.90695 53.791531,315.43627 49.347471,276.59406 c -1.026686,-8.97349 -1.026686,-32.21463 0,-41.18812 3.848314,-33.63524 14.280197,-62.32915 32.712967,-89.9802 8.478391,-12.71846 13.053457,-18.21414 25.617492,-30.77235 31.67672,-31.662016 69.54405,-50.348715 115.05474,-56.776977 12.55218,-1.772961 40.32998,-1.593259 52.91089,0.342296 25.19425,3.876096 48.75456,11.790456 69.06931,23.201709 51.95487,29.184212 88.50139,79.621042 99.41035,137.193442 3.36796,17.77456 4.29156,41.76863 2.28459,59.35124 -5.08016,44.50609 -24.13513,84.77696 -55.34881,116.97442 -33.5539,34.61143 -77.73635,55.6198 -126.18771,60.00115 -8.20117,0.74161 -25.99966,0.73808 -34.3881,-0.007 z m 35.02176,-55.79743 c 24.06256,-2.33822 51.80909,-12.56982 71.60396,-26.40412 15.25166,-10.65913 30.69923,-25.68764 35.16832,-34.21427 1.77718,-3.39072 1.90099,-4.08087 1.90099,-10.59722 0,-6.60316 -0.10623,-7.1735 -2.01676,-10.82813 -2.57724,-4.92999 -7.91337,-9.85441 -12.71803,-11.73675 -5.09396,-1.99568 -12.91253,-1.96155 -18.21571,0.0795 -3.33964,1.28536 -4.99634,2.66444 -13.62376,11.34066 -10.32346,10.38188 -17.41273,15.92177 -27.56436,21.54009 -26.01394,14.39716 -57.74553,17.21579 -86.59917,7.69237 -8.13,-2.68339 -21.18148,-9.30644 -28.41073,-14.41719 -3.69709,-2.61368 -9.80947,-8.06303 -15.84158,-14.12318 -10.66025,-10.70982 -13.03121,-12.30007 -20.08012,-13.46811 -15.80259,-2.61857 -30.05031,11.71279 -27.46099,27.62221 0.92654,5.69287 3.15501,9.71928 8.99867,16.2589 28.02291,31.36028 68.02996,50.25728 110.46323,52.17638 5.87913,0.26589 16.18437,-0.12322 24.39604,-0.92117 z M 176.07543,239.23786 c 5.92697,-1.57752 10.32018,-4.14083 14.71877,-8.58798 18.0258,-18.22481 8.84122,-48.89878 -16.21994,-54.17013 -2.43961,-0.51314 -5.43367,-0.93299 -6.65347,-0.93299 -3.62256,0 -10.19517,1.62379 -14.25956,3.52288 -4.91125,2.29478 -12.13136,9.40004 -14.48875,14.25826 -9.06942,18.69074 0.74508,40.48886 20.6411,45.84414 4.37014,1.17628 11.97404,1.20706 16.26185,0.0658 z m 160.05666,-0.0497 c 10.53101,-2.74301 19.38588,-11.05861 22.58328,-21.20798 1.78203,-5.65665 1.78358,-14.04871 0.004,-19.68927 -6.65721,-21.09637 -32.13486,-29.30626 -50.04039,-16.12495 -12.63859,9.304 -16.4768,26.65508 -9.11302,41.19647 2.01078,3.97073 8.95391,10.8806 13.21358,13.15029 6.68671,3.5629 15.8953,4.61787 23.35291,2.67542 z"
id="path384" />
</svg>
`.trim();
var meh = `
<svg
color="rgb(247,154,99)"
class="svg-inline--fa fa-w-16 fa-lg"
viewBox="0 0 496 512"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<path
fill="currentColor"
d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm8 144H160c-13.2 0-24 10.8-24 24s10.8 24 24 24h176c13.2 0 24-10.8 24-24s-10.8-24-24-24z"
class=""
id="path428" />
<path
style="fill:rgb(var(--color-foreground));stroke-width:0.633663"
d="M 233.18812,455.2195 C 193.32266,451.70862 158.27498,438.28217 126.72753,414.4354 115.56055,405.99427 97.197069,387.52614 88.903714,376.39604 78.658181,362.64601 71.222552,349.97192 64.951774,335.56974 42.151226,283.2034 42.866947,223.75022 66.921822,171.92252 81.02444,141.53757 104.75818,113.06573 132.43564,93.329808 c 26.64277,-18.998113 56.3356,-30.656434 90.29703,-35.453395 12.55218,-1.772961 40.32998,-1.593259 52.91089,0.342296 17.91585,2.756326 35.31584,7.595022 50.37624,14.008935 32.55351,13.863868 61.30056,36.665706 82.84902,65.714916 18.48467,24.91898 31.30833,55.47631 36.24772,86.37427 3.5787,22.38625 3.118,47.76067 -1.27823,70.40179 -12.14014,62.52334 -55.20381,116.66031 -114.01653,143.33449 -9.9506,4.51304 -27.74386,10.50955 -37.70297,12.70627 -14.7203,3.24693 -24.00196,4.2771 -40.55445,4.50113 -8.53862,0.11557 -16.80792,0.0971 -18.37624,-0.041 z m 113.09509,-89.23491 c 18.49305,-9.06549 18.37861,-35.27637 -0.19203,-43.98195 l -3.59613,-1.68581 H 247.76238 153.0297 l -3.69284,1.86952 c -2.18187,1.10459 -5.0767,3.36426 -7.07499,5.52265 -12.15646,13.13043 -6.45184,34.0925 10.76783,39.56729 2.01061,0.63924 21.85894,0.78099 96,0.68558 l 93.46535,-0.12029 z M 175.01832,239.45817 c 5.91933,-1.2344 11.23505,-4.19511 15.71435,-8.75245 13.99703,-14.24087 12.38255,-36.57557 -3.50849,-48.53637 -12.99469,-9.7808 -31.46031,-8.15588 -42.59611,3.74833 -4.48236,4.79166 -6.87446,9.49719 -8.2776,16.28292 -0.8604,4.16098 -0.901,5.7178 -0.26321,10.09369 2.74601,18.84033 20.25656,31.0582 38.93106,27.16388 z m 161.11377,-0.27001 c 14.26658,-3.71598 23.91926,-16.24497 23.90614,-31.02974 -0.0115,-13.00008 -6.69342,-23.74272 -18.17684,-29.22341 -21.45107,-10.23794 -45.89565,5.15897 -45.93308,28.93186 -0.0138,8.76586 2.65824,15.692 8.4643,21.9402 8.11356,8.73141 20.34926,12.34786 31.73948,9.38109 z"
id="path510" />
</svg>
`.trim();
var bad = `
<svg
color="rgb(232,93,117)"
class="svg-inline--fa fa-w-16 fa-lg"
viewBox="0 0 496 512"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<path
fill="currentColor"
d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z"
class=""
id="path554" />
<path
style="fill:rgb(var(--color-foreground));stroke-width:0.633663"
d="M 234.90009,455.23879 C 206.92184,453.45738 177.83963,445.03721 153.01726,431.53129 127.02819,417.39055 102.59981,395.75176 85.409016,371.64356 66.571267,345.2257 55.044995,316.07645 49.954083,281.9802 c -1.773828,-11.88018 -1.598228,-41.7261 0.318761,-54.17822 5.819186,-37.79949 21.064089,-71.75504 44.949985,-100.11881 6.771541,-8.04099 20.456191,-21.3526 28.658361,-27.877134 43.59258,-34.676328 99.36819,-49.548893 154.35918,-41.159871 55.19767,8.420554 104.9958,40.334504 136.04465,87.186465 17.34569,26.17422 27.50931,53.40732 31.89233,85.4545 1.57867,11.54273 1.57867,37.88301 0,49.42574 -4.36837,31.94008 -14.56118,59.30674 -31.74336,85.22772 -31.2642,47.16509 -81.71762,79.46702 -136.5726,87.43828 -15.63215,2.27158 -28.05148,2.80925 -42.9613,1.85992 z M 172.9514,389.83463 c 2.90077,-1.35302 5.44228,-3.46761 11.08911,-9.22636 8.13892,-8.30026 14.23575,-13.11243 22.06472,-17.41547 25.25326,-13.88 54.82578,-14.55544 80.30095,-1.83409 10.30932,5.14809 17.60345,10.75245 27.28363,20.96308 3.33322,3.51586 6.29756,5.96169 8.83199,7.28713 3.60538,1.8855 4.19755,1.99504 10.78513,1.99504 6.36224,0 7.28756,-0.15579 10.60716,-1.7859 12.21166,-5.9966 17.05279,-20.62291 10.9527,-33.09102 -1.9438,-3.97301 -12.3543,-15.12881 -20.29253,-21.74532 -35.84752,-29.87889 -85.10033,-39.0544 -129.7544,-24.17249 -13.48092,4.49279 -27.3154,11.7911 -38.62284,20.37528 -11.1612,8.47315 -22.43076,20.21826 -25.3982,26.46994 -5.03518,10.60791 -1.72685,23.34823 7.78932,29.99652 4.82501,3.37089 8.09485,4.26847 14.89701,4.08924 4.70331,-0.12392 6.36263,-0.45795 9.46625,-1.90558 z m 0.35553,-150.02147 c 5.25228,-0.83209 12.1129,-4.08545 16.1128,-7.64082 11.66088,-10.36494 14.15947,-28.71407 5.6707,-41.64444 -9.19832,-14.01117 -27.6905,-18.82986 -42.33012,-11.03038 -4.24301,2.26053 -11.1874,9.17613 -13.19472,13.14003 -4.73087,9.34215 -4.92053,20.59811 -0.5009,29.72784 4.31978,8.92348 13.45996,15.72514 23.46996,17.46513 4.13146,0.71816 6.15007,0.71491 10.77228,-0.0174 z m 164.8359,-1.22053 c 10.22072,-3.1762 18.61757,-12.27686 21.11909,-22.88923 2.6716,-11.33394 -0.34763,-22.09479 -8.52925,-30.39916 -6.2172,-6.31048 -13.67164,-9.44022 -22.52033,-9.45513 -16.39323,-0.0276 -29.77893,11.54113 -32.11867,27.75901 -1.40948,9.76986 1.57933,19.03921 8.53741,26.47742 4.36038,4.66125 11.69081,8.71339 17.58674,9.72164 4.66733,0.79816 11.0033,0.31493 15.92501,-1.21455 z"
id="path749" />
</svg>
`.trim();
function replaceStarsWithSmiles() {
document.querySelectorAll("div.score[score]").forEach((scoreEl) => {
var score = Number(scoreEl.getAttribute("score"));
if (score === 0) {
scoreEl.innerHTML = "";
} else if ((score === 1) | (score === 2)) {
scoreEl.innerHTML = bad;
} else if (score === 3) {
scoreEl.innerHTML = meh;
} else if (score === 4) {
scoreEl.innerHTML = smiley;
} else if (score === 5) {
scoreEl.innerHTML = fire;
}
});
};
function onMediaListElCreation() {
var mediaList = document.querySelector(".medialist");
if (!mediaList.classList.contains("POINT_5")) {
return;
}
// 1. Initial 5 star --> smiley replacer
replaceStarsWithSmiles();
// 2. Mutation observer for when the score attribute is changed for something
var scoreChangeConfig = { attributeFilter: ["score"], subtree: true };
var scoreChangeCallback = function (mutationsList, observer) {
console.log("MUTATION");
replaceStarsWithSmiles();
};
var scoreChangeObserver = new MutationObserver(scoreChangeCallback);
scoreChangeObserver.observe(mediaList, scoreChangeConfig);
// 3. Mutation observer for when score elements are added or removed
var numberOfScores = 0;
var scoreAppendConfig = { childList: true, subtree: true }
var scoreAppendCallback = (changes, observer) => {
if (
document.querySelectorAll("div.score[score]").length !== numberOfScores
) {
replaceStarsWithSmiles();
numberOfScores = document.querySelectorAll("div.score[score]").length;
}
}
var scoreAppendObserver = new MutationObserver(scoreAppendCallback);
scoreAppendObserver.observe(document, scoreAppendConfig);
window.addEventListener("locationchange", () => {
scoreAppendObserver.disconnect();
scoreChangeObserver.disconnect()
})
};
function setupStarReplacing() {
if(new RegExp("/user/.*/[animelist|mangalist]").test(window.location.pathname)) {
if (document.querySelector(".medialist")) onMediaListElCreation();
else {
// Wait for the .medialist element to be created first, then run actual code
// https://stackoverflow.com/a/47406751/5721784
new MutationObserver(check).observe(document, {
childList: true,
subtree: true,
});
function check(changes, observer) {
if (document.querySelector(".medialist")) {
observer.disconnect();
onMediaListElCreation();
}
}
}
}
}
setupStarReplacing();
window.addEventListener("locationchange", () => setupStarReplacing())
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment