remaking relative rank
This commit is contained in:
Nico Melone
13
static/css/relative_rank.css
Normal file
13
static/css/relative_rank.css
Normal file
@@ -0,0 +1,13 @@
|
||||
.item {
|
||||
border: 1px solid black;
|
||||
width: fit-content;
|
||||
list-style: none;
|
||||
padding: 5px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
BIN
static/favicon.ico
Normal file
BIN
static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@@ -1,97 +1,41 @@
|
||||
// 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);
|
||||
function dragstart_handler(ev) {
|
||||
console.log("dragStart");
|
||||
// Change the source element's background color to signify drag has started
|
||||
//ev.currentTarget.style.border = "dashed";
|
||||
// Add the id of the drag source element to the drag data payload so
|
||||
// it is available when the drop event is fired
|
||||
ev.dataTransfer.setData("text", ev.target.id);
|
||||
// Tell the browser both copy and move are possible
|
||||
ev.effectAllowed = "copyMove";
|
||||
}
|
||||
function dragover_handler(ev) {
|
||||
//console.log("dragOver");
|
||||
// Change the target element's border to signify a drag over event
|
||||
// has occurred
|
||||
ev.currentTarget.style.background = "lightblue";
|
||||
ev.preventDefault();
|
||||
}
|
||||
function drop_handler(ev) {
|
||||
//console.log("Drop");
|
||||
ev.preventDefault();
|
||||
// Get the id of drag source element (that was added to the drag data
|
||||
// payload by the dragstart event handler)
|
||||
var id = ev.dataTransfer.getData("text");
|
||||
// Only Move the element if the source and destination ids are both "move"
|
||||
if (id == "src_move" && ev.target.id == "drop-target"){
|
||||
ev.target.appendChild(document.getElementById(id));
|
||||
ev.target.style.background = "white";
|
||||
}
|
||||
});
|
||||
|
||||
// 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);
|
||||
// Copy the element if the source and destination ids are both "copy"
|
||||
if (id == "src_copy" && ev.target.id == "dest_copy") {
|
||||
var nodeCopy = document.getElementById(id).cloneNode(true);
|
||||
nodeCopy.id = "newId";
|
||||
ev.target.appendChild(nodeCopy);
|
||||
}
|
||||
});
|
||||
|
||||
// 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));
|
||||
});
|
||||
}
|
||||
function dragend_handler(ev) {
|
||||
//console.log("dragEnd");
|
||||
// Restore source's border
|
||||
//ev.target.style.border = "solid black";
|
||||
ev.target.style.background = "white";
|
||||
}
|
||||
97
static/js/ranking_ai.js
Normal file
97
static/js/ranking_ai.js
Normal file
@@ -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));
|
||||
});
|
||||
Reference in New Issue
Block a user