libretro/website/src/scripts/site.ts

// Progressive enhancement of the generated pages: table captions, filters
// and keyboard scrolling, the hash lookup on files/ (a pasted hash or a file
// hashed on this device), moved cards, a hash typed in the search, glossary
// terms on a tap, the OS tabs kept in view, and the 404 page's hints.
// Which tables stack on a phone is decided when the page is built
// (src/plugins/rehype-stack-tables.mjs), so the layout is right on first paint.

const HASH_LENGTHS: Record<number, string> = { 8: 'CRC32', 32: 'MD5', 40: 'SHA1', 64: 'SHA256' };
// One line of api/v1/lookup/. `system_name` is read when a record carries it.
type Item = {
	algorithm: string;
	layer: string;
	name?: string;
	value: string;
	url: string;
	owner?: string;
	sha1?: string;
	system_name?: string;
};

const siteRoot = () => new URL(import.meta.env.BASE_URL.replace(/\/?$/, '/'), location.origin);
const normalizeHash = (raw: string) => raw.trim().toLowerCase().replace(/^0x/, '').replace(/\s+/g, '');
const isHash = (value: string) => /^[0-9a-f]+$/.test(value) && value.length in HASH_LENGTHS;

// Tables

// The heading a table sits under: the nearest one before it, looking up
// through the blocks that hold it, else the page title.
const headingText = (element: Element): string => {
	for (let block: Element | null = element; block && !block.matches('.sl-markdown-content'); block = block.parentElement) {
		for (let cursor = block.previousElementSibling; cursor; cursor = cursor.previousElementSibling) {
			const heading = /^H[1-6]$/.test(cursor.tagName)
				? cursor
				: cursor.classList.contains('sl-heading-wrapper')
					? cursor.querySelector('h1, h2, h3, h4, h5, h6')
					: null;
			if (heading?.textContent?.trim()) return heading.textContent.trim();
		}
	}
	return document.querySelector('h1')?.textContent?.trim() || document.title;
};

// Each table's name, once per page: two tables under one heading are told
// apart by their order, so no two regions share a label (axe landmark-unique).
const tableNames = new WeakMap<HTMLTableElement, string>();
const tableName = (table: HTMLTableElement): string => {
	let name = tableNames.get(table);
	if (name) return name;
	const tables = [...document.querySelectorAll<HTMLTableElement>('.sl-markdown-content table')];
	const seen = new Map<string, number>();
	for (const each of tables) {
		const heading = headingText(each);
		const count = (seen.get(heading) ?? 0) + 1;
		seen.set(heading, count);
		tableNames.set(each, count === 1 ? heading : `${heading}, table ${count}`);
	}
	name = tableNames.get(table) ?? headingText(table);
	tableNames.set(table, name);
	return name;
};

// A table that overflows is a named stop in the tab order, so a keyboard
// can scroll it (WCAG 2.1.1). Checked again when a closed block opens. All
// widths are read first and the attributes written after, so a page of
// twenty tables is laid out once, not twenty times.
const markScrollable = (tables: HTMLTableElement[]) => {
	const overflowing = tables.map((table) => table.scrollWidth > table.clientWidth + 1);
	tables.forEach((table, index) => setScrollable(table, overflowing[index]));
};

const setScrollable = (table: HTMLTableElement, overflows: boolean) => {
	if (overflows) {
		table.tabIndex = 0;
		table.setAttribute('role', 'region');
		table.setAttribute('aria-label', `${tableName(table)}, scrollable table`);
	} else if (table.getAttribute('role') === 'region') {
		table.removeAttribute('tabindex');
		table.removeAttribute('role');
		table.removeAttribute('aria-label');
	}
};

// The filter box above a long table is written when the page is built
// (src/plugins/rehype-stack-tables.mjs), so the table never moves down once
// drawn. Here it only filters.
const filterTable = (table: HTMLTableElement) => {
	const controls = table.previousElementSibling;
	if (!controls?.matches('.rb-table-filter')) return;
	const input = controls.querySelector('input');
	const count = controls.querySelector('.rb-table-filter-count');
	if (!input || !count || input.dataset.rbWired) return;
	input.dataset.rbWired = 'true';
	const rows = [...table.querySelectorAll<HTMLTableRowElement>('tbody tr')];
	// Each row's text is read on the first keystroke, not on every page load.
	let searchable: { row: HTMLTableRowElement; text: string }[] | null = null;
	input.addEventListener('input', () => {
		searchable ??= rows.map((row) => ({ row, text: row.textContent!.normalize('NFKD').toLocaleLowerCase() }));
		const query = input.value.trim().normalize('NFKD').toLocaleLowerCase();
		let visible = 0;
		for (const entry of searchable) {
			entry.row.hidden = !!query && !entry.text.includes(query);
			if (!entry.row.hidden) visible += 1;
		}
		count.textContent = query
			? `${visible.toLocaleString('en')} of ${rows.length.toLocaleString('en')} rows`
			: `${rows.length.toLocaleString('en')} rows`;
	});
};

