☰

osu! Mark User With Modes Icons

Mark osu, taiko, ctb and mania icons in osu user profile page

// ==UserScript==
// @name        osu! Mark User With Modes Icons
// @namespace   https://osu.ppy.sh/u/376831
// @description Mark osu, taiko, ctb and mania icons in osu user profile page
// @include     *osu.ppy.sh/u/*
// @version     1.01
// @grant       none
// ==/UserScript==
var transparent = 0.3;
var cookiesSaveDays = 30;
addLoadEvent(loadEvent);
function loadEvent() {
  var userNameElement = document.getElementsByClassName('profile-username');
  addModesImgsToEnd(userNameElement[0].parentNode.parentNode);
  setImgsTransparentBySetting(readImgsSetting());
  setModeImgsFunctions();
}
function createModeImg(modeType) {
  var img = document.createElement('img');
  img.setAttribute('id', 'modeType' + modeType);
  img.setAttribute('src', 'https://osu.ppy.sh/forum/images/icons/misc/' + modeType + '.gif');
  img.style['cursor'] = 'pointer';
  setImgTransparent(img, true);
  return img;
}
function addModesImgsToEnd(element) {
  var imgs = document.createElement('div');
  var osu = createModeImg('osu');
  var taiko = createModeImg('taiko');
  var ctb = createModeImg('ctb');
  var mania = createModeImg('mania');
  imgs.appendChild(osu);
  imgs.appendChild(taiko);
  imgs.appendChild(ctb);
  imgs.appendChild(mania);
  element.appendChild(imgs);
}
function setModeImgFunctions(element) {
  element.onmouseover = function () {
    if (element.style['opacity'] == transparent) {
      setImgTransparent(element, false);
    }
  };
  element.onmousedown = function () {
    var setting = readImgsSetting();
    switch (element.id) {
      case 'modeTypeosu':
        setting = (setting.substr(0, 1) == '1' ? '0' : '1') + setting.substr(1, 3);
        break;
      case 'modeTypetaiko':
        setting = setting.substr(0, 1) + (setting.substr(1, 1) == '1' ? '0' : '1') + setting.substr(2, 2);
        break;
      case 'modeTypectb':
        setting = setting.substr(0, 2) + (setting.substr(2, 1) == '1' ? '0' : '1') + setting.substr(3, 1);
        break;
      case 'modeTypemania':
        setting = setting.substr(0, 3) + (setting.substr(3, 1) == '1' ? '0' : '1');
        break;
    };
    saveImgsSetting(setting);
  };
  element.onmouseout = function () {
    setImgsTransparentBySetting(readImgsSetting());
  };
  element.onmouseup = function () {
    setImgsTransparentBySetting(readImgsSetting());
  };
}
function setModeImgsFunctions() {
  setModeImgFunctions(document.getElementById('modeTypeosu'));
  setModeImgFunctions(document.getElementById('modeTypetaiko'));
  setModeImgFunctions(document.getElementById('modeTypectb'));
  setModeImgFunctions(document.getElementById('modeTypemania'));
}
function setImgTransparent(element, boolean) {
  if (boolean) {
    element.style['filter'] = 'alpha(opacity=' + transparent * 100 + ')';
    element.style['-moz-opacity'] = transparent;
    element.style['-khtml-opacity'] = transparent;
    element.style['opacity'] = transparent;
  } else {
    element.style['filter'] = 'alpha(opacity=100)';
    element.style['-moz-opacity'] = '1';
    element.style['-khtml-opacity'] = '1';
    element.style['opacity'] = '1';
  }
}
function setImgsTransparentBySetting(setting) {
  setImgTransparent(document.getElementById('modeTypeosu'), setting.substr(0, 1) == '0');
  setImgTransparent(document.getElementById('modeTypetaiko'), setting.substr(1, 1) == '0');
  setImgTransparent(document.getElementById('modeTypectb'), setting.substr(2, 1) == '0');
  setImgTransparent(document.getElementById('modeTypemania'), setting.substr(3, 1) == '0');
}
function getImgsTransparentSetting() {
  var std = document.getElementById('modeTypeosu').style['opacity'] == transparent ? '0' : '1';
  var taiko = document.getElementById('modeTypetaiko').style['opacity'] == transparent ? '0' : '1';
  var ctb = document.getElementById('modeTypectb').style['opacity'] == transparent ? '0' : '1';
  var mania = document.getElementById('modeTypemania').style['opacity'] == transparent ? '0' : '1';
  return (std + taiko + ctb + mania);
}
function readImgsSetting() {
  var name = trim(document.getElementsByClassName('profile-username') [0].innerHTML);
  var setting = getCookie('osuUserModesIconsSetting');
  if (!setting) {
    return '0000';
  } else {
    var index = setting.indexOf(name);
    if (index == - 1) {
      return '0000';
    } else {
      return setting.substr(index + name.length + 1, 4);
    }
  }
}
function saveImgsSetting(newSetting) {
  var name = trim(document.getElementsByClassName('profile-username') [0].innerHTML);
  var setting = getCookie('osuUserModesIconsSetting');
  if (!setting) {
    addCookie('osuUserModesIconsSetting', name + ',' + newSetting);
  } else {
    var index = setting.indexOf(name);
    if (index == - 1) {
      addCookie('osuUserModesIconsSetting', setting + ',' + name + ',' + newSetting);
    } else {
      addCookie('osuUserModesIconsSetting', setting.substr(0, index + name.length + 1) + newSetting + setting.substr(index + name.length + 5));
    }
  }
}
function addCookie(name, value) {
  var exp = new Date();
  exp.setTime(exp.getTime() + cookiesSaveDays * 24 * 60 * 60 * 1000);
  document.cookie = name + '=' + value + ';expires=' + exp.toGMTString() + ';path=/';
}
function removeCookie(name) {
  document.cookie = name + '=;expires=' + (new Date(0)).toGMTString() + ';path=/';
}
function getCookie(name) {
  var arr,
  reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
  if (arr = document.cookie.match(reg)) {
    return unescape(arr[2]);
  } 
  else {
    return null;
  }
}
function trim(str) {
  str = str.replace(/^(\s|\u00A0)+/, '');
  for (var i = str.length - 1; i >= 0; i--) {
    if (/\S/.test(str.charAt(i))) {
      str = str.substring(0, i + 1);
      break;
    }
  }
  return str;
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function () {
      oldonload();
      func();
    }
  }
}