Rename to Rank Stuff

x4d3 · Feb 4, 2025 · 930e89a · 930e89a
1 parent f23e7c9
commit 930e89a
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 39 deletions.
diff --git a/_posts/2025-02-03/2025-02-03-sort-lists.html → _posts/2025-02-03/2025-02-03-rank-stuff.html b/_posts/2025-02-03/2025-02-03-sort-lists.html → _posts/2025-02-03/2025-02-03-rank-stuff.html
@@ -1,22 +1,23 @@
 ---
 layout: post
-title: Sort List
+title: Rank Stuff
 category: Random
 ---
 
-<textarea id="list" rows="15">Beyoncé
-Britney Spears
-Céline Dion
-Lady Gaga
-Madonna
-Mariah Carey
-Rihanna
-Taylor Swift
-Whitney Houston
+Separate items by new lines, and send the
+
+<textarea id="list" rows="15">Tomato
+Spinach
+Carrots
+Broccoli
 </textarea>
 
-<button id="sort">🔡 Sort</button>
-<ol id="output"></ol>
+<label>Share URL</label>
+<a id="shareUrl" target="_blank"></a>
+<p>
+
+    <button id="copy">📋 Copy</button>
+</p>
 
 <style>
     small {
@@ -26,33 +27,43 @@
     }
 
     .popup {
-        font-size: 8rem;
         background-color: var(--bg);
         position: fixed;
         width: 100%;
         height: 100%;
     }
-    .popup .content{
+
+    .popup .content {
         height: 80%;
         display: flex;
         justify-content: center;
         align-items: center;
     }
 
-    .popup  .column {
+    .popup .column {
+        font-size: 8rem;
         flex: 50%;
         text-align: center;
         padding: 10px;
+        cursor: pointer;
+    }
+
+    .big {
+        font-size: 8rem;
+    }
+
+    .medium {
+        font-size: 2rem;
     }
 
     .closeButton {
         cursor: pointer;
         float: right;
-        width:50px;
+        width: 50px;
     }
-
 </style>
 
+<script src="{{"/assets/js/clipboard.js" | relative_url }}"></script>
 <script src="lz-string.js"></script>
-<script src="sort-lists.js"></script>
+<script src="rank-stuff.js"></script>
 
diff --git a/_posts/2025-02-03/sort-lists.js → _posts/2025-02-03/rank-stuff.js b/_posts/2025-02-03/sort-lists.js → _posts/2025-02-03/rank-stuff.js
@@ -80,12 +80,16 @@ async function quickSort(arr, asyncCompare, left = 0, right = arr.length - 1) {
     return arr;
 }
 
+const decrypt = message => {
+    return LZString144.decompressFromEncodedURIComponent(message);
+}
 
+const encrypt = message => {
+    return LZString144.compressToEncodedURIComponent(message);
+}
 
 function compareItems(a, b) {
     return new Promise((resolve, reject) => {
-        console.log(a, b)
-
         const popup = document.createElement("article");
         popup.classList.add("popup");
         const closeButton = document.createElement("img");
@@ -98,18 +102,18 @@ function compareItems(a, b) {
 
 
         const leftColumn = document.createElement("div");
-        leftColumn.classList.add("column");
+        leftColumn.classList.add("column", "big");
         leftColumn.textContent = a;
         content.appendChild(leftColumn);
 
-
         const rightColumn = document.createElement("div");
-        rightColumn.classList.add("column");
+        rightColumn.classList.add("column", "big");
         rightColumn.textContent = b;
         content.appendChild(rightColumn);
         popup.appendChild(content);
 
         document.body.appendChild(popup);
+
         const closePopup = () => {
             document.removeEventListener("keydown", onkeydown);
             popup.remove();
@@ -129,12 +133,12 @@ function compareItems(a, b) {
 
         rightColumn.onclick = (e) => {
             e.preventDefault();
-            chooseResult(-1)
+            chooseResult(1)
         };
 
         leftColumn.onclick = (e) => {
             e.preventDefault();
-            chooseResult(1)
+            chooseResult(-1)
         };
 
         const onkeydown = (e) => {
@@ -145,33 +149,63 @@ function compareItems(a, b) {
                     stopSort();
                     break;
                 case "ArrowRight":
-                    chooseResult(-1)
+                    chooseResult(1)
                     break;
                 case "ArrowLeft":
-                    chooseResult(1)
+                    chooseResult(-1)
                     break;
                 default:
                     break;
             }
         };
         document.addEventListener("keydown", onkeydown);
     });
-
 }
 
-document.addEventListener("DOMContentLoaded", (event) => {
-
+document.addEventListener("DOMContentLoaded", async (event) => {
     const list = document.getElementById("list");
-    const output = document.getElementById("output");
+    const shareUrl = document.getElementById("shareUrl");
+    const copyButton = document.getElementById("copy");
 
-    const sortButton = document.getElementById("sort");
-    sortButton.onclick = async () => {
-        console.log("onclick")
-        const array = list.value.split("\n").filter((n) => n);
-        await quickSort(array, compareItems)
-        list.value = array.join("\n");
-        output.innerHTML = array.map(v => `<li>${v}</li>`).join("")
-    };
+    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 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);
+
+        closeButton.onclick = () => {
+            popup.remove();
+            const url = new URL(window.location.href);
+            url.searchParams.delete(QUERY_PARAM);
+            history.replaceState({}, "", url);
+        };
+    }
+    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();
+    }
+    list.oninput = updateLink;
+    updateLink();
+    addCopyToClipboardOnButton(copyButton, () => shareUrl.href);
 });