script.js

const tiersElement = document.getElementById("tiers");
const tierTemplate = document.getElementById("tier-template");
const itemTemplate = document.getElementById("item-template");
const settingsElement = document.getElementById("settings");
const colorPicker = document.getElementById("tier-color-picker");

let draggingElement = null;



document.addEventListener("click", function (event) {
    if (event.target.classList.contains("gs-image")) {
        event.stopImmediatePropagation();
        event.preventDefault();
    }
}, true);


document.body.addEventListener('drop', function (event) {

    // Очистка стилей
    document.querySelector("#right-panel").classList.remove("right-panel-delete-area");
    document.querySelector("#add-tier-area").classList.add("hidden");

    event.preventDefault();

    let files = event.dataTransfer.files;
    if (!files || files.length == 0) { return false; }

    // Если JSON
    if (files.length == 1 && files[0].type == "application/json" && files[0].name.toLowerCase().endsWith(".json")) {
        const reader = new FileReader();
        const file = files[0];
        reader.onload = () => {
            const data = JSON.parse(reader.result);
            console.log(data);
        };
        reader.readAsText(file, 'utf-8');
        return false;
    }

    // Проверяем наличие картинок
    files = [...files].filter(file => file.type.startsWith("image/"));
    if (files.length == 0) { return false; }
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    files.forEach(file => {
        if (file.type.startsWith("image/")) {
            const reader = new FileReader();
            reader.onload = () => {
                const img = new Image();
                img.onload = () => {

                    canvas.width = img.width;
                    canvas.height = img.height;

                    ctx.drawImage(img, 0, 0);
                    const dataUrl = canvas.toDataURL("image/png", 1);
                    const title = file.name.substring(0, file.name.lastIndexOf('.'))

                    if (document.querySelector(`#left-panel img[src='${dataUrl}']`)) {
                        const dicision = confirm("Такая картинка уже существует. Добавить ещё одну?");
                        if (!dicision) { return false; }
                    }

                    const item = createItem(title, dataUrl);
                    distributeItem(event, item);
                }
                img.src = reader.result;
            };
            reader.readAsDataURL(file);
        }
    })
    return false;
});


document.addEventListener("dragstart", function (event) {
    draggingElement = event.target;
    if (draggingElement.nodeName == "IMG") {
        document.querySelector("#add-tier-area").classList.remove("hidden");
    }
    if (draggingElement.className == "item") {
        document.querySelector("#right-panel").classList.add("right-panel-delete-area");
    }
    return false;
})


function tierDropEvent(event) {
    if (!draggingElement) { return false; }

    if (draggingElement.className === "tier") {
        const tier = event.target.closest(".tier");
        const targetIndex = [...tiersElement.children].indexOf(tier);
        const draggableIndex = [...tiersElement.children].indexOf(draggingElement);
        if (targetIndex > draggableIndex) {
            tier.insertAdjacentElement('afterend', draggingElement);
        } else if (targetIndex < draggableIndex) {
            tier.insertAdjacentElement('beforebegin', draggingElement);
        }
        return false;
    } else if (draggingElement.className === "item") {
        if (draggingElement == event.target.closest(".item")) {
            return false;
        }
        distributeItem(event, draggingElement);
    } else if (draggingElement.classList.contains("gs-image")) {
        const src = draggingElement.src;
        if (document.querySelector(`#left-panel img[src='${src}']`)) {
            const dicision = confirm("Такая картинка уже существует. Добавить ещё одну?");
            if (!dicision) { return false; }
        }
        const title = document.querySelector("input.gsc-input").value;
        const item = createItem(title, src);
        distributeItem(event, item);
    }
    draggingElement = null;
    return false;
}
document.querySelector("#shell").ondrop = tierDropEvent;
document.querySelector("#add-tier-area").ondrop = tierDropEvent;


function distributeItem(event, item) {
    if (event.target.className == "tier-content") {
        event.target.closest(".tier-content").appendChild(item);
    } else if (event.target.id == "shell") {
        document.querySelector("#shell").appendChild(item);
    } else if (event.target.id == "add-tier-area") {
        const tier = createTier();
        tier.querySelector(".tier-content").appendChild(item);
    } else {
        const hoveredItem = event.target.closest(".item");
        const tierContent = hoveredItem.closest(".tier-content");
        const targetIndex = [...tierContent.children].indexOf(hoveredItem);
        const draggableIndex = [...tierContent.children].indexOf(item);
        if (targetIndex > draggableIndex) {
            hoveredItem.insertAdjacentElement('afterend', item);
        } else if (targetIndex < draggableIndex) {
            hoveredItem.insertAdjacentElement('beforebegin', item);
        }
    }
}


