// ==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
// @downloadURL 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('https://greasyfork.org/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";
            }
        }
    })();