// A stacked table of many rows leaves its column names out of the HTML
// (rehype-stack-tables.mjs): each cell gets its own here, as the table nears
// the screen. The name sits in the left room every stacked cell keeps, so
// writing it moves nothing.
const labelCells = (table: HTMLTableElement) => {
	if (table.dataset.rbStack !== 'true') return;
	const labels = [...table.querySelectorAll('thead th')].map((cell) => cell.textContent?.trim() ?? '');
	for (const row of table.tBodies[0]?.rows ?? []) {
		[...row.cells].forEach((cell, column) => {
			if (labels[column] && !cell.dataset.label) cell.dataset.label = labels[column];
		});
	}
};

const enhanceTables = () => {
	const tables = [...document.querySelectorAll<HTMLTableElement>('.sl-markdown-content table')];
	const enhance = (table: HTMLTableElement) => {
		for (const cell of table.querySelectorAll('thead th')) if (!cell.hasAttribute('scope')) cell.setAttribute('scope', 'col');
		labelCells(table);
		const heading = tableName(table);
		if (!table.querySelector('caption') && !table.closest('.rb-meta-card')) {
			const caption = document.createElement('caption');
			caption.className = 'rb-visually-hidden';
			caption.textContent = heading;
			table.prepend(caption);
		}
		filterTable(table);
	};
	// A table is set up and measured when it nears the screen. Doing all of
	// them at load relaid out every row of a 3,800-row page after its first
	// paint. One that appears later (a block opened, a tab chosen) is handled
	// then.
	const near = new Set<HTMLTableElement>();
	const observer = new IntersectionObserver(
		(entries) => {
			const shown = entries.filter((entry) => entry.isIntersecting).map((entry) => entry.target as HTMLTableElement);
			for (const table of shown) {
				if (!near.has(table)) enhance(table);
				near.add(table);
			}
			if (shown.length) requestAnimationFrame(() => markScrollable(shown));
		},
		{ rootMargin: '400px 0px' },
	);
	// Every table is measured once the page is drawn and idle, before anything
	// is written, so the read finds the layout done instead of forcing it: a
	// keyboard reaches a scrolling table anywhere on the page, not only near
	// the screen.
	const idle = window.requestIdleCallback ?? ((callback: () => void) => setTimeout(callback, 1));
	const start = () =>
		idle(() => {
			// A table in a closed block is not laid out, and measuring it would
			// lay it out: it is measured when its block opens.
			markScrollable(tables.filter((table) => table.checkVisibility?.() ?? true));
			tables.forEach((table) => observer.observe(table));
		});
	if (document.readyState === 'complete') start();
	else addEventListener('load', start, { once: true });
	let timer = 0;
	addEventListener('resize', () => {
		clearTimeout(timer);
		timer = window.setTimeout(() => markScrollable([...near]), 150);
	});
};

// Hashing a file on this device: SHA1 and SHA256 by Web Crypto, MD5 and
// CRC32 here, since Web Crypto has neither. The bytes never leave the page.

const CRC_TABLE = (() => {
	const table = new Uint32Array(256);
	for (let n = 0; n < 256; n += 1) {
		let c = n;
		for (let k = 0; k < 8; k += 1) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
		table[n] = c >>> 0;
	}
	return table;
})();

const crc32 = (bytes: Uint8Array): string => {
	let crc = 0xffffffff;
	for (let i = 0; i < bytes.length; i += 1) crc = CRC_TABLE[(crc ^ bytes[i]) & 0xff] ^ (crc >>> 8);
	return ((crc ^ 0xffffffff) >>> 0).toString(16).padStart(8, '0');
};

const MD5_SHIFTS = [7, 12, 17, 22, 5, 9, 14, 20, 4, 11, 16, 23, 6, 10, 15, 21];
const MD5_TABLE = Array.from({ length: 64 }, (_, i) => Math.floor(Math.abs(Math.sin(i + 1)) * 2 ** 32) >>> 0);

const hexBytes = (bytes: Uint8Array) => [...bytes].map((byte) => byte.toString(16).padStart(2, '0')).join('');

// RFC 1321, block by block over the file's own buffer: no padded copy of a
// 500 MB file.
const md5 = (bytes: Uint8Array): string => {
	const state = new Int32Array([0x67452301, 0xefcdab89, 0x98badcfe, 0x10325476]);
	const words = new Int32Array(16);
	const block = (view: DataView, offset: number) => {
		for (let i = 0; i < 16; i += 1) words[i] = view.getInt32(offset + i * 4, true);
		let [a, b, c, d] = state;
		for (let i = 0; i < 64; i += 1) {
			const round = i >> 4;
			const f = round === 0 ? (b & c) | (~b & d) : round === 1 ? (d & b) | (~d & c) : round === 2 ? b ^ c ^ d : c ^ (b | ~d);
			const g = round === 0 ? i : round === 1 ? (5 * i + 1) % 16 : round === 2 ? (3 * i + 5) % 16 : (7 * i) % 16;
			const shift = MD5_SHIFTS[round * 4 + (i % 4)];
			const sum = (a + f + MD5_TABLE[i] + words[g]) | 0;
			a = d;
			d = c;
			c = b;
			b = (b + ((sum << shift) | (sum >>> (32 - shift)))) | 0;
		}
		state[0] += a;
		state[1] += b;
		state[2] += c;
		state[3] += d;
	};
	const whole = bytes.length - (bytes.length % 64);
	const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
	for (let offset = 0; offset < whole; offset += 64) block(view, offset);
	const tail = new Uint8Array(bytes.length - whole < 56 ? 64 : 128);
	tail.set(bytes.subarray(whole));
	tail[bytes.length - whole] = 0x80;
	const tailView = new DataView(tail.buffer);
	const bits = bytes.length * 8;
	tailView.setUint32(tail.length - 8, bits >>> 0, true);
	tailView.setUint32(tail.length - 4, Math.floor(bits / 2 ** 32), true);
	for (let offset = 0; offset < tail.length; offset += 64) block(tailView, offset);
	return hexBytes(new Uint8Array(state.buffer));
};

type FileHashes = { sha1: string; md5: string; crc32: string; sha256: string };

const hashFile = async (file: Blob): Promise<FileHashes> => {
	const buffer = await file.arrayBuffer();
	const bytes = new Uint8Array(buffer);
	const [sha1, sha256] = await Promise.all(
		['SHA-1', 'SHA-256'].map(async (name) => hexBytes(new Uint8Array(await crypto.subtle.digest(name, buffer)))),
	);
	return { sha1, md5: md5(bytes), crc32: crc32(bytes), sha256 };
};

// files/?hash= reads one shard of the lookup, named by the first two hex
// characters of the value. ?md5=, ?crc32= and ?sha256= are read the same way.

const HASH_PARAMS = ['hash', 'md5', 'crc32', 'sha256'];

const lookupShard = (value: string): Promise<Item[]> =>
	fetch(new URL(`api/v1/lookup/${value.slice(0, 2)}.json`, siteRoot()))
		.then((response) => (response.ok ? response.json() : { items: [] }))
		.then((shard) => shard.items || []);

const lookupValues = async (values: string[]): Promise<Item[]> => {
	const prefixes = [...new Set(values.map((value) => value.slice(0, 2)))];
	const shards = await Promise.all(prefixes.map(lookupShard));
	const wanted = new Set(values);
	return shards.flat().filter((item) => wanted.has(item.value));
};

type Held = { name: string; path: string; sha1: string; size: number };
type Declared = { name?: string; destination?: string; required?: boolean; [hash: string]: unknown };
type ProfileFile = { name?: string; region?: string | string[]; category?: string; [field: string]: unknown };
type Reader = { name: string; files: ProfileFile[] };

const json = (path: string) =>
	fetch(new URL(path, siteRoot())).then((response) => (response.ok ? response.json() : Promise.reject(response.status)));

const formatSize = (bytes: number) =>
	bytes >= 1024 ** 3 ? `${(bytes / 1024 ** 3).toFixed(1)} GB`
	: bytes >= 1024 ** 2 ? `${(bytes / 1024 ** 2).toFixed(1)} MB`
	: bytes >= 1024 ? `${(bytes / 1024).toFixed(1)} KB`
	: `${bytes} B`;

const code = (text: string) => {
	const element = document.createElement('code');
	element.textContent = text;
	return element;
};

const link = (url: string, ...content: (Node | string)[]) => {
	const element = document.createElement('a');
	element.href = new URL(url, siteRoot()).href;
	element.append(...content);
	return element;
};

const paragraph = (...content: (Node | string)[]) => {
	const element = document.createElement('p');
	element.append(...content);
	return element;
};

const strong = (text: string) => {
	const element = document.createElement('strong');
	element.textContent = text;
	return element;
};

const count = (n: number, one: string, many: string) => `${n.toLocaleString('en')} ${n === 1 ? one : many}`;

