Greasy Fork is available in English.
Press Esc twice to toggle the menu,and save the setting
当前为
// ==UserScript==
// @name Diep.style
// @namespace https://www.reddit.com/r/Diepio/comments/5y1np1/diepstyle_plugin/
// @version 0.08
// @description Press Esc twice to toggle the menu,and save the setting
// @author sbk2015
// @match http://*diep.io/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
var localStorage;
var saveList;
var nowSetting;
var isLocal;
var clone;
jsInit();
setTimeout(pluginInit, 1000);
function jsInit() {
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
var value = this.getItem(key);
return value && JSON.parse(value);
}
clone = function(obj) {
return JSON.parse(JSON.stringify(obj));
}
window.diepStyle = {};
localStorage = window.localStorage;
if (location.href.indexOf('file://') >= 0) {
var warning = false;
warning ? '' : console.warn('off warning');
isLocal = true;
window.input = {
set_convar: function() { warning ? console.warn('block input.set_convar') : '' },
execute: function() { warning ? console.warn('block input.set_execute') : '' }
}
}
}
function pluginInit() {
gameCommandInit();
storageInit();
keyListen();
tempInit();
styleInit();
diepStyle.onColor = onColor;
diepStyle.storageInit = storageInit;
// togglePanel(true);
function gameCommandInit() {
diepStyle.command = {
grid_base_alpha: {},
stroke_soft_color: { reverse: true },
stroke_soft_color_intensity: {},
fps: {},
raw_health_values: {},
names: { reverse: true },
ui_scale: {},
ui: { reverse: true },
fn: function(name, value) {
if (diepStyle.command[name].reverse) value = !value;
input.set_convar("ren_" + name, value);
}
}
}
function storageInit(cmd) {
var th = 100;
var colors = [
{ id: 2, name: 'You FFA', color: '00b1de' },
{ id: 15, name: 'Other FFA', color: 'f14e54' },
{ id: 3, name: 'Blue Team', color: '00b1de' },
{ id: 4, name: 'Red Team', color: 'f14e54' },
{ id: 5, name: 'Purple Team', color: 'bf7ff5' },
{ id: 6, name: 'Green Team', color: '00e16e' },
{ id: 8, name: 'Square', color: 'ffe869' },
{ id: 7, name: 'Green Square?', color: '89ff69' },
{ id: 9, name: 'Triangle', color: 'fc7677' },
{ id: 10, name: 'Pentagon', color: '768dfc' },
{ id: 11, name: 'Crasher', color: 'f177dd' },
{ id: 14, name: 'Waze Wall', color: 'bbbbbb' },
{ id: 1, name: 'Turret', color: '999999' },
{ id: 0, name: 'Smasher', color: '4f4f4f' },
{ id: th++, name: 'All Bars', color: '000000', cmd: 'ren_bar_background_color' },
{ id: th++, name: 'Outline', color: '555555', cmd: 'ren_stroke_solid_color' },
{ id: 13, name: 'Leader Board', color: '64ff8c' },
{ id: th++, name: 'Xp Bar', color: 'ffde43', cmd: 'ren_xp_bar_fill_color' },
{ id: th++, name: 'Health Bar1', color: '85e37d', cmd: 'ren_health_fill_color' },
{ id: th++, name: 'Health Bar2', color: '555555', cmd: 'ren_health_background_color' },
{ id: th++, name: 'Grid Color', color: '000000', cmd: 'ren_grid_color' },
{ id: th++, name: 'Minimap 1', color: 'CDCDCD', cmd: 'ren_minimap_background_color' },
{ id: th++, name: 'Minimap 2', color: '797979', cmd: 'ren_minimap_border_color' },
{ id: th++, name: 'Background 1', color: 'CDCDCD', cmd: 'ren_background_color' },
{ id: th++, name: 'Background 2', color: '797979', cmd: 'ren_border_color' },
]
diepStyle.colorMap = new Map(colors.map(function(elem) {
return [elem.id, { color: elem.color, cmd: elem.cmd || 'no cmd' }]
}));
var renders = [
{ name: 'Grid Base Alpha', value: 0.1, cmd: 'grid_base_alpha' },
{ name: 'Show Outline', value: false, cmd: 'stroke_soft_color' },
{ name: 'Outline Intensity', value: 0.25, cmd: 'stroke_soft_color_intensity' },
{ name: 'Show FPS', value: false, cmd: 'fps' },
{ name: 'Show Health', value: false, cmd: 'raw_health_values' },
{ name: 'Hide Name', value: false, cmd: 'names' },
{ name: 'UI Scale', value: 1, cmd: 'ui_scale' },
{ name: 'Clear UI', value: false, cmd: 'ui' },
];
(function checkHasStorage() {
var _localStorage = localStorage.getObject('diepStyle')
var page = 1;
if (nowSetting && nowSetting.saveTH) {
page = nowSetting.saveTH;
}
if (_localStorage && _localStorage.saveList) {
saveList = _localStorage.saveList;
nowSetting = _localStorage.nowSetting;
}
if (!nowSetting || cmd == 'reset') {
nowSetting = getBlankSetting();
nowSetting.saveTH = page;
}
if (!saveList) saveList = getBlankSaveList();
})();
function getBlankSetting() {
return { version: 0.08, saveTH: 1, lock: false, colors, renders };
}
function getBlankSaveList() {
var list = [];
for (var i = 0; i < 9; i++) {
list[i] = getBlankSetting();
if (i == 0) list[i].isDefault = 'default,no save';
}
return clone(list);
};
Storage.prototype.pluginSave = function() {
saveList[nowSetting.saveTH] = clone(nowSetting);
var _storageObj = {
nowSetting: clone(nowSetting),
saveList: clone(saveList)
}
localStorage.setObject('diepStyle', _storageObj);
};
localStorage.pluginSave();
}
function keyListen() {
var input = '';
document.addEventListener('keyup', function(evt) {
var that = this;
if (that.pluginOn == undefined) that.pluginOn = false;
var e = window.event || evt;
var key = e.which || e.keyCode;
input += key;
if (input.indexOf('2727') >= 0) {
input = '';
that.pluginOn = !that.pluginOn
togglePanel(that.pluginOn);
(function save() {
if (!that.pluginOn) {
localStorage.pluginSave();
};
})();
}
if (input.length > 10) input = input.substring(input.length - 10);
});
}
function tempInit() {
var colorObj = { th: 0 };
var setObj = { th: 0 }
init1();
loadColor();
setTimeout(diepStyle.resetRender, 1500);
diepStyle.resetColor = loadColor;
function init1() {
diepStyle.resetRender = resetRender;
var title = `<div class="title">Diep.Style Ver 0.08<br>
Press Esc twice to toggle this</div>`;
var colorPlane = function(id) {
return `{width:300, height:200,onFineChange:'diepStyle.onColor(${id},this)'}`
}
colorObj.setClass = function() {
return `colorBlock colorBlock${this.th++}`
}
setObj.setClass = function() {
return `setting setting${this.th++}`
}
function resetRender(cmd) {
document.querySelectorAll('#styleSetting .render').forEach(function(elem) {
elem.outerHTML = ``
})
var it = document.querySelector('.renderBegin')
it.insertAdjacentHTML('afterend', getRenderBody());
it.remove();
nowSetting.renders.forEach(function(elem) {
diepStyle.command.fn(elem.cmd, elem.value);
});
listenerInit(cmd);
}
var bodyRender = getRenderBody();
var bodyColor = getColorBody();
var bodyImport = getImportBody();
function getRenderBody() {
var renders = nowSetting.renders;
var th = -1;
var html = `
<div class="renderBegin">Render Setting</div>
<div class="row render">
<div class="cell">${renders[++th].name} <br><span class="grid_base_value">${renders[th].value}</span></div>
<div class="cell"><input type="range" name="grid_base_alpha" value=${renders[th].value*100} max="200"></div>
</div>
<div class="row render">
<div class="cell">${renders[++th].name}</div>
<div class="cell"><input type="checkbox" name="stroke_soft_color" ${renders[th].value?'checked':''}></div>
</div>
<div class="row render">
<div class="cell">${renders[++th].name} <br><span class="stroke_intensity_value">${renders[th].value}</span></div>
<div class="cell"><input type="range" name="stroke_soft_color_intensity" value=${renders[th].value*100} max="100"></div>
</div>
<div class="row render">
<div class="cell">${renders[++th].name}</div>
<div class="cell"><input type="checkbox" name="fps" ${renders[th].value?'checked':''}></div>
</div>
<div class="row render">
<div class="cell">${renders[++th].name}</div>
<div class="cell"><input type="checkbox" name="raw_health_values" ${renders[th].value?'checked':''}></div>
</div>
<div class="row render">
<div class="cell">${renders[++th].name}</div>
<div class="cell"><input type="checkbox" name="names" ${renders[th].value?'checked':''}></div>
</div>
<div class="row render">
<div class="cell">${renders[++th].name} <br><span class="ui_scale_value">${renders[th].value}</span></div>
<div class="cell"><input type="range" name="ui_scale" value=${renders[th].value*100} max="200"></div>
</div>
<div class="row render">
<div class="cell">${renders[++th].name}</div>
<div class="cell"><input type="checkbox" name="ui" ${renders[th].value?'checked':''}></div>
</div>
`
return html;
}
function getColorBody() {
var it = '<div class="row colorBegin">Color Setting</div>';
nowSetting.colors.forEach(function(elem, th) {
var id = elem.id;
it += `
<div class="row colorBlock colorBlock${th}">
<div class="cell"></div>
<div class="cell"><input class="jscolor ${colorPlane(`${id}`)}"> </div>
</div>
`;
});
return it
}
function getImportBody() {
var html=
`
<div class="importBegin">Import Save</div>
<div class="row import">
<div class="cell">
<button>Import</button>
</div>
<div class="cell">
<a href="https://jsonformatter.curiousconcept.com/" target="_blank">How to check JSON?</a></div>
</div>`
return html
}
var allBody =
`
<div class="pluginBody">${title}
<hr>
<div class="table">
<span class="pluginLock"></span>
${bodyRender} ${bodyColor} ${bodyImport} <br>
</div>
</div>
`;
var getSaveBtns=function() {
var btn='';
for (var i = 0; i < 9; i++) {
if(i==0) {btn+=`<button>Default</button>`;continue;}
btn+=`<button>${i}</button>`;
}
return btn;
}
var footer=
`
<div class="footer">
<div class="saveBtns">${getSaveBtns()}</div>
<div class="otherBtns">
<span class="lock"><button>Lock</button></span>
<span class="reset"><button>Reset</button></span>
</div>
</div>
`
var id = 0;
var temp = `<div id="styleSetting"> ${allBody} ${footer} </div>`;
document.querySelector('body').insertAdjacentHTML('afterend', temp);
addScript('http://greasyfork.icu/scripts/27023-jscolor/code/JSColor.js?version=173802');
function addScript(src) {
var s = document.createElement('script');
s.setAttribute('src', src);
document.body.appendChild(s);
}
function listenerInit(cmd) {
;(function (){
var theName="grid_base_alpha";
document.querySelector(`input[name=${theName}]`).addEventListener('input',
function(e) {
var value = (e.target.value - e.target.value % 2) / 100
document.querySelector('.grid_base_value').innerHTML = value;
diepStyle.command.fn(theName, value);
nowSetting.renders[0].value = value;
});
})();
;(function (){
var theName="stroke_soft_color";
document.querySelector(`input[name=${theName}]`).addEventListener('change',
function(e) {
diepStyle.command.fn(theName, e.target.checked);
nowSetting.renders[1].value = e.target.checked;
});
})();
;(function (){
var theName="stroke_soft_color_intensity";
document.querySelector(`input[name=${theName}]`).addEventListener('input',
function(e) {
var value = (e.target.value - e.target.value % 5)/100
document.querySelector('.stroke_intensity_value').innerHTML = value;
diepStyle.command.fn(theName, value);
nowSetting.renders[2].value = value;
});
})();
;(function (){
var theName="fps";
document.querySelector(`input[name=${theName}]`).addEventListener('change',
function(e) {
diepStyle.command.fn(theName, e.target.checked);
nowSetting.renders[3].value = e.target.checked;
});
})();
;(function (){
var theName="raw_health_values";
document.querySelector(`input[name=${theName}]`).addEventListener('change',
function(e) {
diepStyle.command.fn(theName, e.target.checked);
nowSetting.renders[4].value = e.target.checked;
});
})();
;(function (){
var theName="names";
document.querySelector(`input[name=${theName}]`).addEventListener('change',
function(e) {
diepStyle.command.fn(theName, e.target.checked);
nowSetting.renders[5].value = e.target.checked;
});
})();
;(function (){
var theName="ui_scale";
document.querySelector(`input[name=${theName}]`).addEventListener('input',
function(e) {
var value = (e.target.value - e.target.value % 2) / 100
document.querySelector(`.${theName}_value`).innerHTML = value;
diepStyle.command.fn(theName, value);
nowSetting.renders[6].value = value;
});
})();
;(function (){
var theName="ui";
document.querySelector(`input[name=${theName}]`).addEventListener('change',
function(e) {
diepStyle.command.fn(theName, e.target.checked);
nowSetting.renders[7].value = e.target.checked;
});
})();
if(cmd=='reset') return;
document.querySelector('.import button').addEventListener('click',function(e) {
var example='[\n{"cmd":"ui_scale","value":"1.5"},'+
'\n{"id":"8","value":"888888"}\n]';
var gotValue=prompt('Enter The JSON\nExample:\n'+example,example.replace(/\s/g, ''));
if(!isJson(gotValue)){
alert('Code Incorrect\nPlz git gud and check your JSON');
return
} ;
var gotArr=JSON.parse(gotValue);
gotArr.forEach(function(elem) {
nowSetting.colors=nowSetting.colors.map(function(now) {
if(elem.id && now.id==elem.id) now.color=elem.value;
if(elem.cmd && now.cmd==elem.cmd) now.color=elem.value;
return now
});
nowSetting.renders=nowSetting.renders.map(function(now) {
if(elem.cmd && now.cmd==elem.cmd) now.value=elem.value;
return now
});
});
document.querySelectorAll('.saveBtns button')[nowSetting.saveTH].click();
function isJson(str) {
try {
JSON.parse(str);
} catch (e) {
return false;
}
if(typeof JSON.parse(str)=='object') return true;
}
});
document.querySelectorAll('.saveBtns button').forEach((elem, th) => {
elem.addEventListener('click', function() {
localStorage.pluginSave();
nowSetting=clone(saveList[th]);
nowSetting.saveTH=th;
diepStyle.resetColor();
diepStyle.resetRender('reset');
updateSaveBtns();
})
})
document.querySelector('.lock button').addEventListener('click',
function(e) {
nowSetting.lock=!nowSetting.lock;
updateSaveBtns();
});
document.querySelector('.reset button').addEventListener('click',
function(e) {
diepStyle.storageInit('reset');
diepStyle.resetColor();
diepStyle.resetRender('reset');
updateSaveBtns();
});
updateSaveBtns();
function updateSaveBtns() {
var theTH=nowSetting.saveTH;
var status=saveList[theTH];
var lockBtn=document.querySelector('.lock button');
var resetBtn=document.querySelector('.reset button');
if(theTH==0){
lockBtn.disabled = true;
resetBtn.disabled = true;
nowSetting.lock=true;
}else{
resetBtn.disabled = nowSetting.lock;
lockBtn.disabled = false;
}
if(resetBtn.disabled) {
document.querySelector('.table').classList.add('noClicks');
lockBtn.innerHTML='locked';
}else{
document.querySelector('.table').classList.remove('noClicks');
lockBtn.innerHTML='no lock';
}
;(function (){
document.querySelectorAll('.saveBtns button').forEach(function(elem, th) {
elem.classList.remove('chosenBtn');
if(theTH==th) elem.classList.add('chosenBtn');
})
})();
}
}
}
function loadColor() {
nowSetting.colors.some(function(elem, th) {
var target = document.querySelector(`.colorBlock${th}`);
if (!target || !target.querySelector('.cell input').jscolor) {
setTimeout(loadColor, 500);
return true
}
onColor(elem.id, elem.color);
target.querySelector('.cell').innerHTML = elem.name;
target.querySelector('.cell input').jscolor.fromString(elem.color);
})
}
}
function onColor(id, e) {
var target = id;
var color=e.toString();
if (id >= 0 && id < 100) {
input.execute(`net_replace_color ${target} 0x${color}`)
} else{
var cmd=diepStyle.colorMap.get(id).cmd
input.set_convar(cmd, `0x${color}`);
}
nowSetting.colors = nowSetting.colors.map(function(elem) {
if (elem.id === id) elem.color = color;
return elem
})
}
function styleInit() {
addGlobalStyle(`#styleSetting{padding: 0.2em; margin:0.2em; position: absolute;top: 0;right: 0;width: 30%;
min-width:20em; background-color: rgba(200,200,200,0.8);display:none;border: 1px solid black;height: 92vh;}`);
addGlobalStyle(".table{ display: table; text-align: center; width: 99%;}");
addGlobalStyle(".row{ display: table-row; }");
addGlobalStyle(`.cell{ display: table-cell; padding: 0.1em 0.3em;border: 1px solid black;}`);
addGlobalStyle("input[type=checkbox],input[type=range]{transform: scale(1.2); }");
addGlobalStyle(`.pluginBody{height: 90%; overflow-y: auto;}`);
addGlobalStyle(`.title{font-size:1.2em;}`);
addGlobalStyle(`.colorBegin, .renderBegin, .importBegin{font-size:1.2em; line-height:1.5em;}`);
addGlobalStyle(`.saveBtns button{margin: 0 1.5%; padding: 0.2em 0.5em;}`);
addGlobalStyle(`@-moz-document url-prefix() {.saveBtns button{margin: 0 1%;padding: 0.1em 0.3em;} } }`);
addGlobalStyle(`.otherBtns button{margin: 0 1.5%; padding: 0.2em 0.5em;}`);
addGlobalStyle(`.footer{text-align:center;height:10%; border: 1px solid black;}`);
addGlobalStyle(`.footer > *{margin:0.7vh 0;}`);
addGlobalStyle(`.backRed{background-color:#f14e54}`);
addGlobalStyle(`.chosenBtn{-webkit-filter: brightness(0.8);filter:brightness(0.8);}`)
addGlobalStyle(`.noClicks{pointer-events:none; -webkit-filter: opacity(50%); filter: opacity(50%);}`)
addGlobalStyle(`.hide{display:none}`)
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) {return;}
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
}
}
function togglePanel(tf) {
if(tf){
try{
document.querySelector('#styleSetting').style.display = "block";
}catch(err){
var warn='\n\nYou can DELETE ALL PLUGIN SAVES to fix this,type delete to confirm'
var gotValue=prompt('Got an error\n'+err+warn);
if(gotValue=='delete'){
localStorage.removeItem('diepStyle');
alert('Deleted,refresh to take effect');
return
} ;
}
}else{
document.querySelector('#styleSetting').style.display = "none";
}
}
})();