diff --git a/app.py b/app.py
index b687dbc..c5da7f2 100644
--- a/app.py
+++ b/app.py
@@ -1,4 +1,4 @@
-from flask import Flask, render_template, request, redirect, url_for
+from flask import Flask, render_template, request, redirect, url_for, jsonify
from models import db, Item
from datetime import datetime as dt
import requests
@@ -23,6 +23,16 @@ def home():
username = "Test_Username"
return render_template('home.html', items=items, testList=testList, username=username)
+@app.route('/relative-rank')
+def rank():
+ return render_template('relative_rank.html')
+
+@app.route("/save-rankings", methods=["POST"])
+def save_rankings():
+ data = request.json # Get the ranked items and tiers
+ print(data) # For debugging, print the data received
+ return jsonify({"message": "Rankings saved successfully!"})
+
@app.route('/add', methods=['GET', 'POST'])
def add_item():
if request.method == 'POST':
diff --git a/static/css/styles.css b/static/css/styles.css
index 880897d..16146cd 100644
--- a/static/css/styles.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/static/js/ranking.js b/static/js/ranking.js
new file mode 100644
index 0000000..01aba68
--- /dev/null
+++ b/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));
+});
diff --git a/templates/base.html b/templates/base.html
index f40ed5b..e41ed9f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,7 +4,10 @@
Flask App
+
+
+
+
{% block content %}{% endblock %}
{% block moreContent%}{% endblock %}
+