style(bench): small cleanup (#546)
* fix(bench): await benchmark loop and adjust outline styles in templates Signed-off-by: Jason Cameron <git@jasoncameron.dev> * refactor: remove unused showContinueBar function and clean up video error handling Signed-off-by: Jason Cameron <git@jasoncameron.dev> * style: format code for consistency and readability using prettier Signed-off-by: Jason Cameron <git@jasoncameron.dev> --------- Signed-off-by: Jason Cameron <git@jasoncameron.dev>
This commit is contained in:
Jason Cameron
GitHub
parent
497005ce3e
commit
28ab29389c
7 changed files with 69 additions and 123 deletions
|
|
@ -118,7 +118,7 @@ const benchmarkLoop = async (controller) => {
|
|||
return;
|
||||
}
|
||||
|
||||
benchmarkLoop(controller);
|
||||
await benchmarkLoop(controller);
|
||||
};
|
||||
|
||||
let controller = null;
|
||||
|
|
@ -142,11 +142,11 @@ const reset = () => {
|
|||
controller.abort();
|
||||
}
|
||||
controller = new AbortController();
|
||||
benchmarkLoop(controller);
|
||||
void benchmarkLoop(controller);
|
||||
};
|
||||
|
||||
setupControls();
|
||||
difficultyInput.addEventListener("change", reset);
|
||||
algorithmSelect.addEventListener("change", reset);
|
||||
compareSelect.addEventListener("change", reset);
|
||||
reset();
|
||||
reset();
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import processFast from "./proof-of-work.mjs";
|
||||
import processSlow from "./proof-of-work-slow.mjs";
|
||||
import { testVideo } from "./video.mjs";
|
||||
|
||||
const algorithms = {
|
||||
"fast": processFast,
|
||||
"slow": processSlow,
|
||||
fast: processFast,
|
||||
slow: processSlow,
|
||||
};
|
||||
|
||||
// from Xeact
|
||||
|
|
@ -15,7 +14,9 @@ const u = (url = "", params = {}) => {
|
|||
};
|
||||
|
||||
const imageURL = (mood, cacheBuster, basePrefix) =>
|
||||
u(`${basePrefix}/.within.website/x/cmd/anubis/static/img/${mood}.webp`, { cacheBuster });
|
||||
u(`${basePrefix}/.within.website/x/cmd/anubis/static/img/${mood}.webp`, {
|
||||
cacheBuster,
|
||||
});
|
||||
|
||||
const dependencies = [
|
||||
{
|
||||
|
|
@ -35,59 +36,18 @@ const dependencies = [
|
|||
},
|
||||
];
|
||||
|
||||
function showContinueBar(hash, nonce, t0, t1) {
|
||||
const barContainer = document.createElement("div");
|
||||
barContainer.style.marginTop = "1rem";
|
||||
barContainer.style.width = "100%";
|
||||
barContainer.style.maxWidth = "32rem";
|
||||
barContainer.style.background = "#3c3836";
|
||||
barContainer.style.borderRadius = "4px";
|
||||
barContainer.style.overflow = "hidden";
|
||||
barContainer.style.cursor = "pointer";
|
||||
barContainer.style.height = "2rem";
|
||||
barContainer.style.marginLeft = "auto";
|
||||
barContainer.style.marginRight = "auto";
|
||||
barContainer.title = "Click to continue";
|
||||
|
||||
const barInner = document.createElement("div");
|
||||
barInner.className = "bar-inner";
|
||||
barInner.style.display = "flex";
|
||||
barInner.style.alignItems = "center";
|
||||
barInner.style.justifyContent = "center";
|
||||
barInner.style.color = "white";
|
||||
barInner.style.fontWeight = "bold";
|
||||
barInner.style.height = "100%";
|
||||
barInner.style.width = "0";
|
||||
barInner.innerText = "I've finished reading, continue →";
|
||||
|
||||
barContainer.appendChild(barInner);
|
||||
document.body.appendChild(barContainer);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
barInner.style.width = "100%";
|
||||
});
|
||||
|
||||
barContainer.onclick = () => {
|
||||
const redir = window.location.href;
|
||||
window.location.replace(
|
||||
u("/.within.website/x/cmd/anubis/api/pass-challenge", {
|
||||
response: hash,
|
||||
nonce,
|
||||
redir,
|
||||
elapsedTime: t1 - t0
|
||||
})
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
(async () => {
|
||||
const status = document.getElementById('status');
|
||||
const image = document.getElementById('image');
|
||||
const title = document.getElementById('title');
|
||||
const progress = document.getElementById('progress');
|
||||
const anubisVersion = JSON.parse(document.getElementById('anubis_version').textContent);
|
||||
const basePrefix = JSON.parse(document.getElementById('anubis_base_prefix').textContent);
|
||||
const details = document.querySelector('details');
|
||||
const status = document.getElementById("status");
|
||||
const image = document.getElementById("image");
|
||||
const title = document.getElementById("title");
|
||||
const progress = document.getElementById("progress");
|
||||
const anubisVersion = JSON.parse(
|
||||
document.getElementById("anubis_version").textContent,
|
||||
);
|
||||
const basePrefix = JSON.parse(
|
||||
document.getElementById("anubis_base_prefix").textContent,
|
||||
);
|
||||
const details = document.querySelector("details");
|
||||
let userReadDetails = false;
|
||||
|
||||
if (details) {
|
||||
|
|
@ -114,20 +74,7 @@ function showContinueBar(hash, nonce, t0, t1) {
|
|||
return;
|
||||
}
|
||||
|
||||
// const testarea = document.getElementById('testarea');
|
||||
|
||||
// const videoWorks = await testVideo(testarea);
|
||||
// console.log(`videoWorks: ${videoWorks}`);
|
||||
|
||||
// if (!videoWorks) {
|
||||
// title.innerHTML = "Oh no!";
|
||||
// status.innerHTML = "Checks failed. Please check your browser's settings and try again.";
|
||||
// image.src = imageURL("reject");
|
||||
// progress.style.display = "none";
|
||||
// return;
|
||||
// }
|
||||
|
||||
status.innerHTML = 'Calculating...';
|
||||
status.innerHTML = "Calculating...";
|
||||
|
||||
for (const { value, name, msg } of dependencies) {
|
||||
if (!value) {
|
||||
|
|
@ -140,7 +87,9 @@ function showContinueBar(hash, nonce, t0, t1) {
|
|||
}
|
||||
}
|
||||
|
||||
const { challenge, rules } = JSON.parse(document.getElementById('anubis_challenge').textContent);
|
||||
const { challenge, rules } = JSON.parse(
|
||||
document.getElementById("anubis_challenge").textContent,
|
||||
);
|
||||
|
||||
const process = algorithms[rules.algorithm];
|
||||
if (!process) {
|
||||
|
|
@ -234,14 +183,13 @@ function showContinueBar(hash, nonce, t0, t1) {
|
|||
response: hash,
|
||||
nonce,
|
||||
redir,
|
||||
elapsedTime: t1 - t0
|
||||
elapsedTime: t1 - t0,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
container.onclick = onDetailsExpand;
|
||||
setTimeout(onDetailsExpand, 30000);
|
||||
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
const redir = window.location.href;
|
||||
|
|
@ -250,12 +198,11 @@ function showContinueBar(hash, nonce, t0, t1) {
|
|||
response: hash,
|
||||
nonce,
|
||||
redir,
|
||||
elapsedTime: t1 - t0
|
||||
elapsedTime: t1 - t0,
|
||||
}),
|
||||
);
|
||||
}, 250);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
ohNoes({
|
||||
titleMsg: "Calculation error!",
|
||||
|
|
@ -263,4 +210,4 @@ function showContinueBar(hash, nonce, t0, t1) {
|
|||
imageSrc: imageURL("reject", anubisVersion, basePrefix),
|
||||
});
|
||||
}
|
||||
})();
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ export default function process(
|
|||
) {
|
||||
console.debug("slow algo");
|
||||
return new Promise((resolve, reject) => {
|
||||
let webWorkerURL = URL.createObjectURL(new Blob([
|
||||
'(', processTask(), ')()'
|
||||
], { type: 'application/javascript' }));
|
||||
let webWorkerURL = URL.createObjectURL(
|
||||
new Blob(["(", processTask(), ")()"], { type: "application/javascript" }),
|
||||
);
|
||||
|
||||
let worker = new Worker(webWorkerURL);
|
||||
const terminate = () => {
|
||||
|
|
@ -45,7 +45,7 @@ export default function process(
|
|||
|
||||
worker.postMessage({
|
||||
data,
|
||||
difficulty
|
||||
difficulty,
|
||||
});
|
||||
|
||||
URL.revokeObjectURL(webWorkerURL);
|
||||
|
|
@ -56,26 +56,27 @@ function processTask() {
|
|||
return function () {
|
||||
const sha256 = (text) => {
|
||||
const encoded = new TextEncoder().encode(text);
|
||||
return crypto.subtle.digest("SHA-256", encoded.buffer)
|
||||
.then((result) =>
|
||||
Array.from(new Uint8Array(result))
|
||||
.map((c) => c.toString(16).padStart(2, "0"))
|
||||
.join(""),
|
||||
);
|
||||
return crypto.subtle.digest("SHA-256", encoded.buffer).then((result) =>
|
||||
Array.from(new Uint8Array(result))
|
||||
.map((c) => c.toString(16).padStart(2, "0"))
|
||||
.join(""),
|
||||
);
|
||||
};
|
||||
|
||||
addEventListener('message', async (event) => {
|
||||
addEventListener("message", async (event) => {
|
||||
let data = event.data.data;
|
||||
let difficulty = event.data.difficulty;
|
||||
|
||||
let hash;
|
||||
let nonce = 0;
|
||||
do {
|
||||
if (nonce & 1023 === 0) {
|
||||
if (nonce & (1023 === 0)) {
|
||||
postMessage(nonce);
|
||||
}
|
||||
hash = await sha256(data + nonce++);
|
||||
} while (hash.substring(0, difficulty) !== Array(difficulty + 1).join('0'));
|
||||
} while (
|
||||
hash.substring(0, difficulty) !== Array(difficulty + 1).join("0")
|
||||
);
|
||||
|
||||
nonce -= 1; // last nonce was post-incremented
|
||||
|
||||
|
|
@ -87,4 +88,4 @@ function processTask() {
|
|||
});
|
||||
});
|
||||
}.toString();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ export default function process(
|
|||
difficulty = 5,
|
||||
signal = null,
|
||||
progressCallback = null,
|
||||
threads = (navigator.hardwareConcurrency || 1),
|
||||
threads = navigator.hardwareConcurrency || 1,
|
||||
) {
|
||||
console.debug("fast algo");
|
||||
return new Promise((resolve, reject) => {
|
||||
let webWorkerURL = URL.createObjectURL(new Blob([
|
||||
'(', processTask(), ')()'
|
||||
], { type: 'application/javascript' }));
|
||||
let webWorkerURL = URL.createObjectURL(
|
||||
new Blob(["(", processTask(), ")()"], { type: "application/javascript" }),
|
||||
);
|
||||
|
||||
const workers = [];
|
||||
const terminate = () => {
|
||||
|
|
@ -71,7 +71,7 @@ function processTask() {
|
|||
.join("");
|
||||
}
|
||||
|
||||
addEventListener('message', async (event) => {
|
||||
addEventListener("message", async (event) => {
|
||||
let data = event.data.data;
|
||||
let difficulty = event.data.difficulty;
|
||||
let hash;
|
||||
|
|
@ -89,7 +89,8 @@ function processTask() {
|
|||
const byteIndex = Math.floor(j / 2); // which byte we are looking at
|
||||
const nibbleIndex = j % 2; // which nibble in the byte we are looking at (0 is high, 1 is low)
|
||||
|
||||
let nibble = (thisHash[byteIndex] >> (nibbleIndex === 0 ? 4 : 0)) & 0x0F; // Get the nibble
|
||||
let nibble =
|
||||
(thisHash[byteIndex] >> (nibbleIndex === 0 ? 4 : 0)) & 0x0f; // Get the nibble
|
||||
|
||||
if (nibble !== 0) {
|
||||
valid = false;
|
||||
|
|
@ -113,7 +114,7 @@ function processTask() {
|
|||
// update and they will get behind the others. this is slightly more
|
||||
// complicated but ensures an even distribution between threads.
|
||||
if (
|
||||
nonce > oldNonce | 1023 && // we've wrapped past 1024
|
||||
(nonce > oldNonce) | 1023 && // we've wrapped past 1024
|
||||
(nonce >> 10) % threads === threadId // and it's our turn
|
||||
) {
|
||||
postMessage(nonce);
|
||||
|
|
@ -129,4 +130,3 @@ function processTask() {
|
|||
});
|
||||
}.toString();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@ const videoElement = `<video id="videotest" width="0" height="0" src="/.within.w
|
|||
|
||||
export const testVideo = async (testarea) => {
|
||||
testarea.innerHTML = videoElement;
|
||||
return (await new Promise((resolve) => {
|
||||
const video = document.getElementById('videotest');
|
||||
return await new Promise((resolve) => {
|
||||
const video = document.getElementById("videotest");
|
||||
video.oncanplay = () => {
|
||||
testarea.style.display = "none";
|
||||
resolve(true);
|
||||
};
|
||||
video.onerror = (ev) => {
|
||||
video.onerror = () => {
|
||||
testarea.style.display = "none";
|
||||
resolve(false);
|
||||
};
|
||||
}));
|
||||
};
|
||||
});
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue