Greasy Fork is available in English.
try to style over the diep!
当前为
// ==UserScript==
// @name Diep.style
// @namespace http://tampermonkey.net/
// @version 0.01
// @description try to style over the diep!
// @author sbk2015
// @match http://*diep.io/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
(function init() {
keyListen();
tempInit();
styleInit();
// 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>Style Setting Ver 0.01 </div>`;
var descr = `<div>Press Esc twice to toggle this setting.</div>`
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>`;
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); });
}
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;}`);
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";
}
})();