// ==UserScript==
// @name         Bonk resolution setter
// @version      0.1
// @author       Salama
// @description  Adds a resolution setter box to the settings
// @match        https://bonk.io/gameframe-release.html
// @run-at       document-end
// @grant        none
// @supportURL   https://discord.gg/Dj6usq7ww3
// @namespace    https://greasyfork.org/users/824888
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';
    let newResolution = null;
    window.devicePixelRatio = localStorage.getItem("salamaResolution") || window.devicePixelRatio;
    let setting = document.createElement("div");
    document.getElementById("settingsContainer").appendChild(setting);
    setting.outerHTML = `
<div id="salama_resolution" style="
    top: 345px;
    left: 255px;
    position: absolute;
    display: flex;
    font-family: futurept_b1;
">
    <div style="
        margin-right: 10px;
    ">Quality [20-100]</div>
    <input id="salama_resolution_input" class="mapeditor_field fieldShadow" value="${window.devicePixelRatio * 100}" autocomplete="off">
</div>`;
    document.getElementById("salama_resolution_input").addEventListener("change", e => {
        let v = e.target.value;
        if(v < 20) v = 20;
        if(v > 100) v = 100;
        newResolution = v / 100;
        e.target.value = v;
    });
    document.getElementById("settings_saveButton").addEventListener("click", e => {
        if(newResolution) {
            window.devicePixelRatio = newResolution;
            localStorage.setItem("salamaResolution", window.devicePixelRatio);
            newResolution = null;
            // This needs to change to reload graphics
            let old = document.getElementById("settings_graphicsquality").selectedIndex;
            document.getElementById("settings_graphicsquality").selectedIndex = (old === 2 ? 0 : 2);
            document.getElementById("settings_graphicsquality").onchange();
            e.target.click();
            document.getElementById("settings_graphicsquality").selectedIndex = old;
            document.getElementById("settings_graphicsquality").onchange();
        }
    });
})();