|
| 1 | +const FISHIE_API = "https://api.crygup.com/fishie"; |
| 2 | +const CLIENT_ID = "876391494485950504"; |
| 3 | + |
| 4 | +let currentTab = "avatars"; |
| 5 | +let currentPage = 1; |
| 6 | +let currentQuery = ""; |
| 7 | +let loggedInUser = JSON.parse(localStorage.getItem("discord_user") || "null"); |
| 8 | +let accessToken = localStorage.getItem("discord_token") || null; |
| 9 | +let currentUserId = null; |
| 10 | + |
| 11 | +const grid = document.getElementById("results-grid"); |
| 12 | +const pagination = document.getElementById("pagination"); |
| 13 | +const statusEl = document.getElementById("status"); |
| 14 | +const input = document.getElementById("search-input"); |
| 15 | +const loginSection = document.getElementById("login-section"); |
| 16 | +const tabs = document.querySelectorAll("#discord-tabs .tab-btn"); |
| 17 | + |
| 18 | +tabs.forEach(btn => { |
| 19 | + btn.addEventListener("click", () => { |
| 20 | + tabs.forEach(b => b.classList.remove("active")); |
| 21 | + btn.classList.add("active"); |
| 22 | + currentTab = btn.dataset.tab; |
| 23 | + currentPage = 1; |
| 24 | + updateDeleteAllLabel(); |
| 25 | + if (currentQuery) fetchData(); |
| 26 | + }); |
| 27 | +}); |
| 28 | + |
| 29 | +function tabLabel() { |
| 30 | + return currentTab === "avatars" ? "Avatars" : currentTab === "usernames" ? "Usernames" : currentTab === "display-names" ? "Display Names" : "Discrims"; |
| 31 | +} |
| 32 | + |
| 33 | +function renderLogin() { |
| 34 | + if (loggedInUser) { |
| 35 | + loginSection.innerHTML = `<p class="login-status">Logged in as <strong>${escapeHtml(loggedInUser.global_name || loggedInUser.username)}</strong> <button id="logout-btn" class="small-btn">Logout</button> <button id="delete-all-btn" class="small-btn danger" style="display:none">Delete All ${tabLabel()}</button></p>`; |
| 36 | + document.getElementById("logout-btn").addEventListener("click", () => { |
| 37 | + localStorage.removeItem("discord_user"); localStorage.removeItem("discord_token"); |
| 38 | + loggedInUser = null; accessToken = null; renderLogin(); |
| 39 | + }); |
| 40 | + document.getElementById("delete-all-btn").addEventListener("click", deleteAll); |
| 41 | + } else { |
| 42 | + const params = new URLSearchParams(window.location.search); |
| 43 | + const code = params.get("code"); |
| 44 | + if (code) { window.history.replaceState({}, "", "/discord"); exchangeCode(code); } |
| 45 | + loginSection.innerHTML = `<a class="small-login-btn" href="https://discord.com/oauth2/authorize?client_id=${CLIENT_ID}&redirect_uri=${encodeURIComponent("https://crygup.com/discord")}&response_type=code&scope=identify">Login with Discord</a>`; |
| 46 | + } |
| 47 | +} |
| 48 | + |
| 49 | +function updateDeleteAllLabel() { |
| 50 | + const btn = document.getElementById("delete-all-btn"); |
| 51 | + if (btn) btn.textContent = `Delete All ${tabLabel()}`; |
| 52 | +} |
| 53 | + |
| 54 | +async function exchangeCode(code) { |
| 55 | + loginSection.innerHTML = '<p class="login-status">Logging in…</p>'; |
| 56 | + try { |
| 57 | + const res = await fetch(`${FISHIE_API}/oauth/exchange?code=${encodeURIComponent(code)}`, { method: "POST" }); |
| 58 | + if (!res.ok) throw new Error("Login failed"); |
| 59 | + const data = await res.json(); |
| 60 | + localStorage.setItem("discord_user", JSON.stringify(data.user)); |
| 61 | + localStorage.setItem("discord_token", data.access_token); |
| 62 | + loggedInUser = data.user; accessToken = data.access_token; |
| 63 | + renderLogin(); |
| 64 | + } catch { loginSection.innerHTML = '<p class="login-status">Login failed. Refresh to try again.</p>'; } |
| 65 | +} |
| 66 | + |
| 67 | +document.getElementById("search-form").addEventListener("submit", e => { |
| 68 | + e.preventDefault(); |
| 69 | + currentQuery = input.value.trim(); |
| 70 | + currentPage = 1; |
| 71 | + if (currentQuery) fetchData(); |
| 72 | +}); |
| 73 | + |
| 74 | +const ENDPOINTS = { |
| 75 | + avatars: (id, page) => `https://api.crygup.com/avatars?q=${id}&page=${page}&per_page=80`, |
| 76 | + usernames: (id, page) => `${FISHIE_API}/usernames/${id}?page=${page}&per_page=80`, |
| 77 | + "display-names": (id, page) => `${FISHIE_API}/display-names/${id}?page=${page}&per_page=80`, |
| 78 | + discrims: (id, page) => `${FISHIE_API}/discrims/${id}?page=${page}&per_page=80`, |
| 79 | +}; |
| 80 | +const TABLE_MAP = { usernames: "username_logs", "display-names": "display_name_logs", discrims: "discrim_logs", avatars: "avatars" }; |
| 81 | + |
| 82 | +const canDelete = () => accessToken && loggedInUser && currentUserId === String(loggedInUser.id); |
| 83 | + |
| 84 | +async function fetchData() { |
| 85 | + grid.innerHTML = ""; |
| 86 | + statusEl.textContent = "Loading…"; |
| 87 | + pagination.classList.add("hidden"); |
| 88 | + try { |
| 89 | + let id = currentQuery; |
| 90 | + if (!/^\d+$/.test(currentQuery)) { |
| 91 | + const r = await fetch(`${FISHIE_API}/resolve?q=${encodeURIComponent(currentQuery)}`); |
| 92 | + if (!r.ok) { const e = await r.json().catch(() => ({})); throw new Error(e.detail || "Could not resolve user"); } |
| 93 | + id = (await r.json()).user_id; |
| 94 | + } |
| 95 | + currentUserId = id; |
| 96 | + const res = await fetch(ENDPOINTS[currentTab](id, currentPage)); |
| 97 | + if (!res.ok) { const e = await res.json().catch(() => ({})); throw new Error(e.detail || "Not found"); } |
| 98 | + const data = await res.json(); |
| 99 | + if (currentTab === "avatars") renderAvatars(data.avatars); |
| 100 | + else renderTextItems(data.items); |
| 101 | + renderPagination(data.page, data.pages); |
| 102 | + statusEl.textContent = data.total ? `${data.total} found` : "No results."; |
| 103 | + const delBtn = document.getElementById("delete-all-btn"); |
| 104 | + if (delBtn) { updateDeleteAllLabel(); delBtn.style.display = canDelete() ? "" : "none"; } |
| 105 | + } catch (err) { statusEl.textContent = err.message; } |
| 106 | +} |
| 107 | + |
| 108 | +function renderAvatars(avatars) { |
| 109 | + grid.innerHTML = ""; |
| 110 | + grid.className = "avatar-grid"; |
| 111 | + for (const av of avatars) { |
| 112 | + const div = document.createElement("div"); |
| 113 | + div.className = "avatar-cell"; |
| 114 | + const img = document.createElement("img"); |
| 115 | + img.src = av.url; img.alt = av.avatar_key; img.loading = "lazy"; |
| 116 | + img.onerror = () => { img.src = ""; }; |
| 117 | + div.appendChild(img); |
| 118 | + div.addEventListener("click", () => openModal(av)); |
| 119 | + grid.appendChild(div); |
| 120 | + } |
| 121 | +} |
| 122 | + |
| 123 | +function renderTextItems(items) { |
| 124 | + grid.innerHTML = ""; |
| 125 | + grid.className = ""; |
| 126 | + if (!items.length) return; |
| 127 | + const list = document.createElement("div"); |
| 128 | + list.className = "text-list"; |
| 129 | + for (const item of items) { |
| 130 | + const row = document.createElement("div"); |
| 131 | + row.className = "text-row"; |
| 132 | + const key = item.id || item.value; |
| 133 | + const delBtn = canDelete() ? `<button class="delete-btn" data-key="${escapeHtml(key)}">×</button>` : ""; |
| 134 | + row.innerHTML = `${delBtn}<span class="text-value">${escapeHtml(item.value)}</span><span class="text-date">${new Date(item.created_at).toLocaleDateString()}</span>`; |
| 135 | + if (canDelete()) row.querySelector(".delete-btn").addEventListener("click", e => { e.stopPropagation(); deleteItem(TABLE_MAP[currentTab], key); }); |
| 136 | + list.appendChild(row); |
| 137 | + } |
| 138 | + grid.appendChild(list); |
| 139 | +} |
| 140 | + |
| 141 | +async function deleteItem(table, key) { |
| 142 | + if (!confirm("Delete this entry?")) return; |
| 143 | + try { |
| 144 | + const res = await fetch(`${FISHIE_API}/item/${table}/${currentUserId}?key=${encodeURIComponent(key)}`, { method: "DELETE", headers: { Authorization: `Bearer ${accessToken}` } }); |
| 145 | + if (!res.ok) throw new Error("Delete failed"); |
| 146 | + closeModal(); |
| 147 | + alert("Deleted."); |
| 148 | + fetchData(); |
| 149 | + } catch { alert("Delete failed."); } |
| 150 | +} |
| 151 | + |
| 152 | +async function deleteAll() { |
| 153 | + const table = TABLE_MAP[currentTab]; |
| 154 | + if (!confirm(`Delete ALL your ${tabLabel().toLowerCase()}? This cannot be undone!`)) return; |
| 155 | + if (!confirm("Are you sure? This data will be permanently deleted.")) return; |
| 156 | + try { |
| 157 | + const res = await fetch(`${FISHIE_API}/user/${currentUserId}?table=${table}`, { method: "DELETE", headers: { Authorization: `Bearer ${accessToken}` } }); |
| 158 | + if (!res.ok) throw new Error("Delete all failed"); |
| 159 | + alert(`${tabLabel()} deleted.`); |
| 160 | + fetchData(); |
| 161 | + } catch { alert("Delete failed."); } |
| 162 | +} |
| 163 | + |
| 164 | +function escapeHtml(s) { return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, '''); } |
| 165 | + |
| 166 | +function renderPagination(page, pages) { |
| 167 | + if (pages <= 1) { pagination.classList.add("hidden"); return; } |
| 168 | + pagination.classList.remove("hidden"); |
| 169 | + pagination.innerHTML = `<button ${page<=1?"disabled":""} id="prev-btn">← Prev</button><span>${page} / ${pages}</span><button ${page>=pages?"disabled":""} id="next-btn">Next →</button>`; |
| 170 | + document.getElementById("prev-btn")?.addEventListener("click", () => { currentPage--; fetchData(); }); |
| 171 | + document.getElementById("next-btn")?.addEventListener("click", () => { currentPage++; fetchData(); }); |
| 172 | +} |
| 173 | + |
| 174 | +const modal = document.getElementById("modal"); |
| 175 | +const modalImg = document.getElementById("modal-img"); |
| 176 | +const modalKey = document.getElementById("modal-key"); |
| 177 | +const modalDate = document.getElementById("modal-date"); |
| 178 | +function openModal(av) { |
| 179 | + modalImg.src = av.url; |
| 180 | + modalKey.innerHTML = `${escapeHtml(av.avatar_key)} ${canDelete() ? `<button class="modal-del" data-key="${escapeHtml(av.avatar_key)}">Delete</button>` : ""}`; |
| 181 | + modalDate.textContent = new Date(av.created_at).toLocaleString("en-US", { year:"numeric", month:"short", day:"numeric", hour:"numeric", minute:"2-digit" }); |
| 182 | + if (canDelete()) modalKey.querySelector(".modal-del").addEventListener("click", () => deleteItem("avatars", av.avatar_key)); |
| 183 | + modal.classList.remove("hidden"); |
| 184 | +} |
| 185 | +function closeModal() { modal.classList.add("hidden"); modalImg.src = ""; } |
| 186 | +document.querySelector(".modal-backdrop")?.addEventListener("click", closeModal); |
| 187 | +document.querySelector(".modal-close")?.addEventListener("click", closeModal); |
| 188 | +document.addEventListener("keydown", e => { if (e.key==="Escape" && !modal.classList.contains("hidden")) closeModal(); }); |
| 189 | + |
| 190 | +renderLogin(); |
| 191 | +const qp = new URLSearchParams(window.location.search); |
| 192 | +const q = qp.get("q"); |
| 193 | +const tabParam = qp.get("tab"); |
| 194 | +if (tabParam && document.querySelector(`#discord-tabs [data-tab="${tabParam}"]`)) { |
| 195 | + document.querySelectorAll("#discord-tabs .tab-btn").forEach(b => b.classList.remove("active")); |
| 196 | + document.querySelector(`#discord-tabs [data-tab="${tabParam}"]`).classList.add("active"); |
| 197 | + currentTab = tabParam; |
| 198 | +} |
| 199 | +if (q) { input.value = q; currentQuery = q; fetchData(); } |
| 200 | +else if (loggedInUser) { input.value = loggedInUser.username; currentQuery = String(loggedInUser.id); fetchData(); } |
0 commit comments