const listed = (words: string[]) =>
	words.length < 3 ? words.join(' and ') : `${words.slice(0, -1).join(', ')} and ${words.at(-1)}`;

// A region: value in words, as the system pages write it.
const REGION_WORDS: Record<string, string> = { uk: 'UK', 'asia-ntsc': 'Asia (NTSC)', 'asia-pal': 'Asia (PAL)' };
const regionWord = (region: string) =>
	REGION_WORDS[region] ?? region.replace(/-/g, ' ').replace(/\b\w/g, (letter) => letter.toUpperCase());
const CATEGORY_WORDS: Record<string, string> = { bios: 'BIOS', game_data: 'game data', bios_zip: 'BIOS ZIP' };

// The card a collection match points at, read from its manufacturer's file
// of api/v1/systems/: the path in the collection and the size. A console's
// own page (systems/sony-playstation/) is part of its manufacturer's file
// (systems/sony.json), found by dropping words from the end of the slug.
const heldFile = async (item: Item): Promise<Held | undefined> => {
	const slug = /^systems\/([^/]+)\//.exec(item.url)?.[1];
	if (!slug || !item.sha1) return undefined;
	const words = slug.split('-');
	for (let size = words.length; size > 0; size -= 1) {
		const data = await json(`api/v1/systems/${words.slice(0, size).join('-')}.json`).catch(() => undefined);
		if (!data) continue;
		for (const files of Object.values<Held[]>(data.items?.[0]?.consoles ?? {})) {
			const found = files.find((file) => file.sha1 === item.sha1);
			if (found) return found;
		}
		return undefined;
	}
	return undefined;
};

// A setup's own entry for the value, from its contract in api/v1/platforms/:
// where the file goes and whether the setup requires it. Recalbox writes
// several MD5 in one field, separated by commas.
const declaredEntry = async (item: Item): Promise<Declared | undefined> => {
	const system = decodeURIComponent(new URL(item.url, siteRoot()).hash.slice(1));
	const data = await json(`api/v1/platforms/${item.owner}.json`);
	const files: Declared[] = data.items?.[0]?.contract?.systems?.[system]?.files ?? [];
	const holds = (entry: Declared) =>
		String(entry[item.algorithm] ?? '').toLowerCase().split(',').map((hash) => hash.trim()).includes(item.value);
	return files.find((entry) => holds(entry) && entry.name === item.name) ?? files.find(holds);
};

// An emulator by the name its page carries, with the entries of its profile.
const readerProfile = async (owner: string): Promise<Reader | undefined> => {
	const data = await json(`api/v1/emulators/${owner}.json`).catch(() => undefined);
	const profile = data?.items?.[0]?.profile;
	if (!profile) return undefined;
	return { name: String(profile.emulator || profile.display_name || owner), files: profile.files ?? [] };
};

// The entry of a profile that reads the value: by name and hash, else by hash.
const readerEntry = (reader: Reader | undefined, item: Item): ProfileFile | undefined => {
	const holds = (entry: ProfileFile) =>
		String(entry[item.algorithm] ?? '').toLowerCase().split(',').map((hash) => hash.trim()).includes(item.value);
	return reader?.files.find((entry) => holds(entry) && entry.name === item.name) ?? reader?.files.find(holds);
};

// One value every reader that says something agrees on, else nothing.
const agreed = (values: (string | undefined)[]): string | undefined => {
	const said = new Set(values.filter((value): value is string => !!value));
	return said.size === 1 ? [...said][0] : undefined;
};

// A name a setup writes in place of a file name: EmuDeck lists a hash under
// "system:md5", and any file that has it passes.
const anyName = (name: string) => !name || name.includes(':');

const setupTable = (rows: { item: Item; entry?: Declared; setup: string }[]) => {
	const table = document.createElement('table');
	const head = table.createTHead().insertRow();
	for (const label of ['Setup', 'Name as declared', 'Destination', 'Hash matched', 'Required']) {
		const cell = document.createElement('th');
		cell.scope = 'col';
		cell.textContent = label;
		head.append(cell);
	}
	const body = table.createTBody();
	for (const { item, entry, setup } of rows) {
		const row = body.insertRow();
		const name = entry?.name ?? item.name ?? '';
		const destination = entry?.destination;
		const cells: (Node | string)[] = [
			link(item.url, setup),
			anyName(name) ? 'Any name' : code(name),
			destination ? code(destination) : '-',
			item.algorithm.toUpperCase(),
			entry?.required === undefined ? '-' : entry.required ? 'Yes' : 'No',
		];
		cells.forEach((content, column) => {
			const cell = row.insertCell();
			cell.dataset.label = head.cells[column].textContent!;
			cell.append(content);
		});
	}
	table.dataset.rbStack = 'true';
	return table;
};

