added relative rank page

static/css/styles.css

@@ -24,8 +24,8 @@ main {
 .arrow {
     width: 0;
     height: 0;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
     border-bottom: 20px solid black;
     margin: 20px auto;
     transform-origin: center;
@@ -38,3 +38,22 @@ main {
     align-items: center; /* Vertically center the arrow with the text */
     gap: 10px; /* Add spacing between the items */
 }
+
+.s-tier {
+    background-color: #ffeb3b; /* Bright yellow for S-Tier */
+    color: #000;
+}
+
+.a-tier {
+    background-color: #4caf50; /* Green for A-Tier */
+    color: #fff;
+}
+
+.other-tier {
+    background-color: #f44336; /* Red for other items */
+    color: #fff;
+}
+
+.mb-2{
+    list-style-type: none;
+}

static/js/ranking.js

@@ -0,0 +1,97 @@
+// 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));
+});