Raw Source Toggle Dropdown

• Minified Source

Jabster28 / Tetr.io colour change

// ==UserScript==
// @namespace     https://openuserjs.org/users/Jabster28
// @name          Tetr.io colour change
// @description   Changes the colour of some elements in tetr.io
// @copyright     2020, Jabster28 (https://openuserjs.org/users/Jabster28)
// @license MIT
// @version       0.0.1
// @include       https://tetr.io*
// @grant none
// ==/UserScript==

// ==OpenUserJS==
// @author Jabster28
// ==/OpenUserJS==

/**
 *
 * Please begin typing or paste your User script now.
 *
 */

/* bunch of code that just shifts a hex color by an angle in degrees, minified for size */
function changeHue(r, a) {
  var e = rgbToHSL(r);
  return e.h += a, e.h > 360 ? e.h -= 360 : e.h < 0 && (e.h += 360), hslToRGB(e)
}

function rgbToHSL(r) {
  3 == (r = r.replace(/^\s*#|\s*$/g, "")).length && (r = r.replace(/(.)/g, "$1$1"));
  var a = parseInt(r.substr(0, 2), 16) / 255,
    e = parseInt(r.substr(2, 2), 16) / 255,
    n = parseInt(r.substr(4, 2), 16) / 255,
    t = Math.max(a, e, n),
    s = Math.min(a, e, n),
    o = t - s,
    u = (t + s) / 2;
  return {
    h: 0 == o ? 0 : t == a ? (e - n) / o % 6 * 60 : t == e ? 60 * ((n - a) / o + 2) : 60 * ((a - e) / o + 4),
    s: 0 == o ? 0 : o / (1 - Math.abs(2 * u - 1)),
    l: u
  }
}

function hslToRGB(r) {
  var a, e, n, t = r.h,
    s = r.s,
    o = r.l,
    u = (1 - Math.abs(2 * o - 1)) * s,
    h = u * (1 - Math.abs(t / 60 % 2 - 1)),
    l = o - u / 2;
  return t < 60 ? (a = u, e = h, n = 0) : t < 120 ? (a = h, e = u, n = 0) : t < 180 ? (a = 0, e = u, n = h) : t < 240 ? (a = 0, e = h, n = u) : t < 300 ? (a = h, e = 0, n = u) : (a = u, e = 0, n = h), rgbToHex(a = normalize_rgb_value(a, l), e = normalize_rgb_value(e, l), n = normalize_rgb_value(n, l))
}

function normalize_rgb_value(r, a) {
  return (r = Math.floor(255 * (r + a))) < 0 && (r = 0), r
}

function rgbToHex(r, a, e) {
  return "#" + ((1 << 24) + (r << 16) + (a << 8) + e).toString(16).slice(1)
}
// original code is here https://stackoverflow.com/a/17433060

// how much to shift the colors by, 180 means green (in this case)
deg = 180
// Put the css here in a identifier: styles pair
function redefine() {
  css = {
    "#header": {
      "background": `linear-gradient(to bottom,${changeHue("472869", deg)} 0,${changeHue("#221344", deg)} 100%)`,
      "border-bottom": "2px solid " + changeHue("#351d77", deg),
    },
    "#footer": {
      "background": `linear-gradient(to bottom,${changeHue("251c3f", deg)} 0,${changeHue("#371d53", 180)} 100%)`,
      "border-top": `2px solid ${changeHue("#3f1c7a", deg)}`
    },
    "#roommodeblurb": {
      "color": changeHue("#634d83", deg)
    },
    ".scroller_player": {
      "background-color": changeHue("#372b51", deg),
      "border-top": "3px solid " + changeHue("#453469", deg),
      "border-right": "3px solid " + changeHue("#302742", deg),
      "border-bottom": "3px solid " + changeHue("#211c2c", deg),
    },
    ".scroller_player h1": {
      "color": changeHue("d9bef3", deg),
    },
    ".precord": {
      "color": changeHue("d9bef3", deg),
    },
    "#menus[data-menu-type=lobby] .keypairs td, #menus[data-menu-type=victory] .keypairs td": {
      "color": changeHue("#9456ab", deg)
    },
    "#startroom": {
      "color": changeHue("#b190e2", deg),
    },
    /* can't get the playing.specating button to change w/o breaking it */
    // "#room_switchbracket": {
    //     "color": changeHue("#b190e2", deg),
    //     "background": `linear-gradient(to bottom,${changeHue("#2e1c49", deg)} 0,${changeHue("#221437", deg)} 100%)`,
    //     // "clip-path": "polygon(0 100%,0 0,90% 0,100% 100%)",
    //     // "filter": `brightness(1) drop-shadow(0 -2px ${changeHue("#16101e", deg)}) drop-shadow(-2px 0 ${changeHue("#16101e", deg)}) drop-shadow(2px 0 ${changeHue("#16101e", deg)}) drop-shadow(0 4px 8px #0004)`
    // },
    "#swb_addendum": {
      "color": changeHue("#634c85", deg)
    }
  }
}

function addStyles(element, styles) {
  for (id in styles) {
    element.style[id] = styles[id];
  }
}

// actual usage
colorChange = setInterval(() => {
  redefine()
  for (var i = 0; i < Object.keys(css).length; i++) {
    var nFilter = document.querySelectorAll(Object.keys(css)[i]);
    for (var j = 0; j < nFilter.length; j++) {

      var styles = Object.values(css)[i]
      addStyles(nFilter[j], styles);
    }
  }
}, 200)
// call this to stop it from updating again
stopColorChange = function () {
  clearInterval(colorChange)
  for (var i = 0; i < Object.keys(css).length; i++) {
    var nFilter = document.querySelectorAll(Object.keys(css)[i]);
    addStyles(nFilter, {});
  }
}