☰

Diep.style

try to style over the diep!

目前为 2017-03-07 提交的版本。查看 最新版本。

// ==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>Diep.Style 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";

    }

})();