// One declaration per setup, name and section: a value found by two of its
// hashes (a file hashed here) is still one line of the setup's list.
const distinct = (items: Item[], key: (item: Item) => string) => {
	const seen = new Map<string, Item>();
	for (const item of items) if (!seen.has(key(item))) seen.set(key(item), item);
	return [...seen.values()];
};

// The answer first: which file this is, for which system and region, and
// how many setups list it under which names. Then where the collection
// holds it, the setups that list it (where it goes, whether it is
// required), and the emulators that read it, by name.
const renderMatches = async (status: HTMLElement, result: HTMLElement, items: Item[]) => {
	const byLayer = (layer: string) => items.filter((item) => item.layer === layer);
	const held = distinct(byLayer('collection'), (item) => item.sha1 ?? item.url);
	const platforms = distinct(byLayer('platform'), (item) => `${item.owner}|${item.name}|${item.url}`);
	const emulators = distinct(byLayer('emulator'), (item) => `${item.owner}|${item.name}|${item.url}`);
	const owners = [...new Set(emulators.map((item) => item.owner ?? ''))];
	const [files, entries, names, readers] = await Promise.all([
		Promise.all(held.map((item) => heldFile(item).catch(() => undefined))),
		Promise.all(platforms.map((item) => declaredEntry(item).catch(() => undefined))),
		json('data/picker/index.json').catch(() => []) as Promise<{ platform: string; name: string }[]>,
		Promise.all(owners.map((owner) => readerProfile(owner))),
	]);
	const setupName = new Map(names.map((entry) => [entry.platform, entry.name]));
	const reader = new Map(owners.map((owner, index) => [owner, readers[index]]));
	const readEntries = emulators.map((item) => readerEntry(reader.get(item.owner ?? ''), item));
	const setups = new Set(platforms.map((item) => item.owner));

	const counted = [
		held.length ? count(held.length, 'file in the collection', 'files in the collection') : 'not in the collection',
		...(platforms.length ? [`${count(platforms.length, 'declaration', 'declarations')} by ${count(setups.size, 'setup', 'setups')}`] : []),
		...(owners.length ? [count(owners.length, 'emulator that reads it', 'emulators that read it')] : []),
	];
	status.textContent = `Found: ${counted.join(', ')}.`;

	const blocks: Node[] = [];
	const category = agreed(readEntries.map((entry) => entry && CATEGORY_WORDS[String(entry.category ?? 'bios')]));
	const regions = agreed(readEntries.map((entry) => {
		const raw = entry?.region;
		const list = Array.isArray(raw) ? raw : raw ? [String(raw)] : [];
		return list.length ? listed(list.map(regionWord)) : undefined;
	}));
	held.forEach((item, index) => {
		const file = files[index];
		const name = file?.name ?? item.name ?? item.value;
		const system = item.system_name;
		const what: (Node | string)[] = system
			? [', ', link(item.url, system), category ? ` ${category}` : ' file']
			: category ? [`, a ${category} file`] : [];
		const others = new Map<string, Set<string>>();
		for (const declared of platforms) {
			const other = declared.name ?? '';
			if (anyName(other) || other === name) continue;
			if (!others.has(other)) others.set(other, new Set());
			others.get(other)!.add(declared.owner ?? '');
		}
		const renamed = new Set([...others.values()].flatMap((set) => [...set]));
		const otherNames = [...others.keys()].sort();
		const named: (Node | string)[] = [];
		otherNames.forEach((other, position) => {
			if (position) named.push(position === otherNames.length - 1 ? ' and ' : ', ');
			named.push(code(other));
		});
		const listing: (Node | string)[] = setups.size
			? [
				` ${count(setups.size, 'setup lists', 'setups list')} it`,
				...(renamed.size
					? [`, ${renamed.size.toLocaleString('en')} of them under the ${otherNames.length === 1 ? 'name' : 'names'} `, ...named]
					: []),
				'.',
			]
			: [];
		blocks.push(
			paragraph('This is ', code(name), ...what, ...(regions ? [` for ${regions}`] : []), '.', ...listing),
			paragraph(
				...(file ? ['Held in the collection at ', code(file.path), '. SHA1 ', code(file.sha1), `, ${formatSize(file.size)}. `] : []),
				link(item.url, 'Open its card'),
				'.',
			),
		);
	});
	if (!held.length) blocks.push(paragraph('No file in the collection has this hash.'));
	const shipped = byLayer('data-directory');
	if (shipped.length) {
		const list = document.createElement('ul');
		for (const item of shipped) {
			const row = document.createElement('li');
			row.append(link(item.url, code(item.name || item.value)));
			list.append(row);
		}
		blocks.push(paragraph(strong('In a data directory the packs ship')), list);
	}
	if (platforms.length) {
		blocks.push(
			paragraph(strong('Setups that list it: '), `${count(platforms.length, 'declaration', 'declarations')} by ${count(setups.size, 'setup', 'setups')}`),
			setupTable(platforms.map((item, index) => ({
				item,
				entry: entries[index],
				setup: setupName.get(item.owner ?? '') ?? item.owner ?? '',
			}))),
		);
	}
	if (owners.length) {
		const list = document.createElement('ul');
		emulators.forEach((item) => {
			const row = document.createElement('li');
			row.append(link(item.url, reader.get(item.owner ?? '')?.name ?? item.owner ?? item.name ?? ''));
			if (item.name && item.name !== (files[0]?.name ?? held[0]?.name)) row.append(' as ', code(item.name));
			list.append(row);
		});
		blocks.push(paragraph(strong(`Emulators that read it (${owners.length.toLocaleString('en')})`)), list);
	}
	result.replaceChildren(...blocks);
};

