added relative rank page

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':

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));
+});

templates/base.html

@@ -4,7 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Flask App</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
+    
 </head>
 <body>
     <header>
@@ -12,12 +15,15 @@
             <a href="{{ url_for('home') }}">Home</a>
             <a href="{{ url_for('add_item') }}">Add Item</a>
             <a href="{{ url_for('get_weather') }}">Weather</a>
+            <a href="{{ url_for('rank') }}">Relative Rank</a>
             <a href="{{ url_for('about') }}">About</a>
         </nav>
     </header>
     <main>
+        <div class="container mt-4">
         {% block content %}{% endblock %}
         {% block moreContent%}{% endblock %}
+        </div>
     </main>
 </body>
 </html>

templates/relative_rank.html

@@ -0,0 +1,46 @@
+{%extends "base.html"%}
+
+{%block content%}
+<h1>Relative Ranking</h1>
+
+<div class="row">
+    <!-- Items to rank -->
+    <div class="col-md-4">
+        <h4>Items Pool</h4>
+        <ul id="items-pool" class="list-group">
+            <li class="list-group-item" draggable="true">Item A</li>
+            <li class="list-group-item" draggable="true">Item B</li>
+            <li class="list-group-item" draggable="true">Item C</li>
+        </ul>
+        <button class="btn btn-primary mt-2" id="add-item-btn">Add Item</button>
+    </div>
+
+    <!-- Ranking area -->
+    <div class="col-md-4">
+        <h4>Ranking Area</h4>
+        <ul id="ranking-area" class="list-group border"></ul>
+    </div>
+
+    <!-- Tier settings -->
+    <div class="col-md-4">
+        <h4>Tier Settings</h4>
+        <div id="tiers">
+            <ul id="ranks">
+            <li class="mb-2">
+                <label>S-Tier Range:</label>
+                <input type="number" id="s-tier-end" class="form-control" placeholder="Enter last rank for S-Tier">
+            </li>
+            <li class="mb-2">
+                <label>A-Tier Range:</label>
+                <input type="number" id="a-tier-end" class="form-control" placeholder="Enter last rank for A-Tier">
+            </li>
+            </ul>
+            <!-- Add more tiers as needed -->
+        </div>
+        <button class="btn btn-success mt-2" id="add-rank-btn">New Ranking</button>
+        <button class="btn btn-success mt-2" id="save-btn">Save Rankings</button>
+    </div>
+</div>
+
+<script src="{{ url_for('static', filename='js/ranking.js') }}"></script>
+{%endblock%}