// ==UserScript==
// @name         Bonk Skin Editor Overlay
// @version      0.1
// @author       Salama
// @description  Adds an image overlay to skin editor
// @match        https://*.bonk.io/gameframe-release.html
// @match        https://*.bonkisback.io/gameframe-release.html
// @run-at       document-end
// @grant        none
// @license      GPL-3.0-or-later
// @supportURL   https://discord.gg/Dj6usq7ww3
// @namespace    https://greasyfork.org/users/824888
// @downloadURL none
// ==/UserScript==

(function() {
	'use strict';

	let input = document.createElement("input");
	let overlay = document.createElement("img");
	let opacity = document.createElement("div");

	document.getElementById("skineditor_previewbox_skincontainer").appendChild(input);
	document.getElementById("skineditor_previewbox_skincontainer").appendChild(overlay);
	document.getElementById("skineditor_previewbox").appendChild(opacity);

	input.outerHTML = `<input type="file" id="skineditor_filechooser" style="
	touch-action: none;
	cursor: inherit;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;">`;

	overlay.outerHTML = `<img id="skineditor_imageoverlay" width="245" height="245" style="
	touch-action: none;
	cursor: inherit;
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	opacity: 0.5;">`;

	opacity.outerHTML = `<div class="newbonklobby_playerentry_balancecontainer brownButton brownButton_classic" style="
	position: absolute;
	bottom: 58px;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	">
	<div class="newbonklobby_playerentry_balancetext">Opacity</div>
	<input id="skineditor_opacityslider" type="range" min="0" max="100" step="1" value="50" class="compactSlider slider newbonklobby_playerentry_balanceslider" style="
	width: 90%;
	">
	</div>`;

	document.getElementById("skineditor_filechooser").addEventListener("change", e => {
		let file = e.target.files[0];
		let reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = re => {
			document.getElementById("skineditor_imageoverlay").src = re.target.result;
		}
	});

	document.getElementById("skineditor_opacityslider").addEventListener("input", e => {
		document.getElementById("skineditor_imageoverlay").style.opacity = e.target.value / 100;
	});
})();