const WANTED = 'provenance/#wanted-catalogued-dumps-this-project-does-not-have';

// Nothing the site knows has the value: where a dump of one's own can go.
const renderNoMatch = (status: HTMLElement, result: HTMLElement) => {
	status.textContent = 'No file, setup or emulator the site knows has this hash.';
	result.replaceChildren(
		paragraph('If you dumped it yourself, ', link('contributing/', 'add it'), '.'),
		paragraph('The ', link(WANTED, 'wanted list'), ' names the catalogued dumps the collection still lacks.'),
	);
};

const lookUp = (status: HTMLElement, result: HTMLElement, values: string[]) => {
	status.textContent = 'Looking it up...';
	result.replaceChildren();
	return lookupValues(values)
		.then((matches) => (matches.length ? renderMatches(status, result, matches) : renderNoMatch(status, result)))
		.catch(() => {
			status.textContent = 'The file index could not be read.';
		});
};

// A file chosen on files/ is hashed here, its four hashes shown, and all
// four looked up: a setup may list only the MD5.
const MAX_HASHED = 512 * 1024 ** 2;

const fileHasher = (status: HTMLElement, result: HTMLElement) => {
	const form = document.querySelector('form.rb-file-lookup');
	if (!form) return;
	const box = document.createElement('div');
	box.className = 'rb-file-pick';
	const label = document.createElement('label');
	label.htmlFor = 'rb-file';
	label.textContent = 'Or choose the file';
	const input = document.createElement('input');
	input.type = 'file';
	input.id = 'rb-file';
	const note = paragraph('It is hashed on this device. Nothing is uploaded.');
	note.className = 'rb-file-pick-note';
	const hashes = document.createElement('p');
	hashes.className = 'rb-file-pick-hashes';
	hashes.hidden = true;
	box.append(label, input, note, hashes);
	form.after(box);
	input.addEventListener('change', async () => {
		const file = input.files?.[0];
		if (!file) return;
		hashes.hidden = true;
		if (file.size > MAX_HASHED) {
			status.textContent = `This page hashes files up to ${formatSize(MAX_HASHED)}. ${file.name} is ${formatSize(file.size)}.`;
			result.replaceChildren();
			return;
		}
		status.textContent = `Hashing ${file.name}...`;
		result.replaceChildren();
		let found: FileHashes;
		try {
			found = await hashFile(file);
		} catch {
			status.textContent = `${file.name} could not be read.`;
			return;
		}
		hashes.replaceChildren(
			strong(file.name), ` ${formatSize(file.size)}`,
			...(['sha1', 'md5', 'crc32', 'sha256'] as const).flatMap((algorithm) => [
				document.createElement('br'), `${algorithm.toUpperCase()} `, code(found[algorithm]),
			]),
		);
		hashes.hidden = false;
		const field = document.getElementById('rb-hash') as HTMLInputElement | null;
		if (field) field.value = found.sha1;
		const url = new URL(location.href);
		url.search = `?hash=${found.sha1}`;
		history.replaceState(null, '', url);
		await lookUp(status, result, [found.sha1, found.md5, found.crc32, found.sha256]);
	});
};

