<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>RustyRS WASM Example</title>
</head>
<body>
<script type="module" >
import init, { random_slugs, combinations, SlugGenerator } from "./pkg/rustyrs.js";
await init();
let slug_gen = new SlugGenerator(2);
export const test = () => {
const word_length = document.getElementById("word_len_inp").value;
const n_outputs = document.getElementById("n_outputs").value;
if (n_outputs > 10000) {
alert("Max number of slugs is 10000");
return;
}
const slugs = random_slugs(word_length, n_outputs);
const slugsElement = document.getElementById("slugs");
slugsElement.innerHTML = "";
try {
slugs.forEach(slug => {
const li = document.createElement("li");
li.textContent = slug;
slugsElement.appendChild(li);
});
} catch {
const li = document.createElement("li");
li.textContent = `Error: Likely requested more slugs than unique possible combinations. Max combinations for ${word_length} word(s) is ${combinations(word_length)}`;
slugsElement.appendChild(li);
}
};
export const generate = () => {
const slug = slug_gen.next();
const slugsElement = document.getElementById("slugs");
const li = document.createElement("li");
li.textContent = slug;
slugsElement.appendChild(li);
};
document.getElementById("test").addEventListener("click", test);
document.getElementById("gen").addEventListener("click", generate);
</script>
<p>Enter length of slug in words (min 1, max 5)</p>
<input type="number" id="word_len_inp" max="5" min="1" />
<p>Enter number of slugs to output (min 1, max 10000)</p>
<input type="number" id="n_outputs" max="10000" min="1" />
<br>
<p>
<button style="padding-top: 10;" id="test">Go</button>
<button style="padding-top: 10;" onclick="location.reload();">Reset</button>
</p>
<br>
<div>
<p>OR generate unique slugs one-by-one</p>
<button id="gen">Generate</button>
</div>
<ul id="slugs"></ul>
</body>
</html>