Margonem pokazywanie ścieżki [SI]

// ==UserScript==
// @name         Rysowanie ścieżki margonem
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  SI
// @author       Czogi
// @match        http://*.margonem.pl/
// @grant        none
// ==/UserScript==

const color="#000000",oldPI=window._g,allTiles={},Storage=new class{constructor(){this.uid=getCookie("user_id"),this.hid=getCookie("mchar_id"),this.name=`${this.uid}showPath${this.hid}`,localStorage[this.name]||localStorage.setItem(this.name,JSON.stringify({show:!0,showAtRed:!0}))}get(a){return this.parse[a]}set(a,b){let c=this.parse;c[a]=b,localStorage.setItem(this.name,JSON.stringify(c))}get parse(){return JSON.parse(localStorage[this.name])}},onClick=(a,b)=>{const c=!Storage.get(b),d=c?"green":"red";a.style.backgroundColor=d,Storage.set(b,c)},parent=document.getElementById("bottombar"),state=document.createElement("div"),redState=document.createElement("div"),separator=document.createElement("div"),baseStyle="left: 410px;top: 6px;position: absolute;"+`background-color: ${Storage.get("show")?"green":"red"};`+`width: 10px;`+`height: 20px;`+`opacity: .5;`;state.style.cssText=baseStyle,redState.style.cssText=baseStyle,separator.style.cssText=baseStyle,separator.style.left="420px",separator.style.backgroundColor="yellow",redState.style.backgroundColor=Storage.get("showAtRed")?"green":"red",separator.style.width="1px",redState.style.left="421px",state.setAttribute("tip","W\u0142\u0105cza/Wy\u0142\u0105cza pokazywanie \u015Bcie\u017Cki."),redState.setAttribute("tip","<center>W\u0142\u0105cza/Wy\u0142\u0105cza pokazywanie \u015Bcie\u017Cki na czerwonych mapach.</center>"),redState.onclick=onClick.bind(this,redState,"showAtRed"),state.onclick=onClick.bind(this,state,"show"),parent.append(state,redState,separator);const PathTile=class{constructor(a,b,c){this.x=a,this.y=b,this.dir=c,this.element=document.createElement("div")}drawElement(){const a=this.getDirection(this.dir),b="end"==this.dir;if(this.element.style.cssText=`top: ${32*this.y+8}px;`+`left: ${32*this.x+8}px;`+`position: absolute;`+`border: solid ${color};`+`border-width: 0 3px 3px 0;`+`padding: 6px;`+`display: inline-block;`+`transform: rotate(${a});`+`-webkit-transform: rotate(${a});`,b){this.element.style.cssText=`top: ${32*this.y}px;`+`left: ${32*this.x+8}px;`+`position: absolute;`+`border: solid ${color};`+`border-width: 0 3px 3px 0;`+`padding: 6px;`+`display: inline-block;`+`transform: rotate(${a});`+`-webkit-transform: rotate(${a});`;const b=document.createElement("div"),c=document.createElement("div");c.style.cssText=`top: ${32*this.y+18}px;`+`left: ${32*this.x+8}px;`+`border: solid ${color};`+`position: absolute;`+`border-width: 0 3px 3px 0;`+`display: inline-block;`+`padding: 6px;`+`transform: rotate(-135deg);`+`-webkit-transform: rotate(-135deg);`,b.append(this.element,c),this.element=b}document.getElementById("ground").appendChild(this.element)}getDirection(a){return"up"===a?"-135deg":"left"===a?"135deg":"right"===a?"-45deg":"down"===a?"45deg":"45deg"}deleteElement(){this.element.parentNode.removeChild(this.element)}};showPath=function(){const a={show:Storage.get("show"),showAtRed:Storage.get("showAtRed")};if(!a.show||!a.showAtRed&&2==window.map.pvp||!window.road.length){const a=Object.values(allTiles);if(a.length)for(const b of a)b.deleteElement(),delete allTiles[`${b.x}.${b.y}`];return oldPI.apply(this,arguments)}for(const[a,b]of window.road.entries()){const c=`${b.x}.${b.y}`;if(!allTiles[c]){let d;window.road.length>a+1&&(window.road[a+1].x>b.x?d="left":window.road[a+1].x<b.x?d="right":window.road[a+1].y<b.y?d="down":d="up"),a||(d="end"),allTiles[c]=new PathTile(b.x,b.y,d),allTiles[c].drawElement()}}for(const a of Object.values(allTiles))window.road.find(b=>b.x==a.x&&b.y==a.y)||(a.deleteElement(),delete allTiles[`${a.x}.${a.y}`]);return oldPI.apply(this,arguments)},window._g=showPath;