gribse/easy-ranker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial commit

Browse source
This commit is contained in:
gribse 2025-02-17 16:41:26 +00:00
commit a8c8e1d7e2
5 changed files with 218 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

152
app.js Executable file
View file

@ -0,0 +1,152 @@
document.getElementById('start-ranking').addEventListener('click', startRanking);
document.getElementById('help-button').addEventListener('click', toggleHelp);
document.getElementById('copy-results').addEventListener('click', copyResultsToClipboard);
let words = [];
let currentPair = [];
let scores = {};
let rounds = 0;
let currentRound = 0;
let playedPairs = new Set();
const scoreThreshold = 5;
let totalVotes = 0;
let votesDone = 0;
function startRanking() {
const wordList = document.getElementById('word-list').value.trim().split('\n');
words = wordList.filter(word => word.trim() !== '');
if (words.length < 2) {
showMessage('Please enter at least two words.');
return;
}
words.forEach(word => scores[word] = 1000);
rounds = Math.ceil(Math.log2(words.length)) + 2; // Number of rounds for Swiss-system
currentRound = 0;
playedPairs.clear();
totalVotes = rounds * (words.length / 2);
votesDone = 0;
document.getElementById('ranking-section').classList.remove('hidden');
document.getElementById('progress').style.width = '0%';
updateRankingList();
nextPair();
}
function nextPair() {
if (currentRound >= rounds) {
showMessage('Ranking complete!');
disableVoteButtons();
return;
}
currentPair = getNextPair();
if (!currentPair) {
currentRound++;
nextPair();
return;
}
document.getElementById('word1').textContent = currentPair[0];
document.getElementById('word2').textContent = currentPair[1];
document.getElementById('word1').onclick = () => vote(currentPair[0], currentPair[1]);
document.getElementById('word2').onclick = () => vote(currentPair[1], currentPair[0]);
}
function getNextPair() {
const sortedWords = Object.keys(scores).sort((a, b) => scores[b] - scores[a]);
for (let i = 0; i < sortedWords.length - 1; i++) {
for (let j = i + 1; j < sortedWords.length; j++) {
if (!hasPlayed(sortedWords[i], sortedWords[j]) && Math.abs(scores[sortedWords[i]] - scores[sortedWords[j]]) <= scoreThreshold) {
return [sortedWords[i], sortedWords[j]];
}
}
}
return null;
}
function hasPlayed(word1, word2) {
const pair = [word1, word2].sort().join('-');
return playedPairs.has(pair);
}
function vote(winner, loser) {
const k = 32;
const expectedScoreWinner = 1 / (1 + Math.pow(10, (scores[loser] - scores[winner]) / 400));
const expectedScoreLoser = 1 - expectedScoreWinner;
scores[winner] += k * (1 - expectedScoreWinner);
scores[loser] += k * (0 - expectedScoreLoser);
const pair = [winner, loser].sort().join('-');
playedPairs.add(pair);
votesDone++;
updateProgress();
updateRankingList();
nextPair();
}
function updateProgress() {
const progress = (votesDone / totalVotes) * 100;
document.getElementById('progress').style.width = progress + '%';
}
function updateRankingList() {
const rankingList = document.getElementById('ranking-list');
rankingList.innerHTML = '';
const sortedWords = Object.keys(scores).sort((a, b) => scores[b] - scores[a]);
sortedWords.forEach(word => {
const listItem = document.createElement('li');
listItem.classList.add('ranking-item', 'p-2', 'border', 'rounded', 'bg-gray-100', 'flex', 'justify-between');
const wordSpan = document.createElement('span');
wordSpan.classList.add('word');
wordSpan.textContent = word;
const scoreSpan = document.createElement('span');
scoreSpan.classList.add('score');
scoreSpan.textContent = Math.round(scores[word]);
listItem.appendChild(wordSpan);
listItem.appendChild(scoreSpan);
rankingList.appendChild(listItem);
});
}
function disableVoteButtons() {
document.getElementById('word1').disabled = true;
document.getElementById('word2').disabled = true;
document.getElementById('word1').classList.add('bg-gray-500', 'cursor-not-allowed');
document.getElementById('word2').classList.add('bg-gray-500', 'cursor-not-allowed');
}
function toggleHelp() {
const helpSection = document.getElementById('help-section');
helpSection.classList.toggle('hidden');
if (!helpSection.classList.contains('hidden')) {
helpSection.style.maxHeight = helpSection.scrollHeight + "px";
} else {
helpSection.style.maxHeight = null;
}
}
function showMessage(message) {
const messageBox = document.getElementById('message-box');
const messageText = document.getElementById('message-text');
messageText.textContent = message;
messageBox.classList.remove('hidden');
}
function copyResultsToClipboard() {
const sortedWords = Object.keys(scores).sort((a, b) => scores[b] - scores[a]);
const results = sortedWords.map(word => `${word}: ${Math.round(scores[word])}`).join('\n');
navigator.clipboard.writeText(results).then(() => {
const clipboardOkIcon = document.querySelector('.clipboard-ok');
clipboardOkIcon.classList.remove('hidden');
setTimeout(() => {
clipboardOkIcon.classList.add('hidden');
}, 5000);
}).catch(err => {
alert('Failed to copy results: ', err);
});
}

