94 lines
2.6 KiB
JavaScript
94 lines
2.6 KiB
JavaScript
const form = document.getElementById("form");
|
|
const file = document.getElementById("file");
|
|
const nameI = document.getElementById("username");
|
|
const btn = document.getElementById("submit");
|
|
const toasts = document.getElementById("toasts");
|
|
const segSkin = document.getElementById("seg-skin");
|
|
const segCape = document.getElementById("seg-cape");
|
|
|
|
let kind = "skin";
|
|
|
|
segSkin.onclick = () => {
|
|
kind = "skin";
|
|
segSkin.classList.add("active");
|
|
segCape.classList.remove("active");
|
|
segSkin.setAttribute("aria-selected", "true");
|
|
segCape.setAttribute("aria-selected", "false");
|
|
};
|
|
|
|
segCape.onclick = () => {
|
|
kind = "cape";
|
|
segCape.classList.add("active");
|
|
segSkin.classList.remove("active");
|
|
segCape.setAttribute("aria-selected", "true");
|
|
segSkin.setAttribute("aria-selected", "false");
|
|
};
|
|
|
|
function toast(msg, type = "ok") {
|
|
const t = document.createElement("div");
|
|
t.className = "toast " + type;
|
|
t.innerHTML =
|
|
'<div class="dot"></div><div style="line-height:1.35">' +
|
|
msg +
|
|
'</div><div class="x" aria-label="Закрити">✕</div>';
|
|
toasts.appendChild(t);
|
|
const close = () => {
|
|
t.style.transition = "opacity .15s ease, transform .15s ease";
|
|
t.style.opacity = "0";
|
|
t.style.transform = "translateY(-6px)";
|
|
setTimeout(() => t.remove(), 180);
|
|
};
|
|
t.querySelector(".x").onclick = close;
|
|
setTimeout(close, 4200);
|
|
}
|
|
|
|
function validName(v) {
|
|
return /^[A-Za-z0-9_]{2,16}$/.test(v);
|
|
}
|
|
|
|
form.addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
const v = nameI.value.trim();
|
|
if (!validName(v)) {
|
|
toast("Неправильний нік.", "err");
|
|
return;
|
|
}
|
|
if (!file.files?.length) {
|
|
toast("Оберіть PNG.", "err");
|
|
return;
|
|
}
|
|
|
|
const fd = new FormData();
|
|
fd.append("username", v);
|
|
fd.append("file", file.files[0]);
|
|
|
|
const url = kind === "cape" ? "/upload-cape" : "/upload";
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = "Завантаження…";
|
|
try {
|
|
const res = await fetch(url, { method: "POST", body: fd });
|
|
const text = await res.text();
|
|
let data;
|
|
try {
|
|
data = JSON.parse(text);
|
|
} catch {}
|
|
if (!res.ok || !data || data.status !== "ok") {
|
|
toast(data && data.error ? data.error : "Помилка завантаження.", "err");
|
|
} else {
|
|
toast(
|
|
kind === "cape" ? "Готово. Плащ збережено." : "Готово. Скін збережено.",
|
|
"ok"
|
|
);
|
|
form.reset();
|
|
kind = "skin";
|
|
segSkin.click();
|
|
}
|
|
} catch {
|
|
toast("Мережа недоступна.", "err");
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = "Завантажити";
|
|
}
|
|
});
|