skinswitcher/html/partials/gallery.html

<h1 class="title">Saved skins</h1>
<div class="columns is-mobile">
    <div class="column">
        <img src="" class="skin" id="flat" alt="Current Skin" style="display: none;">
        <div id="mesh"></div>
    </div>
    <div class="column">
        <div class="box">
            <div id="list"></div>
        </div>
        <div class="buttons">
            <button class="button" id="set">Use this skin</button>
            <button class="button" id="switch" style="display: none;">Switch to 2D</button>
        </div>
        <div class="buttons has-addons">
            <button class="button" id="download">Download</button>
            <button class="button is-danger" id="delete">Delete</button>
        </div>
    </div>
</div>

<script src="../src/skin.js"></script>

<script>
    var fileid = 0;
    var current = 0;

    fs.readdir(path.join(__dirname + "/../assets/skins/download/"), (err, files) => {
        files.forEach(file => {
            var ctx = document.createElement("canvas");
            ctx.width = 32;
            ctx.height = 32;
            $(ctx).addClass("py-1 px-1");

            var canvas = ctx.getContext("2d");

            canvas["imageSmoothingEnabled"] = false; /* standard */
            canvas["mozImageSmoothingEnabled"] = false; /* Firefox */
            canvas["oImageSmoothingEnabled"] = false; /* Opera */
            canvas["webkitImageSmoothingEnabled"] = false; /* Safari */
            canvas["msImageSmoothingEnabled"] = false; /* IE */

            var img = new Image();
            img.onload = function () {
                canvas.drawImage(img, 8, 8, 8, 8, 0, 0, 32, 32);
            };
            img.src = "data:image/png;base64," + fs.readFileSync(path.join(__dirname +
                "/../assets/skins/download/" + file), {
                encoding: "base64"
            });

            ctx.addEventListener("click", (e) => {
                setView(img.src);
                current = $(ctx).attr("data-fileid")
            });

            $(ctx).attr("data-fileid", fileid);

            if (fileid == 0) {
                setView(img.src);
                current = $(ctx).attr("data-fileid")
            };
            
            fileid++;

            list.appendChild(ctx);
        });

        $("button#set").on("click", (e) => {
            settings.set = view.flat.src;
            load("/partials/upload.html");
        });

        $("button#delete").on("click", () => {
            fs.unlink(path.join(__dirname + "/../assets/skins/download/" + files[current]), (err, res) => {
                if (err) {
                    notify("danger", "Something went wrong: " + err)
                } else {
                    notify("warning", "Skin has been deleted");
                    load("/partials/gallery.html");
                }
            });
        });
    });
</script>