skinswitcher/html/partials/gallery.html

56 lines
1.9 KiB
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" style="display: inline;"></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>
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);
});
list.appendChild(ctx);
});
});
</script>