Недоделанный шаблонер

// ==UserScript==
// @name         pixelplanet.fun template
// @namespace    http://tampermonkey.net/
// @version      0.0.1
// @description  try to take over the world!
// @include      https://pixelplanet.fun/*
// @author       LohPidr
// @grant        none
// ==/UserScript==

/*
Картинка
https://raw.githubusercontent.com/TheGorox/pixelPlanetTemplate/master/images/anime.png
*/

var x;
var y;
var zoom;

var tplbox__body;
var tplbox__titletext;
var tplbox__url;
var tplbox__transparency;
var tplbox__visibility;
var gameWindow;

var storage_hidden;
var storage_url;
var storage_transparency;
var storage_showtemplate;

var template;

window.addEventListener('load', function () {

	storage_hidden = localStorage.getItem('tplbox.hidden') || 0;
	storage_url = localStorage.getItem('tplbox.url') || '';
	storage_transparency = localStorage.getItem('tplbox.transparency') || 0.5;
	storage_showtemplate = localStorage.getItem('tplbox.showtemplate') || 1;

	if(storage_url != '') {
		template = new Image();
		template.setAttribute('style', 'position: absolute; left: 0; top: 0; pointer-events: none; image-rendering: optimizeSpeed;');
		template.src = storage_url;
		document.body.appendChild(template);
	}

	var tplbox = document.createElement('div');
    tplbox.setAttribute('class', 'tplbox');
    tplbox.setAttribute('style', 'position: absolute; right: 0.9em; bottom: 0.9em; border: 1px solid #666; background: rgba(0,0,0,0.3); border-radius: 2px; padding: 5px; font-size: 0.9em;');
    tplbox.innerHTML = '<div class="tplbox__title" style="text-align:right;"><b class="tplbox__titletext" style="cursor:pointer;">Hide</b></div><div class="tplbox__body" style="border-top: 1px solid #666; padding-top: 5px; margin-top:5px;"><div style="margin-bottom:5px;">Template url: <input type="text" class="tplbox__url" style="background: rgba(255,255,255,0.5); width: 180px;"></div><div style="margin-bottom:5px;">Transparency: <input type="range" class="tplbox__transparency" min="0" max="100" style="width: 160px;"></div><div style="margin-bottom:5px;">Visibility: <input type="checkbox" class="tplbox__visibility"></div></div>';
    document.body.appendChild(tplbox);

	tplbox__body = document.querySelector('.tplbox__body');
	tplbox__titletext = document.querySelector('.tplbox__titletext');
	tplbox__url = document.querySelector('.tplbox__url');
	tplbox__transparency = document.querySelector('.tplbox__transparency');
	tplbox__visibility = document.querySelector('.tplbox__visibility');
	gameWindow = document.getElementById('gameWindow');

	if(storage_hidden == 1) {
		tplbox__body.style.display = 'none';
		tplbox__titletext.innerHTML = 'Show';
	}

	tplbox__url.value = storage_url;
	tplbox__transparency.value = storage_transparency * 100;
	tplbox__visibility.checked = (storage_showtemplate==1);

	tplbox__titletext.addEventListener('click', TplboxToggle);
	tplbox__url.addEventListener('change', UrlChange);
	tplbox__transparency.addEventListener('change', TransparencyChange);
	tplbox__visibility.addEventListener('change', TransparencyChange);

	gameWindow.addEventListener('mouseup', Sized);
	gameWindow.addEventListener('wheel', Sized);
	window.addEventListener('hashchange', Sized);
	Sized();


}, false);


var ShowImage = function() {
	if(storage_url == '') return;

	template.style.opacity = (storage_showtemplate==1) ? storage_transparency : 0;
	template.style.transform = 'scale('+zoom+')';

	var offsetX = window.innerWidth / 2;
	var offsetY = window.innerHeight / 2;

	/*
	Не ебу что тут делать
	*/

	template.style.left = offsetX + 'px';
	template.style.top = offsetY + 'px';


}


var TplboxToggle = function() {
	if(tplbox__body.style.display == 'none') {
		tplbox__body.style.display = '';
		tplbox__titletext.innerHTML = 'Hide';
		localStorage.setItem('tplbox.hidden', 0);
	} else {
		tplbox__body.style.display = 'none';
		tplbox__titletext.innerHTML = 'Show';
		localStorage.setItem('tplbox.hidden', 1);
	}
};

var UrlChange = function(e) {
	storage_url = e.target.value;
	localStorage.setItem('tplbox.url', storage_url);
	ShowImage();
};

var TransparencyChange = function() {
	storage_transparency = tplbox__transparency.value / 100;
	storage_showtemplate = tplbox__visibility.checked ? 1 : 0;
	localStorage.setItem('tplbox.transparency', storage_transparency);
	localStorage.setItem('tplbox.showtemplate', storage_showtemplate);
	template.style.opacity = storage_showtemplate ? storage_transparency : 0;
};

function Sized() {
	let hashstr = window.location.hash.substr(1).split(',');
	x = parseInt(hashstr[0]);
	y = parseInt(hashstr[1]);
	zoom = Math.pow(2, hashstr[2] / 10);
	ShowImage();
}