CHYOA story map user script

chyoa-story-map.user.js

// ==UserScript==
// @name     CHYOA story map fixer
// @description Adjust the left-margin and a few other small adjustments to make deep stories less of a pain.
// @version  0.2.0
// @grant    none
// @include https://chyoa.com/story/*
// @updateUrl https://gist.github.com/stranger-danger-zamu/410ee603ce2ffcd7dbf02bd9ae3b0aa7/raw/chyoa-story-map.user.js
// @match  https://chyoa.com/story/*/map
// ==/UserScript==

const node = document.getElementById('content');
const config = {attributes: false, childList: true, subtree: true };

// From https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js)
function shadeRGBColor(color, percent) {
    var f=color.split(","),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=parseInt(f[0].slice(4)),G=parseInt(f[1]),B=parseInt(f[2]);
    return "rgb("+(Math.round((t-R)*p)+R)+","+(Math.round((t-G)*p)+G)+","+(Math.round((t-B)*p)+B)+")";
}


const callback = () => {
  Array.from(document.querySelectorAll('.story-map-chapter')).forEach(x=>{
    if (x.dataset.adjusted_indent) {
      return
    }
    margin = x.style['margin-left'];
    indent = parseInt(margin.replace('px','')) / 30 
    margin = `${Math.min(indent, document.body.clientWidth - 300 - Math.min(indent, 200 ))}px`;
    x.style['margin-left'] = margin;
    x.style['min-width'] = '500px';
    x.dataset.adjusted_indent = true;
    color = window.getComputedStyle(x).getPropertyValue('background-color');
    x.style['background-color'] = shadeRGBColor(color, -0.005*indent);
  })
};
callback();

const observer = new MutationObserver(callback);
observer.observe(node, config);