table = { const container = html`

`; const table = html`

`; container.appendChild(table); const thead = html``; table.appendChild(thead); const tbody = html``; table.appendChild(tbody); const star0 = ``; const star1 = ``; let starred = new Set( JSON.parse(localStorage.getItem("starred_gifts") || "[]") ); function toggleStar(name) { if (starred.has(name)) { starred.delete(name); } else { starred.add(name); } localStorage.setItem("starred_gifts", JSON.stringify([...starred])); render(); } let sortIndex = 0; let asc = true; const headerNames = [ ["Name", 0], ["Price", 2], ["Marketcap", 2], ["Supply", 2], ["24h TON", 1], ["24h USD", 1], ["1w TON", 1], ["1w USD", 1], ["1m TON", 1], ["1m USD", 1] ]; const headers = html``; headerNames.forEach((h, i) => { const ic = i === sortIndex ? (asc ? "▲" : "▼") : "►"; const th = html`${h[0]} ${ic}`; th.addEventListener("click", () => { if (sortIndex === i) asc = !asc; else { sortIndex = i; asc = false; } render(); }); headers.appendChild(th); }); thead.appendChild(headers); const gp = (t, u) => t.toLocaleString("en-US") + " TON
$" + u.toLocaleString("en-US"); const gch = (x) => { const p = (x * 100) | 0; const c = x === 0 ? "#888888" : x > 0 ? "#16C784" : "#EA3943"; return `${p}%`; }; const rowNodes = gifts.map((g, i) => { const cleanName = fixName(g.name); const isStarred = starred.has(g.name); const starIcon = isStarred ? star1 : star0; const starColor = isStarred ? "#fc3" : "var(--td)"; const tr = html``; const iu = "https://fragment.com/file/gifts/" + cleanName + "/thumb.webp"; const icon = `

`; const star = `

${starIcon}

`; const name = star + icon + g.name; const price = gp(round(g.price.ton, 10), round(g.price.usd, 10)); const marketcap = gp( (g.price.ton * g.upgradedSupply) | 0, (g.price.usd * g.upgradedSupply) | 0 ); const supply = g.upgradedSupply.toLocaleString("en-US"); const cdt = gch(g.priceChange.daily.ton); const cdu = gch(g.priceChange.daily.usd); const cwt = gch(g.priceChange.weekly.ton); const cwu = gch(g.priceChange.weekly.usd); const cmt = gch(g.priceChange.monthly.ton); const cmu = gch(g.priceChange.monthly.usd); const cells = [ [name, i], [price, g.price.ton], [marketcap, g.price.ton * g.upgradedSupply], [supply, g.upgradedSupply], [cdt, g.priceChange.daily.ton], [cdu, g.priceChange.daily.usd], [cwt, g.priceChange.weekly.ton], [cwu, g.priceChange.weekly.usd], [cmt, g.priceChange.monthly.ton], [cmu, g.priceChange.monthly.usd] ]; cells.forEach((cell, j) => { const a = headerNames[j][1]; const align = a === 0 ? "left" : a === 1 ? "center" : "right"; const td = html`${cell[0]}`; tr.appendChild(td); }); tr.querySelector(".star").addEventListener("click", (e) => { toggleStar(g.name); e.stopPropagation(); }); tbody.appendChild(tr); return { tr, values: cells, name: g.name }; }); function render() { const sorted = rowNodes.slice().sort((a, b) => { const isStarA = starred.has(a.name); const isStarB = starred.has(b.name); if (isStarA !== isStarB) return isStarB - isStarA; const va = a.values[sortIndex][1]; const vb = b.values[sortIndex][1]; return asc ? va - vb : vb - va; }); tbody.innerHTML = ""; sorted.forEach((row, idx) => { const isStarred = starred.has(row.name); const starElement = row.tr.querySelector(".star"); starElement.innerHTML = isStarred ? star1 : star0; //starElement.style.color = isStarred ? "#FFD700" : "var(--td)"; row.tr.style.background = idx & 1 ? "#8881" : "#0000"; tbody.appendChild(row.tr); }); thead.querySelectorAll("th").forEach((th, i) => { th.textContent = `${headerNames[i][0]} ${ i === sortIndex ? (asc ? "▲" : "▼") : "►" }`; }); } render(); if (!("ontouchstart" in window || navigator.maxTouchPoints > 0)) { d3.select(container) .style("cursor", "grab") .call( d3 .drag() .on("start", function () { d3.select(this).style("cursor", "grabbing"); }) .on("drag", function (event) { this.scrollLeft -= event.dx; }) .on("end", function () { d3.select(this).style("cursor", "grab"); }) ); } return container; }