// ==UserScript==
// @name         Gota.io Skins Optimiser
// @namespace    https://skins.gota.io/
// @version      1.0
// @description  Turns the skin page into dark theme, re-adjusted fonts and added new skin submission features!
// @author       alex
// @match        https://skins.gota.io/*
// @grant        GM_addStyle
// @run-at document-start
// @downloadURL none
// ==/UserScript==
(function() {
    'use strict';

    window.onload = function() {
        function assignClass(classname, arg) {
            if (document.getElementsByClassName(classname) == null) return;
            document.getElementsByClassName(classname)[0].id = arg;
        }
        assignClass(`container theme-showcase`, `skinsBg`);

        if (window.location.href == `https://skins.gota.io/skin_request.php`) {
            let newDiv = document.createElement("div");
            newDiv.style = `text-align: center`;
            newDiv.className = "form-group";
            newDiv.id = "moreInfo";
            newDiv.style.color = "white";
            newDiv.style.fontFamily = "Montserrat, sans-serif";

            document.body.appendChild(newDiv);

            document.getElementById(`moreInfo`).innerHTML += `<br><hr>
<h1>Additional Options</h1><br>

<label class="col-md-4 control-label" for="starterName">Starter Value for skin name</label>
<div class="col-md-4">
<input id="starterName" type="text" placeholder="bnok" class="form-control input-md">
</div><br><br>

<label class="col-md-4 control-label" for="starterSkin">Starter Value for skin image</label>
<div class="col-md-4">
<input id="starterSkin" type="text" placeholder="https://i.imgur.com/.png" class="form-control input-md">
</div><br><br>

<label class="col-md-4 control-label" for="starterInfo">Starter Value for other information</label>
<div class="col-md-4">
<input id="starterInfo" type="text" placeholder="pls accept this anime skin" class="form-control input-md">
</div><br><br><br>

<button onclick = 'alert("When you enter a value in something like the Starter Value for skin name textbox, when you press apply changes, the skin name box will automatically start with what you entered. So if I entered bnok into the box, pressed apply changes then refresh, the skin name box will start with bnok.")'; class = 'btn btn-danger'>What do these additional options mean?</button>
<button class = 'btn btn-success' onclick = applied()>Apply changes</button>

<hr>`
            var scriptElem = document.createElement('script');
            scriptElem.innerHTML = `function applied() {
let skinName = document.getElementById('starterName').value;
let skinImage = document.getElementById('starterSkin').value;
let skinInfo = document.getElementById('starterInfo').value;

localStorage.setItem('nameStorage', skinName);
localStorage.setItem('imageStorage', skinImage);
localStorage.setItem('infoStorage', skinInfo);
}`;
            document.body.appendChild(scriptElem);
            document.getElementById('skinName').value = localStorage.getItem('nameStorage');
            document.getElementById('skinImage').value = localStorage.getItem('imageStorage');
            document.getElementById('otherInfo').value = localStorage.getItem('infoStorage');
            document.getElementById('starterName').value = localStorage.getItem('nameStorage');
            document.getElementById('starterSkin').value = localStorage.getItem('imageStorage');
            document.getElementById('starterInfo').value = localStorage.getItem('infoStorage');
        }

        GM_addStyle(`@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
background-color: #242424;
}
.jumbotron {
background-color: #3b3b3b;
color: white;
font-family: 'Montserrat', sans-serif;
}
#skinsBg {
background-color: #3b3b3b;
};
legend {
font-size:0px;
}
`)
    }
})();