-
,
-
+
+
+
+
+
+
+ watever
+
diff --git a/layout.html b/layout.html
index 4c6a73b..b78444a 100644
--- a/layout.html
+++ b/layout.html
@@ -10,7 +10,7 @@
-
+
@@ -89,7 +89,7 @@
-
theme
+
☾
-
-
-
-
+
+
+
+
@@ -113,25 +133,24 @@
-
+
diff --git a/package.json b/package.json
index dc7fee8..5ca94b8 100644
--- a/package.json
+++ b/package.json
@@ -1,33 +1,33 @@
{
- "private": true,
- "type": "module",
- "scripts": {
- "build": "node render.js",
- "build-watch": "mode=dev nodemon render.js -i build -e js,json,html,css,html.inc",
- "lint": "eslint . && tsc --noEmit && prettier --check .",
- "lint:fix": "eslint --fix . && tsc --noEmit && prettier --log-level warn --write ."
- },
"devDependencies": {
- "@eslint/compat": "^1.3.0",
- "@eslint/js": "^9.29.0",
+ "@eslint/compat": "^1.3.1",
+ "@eslint/js": "^9.30.1",
"@eslint/json": "^0.12.0",
"@eslint/markdown": "^6.6.0",
"@html-eslint/eslint-plugin": "^0.42.0",
- "@typescript-eslint/eslint-plugin": "^8.35.0",
- "@typescript-eslint/parser": "^8.35.0",
- "eslint": "^9.29.0",
+ "@typescript-eslint/eslint-plugin": "^8.35.1",
+ "@typescript-eslint/parser": "^8.35.1",
+ "eslint": "^9.30.1",
"eslint-config-prettier": "^10.1.5",
- "eslint-plugin-jsdoc": "^51.2.3",
+ "eslint-plugin-jsdoc": "^51.3.3",
"eslint-plugin-package-json": "^0.40.5",
- "eslint-plugin-prettier": "^5.5.0",
- "express": "^5.1.0",
+ "eslint-plugin-prettier": "^5.5.1",
+ "five-server": "^0.4.4",
"nodemon": "^3.1.10",
- "prettier": "^3.6.0",
+ "prettier": "^3.6.2",
"typescript": "^5.8.3",
- "typescript-eslint": "^8.35.0"
+ "typescript-eslint": "^8.35.1"
},
+ "engineStrict": true,
"engines": {
"node": ">=0.16"
},
- "engineStrict": true
+ "private": true,
+ "scripts": {
+ "build": "node render.js",
+ "build-watch": "mode=dev nodemon render.js -i build -e js,json,html,css,html.inc",
+ "lint": "eslint . && tsc --noEmit && prettier --check .",
+ "lint:fix": "eslint --fix . && tsc --noEmit && prettier --log-level warn --write ."
+ },
+ "type": "module"
}
diff --git a/render.js b/render.js
index 10cebb6..9f185c2 100644
--- a/render.js
+++ b/render.js
@@ -54,7 +54,7 @@ function locateSections(text) {
let contentIndex = 0;
for (let region = regionRegex.exec(text); region !== null; region = regionRegex.exec(text)) {
if (region.groups?.open.startsWith('_content_')) {
- throw new Error(`region label cannot start with internally-used '_content_' header`);
+ throw new Error("region label cannot start with internally-used '_content_' header");
}
if (region.index !== 0) {
sections.set(`_content_${contentIndex++}`, text.substring(0, region.index));
diff --git a/server.js b/server.js
deleted file mode 100644
index 42007e3..0000000
--- a/server.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * @file Sample server for static pre-rendered site.
- * @author Jordan Mann
- */
-
-import express from 'express';
-const app = express();
-const port = 3000;
-
-// require("./render");
-
-app.use('/', express.static('build', { extensions: ['html'], index: 'index.html' }));
-
-app.listen(port, () => {
- console.log(`http://localhost:${port}/`);
-});
diff --git a/static/apps/godango/GodangoMachine.js b/static/apps/godango/GodangoMachine.js
new file mode 100644
index 0000000..2add1eb
--- /dev/null
+++ b/static/apps/godango/GodangoMachine.js
@@ -0,0 +1,588 @@
+/**
+ * @file Operates a set of spinning reels with randomized faces using spring physics.
+ * @author Jordan Mann
+ */
+
+import { sauce, word } from './math.js';
+
+// checkme: consider making this a component proper
+/**
+ * A single reel in a GodangoMachine,
+ * able to control the state of the parent machine as necessary.
+ */
+export class GodangoReel {
+ /**
+ * The reel element itself.
+ * @readonly
+ * @type {HTMLElement}
+ */
+ reel;
+
+ /**
+ * The machine which contains this reel.
+ * @readonly
+ * @type {GodangoMachine}
+ */
+ parent;
+
+ /**
+ * The type of reel.
+ * @type {'controller'|'word'|'sauce'}
+ */
+ type;
+
+ /**
+ * The two faces of the reel.
+ * @readonly
+ * @type {[HTMLElement, HTMLElement]}
+ */
+ faces;
+
+ /**
+ * The current velocity of the reel.
+ * Positive values indicate downward movement.
+ * @type {number}
+ */
+ #velocity = 0;
+
+ get velocity() {
+ return this.#velocity;
+ }
+
+ set velocity(value) {
+ if (this.#velocity === 0 && value !== 0) {
+ this.parent.movingReels++;
+ } else if (this.#velocity !== 0 && value === 0) {
+ this.parent.movingReels--;
+ }
+ this.#velocity = value;
+ }
+
+ /**
+ * The text content of the currently visible face.
+ * @type {string | null}
+ */
+ value = null;
+
+ /**
+ * Create a new face on this reel.
+ * @returns {GodangoReel['faces'][0]} a new face element with content.
+ */
+ createFace() {
+ const face = document.createElement('div');
+ face.classList.add('face');
+ this.refresh(face);
+ return face;
+ }
+
+ /**
+ * Update the content of a face (ideally when it is out of view).
+ * @param {GodangoReel['faces'][0]} face the face to update.
+ */
+ refresh(face) {
+ if (this.type === 'word') {
+ face.textContent = word();
+ } else if (this.type === 'sauce') {
+ face.textContent = sauce();
+ } else if (this.type === 'controller') {
+ face.textContent = 'SPIN';
+ } else {
+ throw new Error(`Unknown reel type ${this.type}`);
+ }
+ }
+
+ /**
+ * When a face becomes visible, this reel's content is the content of the visible face.
+ * The length of the displayed passphrase is updated accordingly.
+ * @param {GodangoReel['faces'][0]} face the face which is now visible.
+ */
+ isNowVisible(face) {
+ this.parent.currentLength -= this.value?.length ?? 0;
+ this.value = face.textContent;
+ this.parent.currentLength += this.value?.length ?? 0;
+ }
+
+ /**
+ * Update the reel's faces based on its position.
+ */
+ render() {
+ for (let i = 0; i < this.faces.length; i++) {
+ const face = this.faces[i];
+ let isFirstFace = i === 0;
+ // the position of the second face is offset by 0.5
+ // occasionally the position will be negative; then we should add 1, mod, then abs.
+ const p = Math.abs((this.position + 1 + (isFirstFace ? 0.5 : 0)) % 1);
+ face.style.transform = `translateY(${
+ // go from all the way above the reel to all the way below it
+ GodangoMachine.between(p, -100, 0, 100) - Number(!isFirstFace) * 100
+ }%) rotateX(${GodangoMachine.between(p, GodangoMachine.constants.MAX_TILT, -GodangoMachine.constants.MAX_TILT)}deg)`;
+ // when a face is entering, its bottom edge should be at the top;
+ // when it is exiting, its top edge should be at the bottom.
+ face.style.transformOrigin = `${GodangoMachine.between(p, 100, 0)}% 50%`;
+ face.style.opacity = `${GodangoMachine.between(p, 0, 1, 0)}`;
+ }
+ }
+
+ /**
+ * The current position of the reel, between 0 and 1.
+ * The faces swap positions such that there is always at least one face visible,
+ * and another face entering from the top.
+ *
+ * | Position | First Face | Second Face |
+ * |----------|------------|-------------|
+ * | 0 | Center | Above |
+ * | 0.49 | Below | Entering |
+ * | 0.5 | Top | Center |
+ * | 0.99 | Entering | Below |
+ */
+ #position = 0;
+
+ get position() {
+ return this.#position;
+ }
+
+ set position(newPosition) {
+ if (this.type !== 'controller') {
+ if (this.#position < 0.5 && newPosition >= 0.5) {
+ this.refresh(this.faces[0]);
+ this.isNowVisible(this.faces[1]);
+ }
+ if (newPosition > 1) {
+ this.refresh(this.faces[1]);
+ this.isNowVisible(this.faces[0]);
+ }
+ }
+ this.#position = newPosition % 1;
+ this.render();
+ }
+
+ /**
+ * @param {GodangoMachine} parent the machine which contains this reel.
+ * @param {GodangoReel['type']} [type] the type of reel to create.
+ */
+ constructor(parent, type = 'word') {
+ this.parent = parent;
+ this.reel = document.createElement(type === 'controller' ? 'button' : 'div');
+ this.reel.classList.add('reel');
+ this.type = type;
+ this.faces = [this.createFace(), this.createFace()];
+ this.reel.replaceChildren(...this.faces);
+ this.reel.classList.add(type);
+ if (type === 'controller') {
+ this.parent.machine.insertBefore(this.reel, this.parent.contentWrapper);
+ } else {
+ this.parent.contentWrapper.appendChild(this.reel);
+ }
+ this.parent.reels.push(this);
+ // force count to update
+ this.isNowVisible(this.faces[0]);
+ }
+}
+
+/**
+ * @typedef {object} GodangoConfiguration
+ * @property {string} separator the string to place between words.
+ * @property {string} sauceSeparator the string to place before the sauce.
+ * @property {number} wordCount the number of word reels (not including the controller or sauce reel).
+ */
+
+/**
+ * A series of spinning reels which snap into place with a spring-like action,
+ * constantly randomizing the words displayed on their faces.
+ * Designed for the purpose of generating passphrases.
+ * Not to be used for gambling.
+ */
+export default class GodangoMachine {
+ /**
+ * Container element for the reels.
+ * @type {HTMLElement}
+ */
+ machine;
+
+ /**
+ * Container element for the non-controller reels.
+ * @type {HTMLElement}
+ */
+ contentWrapper;
+
+ /**
+ * The current configuration of the machine.
+ * @type {GodangoConfiguration}
+ */
+ configuration;
+
+ /**
+ * The reels of the machine.
+ * @type {GodangoReel[]}
+ */
+ reels = [];
+
+ /**
+ * Displays the length of the current passphrase.
+ * @type {HTMLInputElement}
+ */
+ lengthBox;
+
+ /**
+ * The length being currently displayed.
+ */
+ displayedLength = 0; // TODO: calculate initial value based on the initial words
+
+ /**
+ * The sum of the lengths of all words currently displayed on the reels.
+ */
+ currentLength = 0;
+
+ /**
+ * The velocity of the length indicator.
+ * @type {number}
+ */
+ lengthVelocity = 0;
+
+ /**
+ * The number of reels currently moving.
+ * The same as counting nonzero velocities.
+ */
+ movingReels = 0;
+
+ /**
+ * Constants used in the animation of any machine.
+ */
+ static constants = Object.freeze({
+ NEVER: -Infinity,
+ /**
+ * Delay between boosting each reel after a click.
+ */
+ CLICK_START_OFFSET: 50,
+
+ /**
+ * Delay between re-engaging the spring on each reel after manual scrolling.
+ */
+ WHEEL_END_OFFSET: 50,
+
+ /**
+ * If the reel is moving forward at velocity v,
+ * the friction force applied to it is v * FORWARD_FRICTION_FACTOR.
+ */
+ FORWARD_FRICTION_FACTOR: 0.125,
+
+ /**
+ * If the reel is moving backward at velocity v,
+ * the friction force applied to it is v * BACKWARD_FRICTION_FORCE.
+ * This is stronger than forward friction to prevent prevent reels
+ * from jiggling too much as they approach a snap point.
+ */
+ BACKWARD_FRICTION_FORCE: 0.5,
+
+ /**
+ * The instantaneous velocity added to a reel when it is boosted.
+ */
+ BOOST_VELOCITY: 5,
+
+ /**
+ * This describes the "stiffness" of the spring (see Hooke's law).
+ */
+ SPRING_FACTOR: 8,
+
+ /**
+ * The velocity at which the wheel is moving too fast for the spring to engage.
+ * If this is too high, then the spring continues to jump to the next snap point
+ * before friction has an opportunity to slow it down; leading to the reel never stopping.
+ */
+ SPRING_THRESHOLD: 1.3,
+
+ /**
+ * Maximum time delta for a single animation frame, in seconds.
+ */
+ MAX_FRAME_TIME: 250 / 6,
+
+ /**
+ * The minimum velocity at which a reel is considered moving.
+ */
+ MIN_ABS_VELOCITY: 0.01,
+
+ /**
+ * The maximum number of degrees each face should be visually rotated when entering or exiting.
+ */
+ MAX_TILT: 50
+ });
+
+ /**
+ * The time the last wheel event was triggered, or -Infinity if no wheel event has occurred.
+ */
+ lastWheelTime = GodangoMachine.constants.NEVER;
+
+ /**
+ * The time the last animation frame was processed, or -Infinity if no frames have been processed.
+ */
+ lastFrameTime = GodangoMachine.constants.NEVER;
+
+ /**
+ * Whether the animation loop is currently running.
+ */
+ animationRunning = false;
+
+ /**
+ * Queue of tuples containing the time the last reel was boosted and the index of the next reel to boost.
+ * @type {[number, number][]}
+ */
+ clicks = [];
+
+ /**
+ * Calculates a value between two stops based on position.
+ * @overload
+ * @param {number} position the position value between 0 and 1.
+ * @param {number} start the first stop value.
+ * @param {number} end the second stop value.
+ * @returns {number} the calculated value between the stops.
+ */
+
+ /**
+ * Calculates a value between three stops based on position.
+ * @overload
+ * @param {number} position the position value between 0 and 1.
+ * @param {number} firstStop the first stop value.
+ * @param {number} secondStop the second stop value.
+ * @param {number} thirdStop the optional third stop value.
+ * @returns {number} the calculated value between the stops.
+ */
+
+ /**
+ * Interpolates between two or three stops based on a value between 0 and 1.
+ * @param {number} position the position value between 0 and 1.
+ * @param {number} firstStop the first stop value.
+ * @param {number} secondStop the second stop value.
+ * @param {number} [thirdStop] the optional third stop value.
+ * @returns {number} the calculated value between the stops.
+ */
+ static between(position, firstStop, secondStop, thirdStop) {
+ if (thirdStop === undefined) {
+ return firstStop + (secondStop - firstStop) * position;
+ } else if (position < 0.5) {
+ return firstStop + (secondStop - firstStop) * (position * 2);
+ }
+ return secondStop + (thirdStop - secondStop) * ((position - 0.5) * 2);
+ }
+
+ // DEBUG_FRAME_RATE = 30;
+ // DEBUG_DROPPED_FRAMES = 0;
+
+ /**
+ * Update the state of the machine until all reels have stabilized.
+ * @type {FrameRequestCallback}
+ */
+ handleAnimationFrame(timestamp) {
+ if (!this.animationRunning) return;
+
+ // convenient hack: skip the first frame to determine the frame rate.
+ // just make sure to reset timestamp to NEVER once the animation pauses.
+ if (this.lastFrameTime === GodangoMachine.constants.NEVER) {
+ this.lastFrameTime = timestamp;
+ requestAnimationFrame(this.handleAnimationFrame.bind(this));
+ return;
+ }
+
+ // if (this.DEBUG_DROPPED_FRAMES < 60 / this.DEBUG_FRAME_RATE - 1) {
+ // this.DEBUG_DROPPED_FRAMES++;
+ // requestAnimationFrame(this.handleAnimationFrame.bind(this));
+ // return;
+ // }
+ // this.DEBUG_DROPPED_FRAMES = 0;
+
+ // limit the time delta to avoid large jumps;
+ // e.g., if the page was momentarily inactive.
+ const timeDelta =
+ Math.min(timestamp - this.lastFrameTime, GodangoMachine.constants.MAX_FRAME_TIME) / 1000;
+ this.lastFrameTime = timestamp;
+
+ // this means timeFactor is 1 if running at 60 FPS, or 2 if running at 30 FPS.
+ const timeFactor = timeDelta * 60;
+
+ this.reels.forEach((reel, i) => {
+ let totalForce =
+ reel.velocity *
+ -(reel.velocity > 0
+ ? GodangoMachine.constants.FORWARD_FRICTION_FACTOR
+ : GodangoMachine.constants.BACKWARD_FRICTION_FORCE);
+
+ if (
+ timestamp - this.lastWheelTime >
+ (i === 0 ? 1 : i) * GodangoMachine.constants.WHEEL_END_OFFSET
+ ) {
+ // manual movement (scrolling) overrides the spring.
+ // once there has been END_OFFSET ms of no manual movement,
+ // the springs start to engage one at a time every END_OFFSET ms,
+ // except for the controller (0th) reel, which engages at the same time as the first reel.
+ // round to nearest 0.5
+ const nearestSnap = Math.round(reel.position * 2) / 2;
+ // the spring can only engage if the velocity is low enough;
+ // otherwise it glides across the peaks.
+ if (reel.velocity < GodangoMachine.constants.SPRING_THRESHOLD) {
+ totalForce += (nearestSnap - reel.position) * GodangoMachine.constants.SPRING_FACTOR;
+ }
+ }
+ reel.velocity += totalForce * timeFactor;
+
+ if (Math.abs(reel.velocity) < GodangoMachine.constants.MIN_ABS_VELOCITY) {
+ reel.velocity = 0;
+ }
+ });
+
+ for (let i = 0; i < this.clicks.length; i++) {
+ // immediately boost the control reel and the first reel.
+ if (this.clicks[i][1] === 0) {
+ // boosting is technically a force, but it's instantaneous and not applied over time.
+ // therefore we don't incorporate it into acceleration and apply it directly to the velocity.
+ this.reels[this.clicks[i][1]++].velocity += GodangoMachine.constants.BOOST_VELOCITY;
+ this.reels[this.clicks[i][1]++].velocity += GodangoMachine.constants.BOOST_VELOCITY;
+ this.clicks[i][0] = timestamp;
+ }
+ // for every following reel, wait START_OFFSET ms after the last reel was boosted.
+ else if (timestamp - this.clicks[i][0] > GodangoMachine.constants.CLICK_START_OFFSET) {
+ this.clicks[i][0] = timestamp;
+ this.reels[this.clicks[i][1]++].velocity += GodangoMachine.constants.BOOST_VELOCITY;
+ }
+ // remove this entry if there are no more reels to boost.
+ // clicks is a queue and all clicks take the same amount of time to process,
+ // so the entry to remove is always the first one.
+ if (this.clicks[i][1] >= this.reels.length) {
+ this.clicks.shift();
+ i--;
+ }
+ }
+
+ this.reels.forEach((reel) => (reel.position += timeDelta * reel.velocity));
+
+ let lengthForce =
+ // friction should be constant here since the effect should be the same
+ // regardless of whether the length is increasing or decreasing.
+ // backward is a bit stronger than forward so we use that.
+ this.lengthVelocity * -GodangoMachine.constants.BACKWARD_FRICTION_FORCE +
+ (this.currentLength - this.displayedLength) * GodangoMachine.constants.SPRING_FACTOR * 0.7;
+
+ this.lengthVelocity += lengthForce * timeFactor;
+
+ if (Math.abs(this.lengthVelocity) < GodangoMachine.constants.MIN_ABS_VELOCITY) {
+ this.lengthVelocity = 0;
+ }
+
+ this.displayedLength += this.lengthVelocity * timeDelta;
+
+ this.lengthBox.textContent = Math.round(this.displayedLength).toString();
+ // this.lengthBox.style.transform = `translateY(${this.displayedLength - 30}px)`;
+
+ // if all reels have stopped moving and none are held, pause the animation loop.
+ if (
+ this.movingReels === 0 &&
+ timestamp - this.lastWheelTime >
+ this.reels.length * GodangoMachine.constants.WHEEL_END_OFFSET &&
+ this.lengthVelocity === 0
+ ) {
+ this.animationRunning = false;
+ this.lastFrameTime = GodangoMachine.constants.NEVER;
+ } else {
+ requestAnimationFrame(this.handleAnimationFrame.bind(this));
+ }
+ }
+
+ /**
+ * Re-start the animation loop if it was paused.
+ */
+ resumeAnimation() {
+ if (!this.animationRunning) {
+ this.animationRunning = true;
+ requestAnimationFrame(this.handleAnimationFrame.bind(this));
+ }
+ }
+
+ /**
+ * Construct a new machine.
+ * @param {Element} root an element which contains all components of the machine.
+ * @param {GodangoConfiguration} [configuration] the configuration for the machine.
+ */
+ constructor(root, configuration = { wordCount: 5, sauceSeparator: '-', separator: '' }) {
+ /** @type {HTMLElement | null} */
+ const nullableMachine = root.querySelector('.godango-machine');
+ if (nullableMachine === null) {
+ throw new Error('Machine element not found');
+ }
+ this.machine = nullableMachine;
+
+ this.contentWrapper = document.createElement('div');
+ this.contentWrapper.classList.add('content');
+ this.machine.appendChild(this.contentWrapper);
+
+ this.configuration = configuration;
+
+ new GodangoReel(this, 'controller');
+ for (let i = 0; i < this.configuration.wordCount; i++) {
+ new GodangoReel(this, 'word');
+ }
+ new GodangoReel(this, 'sauce');
+
+ //
+ //
+ const copyButton = this.machine.appendChild(document.createElement('button'));
+ Object.assign(copyButton, {
+ name: 'copy',
+ type: 'button',
+ innerHTML: 'copy ((23))'
+ });
+
+ /** @type {HTMLInputElement | null} */
+ const nullableLengthBox = root.querySelector('.length-value');
+ if (nullableLengthBox === null) {
+ throw new Error('Length box element not found');
+ }
+ this.lengthBox = nullableLengthBox;
+
+ // don't animate the initial length
+ this.displayedLength = this.currentLength;
+
+ /**
+ * The controller reel is the first reel.
+ * It has a static label and handles user input.
+ */
+ const controller = this.reels[0].reel;
+
+ controller.addEventListener('click', () => {
+ this.clicks.push([GodangoMachine.constants.NEVER, 0]);
+ this.resumeAnimation();
+ });
+
+ // TODO: add touch support; and click and drag flicking?
+ controller.addEventListener(
+ 'wheel',
+ (
+ /** @type {WheelEvent} */
+ event
+ ) => {
+ event.preventDefault();
+ if (event.deltaY >= 0) {
+ return;
+ }
+ // safe to call every time; there's an embedded check to prevent multiple RAF calls.
+ this.resumeAnimation();
+ this.lastWheelTime = performance.now();
+ // manually scroll the reels.
+
+ this.reels.forEach(
+ (reel) => (reel.position = Math.max(reel.position - event.deltaY / 1000, 0))
+ );
+ }
+ );
+
+ // quickly init the reels - should just loop once and then terminate since there is no motion.
+ this.resumeAnimation();
+ }
+
+ /**
+ * Return the words currently being displayed.
+ * @returns {(string | null)[]} the word displayed on each word reel.
+ */
+ getPassphrase() {
+ return this.reels
+ .slice(1) // skip the controller
+ .map((reel) => reel.value);
+ }
+}
diff --git a/static/apps/godango/godango.css b/static/apps/godango/godango.css
new file mode 100644
index 0000000..c5e89c2
--- /dev/null
+++ b/static/apps/godango/godango.css
@@ -0,0 +1,26 @@
+@import url('./machine.css');
+
+header nav li.godango,
+header nav li.utilities {
+ font-weight: 900;
+}
+
+.length-value {
+ font-family: monospace;
+}
+
+.godango-app {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.bar {
+ display: flex;
+ gap: 1rem;
+ width: 100%;
+}
+
+button[name='copy'] {
+ white-space: nowrap;
+}
diff --git a/static/apps/godango/godango.js b/static/apps/godango/godango.js
new file mode 100644
index 0000000..e0a22dc
--- /dev/null
+++ b/static/apps/godango/godango.js
@@ -0,0 +1,45 @@
+/**
+ * @file Godango helper. Generates passphrases.
+ * @author Jordan Mann
+ */
+
+import GodangoMachine from './GodangoMachine.js';
+
+/**
+ * Query the DOM for core elements of the app.
+ * @param {Element} root the component which wraps the godango app.
+ * @returns { { copyButton: HTMLButtonElement } } the core elements of the app.
+ */
+const getElements = (root) => {
+ const nullableElements = {
+ copyButton: /** @type {HTMLButtonElement} */ (root.querySelector('button[name=copy]'))
+ };
+ for (const [name, element] of Object.entries(nullableElements)) {
+ if (element === null) {
+ throw new Error(`could not find ${name}`);
+ }
+ }
+ /**
+ * @typedef { { [K in keyof typeof nullableElements]: NonNullable }} Elements
+ */
+ const elements = /** @type {Elements} */ (nullableElements);
+
+ return elements;
+};
+
+/**
+ * Make UI responsive.
+ */
+export default async function main() {
+ const root = document.querySelector('.godango-app');
+ if (root === null) {
+ throw new Error('could not find godango app root component');
+ }
+ const machine = new GodangoMachine(root);
+
+ const elements = getElements(root);
+
+ elements.copyButton.addEventListener('click', async () => {
+ await navigator.clipboard.writeText(machine.getPassphrase().join('-'));
+ });
+}
diff --git a/static/apps/godango/machine.css b/static/apps/godango/machine.css
new file mode 100644
index 0000000..0e6e557
--- /dev/null
+++ b/static/apps/godango/machine.css
@@ -0,0 +1,67 @@
+/* todo: wrapping */
+.godango-machine {
+ display: flex;
+ flex: 1;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 1rem;
+
+ .content {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: var(--default-border-width);
+ }
+
+ .reel {
+ /* todo: signature mono font */
+ display: flex;
+ flex-flow: column;
+ transform-style: preserve-3d;
+ perspective: 100px;
+ align-items: center;
+ height: 3rem;
+ overflow: hidden;
+ outline: var(--default-border);
+ border: 0;
+ user-select: none;
+ }
+
+ .reel:not(.controller) {
+ font-family: monospace;
+ outline-color: color-mix(in srgb, var(--black) 40%, var(--white));
+ }
+
+ /* .reel:not(.controller):not(:last-child) {
+ border-right-width: 0;
+ } */
+
+ .reel:not(.controller, .sauce) {
+ flex: 0 0 11ch;
+ }
+
+ /* checkme: no hover state */
+ .controller {
+ border-radius: 0.25rem;
+ --controller-shadow-color: color-mix(in srgb, var(--black) 50%, transparent);
+ box-shadow:
+ inset 0 0.4rem 0.4rem -0.4rem var(--controller-shadow-color),
+ inset 0 -0.4rem 0.4rem -0.4rem var(--controller-shadow-color);
+ padding: 0;
+ }
+
+ .face {
+ height: 100%;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: fit-content;
+ padding: 0.5rem 1rem;
+ will-change: transform, transform-origin, opacity;
+ }
+
+ .separator {
+ display: none;
+ }
+}
diff --git a/static/apps/godango/math.js b/static/apps/godango/math.js
new file mode 100644
index 0000000..0bec392
--- /dev/null
+++ b/static/apps/godango/math.js
@@ -0,0 +1,90 @@
+import words from './words.js';
+
+const UINT32_RANGE = 0x100000000; // 2^32
+/**
+ *
+ * For performance this function ASSUMES that min and max are integers,
+ * that min <= max,
+ * and that max - min < UINT32_RANGE.
+ * @param {number} min the minimum integer value to generate, inclusive.
+ * @param {number} max the maximum integer value to generate, inclusive.
+ * @returns {number} a random integer on [min, max].
+ */
+const randomUintBetween = (min, max) => {
+ // suppose we are trying to model a 4-sided die.
+ // then the values we can generate are 1, 2, 3, and 4.
+ // the total range of values we can generate is (4 - 1) + 1 = 4.
+ const buckets = max - min + 1;
+
+ // the problem is that crypto.getRandomValues() generates a random number on [0, 2^32).
+ // this is like having only a 10-sided die.
+
+ // our first instinct might be to just modulo the result by the number of buckets. that means:
+ // rolling 1, 5, 9 gives us a 1;
+ // rolling 2, 6, 10 gives us a 2;
+ // rolling 3, 7 gives us a 3;
+ // rolling 4, 8 gives us a 4.
+ // but wait! that's not an even distribution!
+ // it's twice as likely to roll a 1 or a 2 than it is to roll a 3 or a 4.
+ // we need to roll again excluding values 9 and 10 so the number of buckets divides evenly into the range of values.
+ // in this case, that's a remainder of (10 % 4) = 2 values excluded.
+ const limit = UINT32_RANGE - (UINT32_RANGE % buckets);
+
+ // so keep rolling until we get a value less than 9.
+ let int;
+ do {
+ int = window.crypto.getRandomValues(new Uint32Array(1))[0];
+ } while (int >= limit);
+
+ // now we can safely modulo.
+ return min + (int % buckets);
+
+ // this process is known as rejection sampling!
+ // also see this thread: https://stackoverflow.com/a/18230432/9068081
+};
+
+/**
+ * Get a random word from the wordlist.
+ * @returns {string} a random word from the list of {@link words}.
+ */
+export function word() {
+ return words[randomUintBetween(0, words.length - 1)];
+}
+
+const NUM_DIGITS = 10;
+/**
+ * Get a random digit 0-9.
+ * @returns {number} a random number on [0,10).
+ */
+function number() {
+ return randomUintBetween(0, NUM_DIGITS - 1);
+}
+
+const NUM_LETTERS = 26;
+/**
+ * Get a random letter.
+ * @param {boolean} capital whether the letter should be capitalized.
+ * @returns {string} a random letter.
+ */
+function letter(capital = true) {
+ return String.fromCharCode((capital ? 65 : 97) + randomUintBetween(0, NUM_LETTERS - 1));
+}
+
+/**
+ * Get a random 'secret sauce' composed of one capital letter and one number.
+ * @returns {string} the sauce.
+ */
+export function sauce() {
+ return `${number()}${letter()}`;
+}
+
+/**
+ * Calculate the entropy of a passphrase.
+ * @param {number} count the number of words in the passphrase.
+ * @param {boolean} sauceIsRandom whether the suffix of the passphrase is randomly generated.
+ * @returns {number} the entropy, in number of bits.
+ */
+export const entropy = (count, sauceIsRandom) =>
+ Math.round(
+ Math.log2(Math.pow(words.length, count) * (sauceIsRandom ? NUM_DIGITS * NUM_LETTERS : 1))
+ );
diff --git a/static/apps/godango/words.js b/static/apps/godango/words.js
new file mode 100644
index 0000000..baca717
--- /dev/null
+++ b/static/apps/godango/words.js
@@ -0,0 +1,12 @@
+/**
+ * Word list. Make sure to cache this.
+ * @see {@link https://www.eff.org/dice}
+ */
+const text = await (
+ await fetch('/static/data/eff_large_wordlist.txt', {
+ cache: 'force-cache'
+ })
+).text();
+
+/** Parsed wordlist, matching 6-digit numbers to words. */
+export default [...text.matchAll(/\d+\t(\w+)\n/g)].map(([, word]) => word);
diff --git a/static/batterystatus.d.ts b/static/batterystatus.d.ts
index e6ef0c8..9e80300 100644
--- a/static/batterystatus.d.ts
+++ b/static/batterystatus.d.ts
@@ -4,7 +4,6 @@
* {@link https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/236/commits/5113f7bf4a99bbf43c0fae8403602f48701b3878}
* @author Jordan Mann
*/
-/* eslint-disable jsdoc/require-jsdoc */
interface Navigator {
getBattery(): Promise;
diff --git a/static/components/components.js b/static/components/components.js
index 0dac7ad..351ef7b 100644
--- a/static/components/components.js
+++ b/static/components/components.js
@@ -3,64 +3,150 @@
* @author Jordan Mann
*/
-/* fixme - when we define light dom inside a component, as with s in the
- * so, what's going on here is that the light DOM is being rendered
- * before we suck all the contents into the shadow ~~realm~~ dom.
- * we could manually hide every item, but we would need to do that in the HTML, which is tedious.
- * we need to prevent that flicker at any cost
+/**
+ * Fetch the text content of a file at the given URL, throwing an error if the fetch is not ok.
+ * @param {string} url URL to fetch the text content from.
+ * @returns {Promise} the text content of the file at the given URL.
+ * @throws {Error} if the fetch fails or the response is not ok.
+ */
+const getTextOrThrow = (url) =>
+ fetch(url).then((res) => {
+ if (!res.ok) {
+ throw new Error(
+ `Failed to fetch: ${res.status} ${res.statusText}. Are you sure you meant to include it? `
+ );
+ }
+ return res.text();
+ });
+
+/**
+ * @typedef ComponentAutoOptions used when creating a component without a JS class.
+ * @property {new () => HTMLElement} [extensionOf] The class to extend for this component.
+ * @property {boolean} [shadow] Whether to use a shadow DOM for this component.
*/
+/**
+ * @typedef ComponentOptions describes how a component's definition files should be loaded.
+ * @property {boolean} [html] whether to load a HTML include for this component.
+ * @property {'global' | 'local' | false} [css] whether to load a stylesheet for this component.
+ * @property {boolean | ComponentAutoOptions} [js] whether to load a JavaScript file for this component,
+ * or how to handle the template if no JavaScript file is provided.
+ */
+
+/**
+ * Cheap type assertion for a CustomElementConstructor.
+ * @param {unknown} c The value to check.
+ * @returns {c is CustomElementConstructor} whether C is probably a CustomElementConstructor.
+ */
+const isCustomElementConstructor = (c) =>
+ typeof c === 'function' && c.prototype instanceof HTMLElement;
+
/**
* Register a custom element [name]-component.
*
* {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements Read the spec.}
* @see {@link customElements.define}
- * @param {string} name The component's name; components/[name]/* will be dynamically used as a template.
- * @param {CustomElementConstructor} extensionOf Element constructor to base this component off of. For autonomous custom elements <[name]-component>, this will just be HTMLElement.
- * @param {...any} args other arguments to pass to {@link customElements.define}
+ * @param {string} name The component's name; used to reference components/[name]/[basename].*,
+ * where [basename] is like 'tab' if name is 'tabs/tab' and registered as tabs-tab-component.
+ * @param {ComponentOptions} [componentOptions] Describes how the component's definition files should be loaded.
+ * By default, the component only loads HTML into the light DOM of a subclass of HTMLElement.
+ * @param {ElementDefinitionOptions} [options] other arguments to pass to {@link customElements.define}
*/
-function createComponent(name, extensionOf = HTMLElement, ...args) {
- customElements.define(
- name + '-component',
- /** Anonymous class with callbacks dynamically generated for this component. */
- class extends extensionOf {
- /**
- * Fetch content for this component and populate it.
- * checkme that none of this should happen in connectedCallback
- */
+export default async function createComponent(
+ name,
+ { html = true, css = false, js = false } = {},
+ options
+) {
+ if (customElements.get(`${name}-component`) !== undefined) {
+ return;
+ }
+ /**
+ * The content of the HTML include for this component, if any.
+ * @type {DocumentFragment|undefined}
+ */
+ let templateContent;
+
+ /**
+ * If a CustomElementConstructor is included in the JS file,
+ * this will be a subclass that feeds in the HTML include content.
+ * @type {(new () => HTMLElement) | undefined}
+ */
+ let CustomComponent;
+
+ const basename = name.split('/').at(-1);
+
+ if (html) {
+ const template = document.createElement('template');
+ template.innerHTML = await getTextOrThrow(`/static/components/${name}/${basename}.html.inc`);
+ templateContent = template.content;
+ }
+ if (css === 'local') {
+ // if the component is using a shadow DOM, we need to inject the styles directly into the shadow root
+ const style = document.createElement('style');
+ style.textContent = await getTextOrThrow(`/static/components/${name}/${basename}.css`);
+ if (templateContent === undefined) {
+ templateContent = document.createDocumentFragment();
+ }
+ templateContent.insertBefore(style, templateContent.firstChild);
+ } else if (css === 'global') {
+ const link = document.createElement('link');
+ const linkLoaded = new Promise((resolve, reject) => {
+ link.onload = resolve;
+ link.onerror = reject;
+ });
+ link.rel = 'stylesheet';
+ link.href = `/static/components/${name}/${basename}.css`;
+ document.head.append(link);
+ // checkme: timeout loading?
+ await linkLoaded;
+ }
+ if (js === true) {
+ const MaybeCustomElementConstructor = await import(
+ `/static/components/${name}/${basename}.js`
+ ).then(
+ (module) => module.default,
+ (err) => {
+ if (err.message.startsWith('Failed to fetch dynamically imported module')) {
+ return null;
+ }
+ throw err;
+ }
+ );
+
+ if (!isCustomElementConstructor(MaybeCustomElementConstructor)) {
+ throw new TypeError('Expected a CustomElementConstructor');
+ }
+
+ /**
+ * Extend the given constructor, instantiating it with the template content.
+ */
+ CustomComponent = class extends MaybeCustomElementConstructor {
+ constructor() {
+ super(templateContent?.cloneNode(true));
+ }
+ };
+ } else {
+ // we may be given a class to extend, or fall back to HTMLElement
+ const SuperClass = typeof js === 'object' && js?.extensionOf ? js.extensionOf : HTMLElement;
+ const shadow = typeof js === 'object' && js?.shadow;
+ /**
+ * Extend the given class or HTMLElement, and append the template content.
+ */
+ CustomComponent = class extends SuperClass {
constructor() {
super();
-
- (async () => {
- /** We make a with this content, which we will use to populate the shadow DOM. */
- const text = await fetch(`/static/components/${name}/${name}.html.inc`).then((res) =>
- res.text()
- );
- /** This script's default export - a setup function - gets called once the shadow DOM has been set up. */
- const setup = await import(`/static/components/${name}/${name}.js`).then(
- (module) => module.default,
- (err) => {
- if (err.message.startsWith('Failed to fetch dynamically imported module')) {
- return null;
- }
- throw err;
- }
- );
- const template = document.createElement('template'); // checkme maybe we should be storing these for re-use later? performance
- template.innerHTML = text;
- this.attachShadow({ mode: 'open' }).append(template.content);
- if (typeof setup !== 'function') {
- throw new Error(
- `Expected default export of "${name}.js" to be a setup function, not "${typeof setup}"`
- );
- }
- setup.call(this);
- })();
+ if (templateContent === undefined) {
+ return;
+ }
+ if (shadow) {
+ this.attachShadow({ mode: 'open' }).append(templateContent.cloneNode(true));
+ } else {
+ // TODO: consider hacking some equivalent to slots
+ this.insertBefore(templateContent.cloneNode(true), this.firstChild);
+ }
}
- },
- ...args
- );
-}
+ };
+ }
-createComponent('switcher');
-console.log('🧩 components module ready.');
+ customElements.define(`${name.replaceAll('/', '-')}-component`, CustomComponent, options);
+}
diff --git a/static/components/nosecure/nosecure.html.inc b/static/components/nosecure/nosecure.html.inc
new file mode 100644
index 0000000..ceab908
--- /dev/null
+++ b/static/components/nosecure/nosecure.html.inc
@@ -0,0 +1,3 @@
+Sorry, but you need a
+secure context
+to use this utility. 😔
diff --git a/static/components/nosecure/nosecure.js b/static/components/nosecure/nosecure.js
new file mode 100644
index 0000000..18cfa10
--- /dev/null
+++ b/static/components/nosecure/nosecure.js
@@ -0,0 +1,26 @@
+/**
+ * @file Nosecure component helper script.
+ * @author Jordan Mann
+ */
+
+/**
+ * Shows itself only when the browsing context is not secure.
+ * Like what