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.031
// @description Press Esc twice to toggle the menu,and save the setting
// @author sbk2015
// @match http://*diep.io/*
// @grant none
// @require https://greasyfork.org/scripts/27023-jscolor/code/JSColor.js?version=173802
// ==/UserScript==
window.diepStyle = {};
addScript('https://greasyfork.org/scripts/27023-jscolor/code/JSColor.js?version=173802');
var localStorage;
var storageObj = localStorage.getObject('diepStyle');
if (location.href.indexOf('file://') >= 0) var isLocal = true;
function addScript(src) {
var s = document.createElement('script');
s.setAttribute('src', src);
document.body.appendChild(s);
localStorage = window.localStorage;
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);
}
}
(function() {
'use strict';
pluginInit();
function pluginInit() {
gameCommandInit();
storageInit();
keyListen();
tempInit();
styleInit();
diepStyle.onColor = onColor;
diepStyle.storageInit = storageInit;
// togglePanel(true);
function gameCommandInit() {
diepStyle.command = {
gridBase: function(v) { input.set_convar("ren_grid_base_alpha", v); },
outline: function(v) { input.set_convar("ren_stroke_soft_color", v); },
fps: function(v) { input.set_convar("ren_fps", v); },
showBackground: function(v) { input.set_convar("ren_background", v); },
}
}
function storageInit(cmd) {
var colors = [
{ id: 100, name: 'Background 1', color: 'CDCDCD' },
{ id: 101, name: 'Background 2', color: '797979' },
{ id: 102, name: 'Minimap', color: '797979' },
{ 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: 13, name: 'Leader Board', color: '64ff8c' },
{ id: 14, name: 'Waze Wall', color: 'bbbbbb' },
{ id: 8, name: 'Square', color: 'ffe869' },
{ id: 9, name: 'Triangle', color: 'fc7677' },
{ id: 10, name: 'Pentagon', color: '768dfc' },
{ id: 11, name: 'Crasher', color: 'f177dd' },
{ id: 1, name: 'Turret', color: '999999' },
{ id: 0, name: 'Smasher', color: '4f4f4f' },
{ id: 103, name: 'Health Bar', color: '85e37d' },
{ id: 104, name: 'Outline', color: '555555' },
]
var renders = [
{ name: 'Grid Base Alpha', value: 0.1 },
{ name: 'Show Outline', value: false },
{ name: 'Show FPS', value: false },
{ name: 'Dark Mode', value: false }
];
(function checkHasStorage() {
if (!storageObj) storageObj = { version: 0.03, colors: colors, renders: renders };
if (!storageObj.colors || cmd == 'reset') {
storageObj.colors = colors;
storageObj.renders = renders;
diepStyle.it = renders;
}
})();
localStorage.setObject('diepStyle', storageObj);
}
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.setObject('diepStyle', storageObj)
};
})();
}
if (input.length > 10) input = input.substring(input.length - 10);
});
}
function tempInit() {
var colorObj = { th: 0 };
var setObj = { th: 0 }
var renders = storageObj.renders;
init1();
loadColor();
setTimeout(diepStyle.resetRender, 1500);
diepStyle.init1 = init1;
diepStyle.resetColor = loadColor;
function init1() {
diepStyle.resetRender = resetRender;
var title = `<div>Diep.Style Ver 0.031 </div>`;
var descr = `<div>Press Esc twice to toggle this setting.</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() {
document.querySelectorAll('#styleSetting .render').forEach(function(elem) {
elem.outerHTML = ``
})
document.querySelector('.renderBegin').insertAdjacentHTML('afterend', getRenderBody());
diepStyle.command.gridBase(storageObj.renders[0].value);
diepStyle.command.outline(!storageObj.renders[1].value);
diepStyle.command.fps(storageObj.renders[2].value);
diepStyle.command.showBackground(!storageObj.renders[3].value);
listenerInit();
}
var bodyRender = getRenderBody();
var bodyColor = getColorBody1();
function getRenderBody() {
var th = -1;
var html = `
<span class="renderBegin"></span>
<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}</div>
<div class="cell"><input type="checkbox" name="fps" ${renders[th].value?'checked':''}></div>
</div>
<div class="row render hide">
<div class="cell">${renders[++th].name}</div>
<div class="cell"><input type="checkbox" name="background" ${renders[th].value?'checked':''}></div>
</div>
`
return html;
}
function getColorBody1() {
var it = '<div class="row colorBegin">Color Setting</div>';
storageObj.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
}
var allBody =
`
<div class="table">
${bodyRender} ${bodyColor}
<div class="row resetButton">
<div class="cell reset"><button>Reset</button></div>
</div>
</div>
`;
// <div class="row"><hr></div>
var id = 0;
var temp = `<div id="styleSetting"> ${title} ${allBody} ${descr} </div>`;
document.querySelector('body').insertAdjacentHTML('afterend', temp);
function listenerInit() {
document.querySelector('input[name="grid_base_alpha"]').addEventListener('input',
function(e) {
var value = (e.target.value - e.target.value % 2) / 100
document.querySelector('.grid_base_value').innerHTML = value;
diepStyle.command.gridBase(value);
storageObj.renders[0].value = value;
function renderExecute() {}
});
document.querySelector('input[name="stroke_soft_color"]').addEventListener('change',
function(e) {
diepStyle.command.outline(!e.target.checked);
storageObj.renders[1].value = e.target.checked;
});
document.querySelector('input[name="fps"]').addEventListener('change',
function(e) {
diepStyle.command.fps(e.target.checked);
storageObj.renders[2].value = e.target.checked;
});
document.querySelector('input[name="background"]').addEventListener('change',
function(e) {
diepStyle.command.showBackground(!e.target.checked);
storageObj.renders[3].value = e.target.checked;
});
document.querySelector('.reset button').addEventListener('click',
function(e) {
diepStyle.storageInit('reset');
diepStyle.resetColor();
diepStyle.resetRender();
});
// document.querySelector('input[name="chaotic"]').addEventListener('change',
// function(e) {
// if (e.target.checked) {
// onColor(2, 'f14e54'); //you ffa
// onColor(15, 'f14e54'); //other ffa
// onColor(3, 'f14e54'); //blue
// onColor(4, 'f14e54'); //red
// onColor(5, 'f14e54'); //purple
// onColor(6, 'f14e54'); //green
// } else {
// onColor(2, '00b2e1'); //you ffa
// onColor(15, 'f14e54'); //other ffa
// onColor(3, '00b2e1'); //blue
// onColor(4, 'f14e54'); //red
// onColor(5, 'bf7ff5'); //purple
// onColor(6, '00e16e'); //green
// }
// }
// );
}
}
function loadColor() {
storageObj.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) {
let target = id;
// id === 100 ? target = e.valueElement.getAttribute('target') : '';
if (!isLocal) {
if (id >= 0 && id < 100) {
input.execute(`net_replace_color ${target} 0x${e}`)
}
switch(id) {
case 100: input.set_convar("ren_background_color", `0x${e}`); break;
case 101: input.set_convar("ren_border_color", `0x${e}`); break;
case 102: input.set_convar("ren_minimap_border_color", `0x${e}`); break;
case 103: input.set_convar("ren_health_color", `0x${e}`); break;
case 104: input.set_convar("ren_stroke_solid_color", `0x${e}`); break;
}
// input.set_convar("ren_background_color", `0x${e}`)
}
storageObj.colors = storageObj.colors.map(function(elem) {
if (elem.id === id) {
elem.color = e.toString();
}
return elem
})
}
function styleInit() {
addGlobalStyle(`#styleSetting{padding: 0.2em; margin:0.2em; position: absolute;top: 0;right: 0;width: 30%;
background-color: rgba(200,200,200,0.7);display:none;border: 1px solid black;height: 90%;overflow-y: auto;}`);
addGlobalStyle(".table{ display: table; width: 100%;}");
addGlobalStyle(".table{ display: table; text-align: center; width: 100%;}");
addGlobalStyle(".row{ display: table-row; }");
addGlobalStyle(`.cell{ display: table-cell; padding: 0px 0.3em;border: 1px solid black;}`);
addGlobalStyle(`.backRed{background-color:#f14e54}`)
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) {
tf ?
document.querySelector('#styleSetting').style.display = "block" :
document.querySelector('#styleSetting').style.display = "none";
}
})();