Skip to content

Commit

Permalink
Improve rank stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
xdelamotte committed Feb 7, 2025
1 parent 930e89a commit db41199
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 95 deletions.
59 changes: 23 additions & 36 deletions _posts/2025-02-03/2025-02-03-rank-stuff.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,62 +4,49 @@
category: Random
---

Separate items by new lines, and send the

<textarea id="list" rows="15">Tomato
Spinach
Carrots
Broccoli
</textarea>

<label>Share URL</label>
<a id="shareUrl" target="_blank"></a>
<p>

<button id="copy">📋 Copy</button>
</p>
<div id="app"></div>

<style>
small {
margin: 10px;
color: grey;
font-size: small;
}

.popup {
background-color: var(--bg);
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
}

.popup .content {
height: 80%;
.column {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.popup .column {
font-size: 8rem;
flex: 50%;
text-align: center;
padding: 10px;
cursor: pointer;
height: 100vh;

}

.big {
font-size: 8rem;
font-size: 3rem;
}

.medium {
font-size: 2rem;
font-size: 1.5rem;
}

.closeButton {
cursor: pointer;
float: right;
width: 50px;
@media (min-width: 768px) {
.big {
font-size: 8rem;
}

.medium {
font-size: 2rem;
}

.column {
width: 50%;
}
}
</style>

Expand Down
192 changes: 133 additions & 59 deletions _posts/2025-02-03/rank-stuff.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,12 @@ async function quickSort(arr, asyncCompare, left = 0, right = arr.length - 1) {
return arr;
}

const DEFAULT_VALUE = `Tomato
Spinach
Carrots
Broccoli
`

const decrypt = message => {
return LZString144.decompressFromEncodedURIComponent(message);
}
Expand All @@ -90,27 +96,19 @@ const encrypt = message => {

function compareItems(a, b) {
return new Promise((resolve, reject) => {
const popup = document.createElement("article");
const popup = document.createElement("div");
popup.classList.add("popup");
const closeButton = document.createElement("img");
closeButton.src = "close.svg";
closeButton.classList.add("closeButton");
popup.appendChild(closeButton);

const content = document.createElement("div");
content.classList.add("content");


const leftColumn = document.createElement("div");
const leftColumn = document.createElement("article");
leftColumn.classList.add("column", "big");
leftColumn.textContent = a;
content.appendChild(leftColumn);
popup.appendChild(leftColumn);

const rightColumn = document.createElement("div");
const rightColumn = document.createElement("article");
rightColumn.classList.add("column", "big");
rightColumn.textContent = b;
content.appendChild(rightColumn);
popup.appendChild(content);
popup.appendChild(rightColumn);

document.body.appendChild(popup);

Expand All @@ -129,7 +127,6 @@ function compareItems(a, b) {
resolve(value)
};

closeButton.onclick = stopSort;

rightColumn.onclick = (e) => {
e.preventDefault();
Expand All @@ -142,18 +139,10 @@ function compareItems(a, b) {
};

const onkeydown = (e) => {
e.preventDefault();
console.log(e);
switch (e.code) {
case "Escape":
stopSort();
break;
case "ArrowRight":
chooseResult(1)
break;
case "ArrowLeft":
chooseResult(-1)
break;
default:
break;
}
Expand All @@ -162,50 +151,135 @@ function compareItems(a, b) {
});
}

document.addEventListener("DOMContentLoaded", async (event) => {
const list = document.getElementById("list");
const shareUrl = document.getElementById("shareUrl");
const copyButton = document.getElementById("copy");
const PARAMS = {
ANSWER: "a",
RESULT: "r",
EDIT: "e"
}
const locationWithParam = (name, value) => {
const searchParams = new URLSearchParams([[name, value]])
return `${location.origin}${location.pathname}?${searchParams}`;
}

const QUERY_PARAM = "q";
const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get(QUERY_PARAM);
if (query) {
const array = decrypt(query).split("\n").filter(e => e)
await quickSort(array, compareItems);
list.value = array.join("\n")
const displayEdit = (values) => {
const app = document.getElementById("app");
app.innerHTML = "";
const paragraph = document.createElement("p");
paragraph.innerText = "Separate items by new lines, and send the Share URL to you friend so that they can do their own ranking.";
app.appendChild(paragraph);

const popup = document.createElement("article");
popup.classList.add("popup");
const content = document.createElement("div");
content.classList.add("content");
const column = document.createElement("div");
column.classList.add("medium")
column.innerHTML = "<p>Your ranking is: </p><ol>" + array.map(v => `<li>${v}</li>`).join("") + "</ol>";

const closeButton = document.createElement("button");
closeButton.innerText = "📋 Make your own list"
column.appendChild(closeButton);
content.appendChild(column);
popup.appendChild(content);
document.body.appendChild(popup);
const list = document.createElement("textarea");
list.rows = 15;
list.value = values;
app.appendChild(list)

closeButton.onclick = () => {
popup.remove();
const url = new URL(window.location.href);
url.searchParams.delete(QUERY_PARAM);
history.replaceState({}, "", url);
};
}
const label = document.createElement("label");
label.innerText = "Share Url"
app.appendChild(label);

const shareUrl = document.createElement("a");
app.appendChild(shareUrl);

const buttonParagraph = document.createElement("p");
const copyButton = document.createElement("button");
copyButton.innerText = "📋 Copy";
buttonParagraph.appendChild(copyButton)
app.appendChild(buttonParagraph);
const updateLink = () => {
const url = new URL(window.location.href);
const encrypted = encrypt(list.value);
url.searchParams.set(QUERY_PARAM, encrypted);
shareUrl.href = url.toString();
shareUrl.innerText = url.toString();
const answerUrl = locationWithParam(PARAMS.ANSWER, encrypted)
shareUrl.href = answerUrl.toString();
shareUrl.innerText = answerUrl.toString();
history.replaceState({}, "", locationWithParam(PARAMS.EDIT, encrypted));

}
list.oninput = updateLink;
list.oninput = debounce(updateLink);
updateLink();
addCopyToClipboardOnButton(copyButton, () => shareUrl.href);
}

const displayResult = (array) => {
const popup = document.createElement("article");
popup.classList.add("popup");
const content = document.createElement("div");
content.classList.add("medium")
content.innerHTML = "<p>Your ranking is: </p><ol>" + array.map(v => `<li>${v}</li>`).join("") + "</ol>";

const closeButton = document.createElement("button");
closeButton.innerText = "📋 Make your own list"
content.appendChild(closeButton);
popup.appendChild(content);
document.body.appendChild(popup);

closeButton.onclick = () => {
popup.remove();
const url = locationWithParam(PARAMS.EDIT, encodeArrayToParam(array));
history.replaceState({}, "", url);
displayEdit(arrayToInput(array));
};
}
const debounce = function (func, timeout = 300) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, timeout);
};
};
/**
*
* @returns {string[]}
* @param query {string}
*/
const inputToArray = (query) => {
return query.split("\n").filter(e => e)
}

/**
*
* @returns {string}
* @param array {string[]}
*/
const arrayToInput = (array) => {
return array.join("\n");
}


/**
*
* @returns {string}
* @param array {string[]}
*/
const encodeArrayToParam = (array) => {
return encrypt(arrayToInput(array));
}

document.addEventListener("DOMContentLoaded", async (event) => {
const urlParams = new URLSearchParams(window.location.search);

const answerQuery = urlParams.get(PARAMS.ANSWER);
if (answerQuery) {
const input = decrypt(answerQuery);
const array = inputToArray(input);
await quickSort(array, compareItems);
displayResult(array);
const url = locationWithParam(PARAMS.RESULT, encodeArrayToParam(array));
history.replaceState({}, "", url);
return;
}

const resultQuery = urlParams.get(PARAMS.RESULT);
if (resultQuery) {
const input = decrypt(resultQuery);
console.log(input)
const array = inputToArray(input);
console.log(array);
displayResult(array)
return;
}
const editQuery = urlParams.get(PARAMS.EDIT);
const values = editQuery ? decrypt(editQuery) : DEFAULT_VALUE;
displayEdit(values);
});

0 comments on commit db41199

Please sign in to comment.