98 lines
3.4 KiB
JavaScript
98 lines
3.4 KiB
JavaScript
// Make items draggable
|
|
const itemsPool = document.getElementById("items-pool");
|
|
const rankingArea = document.getElementById("ranking-area");
|
|
const ranksPool = document.getElementById("ranks");
|
|
const addItemBtn = document.getElementById("add-item-btn");
|
|
const addRankBtn = document.getElementById("add-rank-btn");
|
|
// Enable drag-and-drop between the pool and ranking area
|
|
const sortablePool = new Sortable(itemsPool, {
|
|
group: {
|
|
name: "shared", // Group name must match between lists
|
|
pull: true, // Allow items to be dragged out
|
|
put: true, // Allow items to be dropped in
|
|
},
|
|
animation: 150,
|
|
});
|
|
|
|
const sortableRanking = new Sortable(rankingArea, {
|
|
group: {
|
|
name: "shared", // Same group name as itemsPool
|
|
pull: true, // Allow items to be dragged out
|
|
put: true, // Allow items to be dropped in
|
|
},
|
|
animation: 150,
|
|
});
|
|
|
|
// Add new item functionality
|
|
addItemBtn.addEventListener("click", () => {
|
|
const newItemText = prompt("Enter new item name:");
|
|
if (newItemText) {
|
|
const li = document.createElement("li");
|
|
li.className = "list-group-item";
|
|
li.textContent = newItemText;
|
|
li.draggable = true;
|
|
itemsPool.appendChild(li);
|
|
}
|
|
});
|
|
|
|
// Add new item functionality
|
|
addRankBtn.addEventListener("click", () => {
|
|
const newItemText = prompt("Enter new rank name:");
|
|
if (newItemText) {
|
|
const li = document.createElement("li");
|
|
li.className = "mb-2";
|
|
label = document.createElement('label');
|
|
label.innerHTML = newItemText;
|
|
input = document.createElement('input');
|
|
input.setAttribute("type", "number");
|
|
input.setAttribute("class", "form-control");
|
|
input.setAttribute("placeholder", "Enter last rank for " + newItemText);
|
|
li.appendChild(label)
|
|
li.appendChild(input);
|
|
//li.draggable = true;
|
|
ranksPool.appendChild(li);
|
|
}
|
|
});
|
|
|
|
// Save rankings and tier ranges
|
|
document.getElementById("save-btn").addEventListener("click", () => {
|
|
// Get ranked items
|
|
const rankedItems = Array.from(rankingArea.children).map((item) => item.textContent.trim());
|
|
const sTierEnd = parseInt(document.getElementById("s-tier-end").value || "0");
|
|
const aTierEnd = parseInt(document.getElementById("a-tier-end").value || "0");
|
|
|
|
// Tier categories
|
|
const tiers = {
|
|
"S-Tier": rankedItems.slice(0, sTierEnd),
|
|
"A-Tier": rankedItems.slice(sTierEnd, aTierEnd),
|
|
"Other": rankedItems.slice(aTierEnd),
|
|
};
|
|
|
|
// Apply colors to items based on tiers
|
|
Array.from(rankingArea.children).forEach((item, index) => {
|
|
item.classList.remove("s-tier", "a-tier", "other-tier"); // Remove existing classes
|
|
if (index < sTierEnd) {
|
|
item.classList.add("s-tier");
|
|
} else if (index < aTierEnd) {
|
|
item.classList.add("a-tier");
|
|
} else {
|
|
item.classList.add("other-tier");
|
|
}
|
|
});
|
|
|
|
// Disable dragging
|
|
sortableRanking.option("disabled", true); // Disable drag-and-drop for ranking area
|
|
sortablePool.option("disabled", true); // Optionally disable pool area too
|
|
|
|
// Send rankings to the server
|
|
fetch("/save-rankings", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ rankedItems, tiers }),
|
|
})
|
|
.then((response) => response.json())
|
|
.catch((error) => console.error("Error:", error));
|
|
});
|