websites: snapshot + todo: init

This commit is contained in:
nym21
2025-07-07 13:16:43 +02:00
parent d31d47eb32
commit bff22b5182
9 changed files with 481 additions and 121 deletions

View File

@@ -27,27 +27,90 @@ export function init({
chain.id = "chain";
elements.explorer.append(chain);
chain.append(createCube());
chain.append(createCube());
chain.append(createCube());
chain.append(createCube());
chain.append(createCube());
// vecsResources.getOrCreate(/** @satisfies {Height}*/ (5), "height");
//
const miners = [
{ name: "Foundry USA", color: "orange" },
{ name: "Via BTC", color: "teal" },
{ name: "Ant Pool", color: "emerald" },
{ name: "F2Pool", color: "indigo" },
{ name: "Spider Pool", color: "yellow" },
{ name: "Mara Pool", color: "amber" },
{ name: "SEC Pool", color: "violet" },
{ name: "Luxor", color: "orange" },
{ name: "Brains Pool", color: "cyan" },
];
for (let i = 0; i <= 10; i++) {
const { name, color } = utils.array.random(miners);
const { cubeElement, leftFaceElement, rightFaceElement, topFaceElement } =
createCube();
// cubeElement.style.setProperty("--color", `var(--${color})`);
const heightElement = window.document.createElement("p");
const height = (1_000_002 - i).toString();
const prefixLength = 7 - height.length;
const spanPrefix = window.document.createElement("span");
spanPrefix.style.opacity = "0.5";
spanPrefix.style.userSelect = "none";
heightElement.append(spanPrefix);
spanPrefix.innerHTML = "#" + "0".repeat(prefixLength);
const spanHeight = window.document.createElement("span");
heightElement.append(spanHeight);
spanHeight.innerHTML = height;
rightFaceElement.append(heightElement);
const feesElement = window.document.createElement("div");
feesElement.classList.add("fees");
leftFaceElement.append(feesElement);
const averageFeeElement = window.document.createElement("p");
feesElement.append(averageFeeElement);
averageFeeElement.innerHTML = `~1.41`;
const feeRangeElement = window.document.createElement("p");
feesElement.append(feeRangeElement);
const minFeeElement = window.document.createElement("span");
minFeeElement.innerHTML = `0.11`;
feeRangeElement.append(minFeeElement);
const dashElement = window.document.createElement("span");
dashElement.style.opacity = "0.5";
dashElement.innerHTML = `-`;
feeRangeElement.append(dashElement);
const maxFeeElement = window.document.createElement("span");
maxFeeElement.innerHTML = `12.1`;
feeRangeElement.append(maxFeeElement);
const feeUnitElement = window.document.createElement("p");
feesElement.append(feeUnitElement);
feeUnitElement.style.opacity = "0.5";
feeUnitElement.innerHTML = `sat/vB`;
const spanMiner = window.document.createElement("span");
spanMiner.innerHTML = name;
topFaceElement.append(spanMiner);
chain.prepend(cubeElement);
}
}
function createCube() {
const cubeElement = window.document.createElement("div");
cubeElement.classList.add("cube");
const faceFrontElement = window.document.createElement("div");
faceFrontElement.classList.add("face");
faceFrontElement.classList.add("front");
cubeElement.append(faceFrontElement);
const faceSideElement = window.document.createElement("div");
faceSideElement.classList.add("face");
faceSideElement.classList.add("side");
cubeElement.append(faceSideElement);
const faceTopElement = window.document.createElement("div");
faceTopElement.classList.add("face");
faceTopElement.classList.add("top");
cubeElement.append(faceTopElement);
return cubeElement;
const rightFaceElement = window.document.createElement("div");
rightFaceElement.classList.add("face");
rightFaceElement.classList.add("right");
cubeElement.append(rightFaceElement);
const leftFaceElement = window.document.createElement("div");
leftFaceElement.classList.add("face");
leftFaceElement.classList.add("left");
cubeElement.append(leftFaceElement);
const topFaceElement = window.document.createElement("div");
topFaceElement.classList.add("face");
topFaceElement.classList.add("top");
cubeElement.append(topFaceElement);
return {
cubeElement,
leftFaceElement,
rightFaceElement,
topFaceElement,
};
}

View File

@@ -149,6 +149,13 @@ function createUtils() {
}
return range;
},
/**
* @template T
* @param {T[]} array
*/
random(array) {
return array[Math.floor(Math.random() * array.length)];
},
};
const dom = {

View File

@@ -1300,20 +1300,19 @@ function createPartialOptions({ env, colors }) {
* @property {readonly UTXOGroupObject[]} args.list
*/
/**
* @template {"" | CohortId} T
* @param {T} _key
*/
const fixKey = (_key) =>
_key !== ""
? /** @type {Exclude<"" | `${T}_`, "_">} */ (`${_key}_`)
: /** @type {const} */ ("");
/**
* @param {UTXOGroupObject | UTXOGroupsObject} args
*/
function createUTXOGroupFolder(args) {
/**
* @template {"" | CohortId} T
* @param {T} _key
*/
const fixKey = (_key) =>
_key !== ""
? /** @type {Exclude<"" | `${T}_`, "_">} */ (`${_key}_`)
: /** @type {const} */ ("");
0;
function createCohortGroupFolder(args) {
const list = "list" in args ? args.list : [args];
const useGroupName = "list" in args;
@@ -1474,6 +1473,35 @@ function createPartialOptions({ env, colors }) {
]);
}),
},
// list.filter(({ key }) => key.endsWith("address_count")).map(callbackfn),
// {
// name: "loaded",
// title: `${args.title} Loaded Address Count`,
// bottom: list.flatMap(({ color, name, key: _key }) => {
// const key = fixKey(_key);
// return /** @type {const} */ ([
// createBaseSeries({
// key: `${key}address_count`,
// name: useGroupName ? name : "Loaded",
// color,
// }),
// createBaseSeries({
// key: `${key}empty_address_count`,
// name: useGroupName ? name : "Empty",
// color,
// }),
// ]);
// }),
// },
// {
// name: "empty",
// title: `${args.title} Empty Address Count`,
// bottom: list.flatMap(({ color, name, key: _key }) => {
// const key = fixKey(_key);
// return /** @type {const} */ ([
// ]);
// }),
// },
{
name: "Realized",
tree: [
@@ -2980,9 +3008,9 @@ function createPartialOptions({ env, colors }) {
],
},
{
name: "UTXOs",
name: "Cohorts",
tree: [
createUTXOGroupFolder({
createCohortGroupFolder({
key: "",
name: "",
title: "",
@@ -2991,100 +3019,181 @@ function createPartialOptions({ env, colors }) {
{
name: "term",
tree: [
createUTXOGroupFolder({
createCohortGroupFolder({
name: "Compare",
title: "Compare By Term",
list: terms,
}),
...terms.map(createUTXOGroupFolder),
...terms.map(createCohortGroupFolder),
],
},
{
name: "Up to date",
tree: [
createUTXOGroupFolder({
createCohortGroupFolder({
name: "Compare",
title: "Compare By Up To",
list: upToDate,
}),
...upToDate.map(createUTXOGroupFolder),
...upToDate.map(createCohortGroupFolder),
],
},
{
name: "From Date",
tree: [
createUTXOGroupFolder({
createCohortGroupFolder({
name: "Compare",
title: "Compare By From",
list: fromDate,
}),
...fromDate.map(createUTXOGroupFolder),
...fromDate.map(createCohortGroupFolder),
],
},
{
name: "Date Range",
tree: [
createUTXOGroupFolder({
createCohortGroupFolder({
name: "Compare",
title: "Compare By Range",
list: dateRange,
}),
...dateRange.map(createUTXOGroupFolder),
...dateRange.map(createCohortGroupFolder),
],
},
{
name: "Epoch",
tree: [
createUTXOGroupFolder({
createCohortGroupFolder({
name: "Compare",
title: "Compare By Epoch",
list: epoch,
}),
...epoch.map(createUTXOGroupFolder),
],
},
{
name: "Up to size",
tree: [
createUTXOGroupFolder({
name: "Compare",
title: "Compare By Up To Size",
list: upToSize,
}),
...upToSize.map(createUTXOGroupFolder),
],
},
{
name: "From size",
tree: [
createUTXOGroupFolder({
name: "Compare",
title: "Compare By From Size",
list: fromSize,
}),
...fromSize.map(createUTXOGroupFolder),
],
},
{
name: "Size range",
tree: [
createUTXOGroupFolder({
name: "Compare",
title: "Compare By Size Range",
list: sizeRanges,
}),
...sizeRanges.map(createUTXOGroupFolder),
...epoch.map(createCohortGroupFolder),
],
},
{
name: "type",
tree: [
createUTXOGroupFolder({
createCohortGroupFolder({
name: "Compare",
title: "Compare By Type",
list: type,
}),
...type.map(createUTXOGroupFolder),
...type.map(createCohortGroupFolder),
],
},
{
name: "UTXOs Up to size",
tree: [
createCohortGroupFolder({
name: "Compare",
title: "Compare UTXOs By Up To Size",
list: upToSize,
}),
...upToSize.map(createCohortGroupFolder),
],
},
{
name: "UTXOs From size",
tree: [
createCohortGroupFolder({
name: "Compare",
title: "Compare UTXOs By From Size",
list: fromSize,
}),
...fromSize.map(createCohortGroupFolder),
],
},
{
name: "UTXOs Size range",
tree: [
createCohortGroupFolder({
name: "Compare",
title: "Compare UTXOs By Size Range",
list: sizeRanges,
}),
...sizeRanges.map(createCohortGroupFolder),
],
},
{
name: "Addresses Up to size",
tree: [
createCohortGroupFolder({
name: "Compare",
title: "Compare Addresses By Up To Size",
list: upToSize.map(
(obj) =>
/** @type {const} */ ({
...obj,
key: `addresses_${obj.key}`,
title: `Addresses ${obj.title}`,
}),
),
}),
...upToSize
.map(
(obj) =>
/** @type {const} */ ({
...obj,
key: `addresses_${obj.key}`,
title: `Addresses ${obj.title}`,
}),
)
.map(createCohortGroupFolder),
],
},
{
name: "Addresses From size",
tree: [
createCohortGroupFolder({
name: "Compare",
title: "Compare Addresses By From Size",
list: fromSize.map(
(obj) =>
/** @type {const} */ ({
...obj,
key: `addresses_${obj.key}`,
title: `Addresses ${obj.title}`,
}),
),
}),
...fromSize
.map(
(obj) =>
/** @type {const} */ ({
...obj,
key: `addresses_${obj.key}`,
title: `Addresses ${obj.title}`,
}),
)
.map(createCohortGroupFolder),
],
},
{
name: "Addresses Size range",
tree: [
createCohortGroupFolder({
name: "Compare",
title: "Compare Addresses By Size Range",
list: sizeRanges.map(
(obj) =>
/** @type {const} */ ({
...obj,
key: `addresses_${obj.key}`,
title: `Addresses ${obj.title}`,
}),
),
}),
...sizeRanges
.map(
(obj) =>
/** @type {const} */ ({
...obj,
key: `addresses_${obj.key}`,
title: `Addresses ${obj.title}`,
}),
)
.map(createCohortGroupFolder),
],
},
],

View File

@@ -29,11 +29,11 @@ function createTable({
keyPrefix: "table",
key: "index",
},
}
},
)
);
const index = signals.createMemo(() =>
serializedIndexToIndex(serializedIndex())
serializedIndexToIndex(serializedIndex()),
);
const table = window.document.createElement("table");
@@ -73,7 +73,7 @@ function createTable({
table.append(tbody);
const rowElements = signals.createSignal(
/** @type {HTMLTableRowElement[]} */ ([])
/** @type {HTMLTableRowElement[]} */ ([]),
);
/**
@@ -322,11 +322,11 @@ function createTable({
unit,
});
}
}
},
);
return () => vecId;
}
},
);
});
});
@@ -340,9 +340,7 @@ function createTable({
columns().forEach((vecId, colIndex) => addCol(vecId, colIndex));
obj.addRandomCol = function () {
const vecId =
possibleVecIds[Math.floor(Math.random() * possibleVecIds.length)];
addCol(vecId);
addCol(utils.array.random(possibleVecIds));
};
return () => index;
@@ -393,7 +391,7 @@ export function init({
},
inside: span,
title: "Click or tap to add a column to the table",
})
}),
);
}
@@ -498,7 +496,7 @@ function createIndexToVecIds(vecIdToIndexes) {
});
return arr;
},
/** @type {VecId[][]} */ (Array.from({ length: 24 }))
/** @type {VecId[][]} */ (Array.from({ length: 24 })),
);
indexToVecIds.forEach((arr) => {
arr.sort();