first commit

src/routes/[name].svelte

@@ -0,0 +1,192 @@
+<script context="module">
+	export function preload({params}) {
+		return this.fetch(`${params.name}.json`).then(r => r.json()).then(({name, collection, error}) => {
+			return { name, collection };
+		});
+	}
+</script>
+
+<script>
+	import { onMount } from "svelte";
+	import capitalize from "capitalize";
+
+	import Page from "../components/Page.svelte";
+	import Selector from "../components/Selector.svelte";
+	
+	export let name;
+	export let collection;
+
+	/** @type {import("../rust/namegen-wasm").default} */
+	let generator = null;
+	let selectedSuffix = "";
+	let selectedFormat = "";
+	let generatedFormat = "";
+	let generatedSuffix = "";
+	let result = ""
+	let failed = false;
+	let buffer = [];
+	let formats = [];
+	let suffixes = [];
+	
+	let loaded = "";
+	let mounted = false;
+
+	function reload() {
+		loaded = name.name;
+
+		import("../rust/namegen-wasm").then(({load, default: NameGenerator}) => {
+			return load().then(() => {
+				console.log("Setting up", name.name);
+				generator = new NameGenerator(name.data);
+			})
+		}).catch(() => {
+			failed = true;
+		}).finally(() => {
+			loaded = name.name;
+		})
+	}
+
+	function generate() {
+		if (loaded !== name.name) {
+			return;
+		}
+
+		let format = `${selectedFormat}:${selectedSuffix}`;
+		if (!name.data.formats.find(f => f.name === format)) {
+			format = selectedFormat;
+		}
+		if (!name.data.formats.find(f => f.name === format)) {
+			return;
+		}
+
+		if (generator !== null) {
+			if (buffer.length === 0) {
+				console.time("Generate 64 names");
+				buffer = generator.generateMany(format, 64);
+				console.timeEnd("Generate 64 names");
+			}
+			
+			result = buffer.pop();
+		} else {
+			result = name.examples[format][Math.floor(Math.random() * name.examples[format].length)]
+		}
+
+		generatedFormat = selectedFormat;
+		generatedSuffix = selectedSuffix;
+	}
+
+	onMount(() => {
+		mounted = true;
+	})
+
+	$: {
+		if (mounted && loaded !== name.name) {
+			generator = null;
+			buffer = [];
+			generatedFormat = "";
+			generatedSuffix = "";
+			selectedFormat = "";
+			selectedSuffix = "";
+			reload();
+		}
+	}
+
+	$: {
+		if (mounted && (selectedFormat !== generatedFormat || selectedSuffix !== generatedSuffix)) {
+			buffer = [];
+			generate();
+		}
+	}
+
+	$: {
+		const formatNames = name.data.formats.map(f => f.name.split(":")[0]).filter((f, i, a) => !a.slice(0, i).includes(f));
+		const suffixNames = name.data.formats.map(s => s.name.split(":")[1]).filter(s => s).filter((s, i, a) => !a.slice(0, i).includes(s));
+		const formatLabels = formatNames.map(n => name.metadata[`formatLabel_${n}`] || n.split("_").map(t => capitalize(t)).join(" "));
+		const suffixLabels = suffixNames.map(n => name.metadata[`formatSuffixLabel_${n}`] || n.split("_").map(t => capitalize(t)).join(" "));
+	
+		formats = formatNames.map((n, i) => ({value: n, text: formatLabels[i]}));
+		suffixes = suffixNames.map((n, i) => ({value: n, text: suffixLabels[i]}));
+	}
+</script>
+
+<svelte:head>
+	<title>{name.metadata.name} - Namegen 5</title>
+</svelte:head>
+<Page collection={collection} selected={name.name}>
+	<div class="name">
+		<h1>{name.metadata.name}</h1>
+		<div class="cateogry">{name.metadata.category}</div>
+		<div class="description">{name.metadata.description || ""}</div>
+		<div style="color: {name.metadata.color || "#eeeeee"}" class:long={result.length > 25} class="result">{result}</div>
+		{#if (failed)}
+			<div class="failed">Your browser does not support Webassembly, the generator will only pick one out of 30 examples.</div>
+		{/if}
+		{#if suffixes.length > 0}
+			<Selector color={name.metadata.color} bgcolor={name.metadata.bgcolor} label={name.metadata.formatSuffixType} options={suffixes} bind:value={selectedSuffix} />
+		{/if}
+		<Selector color={name.metadata.color} bgcolor={name.metadata.bgcolor} label="Format" prefer="full_" options={formats} bind:value={selectedFormat} />
+
+		<button disabled={(loaded !== name.name) && !failed} on:click={generate}>Generate</button>
+		<div class="footnote">{name.metadata.footnote || ""}</div>
+	</div>
+</Page>
+
+<style>
+	h1 {
+		text-align: center;
+		margin-bottom: 0;
+		line-height: 1em;
+	}
+
+	div.failed {
+		color: #fc1;
+		font-size: 0.9em;
+	}
+
+	div.footnote {
+		font-size: 0.9em;
+		color: #555;
+		margin-top: 2em;
+	}
+	div.footnote:empty {
+		display: none;
+	}
+
+	div.cateogry {
+		font-size: 0.75em;
+		opacity: 0.75;
+		margin-bottom: 1em;
+	}
+
+	div.result {
+		border: 1px solid #000;
+		border-radius: 0.5em;
+		background-color: #333;
+		padding: 0.5em 0;
+		color: #eee;
+		text-align: center;
+		font-size: 1.5em;
+		min-height: 1.5em;
+	}
+	div.result.long {
+		font-size: 1.25em;
+		padding: 0.75em 0;
+
+	}
+
+	button {
+		background: #333;
+		outline: none;
+		border: 1px solid #000;
+		color: #ccc;
+		padding: 0.25em 1ch;
+		margin: 1.5em 0 0.5em 0;
+		font-size: 1.5em;
+	}
+	button:hover {
+		color: #fff;
+	}
+	button:active {
+		background: #444;
+	}
+</style>