function createTier(title, color, content) {
    const tier = tierTemplate.content.cloneNode(true).querySelector(".tier");
    tiersElement.appendChild(tier);

    const tierTitle = tier.querySelector(".tier-title");

    tier.ondrop = tierDropEvent;
    tierTitle.onwheel = changeFontSize;
    tierTitle.onkeydown = preventNewLine;

    tier.oncontextmenu = changeTierColor;
    // tier.querySelector(".tier-settings-button-delete").onclick = deleteTier;

    tier.dataset.tier = title;

    tierTitle.innerText = title ? title : "…";
    tier.style.backgroundColor = color ? color : "#c86a6a";

    if (content) {
        content.forEach(element => {
            const item = createItem(element.title, element.image);
            tier.querySelector(".tier-content").appendChild(item);
        });
    }

    tierTitle.dispatchEvent(new Event("input"));
    return tier;
}


function changeTierColor(event) {
    event.preventDefault();
    const tier = event.target.closest(".tier");
    colorPicker.style.top = event.clientY + "px";
    colorPicker.oninput = e => tier.style.backgroundColor = e.target.value;
    colorPicker.addEventListener("blur", function (e) {
        colorPicker.removeEventListener("input", onInput);
    });
    colorPicker.click();
    return false;
}


function deleteTier(event) {
    const tier = event.target.closest(".tier");
    const tierTitle = tier.querySelector(".tier-title").innerText;
    const dicision = window.confirm(`Вы уверены, что хотите удалить тир "${tierTitle}"?`);
    if (!dicision) { return; }
    tier.remove();
    return false;
}


function createItem(title, image) {
    const item = itemTemplate.content.cloneNode(true).querySelector(".item");
    if (title) {
        item.title = title;
    }
    if (image) {
        item.src = image;
    }
    item.oncontextmenu = changeItemTitle;
    return item;
};


function deleteItem() {
    if (draggingElement.className != "item") { return }
    const title = draggingElement.title;
    const decision = confirm(`Вы уверены, что хотите удалить элемент "${title}"?`);
    if (!decision) { return; }
    draggingElement.remove();
    return false;
}
document.querySelector("#right-panel").ondrop = deleteItem;


function changeItemTitle(event) {
    event.preventDefault();
    const item = event.target.closest(".item");
    let title = item.title;
    title = prompt(`Изменить название для "${title}"`);
    if (!title) { return; }
    item.title = title;
    return false;
}


document.body.addEventListener("dragover", function (event) {
    event.preventDefault();
    return false;
});


function changeFontSize(event) {
    let fontSize = parseInt(window.getComputedStyle(event.target).fontSize);
    if (event.deltaY < 0) {
        fontSize += 2
    } else if (event.deltaY > 0) {
        fontSize -= 2
    }
    fontSize = Math.min(Math.max(fontSize, 8), 100);
    event.target.style.fontSize = fontSize + "px";
    return false;
}


function restoreFontSize(event) {
    event.preventDefault();
    event.target.style.fontSize = "48px";
    return false;
}


function preventNewLine(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
}


function exportToJson() {
    const data = []; // not dict because tiers can share the same title (don't know why but why not)
    tiersElement.querySelectorAll(".tier").forEach(tier => {

        const titleElement = tier.querySelector(".tier-title");
        const fontSize = parseInt(window.getComputedStyle(titleElement).fontSize);
        const color = titleElement.style.backgroundColor;

        const tierData = {
            tier: titleElement.innerText,
            color: color,
            fontSize: fontSize,
            items: [],
        }

        tier.querySelectorAll(".item").forEach(item => {
            tierData.items.push({
                title: item.title,
                image: item.src,
            })
        })

        data.push(tierData);
    })
    data = JSON.stringify(data, null, 2);

    const blob = new Blob([data], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "tierlist.json";
    a.click();
    setTimeout(() => {
        window.URL.revokeObjectURL(url);
    }, 100);
}


const helpText = `Добавить картинку из интернета - найди её в поиске справа и перетащи её на нужный тир.

Загрузить картинку с компьютера - перетащи её на нужный тир.

Изменить название картинки - нажми на ней ПКМ.

Создать новый тир - перетащи картинку на пустое место слева.

Переименовать тир - нажми на его название и пиши новое.

Поменять размер шрифта у названия тира - наведи на название и крути колёсико мыши.

Показать эту подсказку ещё раз - нажми Escape.

Сохранить шаблон в файл - нажми Ctrl+S.

Загрузить из шаблона - перетащи json файл на пустое место слева.
`


document.addEventListener("keydown", function (event) {
    if ((event.ctrlKey && event.key === "s")) {
        event.preventDefault();
    } else if (event.key === "Escape") {
        alert(helpText)
    }

})


function loadDefault() {
    createTier(title = "S", color = "#c86a6a");
    createTier(title = "A", color = "#f9c262");
    createTier(title = "B", color = "#e7d36e");
    createTier(title = "C", color = "#e7e384");
    createTier(title = "D", color = "#89ea76");

}
loadDefault()
// alert(helpText)

// exportToJson()