Add flags to the posts when viewing archived /mlp/ threads on Desuarchive

flaggotry.user.js

// ==UserScript==
// @name        Desu Flaggotry
// @namespace   https://desuarchive.org/mlp/thread/
// @description Add flags to the posts when viewing archived /mlp/ threads on Desuarchive
// @version     1.0.0
// @author      Anonymous
// @icon        https://s.4cdn.org/image/flags/mlp/anf.gif
// @match       https://desuarchive.org/mlp/thread/*
// @run-at      document-end
// @grant       GM_addStyle
// ==/UserScript==

/**
 * Original script by nnuudev (https://gist.github.com/nnuudev/69e4bd8e1c904c55ec9cc873354002ad)
 * Adapted to circumvent CSP issues
 */

/* global backend_vars */
(function () {
'use strict';
const spritesheet = 'https://desu-usergeneratedcontent.xyz/mlp/image/1668/44/1668442725857.png';
GM_addStyle(`
.bfl {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  background: url(${spritesheet}) no-repeat
}
.bfl-4cc {background-position:    0px    0px} .bfl-bm  {background-position:    0px  -16px}
.bfl-ab  {background-position:  -16px    0px} .bfl-bp  {background-position:  -16px  -16px}
.bfl-ada {background-position:  -32px    0px} .bfl-bs  {background-position:  -32px  -16px}
.bfl-aj  {background-position:  -48px    0px} .bfl-cb  {background-position:  -48px  -16px}
.bfl-an  {background-position:  -64px    0px} .bfl-cg  {background-position:  -64px  -16px}
.bfl-anf {background-position:  -80px    0px} .bfl-che {background-position:  -80px  -16px}
.bfl-apb {background-position:  -96px    0px} .bfl-cl  {background-position:  -96px  -16px}
.bfl-au  {background-position: -112px    0px} .bfl-co  {background-position: -112px  -16px}
.bfl-bb  {background-position: -128px    0px} .bfl-day {background-position: -128px  -16px}
.bfl-dd  {background-position:    0px  -32px} .bfl-eqs {background-position:    0px  -48px}
.bfl-der {background-position:  -16px  -32px} .bfl-eqt {background-position:  -16px  -48px}
.bfl-dis {background-position:  -32px  -32px} .bfl-era {background-position:  -32px  -48px}
.bfl-dt  {background-position:  -48px  -32px} .bfl-fau {background-position:  -48px  -48px}
.bfl-eqa {background-position:  -64px  -32px} .bfl-fl  {background-position:  -64px  -48px}
.bfl-eqf {background-position:  -80px  -32px} .bfl-fle {background-position:  -80px  -48px}
.bfl-eqi {background-position:  -96px  -32px} .bfl-gi  {background-position:  -96px  -48px}
.bfl-eqp {background-position: -112px  -32px} .bfl-ht  {background-position: -112px  -48px}
.bfl-eqr {background-position: -128px  -32px} .bfl-iz  {background-position: -128px  -48px}
.bfl-li  {background-position:    0px  -64px} .bfl-par {background-position:    0px  -80px}
.bfl-lt  {background-position:  -16px  -64px} .bfl-pc  {background-position:  -16px  -80px}
.bfl-ly  {background-position:  -32px  -64px} .bfl-pce {background-position:  -32px  -80px}
.bfl-ma  {background-position:  -48px  -64px} .bfl-pi  {background-position:  -48px  -80px}
.bfl-mau {background-position:  -64px  -64px} .bfl-plu {background-position:  -64px  -80px}
.bfl-min {background-position:  -80px  -64px} .bfl-pm  {background-position:  -80px  -80px}
.bfl-ni  {background-position:  -96px  -64px} .bfl-pp  {background-position:  -96px  -80px}
.bfl-nur {background-position: -112px  -64px} .bfl-qc  {background-position: -112px  -80px}
.bfl-oct {background-position: -128px  -64px} .bfl-rar {background-position: -128px  -80px}
.bfl-rd  {background-position:    0px  -96px} .bfl-spt {background-position:    0px -112px}
.bfl-rlu {background-position:  -16px  -96px} .bfl-ss  {background-position:  -16px -112px}
.bfl-s1l {background-position:  -32px  -96px} .bfl-sta {background-position:  -32px -112px}
.bfl-sco {background-position:  -48px  -96px} .bfl-stl {background-position:  -48px -112px}
.bfl-shi {background-position:  -64px  -96px} .bfl-sun {background-position:  -64px -112px}
.bfl-sil {background-position:  -80px  -96px} .bfl-sus {background-position:  -80px -112px}
.bfl-son {background-position:  -96px  -96px} .bfl-swb {background-position:  -96px -112px}
.bfl-sp  {background-position: -112px  -96px} .bfl-tfa {background-position: -112px -112px}
.bfl-spi {background-position: -128px  -96px} .bfl-tfo {background-position: -128px -112px}
.bfl-tfp {background-position:    0px -128px}
.bfl-tfs {background-position:  -16px -128px}
.bfl-tft {background-position:  -32px -128px}
.bfl-tfv {background-position:  -48px -128px}
.bfl-tp  {background-position:  -64px -128px}
.bfl-ts  {background-position:  -80px -128px}
.bfl-twi {background-position:  -96px -128px}
.bfl-tx  {background-position: -112px -128px}
.bfl-vs  {background-position: -128px -128px}
.bfl-ze  {background-position:    0px -144px}
.bfl-zs  {background-position:  -16px -144px}
`);

function addFlag(post) {
  if (!post.exif) return;
  const exif = JSON.parse(post.exif);
  if ('troll_country_code' in exif && 'troll_country_name' in exif) {
    const board_flag = exif.troll_country_code.toLowerCase();
    const flag_name = exif.troll_country_name;
    const parentNode = document.querySelector(`article[id='${post.num}'] .post_poster_data`);
    const flag = document.createElement('span');
    flag.title = flag_name;
    flag.classList.add('bfl', `bfl-${board_flag}`);
    parentNode.append(flag);
  }
}

fetch(`${backend_vars.api_url}_/api/chan/thread/?board=${backend_vars.board_shortname}&num=${backend_vars.thread_id}`)
  .then(resp => resp.json())
  .then(data => {
    const thread = data[backend_vars.thread_id];
    addFlag(thread.op);
    for (const postId in thread.posts) {
      addFlag(thread.posts[postId]);
    }
  });
})();