66
index.html Executable file
View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ELO Ranking System 2</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
<div id="app" class="bg-white p-8 rounded shadow-md w-full max-w-6xl flex h-full">
<div id="input-section" class="w-1/3 p-4">
<h1 class="text-2xl font-bold mb-4">Input Words</h1>
<textarea id="word-list" class="w-full p-2 border rounded mb-4" placeholder="Enter words, one per line"></textarea>
<button id="start-ranking" class="w-full bg-blue-500 text-white p-2 rounded mb-4">Start Ranking</button>
<div class="flex items-center">
<button id="help-button" class="w-full bg-gray-500 text-white p-2 rounded relative">
Help
<!-- circle-info icon by Free Icons (https://free-icons.github.io/free-icons/) -->
<svg xmlns="http://www.w3.org/2000/svg" height="1em" fill="white" viewBox="0 0 512 512" class="absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4">
<path
d="M 256 48 Q 313 48 360 76 L 360 76 L 360 76 Q 407 103 436 152 Q 464 201 464 256 Q 464 311 436 360 Q 407 409 360 436 Q 313 464 256 464 Q 199 464 152 436 Q 105 409 76 360 Q 48 311 48 256 Q 48 201 76 152 Q 105 103 152 76 Q 199 48 256 48 L 256 48 Z M 256 512 Q 326 511 384 478 L 384 478 L 384 478 Q 442 444 478 384 Q 512 323 512 256 Q 512 189 478 128 Q 442 68 384 34 Q 326 1 256 0 Q 186 1 128 34 Q 70 68 34 128 Q 0 189 0 256 Q 0 323 34 384 Q 70 444 128 478 Q 186 511 256 512 L 256 512 Z M 216 336 Q 194 338 192 360 Q 194 382 216 384 L 296 384 L 296 384 Q 318 382 320 360 Q 318 338 296 336 L 288 336 L 288 336 L 288 248 L 288 248 Q 286 226 264 224 L 216 224 L 216 224 Q 194 226 192 248 Q 194 270 216 272 L 240 272 L 240 272 L 240 336 L 240 336 L 216 336 L 216 336 Z M 256 192 Q 270 192 279 183 L 279 183 L 279 183 Q 288 174 288 160 Q 288 146 279 137 Q 270 128 256 128 Q 242 128 233 137 Q 224 146 224 160 Q 224 174 233 183 Q 242 192 256 192 L 256 192 Z"
/>
</svg>
</button>
</div>
<div id="help-section" class="hidden mt-4 p-4 bg-gray-100 border rounded transition-all duration-500 ease-in-out">
<p>Enter words in the textarea, one per line. Click "Start Ranking" to begin the ranking process.</p>
</div>
</div>
<div id="ranking-section" class="w-2/3 p-4">
<h1 class="text-2xl font-bold mb-4">Ranking</h1>
<div id="voting-section" class="flex justify-between mb-4">
<button id="word1" class="w-1/2 bg-blue-500 text-white p-2 rounded mr-2">Choice 1</button>
<button id="word2" class="w-1/2 bg-blue-500 text-white p-2 rounded ml-2">Choice 2</button>
</div>
<div id="loading-bar" class="w-full bg-gray-200 rounded h-4 mb-4">
<div id="progress" class="bg-green-500 h-4 rounded" style="width: 0;"></div>
</div>
<div id="message-box" class="hidden p-4 bg-gray-100 border rounded">
<p id="message-text"></p>
<button id="copy-results" class="bg-blue-500 text-white p-2 rounded mt-4 flex items-center">
Copy Results to clipboard
<svg xmlns="http://www.w3.org/2000/svg" height="1em" fill="white" viewBox="0 0 512 512" class="ml-2">
<path
d="M 344 64 L 384 64 L 344 64 L 384 64 Q 411 65 429 83 Q 447 101 448 128 L 448 448 L 448 448 Q 447 475 429 493 Q 411 511 384 512 L 128 512 L 128 512 Q 101 511 83 493 Q 65 475 64 448 L 64 128 L 64 128 Q 65 101 83 83 Q 101 65 128 64 L 168 64 L 178 64 Q 184 36 205 18 Q 226 1 256 0 Q 286 1 307 18 Q 328 36 334 64 L 344 64 L 344 64 Z M 128 112 Q 113 113 112 128 L 112 448 L 112 448 Q 113 463 128 464 L 384 464 L 384 464 Q 399 463 400 448 L 400 128 L 400 128 Q 399 113 384 112 L 368 112 L 368 112 L 368 136 L 368 136 Q 366 158 344 160 L 256 160 L 168 160 Q 146 158 144 136 L 144 112 L 144 112 L 128 112 L 128 112 Z M 256 104 Q 278 102 280 80 Q 278 58 256 56 Q 234 58 232 80 Q 234 102 256 104 L 256 104 Z"
/>
</svg>
<svg class="clipboard-ok hidden ml-2" xmlns="http://www.w3.org/2000/svg" height="1em" fill="white" viewBox="0 0 512 512">
<path
d="M 501.7142857142857 83.42857142857143 Q 512 94.85714285714286 512 109.71428571428571 L 512 109.71428571428571 L 512 109.71428571428571 Q 512 124.57142857142857 501.7142857142857 136 L 209.14285714285714 428.57142857142856 L 209.14285714285714 428.57142857142856 Q 197.71428571428572 438.85714285714283 182.85714285714286 438.85714285714283 Q 168 438.85714285714283 156.57142857142858 428.57142857142856 L 10.285714285714286 282.2857142857143 L 10.285714285714286 282.2857142857143 Q 0 270.85714285714283 0 256 Q 0 241.14285714285714 10.285714285714286 229.71428571428572 Q 21.714285714285715 219.42857142857142 36.57142857142857 219.42857142857142 Q 51.42857142857143 219.42857142857142 62.857142857142854 229.71428571428572 L 182.85714285714286 350.85714285714283 L 182.85714285714286 350.85714285714283 L 449.14285714285717 83.42857142857143 L 449.14285714285717 83.42857142857143 Q 460.57142857142856 73.14285714285714 475.42857142857144 73.14285714285714 Q 490.2857142857143 73.14285714285714 501.7142857142857 83.42857142857143 L 501.7142857142857 83.42857142857143 Z"
/>
</svg>
</button>
</div>
</div>
<div id="ranking-table-section" class="w-1/3 p-4">
<h1 class="text-2xl font-bold mb-4">Current Rankings</h1>
<ul id="ranking-list" class="space-y-2">
<!-- Rankings will be dynamically inserted here -->
</ul>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

BIN
info.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

0
readme.md Normal file
View file

0
styles.css Executable file
View file