// files/?sha1=<sha1> is a file's content address and opens its card
// wherever it is now; files/?hash= also takes an MD5, CRC32 or SHA256 and
// lists every page that names the value.
const resolveFileAddress = () => {
	const status = document.getElementById('rb-file-lookup-status');
	if (!status) return;
	const result = document.createElement('div');
	result.id = 'rb-file-lookup-result';
	status.after(result);
	fileHasher(status, result);
	const params = new URLSearchParams(location.search);
	const permalink = params.has('sha1');
	const raw = params.get('sha1') || HASH_PARAMS.map((key) => params.get(key)).find(Boolean) || '';
	const value = normalizeHash(raw);
	if (!value) return;
	const input = document.getElementById('rb-hash') as HTMLInputElement | null;
	if (input) input.value = value;
	const prefix = permalink && /^[0-9a-f]{12}$/.test(value);
	if (!prefix && !isHash(value)) {
		status.textContent = 'A hash is 8 (CRC32), 32 (MD5), 40 (SHA1) or 64 (SHA256) hexadecimal characters.';
		return;
	}
	if (!prefix && !permalink) {
		lookUp(status, result, [value]);
		return;
	}
	status.textContent = 'Looking it up...';
	lookupShard(value)
		.then((items) => {
			const matches = items.filter((item) =>
				prefix ? item.algorithm === 'sha1' && item.value.startsWith(value) : item.value === value);
			const cards = matches.filter((item) => item.layer === 'collection' || item.layer === 'data-directory');
			if (new Set(cards.map((item) => item.url)).size === 1) {
				location.replace(new URL(cards[0].url, siteRoot()));
			} else if (matches.length) {
				return renderMatches(status, result, prefix ? cards : matches);
			} else {
				renderNoMatch(status, result);
			}
		})
		.catch(() => {
			status.textContent = 'The file index could not be read.';
		});
};

// A file card moved to another page keeps its address: an id of the form
// sha1-<12 hex> that this page does not hold is looked up by content, and
// an emulator card listed in the table of a split page opens its page.
const followMovedCard = () => {
	const id = decodeURIComponent(location.hash.slice(1));
	if (!id) return;
	const target = document.getElementById(id);
	const link = target?.closest('.rb-card-index tr')?.querySelector<HTMLAnchorElement>('a[href]');
	if (link) {
		location.replace(link.href);
		return;
	}
	const match = /^sha1-([0-9a-f]{12})$/.exec(id);
	if (match && !target) location.replace(new URL(`files/?sha1=${match[1]}`, siteRoot()));
};

// The site search holds no hashes. A hash typed in it gets "Look up this
// hash" as its first result, and Enter opens the lookup. The pages Pagefind
// finds for the same characters (a file name that holds them, a word that
// starts like them) are no answer: they stay folded under a button that
// says what they are.
const hashLookupRow = (drawer: HTMLElement, value: string) => {
	let row = drawer.querySelector<HTMLElement>(':scope > .rb-search-hash');
	if (!isHash(value)) {
		row?.remove();
		delete drawer.dataset.rbHash;
		delete drawer.dataset.rbPagesShown;
		return;
	}
	drawer.dataset.rbHash = '';
	const target = new URL(`files/?hash=${value}`, siteRoot()).href;
	if (row?.querySelector('a')?.href === target) return;
	if (!row) {
		row = document.createElement('div');
		row.className = 'rb-search-hash';
		drawer.prepend(row);
	}
	delete drawer.dataset.rbPagesShown;
	const anchor = document.createElement('a');
	anchor.href = target;
	anchor.append('Look up this hash');
	const toggle = document.createElement('button');
	toggle.type = 'button';
	toggle.className = 'rb-search-pages';
	toggle.setAttribute('aria-expanded', 'false');
	toggle.textContent = 'Pages that mention these characters';
	toggle.addEventListener('click', () => {
		const open = toggle.getAttribute('aria-expanded') !== 'true';
		toggle.setAttribute('aria-expanded', String(open));
		if (open) drawer.dataset.rbPagesShown = '';
		else delete drawer.dataset.rbPagesShown;
	});
	row.replaceChildren(paragraph(anchor, ` ${HASH_LENGTHS[value.length]} `, code(value)), toggle);
};

// Pagefind lists a page's title twice: once for the page and once for the
// anchor of its h1 (#_top). The second title is hidden, its excerpt kept.
// The `files`, `aliases` and `devices` fields weigh in the ranking and are
// never shown: a result is not a list of 120 names. Pagefind reuses
// its nodes from one query to the next, so both are worked out again on
// every change.
const UNSHOWN_FIELDS = new Set(['files', 'aliases', 'devices']);

