Press Esc twice to toggle the menu
当前为
// ==UserScript==
// @name Diep.style
// @namespace https://www.reddit.com/r/Diepio/comments/5y1np1/diepstyle_plugin/
// @version 0.02
// @description Press Esc twice to toggle the menu
// @author sbk2015
// @match http://*diep.io/*
// @grant none
// @require https://greasyfork.org/libraries/jscolor/1.4.2/jscolor.js
// ==/UserScript==
window.diepStyle = {};
(function() {
'use strict';
(function init() {
keyListen();
tempInit();
styleInit();
diepStyle.onColor = onColor;
// togglePanel(true);
function keyListen() {
var input = '';
document.addEventListener('keyup', function(evt) {
if (this.settingOn == undefined) this.settingOn = false;
var e = window.event || evt;
var key = e.which || e.keyCode;
input += key;
if (input.indexOf('2727') >= 0) {
input = '';
this.settingOn = !this.settingOn
togglePanel(this.settingOn);
}
if (input.length > 10) input = input.substring(input.length - 10);
});
}
function tempInit() {
var title = `<div>Diep.Style Ver 0.02 </div>`;
var descr = `<div>Press Esc twice to toggle this setting.</div>`
var colorPlane=function(id) {return `{onFineChange:'diepStyle.onColor(${id},this)'}`}
var body = `
<div class="table">
<div class="row">
<div class="cell">Grid base alpha <br><span class="grid_base_value">0.3</span></div>
<div class="cell"><input type="range" name="grid_base_alpha" value="30"></div>
</div>
<div class="row">
<div class="cell">Show Outline</div>
<div class="cell"><input type="checkbox" name="stroke_soft_color"></div>
</div>
<div class="row">
<div class="cell">Show Fps</div>
<div class="cell"><input type="checkbox" name="fps"></div>
</div>
<div class="row">
<div class="cell">Dark Mode</div>
<div class="cell"><input type="checkbox" name="background"></div>
</div>
<div class="row backRed">
<div class="cell">Chaotic Mode</div>
<div class="cell"><input type="checkbox" name="chaotic"></div>
</div>
<div class="row">Color Setting
</div>
<div class="row">
<div class="cell">You FFA</div>
<div class="cell"><input class="jscolor ${colorPlane(2)}"
value="00b1de"></div>
</div>
<div class="row">
<div class="cell">Other FFA</div>
<div class="cell"><input class="jscolor ${colorPlane(15)}"
value="f14e54"></div>
</div>
<div class="row">
<div class="cell">Blue team</div>
<div class="cell"><input class="jscolor ${colorPlane(3)}"
value="00b1de"></div>
</div>
<div class="row">
<div class="cell">Red team</div>
<div class="cell"><input class="jscolor ${colorPlane(4)}"
value="f14e54"></div>
</div>
<div class="row">
<div class="cell">Purple team</div>
<div class="cell"><input class="jscolor ${colorPlane(5)}"
value="c396e9"></div>
</div>
<div class="row">
<div class="cell">Green team</div>
<div class="cell"><input class="jscolor ${colorPlane(6)}"
value="11d578"></div>
</div>
<div class="row">
<div class="cell">Square</div>
<div class="cell"><input class="jscolor ${colorPlane(8)}"
value="ffe869"></div>
</div>
<div class="row">
<div class="cell">Triangle</div>
<div class="cell"><input class="jscolor ${colorPlane(9)}"
value="fc7677"></div>
</div>
<div class="row">
<div class="cell">Pentagon</div>
<div class="cell"><input class="jscolor ${colorPlane(10)}"
value="768dfc"></div>
</div>
<div class="row">
<div class="cell">Crasher</div>
<div class="cell"><input class="jscolor ${colorPlane(11)}"
value="f077dc"></div>
</div>
<div class="row">
<div class="cell">Turret</div>
<div class="cell"><input class="jscolor ${colorPlane(1)}"
value="999999"></div>
</div>
</div>`;
var temp = `<div id="styleSetting"> ${title} ${body} ${descr} </div>`
document.querySelector('body').insertAdjacentHTML('afterend', temp);
var it =
document.querySelector('input[name="grid_base_alpha"]').addEventListener('input',
function(e) {
var value = (e.target.value - e.target.value % 2) / 100
input.set_convar("ren_grid_base_alpha", value);
document.querySelector('.grid_base_value').innerHTML = value;
});
it = document.querySelector('input[name="stroke_soft_color"]').addEventListener('change',
function(e) { input.set_convar("ren_stroke_soft_color", !e.target.checked); });
it = document.querySelector('input[name="fps"]').addEventListener('change',
function(e) { input.set_convar("ren_fps", e.target.checked); });
it = document.querySelector('input[name="background"]').addEventListener('change',
function(e) { input.set_convar("ren_background", !e.target.checked); });
it = document.querySelector('input.jscolor').addEventListener('change',
function(e) { console.log(e.target) });
it = 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, '00b1de'); //you ffa
onColor(15, 'f14e54'); //other ffa
onColor(3, '00b1de'); //blue
onColor(4, 'f14e54'); //red
onColor(5, 'c396e9'); //purple
onColor(6, '11d578'); //green
}
});
}
function onColor(id, e) {
input.execute(`net_replace_color ${id} 0x${e}`)
}
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.8);display:none;}`);
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}`)
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";
}
})();