Raw Source
Fredo14 / CatWar Redesign 

// ==UserScript==
// @name         CatWar Redesign
// @name:ru      Вароредизайн
// @namespace    https://catwar.su/blog482084
// @version      11
// @description  Смена дизайна CatWar
// @author       Хвойница
// @copyright    2019–2020, Хвойница (https://catwar.su/cat209467)
// @updateURL    https://openuserjs.org/meta/Fredo14/CatWar_Redesign.meta.js
// @license      MIT; https://opensource.org/licenses/MIT
// @match        https://*.catwar.su/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function (win, document) {
  const VERSION = '11';
  const defaults = {};

  defaults.site = {
    body: {
      fontFamily: 'Verdana, sans-serif',
      fontSize: '15px',
      textColor: 'black',
      bgColor: '#bfad91',
    },
    siteTable: {
      bgColor: '#ffe6c2',
      borderLeft: '10px dashed #bfad91',
      borderRight: '10px dashed #bfad91',
      borderRadius: '15px',
    },
    links: {
      color: '#26486c',
      hoverColor: '#26486c',
    },
    input: {
      fontFamily: 'inherit',
      fontSize: '14px',
      textColor: 'white',
      bgColor: '#333',
      border: '1px solid black',
    },
    textarea: {
      fontFamily: 'inherit',
      fontSize: '14px',
      textColor: 'white',
      bgColor: 'black',
      border: '1px solid black',
    },
    mess: {
      textColor: 'black',
      bgColor: 'white',
      linkColor: '#0000cd',
      readBgColor: 'white',
      notReadBgColor: '#eb8d8d',
      supportBgColor: '#98fb98',
    },
    top: {
      pol0Color: '#561832',
      pol1Color: '#0f2189',
      textColor: 'black',
      bgColor: 'rgba(255, 255, 255, 0.5)',
      tableBorder: '1px solid #333',
    },
    status: {
      online: 'darkgreen',
      offline: '#561832',
      banned: '#333366',
      other: '#333333',
    },
    parsed: {
      textColor: 'inherit',
      linkColor: 'inherit',
      bgColor: 'inherit',
    },
    logo: {
      content: 'CatWar',
      fontFamily: 'Century Gothic, sans-serif',
      fontSize: '80px',
      textColor: 'black',
      bgColor: 'transparent',
      borderRadius: '15px',
    },
    menu: {
      fontFamily: 'Century Gothic, sans-serif',
      fontSize: '24px',
      textColor: 'black',
      bgColor: 'transparent',
      hoverTextColor: 'black',
      hoverBgColor: 'transparent',
      borderRadius: '15px',
    },
    buttons: {
      emblem: 'Игровая',
      kn1: 'Мой кот',
      kn2: 'Моя кошка',
      kn3: 'Лента',
      kn4: 'Игроки',
      kn5: 'Вход',
      kn6: 'Cообщения',
      kn7: 'Об игре',
      kn8: 'Блоги',
      kn9: 'Выход',
      kn10: 'Чат',
      kn11: 'Модерация',
      kn12: 'Забыл пароль',
      kn13: 'Регистрация',
    },
    designAuthor: {
      name: 'Хвойница',
      link: '/cat209467',
    }
  };

  defaults.cw3 = {
    body: {
      fontFamily: 'Verdana, sans-serif',
      fontSize: '15px',
      textColor: 'black',
      bgColor: '#ffdead',
    },
    links: {
      color: 'black',
      hoverColor: '#06f',
    },
    error: {
      bgColor: 'rgba(241, 90, 90, 0.9)',
      color: 'black',
    },
    hr: {
      border: 'auto',
    },
    input: {
      fontSize: '1rem',
      textColor: 'black',
      bgColor: '#ffe',
      border: '1px solid black',
    },
    mainTable: {
      bgColor: 'black',
      borderSpacing: '2px',
      chatBgColor: '#c60',
      actionsBgColor: '#ffdead',
      tosBgColor: 'transparent',
      mouthBgColor: '#ffdead',
      infoBgColor: '#ffdead',
    },
    myName: {
      bgColor: '#fc3',
      color: 'black',
    },
    uiSlider: {
      border: '1px solid #8e846b',
      background: '#feeebd url(/cw3/images/ui-bg_highlight-soft_100_feeebd_1x100.png) 50% top repeat-x',
    },
    uiSliderHandle: {
      border: '1px solid #d19405',
      background: '#fece2f url(/cw3/images/ui-bg_gloss-wave_60_fece2f_500x100.png) 50% 50% repeat-x',
    },
    other: {
      menuTextColor: 'inherit',
      menuBgColor: '#ffdead',
      menuFontSize: '1rem',
      locationTextColor: 'inherit',
      locationBgColor: 'white',
      blackTextColor: 'inherit',
      blackBgColor: '#ffdead',
    },
  };

  const settings = {};
  settings.site = JSON.parse(win.localStorage.getItem('cwredesign-site') || '{}');
  settings.cw3 = JSON.parse(win.localStorage.getItem('cwredesign-cw3') || '{}');

  Object.keys(settings).forEach(function(k1){
    if (settings[k1]) {
      Object.keys(settings[k1]).forEach(function(k2){
        if (settings[k1][k2]) {
          Object.keys(settings[k1][k2]).forEach(function(k3){
            if (settings[k1][k2][k3]) {
              if (k2 === 'buttons' || k2 === 'author') settings[k1][k2][k3] = settings[k1][k2][k3].replace(`'`, `\\'`);
              else settings[k1][k2][k3] = settings[k1][k2][k3].replace(/(<( +)?\/( +)?style( +)?>|[;}])/i, '');
            }
          });
        }
      });
    }
  });

  const css = {};
  const O = 'O';
  css.site = !settings.site.body ? '' : `
::selection {
  ${settings.site.siteTable ? `color: ${settings.site.siteTable.bgColor} !important;`:''}
  ${settings.site.body ? `background-color: ${settings.site.body.textColor} !important;`:''}
}
html, body {
  ${settings.site.body ? `font-family: ${settings.site.body.fontFamily} !important;`:''}
  ${settings.site.body ? `font-size: ${settings.site.body.fontSize} !important;`:''}
}
body {
  background-image: none !important;
  ${settings.site.body ? `background-color: ${settings.site.body.bgColor};`:''}
  ${settings.site.body ? `color: ${settings.site.body.textColor} !important;`:''}
}
input, select {
  ${settings.site.input ? `font-family: ${settings.site.input.fontFamily} !important;`:''}
  ${settings.site.input ? `font-size: ${settings.site.input.fontSize} !important;`:''}
  ${settings.site.input ? `color: ${settings.site.input.textColor} !important;`:''}
  ${settings.site.input ? `background-color: ${settings.site.input.bgColor} !important;`:''}
  ${settings.site.input ? `border: ${settings.site.input.border} !important;`:''}
}
textarea {
  ${settings.site.textarea ? `font-family: ${settings.site.textarea.fontFamily} !important;`:''}
  ${settings.site.textarea ? `font-size: ${settings.site.textarea.fontSize} !important;`:''}
  ${settings.site.textarea ? `color: ${settings.site.textarea.textColor} !important;`:''}
  ${settings.site.textarea ? `background-color: ${settings.site.textarea.bgColor} !important;`:''}
  ${settings.site.textarea ? `border: ${settings.site.textarea.border} !important;`:''}
}
body > span { ${settings.site.siteTable ? `background-color: ${settings.site.siteTable.bgColor} !important;`:''} }
a, a:link, a:visited { ${settings.site.links ? `color: ${settings.site.links.color};`:''} }
body > span > a { ${settings.site.links ? `color: ${settings.site.links.color} !important;`:''} }
a:hover { ${settings.site.links ? `color: ${settings.site.links.hoverColor};`:''} }
body > span > a:hover { ${settings.site.links ? `color: ${settings.site.links.hoverColor} !important;`:''} }
#messList {${settings.site.mess ? `background-color: ${settings.site.mess.bgColor} !important;`:''} ${settings.site.mess ? `color: ${settings.site.mess.textColor} !important;`:''} }
#messList a { ${settings.site.mess ? `color: ${settings.site.mess.linkColor} !important;`:''} }
.msg_read { ${settings.site.mess ? `background-color: ${settings.site.mess.readBgColor} !important;`:''} }
.msg_notRead { ${settings.site.mess ? `background-color: ${settings.site.mess.notReadBgColor} !important;`:''} }
.msg_support { ${settings.site.mess ? `background-color: ${settings.site.mess.supportBgColor} !important;`:''} }
#top_div {
  ${settings.site.top ? `color: ${settings.site.top.textColor} !important;`:''}
  ${settings.site.top ? `background-color: ${settings.site.top.bgColor} !important;`:''}
}
#top { ${settings.site.top ? `border: ${settings.site.top.tableBorder} !important;`:''} }
a.pol0 { ${settings.site.top ? `color: ${settings.site.top.pol0Color} !important;`:''} }
a.pol1 { ${settings.site.top ? `color: ${settings.site.top.pol1Color} !important;`:''} }
#site_table { padding-top: 0 !important; padding-bottom: 0 !important; }
#site_table, #footer {
  ${settings.site.siteTable ? `background-color: ${settings.site.siteTable.bgColor} !important;`:''}
  ${settings.site.siteTable ? `border-radius: ${settings.site.siteTable.borderRadius} !important;`:''}
}
#logo {
  width: fit-content !important;
  height: fit-content !important;
  margin: auto;
  padding: 0.5rem;
  text-align: center;
  ${settings.site.logo ? `color: ${settings.site.logo.textColor};`:''}
  ${settings.site.logo ? `background-color: ${settings.site.logo.bgColor};`:''}
  background-image: none !important;
  ${settings.site.logo ? `border-radius: ${settings.site.logo.borderRadius};`:''}
}
#logo:before {
  content: '${settings.site.logo ? settings.site.logo.content||'' : ''}';
  ${settings.site.logo ? `font-family: ${settings.site.logo.fontFamily};`:''}
  ${settings.site.logo ? `font-size: ${settings.site.logo.fontSize};`:''}
}
#branch {
  background: none !important;
  padding: 1px 15px !important;
  margin: 0 15px !important;
  ${settings.site.siteTable ? `border-left: ${settings.site.siteTable.borderLeft};`:''}
  ${settings.site.siteTable ? `border-right: ${settings.site.siteTable.borderRight};`:''}
}
font[color="darkgreen"] { ${settings.site.status ? `color: ${settings.site.status.online} !important;`:''} }
font[color="#561832"] { ${settings.site.status ? `color: ${settings.site.status.offline} !important;`:''} }
font[color="#333366"] { ${settings.site.status ? `color: ${settings.site.status.banned} !important;`:''} }
font[color="#333333"] { ${settings.site.status ? `color: ${settings.site.status.other} !important;`:''} }
.parsed {
  ${settings.site.parsed ? `color: ${settings.site.parsed.textColor};`:''}
  ${settings.site.parsed ? `background-color: ${settings.site.parsed.bgColor};`:''}
}
.parsed a, .parsed a:hover {
  ${settings.site.parsed ? `color: ${settings.site.parsed.linkColor};`:''}
}
#menu_div { margin-top: 5px !important; }
#emblem, [class^=kn] {
  width: fit-content !important;
  height: fit-content !important;
  padding: 5px !important;
  ${settings.site.menu ? `font-family: ${settings.site.menu.fontFamily};`:''}
  ${settings.site.menu ? `font-size: ${settings.site.menu.fontSize};`:''}
  background-image: none !important;
  ${settings.site.menu ? `color: ${settings.site.menu.textColor};`:''}
  ${settings.site.menu ? `background-color: ${settings.site.menu.bgColor};`:''}
  ${settings.site.menu ? `border-radius: ${settings.site.menu.borderRadius};`:''}
}
#emblem:hover, [class^=kn]:hover {
  background-image: none !important;
  ${settings.site.menu ? `color: ${settings.site.menu.hoverTextColor};`:''}
  ${settings.site.menu ? `background-color: ${settings.site.menu.hoverBgColor};`:''}
}
#emblem:before {content: '${settings.site.buttons ? settings.site.buttons.emblem || O : O}'}
.kn1:before {content: '${settings.site.buttons ? settings.site.buttons.kn1 || O : O}'}
.kn2:before {content: '${settings.site.buttons ? settings.site.buttons.kn2 || O : O}'}
.kn3:before {content: '${settings.site.buttons ? settings.site.buttons.kn3 || O : O}'}
.kn4:before {content: '${settings.site.buttons ? settings.site.buttons.kn4 || O : O}'}
.kn5:before {content: '${settings.site.buttons ? settings.site.buttons.kn5 || O : O}'}
.kn6:before {content: '${settings.site.buttons ? settings.site.buttons.kn6 || O : O}'}
.kn7:before {content: '${settings.site.buttons ? settings.site.buttons.kn7 || O : O}'}
.kn8:before {content: '${settings.site.buttons ? settings.site.buttons.kn8 || O : O}'}
.kn9:before {content: '${settings.site.buttons ? settings.site.buttons.kn9 || O : O}'}
.kn10:before {content: '${settings.site.buttons ? settings.site.buttons.kn10 || O : O}'}
.kn11:before {content: '${settings.site.buttons ? settings.site.buttons.kn11 || O : O}'}
.kn12:before {content: '${settings.site.buttons ? settings.site.buttons.kn12 || O : O}'}
.kn13:before {content: '${settings.site.buttons ? settings.site.buttons.kn13 || O : O}'}
#page_up, #page_down {
  width: fit-content !important;
  height: 100px !important;
  font-size: 70px !important;
  background-image: none !important;
  background-color: ${settings.site.siteTable?settings.site.siteTable.bgColor:'white'};
  border: 1px solid ${settings.site.body?settings.site.body.textColor:'none'};
}
#page_down:before { content: '↓'; }
#page_up:before { content: '↑'; }
`;

  css.cw3 = !settings.cw3.body ? '' : `
::selection {
  ${settings.cw3.mainTable ? `color: ${settings.cw3.mainTable.mouthBgColor} !important;`:''}
  ${settings.cw3.body ? `background-color: ${settings.cw3.body.textColor} !important;`:''}
}
html, body {
  ${settings.cw3.body ? `font-family: ${settings.cw3.body.fontFamily} !important;`:''}
  ${settings.cw3.body ? `font-size: ${settings.cw3.body.fontSize} !important;`:''}
}
body {
  ${settings.cw3.body ? `background-color: ${settings.cw3.body.bgColor} !important;`:''}
  ${settings.cw3.body ? `color: ${settings.cw3.body.textColor} !important;`:''}
}
#error {
  ${settings.cw3.error ? `background-color: ${settings.cw3.error.bgColor} !important;`:''}
  ${settings.cw3.error ? `color: ${settings.cw3.error.textColor} !important;`:''}
}
#main_table {
  ${settings.cw3.mainTable ? `background-color: ${settings.cw3.mainTable.bgColor} !important;`:''}
  ${settings.cw3.mainTable ? `border-spacing: ${settings.cw3.mainTable.borderSpacing} !important;`:''}
}
hr { ${settings.cw3.hr ? `border: ${settings.cw3.hr.border} !important;`:''} }
a { ${settings.cw3.links ? `color: ${settings.cw3.links.color};`:''} }
a:hover { ${settings.cw3.links ? `color: ${settings.cw3.links.hoverColor};`:''} }
#tr_chat, #tr_chat > td { ${settings.cw3.mainTable ? `background-color: ${settings.cw3.mainTable.chatBgColor} !important;`:''} }
#tr_tos, #tr_tos > td { ${settings.cw3.mainTable ? `background-color: ${settings.cw3.mainTable.tosBgColor} !important;`:''} }
#tr_actions, #tr_actions > td { ${settings.cw3.mainTable ? `background-color: ${settings.cw3.mainTable.actionsBgColor} !important;`:''} }
#tr_mouth, #tr_mouth > td { ${settings.cw3.mainTable ? `background-color: ${settings.cw3.mainTable.mouthBgColor} !important;`:''} }
#info_main, #info_main > tbody > tr > td { ${settings.cw3.mainTable ? `background-color: ${settings.cw3.mainTable.infoBgColor} !important;`:''} }
#app > .small, #app > .small a {
  ${settings.cw3.other ? `font-size: ${settings.cw3.other.menuFontSize} !important;`:''}
  ${settings.cw3.other ? `color: ${settings.cw3.other.menuTextColor} !important;`:''}
  ${settings.cw3.other ? `background-color: ${settings.cw3.other.menuBgColor} !important;`:''} }
#app > p:not(#error), #black { ${settings.cw3.other ? `color: ${settings.cw3.other.blackTextColor} !important;`:''} ${settings.cw3.other ? `background-color: ${settings.cw3.other.blackBgColor} !important;`:''} }
#history_block > div, #location { ${settings.cw3.other ? `color: ${settings.cw3.other.locationTextColor} !important;`:''} ${settings.cw3.other ? `background-color: ${settings.cw3.other.locationBgColor} !important;`:''} }
.myname {
  ${settings.cw3.myName ? `background-color: ${settings.cw3.myName.bgColor} !important;`:''}
  ${settings.cw3.myName ? `color: ${settings.cw3.myName.color} !important;`:''}
}
input, select {
  ${settings.cw3.input ? `font-size: ${settings.cw3.input.fontSize} !important;`:''}
  ${settings.cw3.input ? `background-color: ${settings.cw3.input.bgColor} !important;`:''}
  ${settings.cw3.input ? `color: ${settings.cw3.input.textColor} !important;`:''}
  ${settings.cw3.input ? `border: ${settings.cw3.input.border} !important;`:''}
}
.ui-slider {
  ${settings.cw3.uiSlider ? `background: ${settings.cw3.uiSlider.background} !important;`:''}
  ${settings.cw3.uiSlider ? `border: ${settings.cw3.uiSlider.border} !important;`:''}
}
.ui-slider .ui-slider-handle {
  ${settings.cw3.uiSliderHandle ? `background: ${settings.cw3.uiSliderHandle.background} !important;`:''}
  ${settings.cw3.uiSliderHandle ? `border: ${settings.cw3.uiSliderHandle.border} !important;`:''}
}
#tr_field { background: black !important; }
.hotkey { background: white !important; }
.move_name, #fightLog, #timer, .hotkey { color: #000 !important; }
`;
  const url = window.location.href;
  try {
    let style = false;
    if (/catwar\.su\/(?!(p|microbe|cw3|design\/20|m\/|microbe))/.test(url)) style = 'site';
    else if (/catwar\.su\/cw3\/(#.*)?$/.test(url)) style = 'cw3';
    applyStyle(style);
    document.addEventListener('DOMContentLoaded', function() {
      if (style === 'site') {
        changePages();
      }
    });
    if (document.querySelector('#footer')) {
      changePages();
    }
  } catch (err) {
    console.error('CatWar Redesign: ', err);
  }

  function changePages() {
    if (settings.site.designAuthor) {
      const footer = document.querySelector('#footer');
      const footerHTML = footer.innerHTML.split('Дизайн')[0];
      footer.innerHTML = footerHTML + `Дизайн © <a href="${(settings.site.designAuthor.link || 'https://porch.website/scripts#cwredesign').replace('#', '&quot;')}">${(settings.site.designAuthor.name || 'Вароредизайн').replace('<', '&lt;')}</a>`;
    }
    if (/catwar\.su\/settings(#.*)?$/.test(url) && !$('#cwredesign-site').length) {
      const branch = document.querySelector('#branch');
      const siteTable = document.querySelector('#site_table');
      const redesignHTML = `
<h2 style="text-indent: 1.5em">Вароредизайн v${VERSION}</h2>
<h3 style="margin: 1em 0 0.5em 1em">Сайт</h3>
<textarea id="cwredesign-site" style="width: 500px; max-width: 100%; height: 500px"></textarea>
<p><a id="cwredesign-default-site" href="#">Вернуть настройки по умолчанию</a> <a id="cwredesign-delete-site" href="#">Удалить всё</a></p>
<p><a href="/settings">Обновить страницу</a> <span id="cwredesign-answer-site"></span></p>
<h3 style="margin: 1em 0 0.5em 1em">Игровая</h3>
<textarea id="cwredesign-cw3" style="width: 500px; max-width: 100%; height: 500px"></textarea>
<p><a id="cwredesign-default-cw3" href="#">Вернуть настройки по умолчанию</a> <a id="cwredesign-delete-cw3" href="#">Удалить всё</a></p>
<p><a href="/cw3">В Игровую</a> <span id="cwredesign-answer-cw3"></span></p>
`;
      if (branch) branch.innerHTML += redesignHTML;
      else siteTable.innerHTML += redesignHTML;

      const siteTextarea = document.querySelector('#cwredesign-site');
      const cw3Textarea = document.querySelector('#cwredesign-cw3');
      siteTextarea.value = win.localStorage.getItem('cwredesign-site') || JSON.stringify(defaults.site, null, '\t');
      cw3Textarea.value = win.localStorage.getItem('cwredesign-cw3') || JSON.stringify(defaults.cw3, null, '\t');

      siteTextarea.addEventListener('input', () => updateStyle('site'));
      cw3Textarea.addEventListener('input', () => updateStyle('cw3'));

      document.querySelector('#cwredesign-default-site').onclick = function(e) {
        e.preventDefault();
        returnDefaultStyle('site');
      };
      document.querySelector('#cwredesign-default-cw3').onclick = function(e) {
        e.preventDefault();
        returnDefaultStyle('cw3');
      };
      document.querySelector('#cwredesign-delete-site').onclick = function(e) {
        e.preventDefault();
        deleteStyle('site');
      };
      document.querySelector('#cwredesign-delete-cw3').onclick = function(e) {
        e.preventDefault();
        deleteStyle('cw3');
      };
    }
    if (!document.querySelector('#cwmod-style')) {
      if (/ideas/.test(url)) addCSS(`.vote[style="color:#000"] { color: inherit !important; } .idea { color: black !important; } .idea a, .idea a:hover { color: #005 !important; }`);
      else if (/blog|sniff|idea/.test(url)) addCSS(`#blogs-reload > a, .poll-hasAnswered1 { color: black !important; }`);
      else if (/((catwar\.su\/(index)?(\.php)?#?$)|cat)/.test(url)) addCSS(`#act_name, #info { color: black !important; }`);
      else if (/chat/.test(url)) addCSS(`.tabName, #confirm_text, .mess_tr[style^="background: rgb(255, 204, 153)"] { color: black !important; } .mess_tr[style^="background: rgb(255, 204, 153)"] a { color: #003; }`);
    }
  }

  function updateStyle(style) {
    const now = new Date();
    const time = leadingZero(now.getHours())+':'+leadingZero(now.getMinutes())+':'+leadingZero(now.getSeconds());
    const answer = document.querySelector('#cwredesign-answer-'+style);
    try {
      const newJSON = document.querySelector('#cwredesign-'+style).value;
      const newSettings = JSON.stringify(JSON.parse(newJSON), null, '\t');
      answer.innerHTML = time + ' Настройки сохранены';
      win.localStorage.setItem('cwredesign-'+style, newSettings);
    } catch (e) {
      answer.innerHTML = time + ' <b>Ошибка сохранения</b>';
    }
  }
  
  function deleteStyle(style) {
    const now = new Date();
    const time = leadingZero(now.getHours())+':'+leadingZero(now.getMinutes())+':'+leadingZero(now.getSeconds());
    const newSettings = '{}';
    document.querySelector('#cwredesign-'+style).value = newSettings;
    win.localStorage.setItem('cwredesign-'+style, newSettings);
    document.querySelector(`#cwredesign-answer-`+style).innerHTML = time + ' Настройки сохранены';
  }

  function returnDefaultStyle(style) {
    const now = new Date();
    const time = leadingZero(now.getHours())+':'+leadingZero(now.getMinutes())+':'+leadingZero(now.getSeconds());
    const newSettings = JSON.stringify(defaults[style], null, '\t');
    document.querySelector('#cwredesign-'+style).value = newSettings;
    win.localStorage.setItem('cwredesign-'+style, newSettings);
    document.querySelector(`#cwredesign-answer-`+style).innerHTML = time + ' Настройки сохранены';
  }

  function applyStyle(style) {
    if (style) {
      const node = document.createElement('style');
      node.type = 'text/css';
      node.appendChild(document.createTextNode(css[style]));
      document.documentElement.appendChild(node);
    }
  }

  function addCSS(css) {
    document.head.innerHTML += `<style>${css}</style>`;
  }

  function leadingZero(num) {
    return num < 10 ? '0' + num.toString() : num;
  }
})(window, document)