const tidyResults = (root: Element) => {
	for (const title of root.querySelectorAll<HTMLElement>('.pagefind-ui__result-nested > .pagefind-ui__result-title')) {
		title.hidden = !!title.querySelector('a')?.getAttribute('href')?.endsWith('#_top');
	}
	for (const tags of root.querySelectorAll<HTMLElement>('.pagefind-ui__result-tags')) {
		let shown = 0;
		for (const tag of tags.querySelectorAll<HTMLElement>('.pagefind-ui__result-tag')) {
			tag.hidden = UNSHOWN_FIELDS.has(tag.dataset.pagefindUiMeta ?? '');
			if (!tag.hidden) shown += 1;
		}
		tags.hidden = shown === 0;
	}
};

const hashSearch = () => {
	const root = document.getElementById('starlight__search');
	if (root) {
		const refresh = () => {
			tidyResults(root);
			const input = root.querySelector<HTMLInputElement>('input');
			const drawer = root.querySelector<HTMLElement>('.pagefind-ui__drawer');
			if (input && drawer) hashLookupRow(drawer, normalizeHash(input.value));
		};
		new MutationObserver(refresh).observe(root, {
			childList: true,
			subtree: true,
			characterData: true,
			attributes: true,
			attributeFilter: ['href', 'data-pagefind-ui-meta'],
		});
		root.addEventListener('input', refresh);
	}
	document.addEventListener(
		'keydown',
		(event) => {
			if (event.key !== 'Enter') return;
			const input = event.target as HTMLInputElement;
			if (!input.matches?.('site-search dialog input')) return;
			const value = normalizeHash(input.value);
			if (!isHash(value)) return;
			event.preventDefault();
			event.stopPropagation();
			location.assign(new URL(`files/?hash=${value}`, siteRoot()));
		},
		true,
	);
};

// The OS tabs scroll sideways on a phone instead of wrapping to a second
// row (retrobios.css): the chosen one is kept in view, on load and on a
// change, by scrolling the row and never the page.
const keepTabInView = (tab: Element) => {
	const list = tab.closest('[role="tablist"]');
	if (!list) return;
	const row = list.getBoundingClientRect();
	const box = tab.getBoundingClientRect();
	if (box.left < row.left) list.scrollLeft -= row.left - box.left;
	else if (box.right > row.right) list.scrollLeft += box.right - row.right;
};

const osTabs = () => {
	const selected = () => document.querySelectorAll('starlight-tabs [role="tab"][aria-selected="true"]').forEach(keepTabInView);
	if (!document.querySelector('starlight-tabs')) return;
	const later = () => requestAnimationFrame(selected);
	for (const type of ['click', 'keyup']) {
		document.addEventListener(type, (event) => {
			if ((event.target as Element | null)?.closest?.('starlight-tabs [role="tab"]')) later();
		});
	}
	if (document.readyState === 'complete') later();
	else addEventListener('load', later, { once: true });
};

// A glossary term shows its definition on hover; a tap or Enter shows it
// on a phone or to a keyboard, and Escape or a tap elsewhere closes it.
const glossaryTerms = () => {
	const terms = document.querySelectorAll<HTMLElement>('abbr.rb-term');
	if (!terms.length) return;
	const close = () => document.querySelectorAll('abbr.rb-term[data-open]').forEach((term) => term.removeAttribute('data-open'));
	for (const term of terms) {
		term.tabIndex = 0;
		term.setAttribute('role', 'button');
		term.setAttribute('aria-label', `${term.textContent}: ${term.title}`);
		term.dataset.definition = term.title;
		const toggle = (event: Event) => {
			event.stopPropagation();
			const open = term.hasAttribute('data-open');
			close();
			if (!open) term.setAttribute('data-open', '');
		};
		term.addEventListener('click', toggle);
		term.addEventListener('keydown', (event) => {
			if (event.key === 'Enter' || event.key === ' ') {
				event.preventDefault();
				toggle(event);
			} else if (event.key === 'Escape') close();
		});
	}
	document.addEventListener('click', close);
};

// The 404 page: a search button, and the list a moved page belongs to.
const notFound = () => {
	document.querySelector('[data-rb-open-search]')?.addEventListener('click', () => {
		document.querySelector<HTMLButtonElement>('site-search button[data-open-modal]')?.click();
	});
	const hint = document.getElementById('rb-notfound-hint');
	const match = location.pathname.match(/\/(emulators|systems|platforms)\/([^/]+)\/?$/);
	if (!hint || !match) return;
	const link = document.createElement('a');
	link.href = new URL(`${match[1]}/`, siteRoot()).href;
	link.textContent = `the list of ${match[1]}`;
	hint.append(`No page is named ${decodeURIComponent(match[2])} here. It may be listed under another name in `, link, '.');
	hint.hidden = false;
};

resolveFileAddress();
followMovedCard();
enhanceTables();
hashSearch();
glossaryTerms();
osTabs();
notFound();