Update example

Render system selection.

packages/example-web/index.html

@@ -54,6 +54,11 @@
 				color: red;
 			}
 
+			.select {
+				font: inherit;
+				padding: 0 1rem;
+			}
+
 			.checkbox > input {
 				position: absolute;
 				left: -999999px;
@@ -95,6 +100,19 @@
 					Options
 				</legend>
 				<div>
+					<select class="select" aria-label="Locale" name="system.locale">
+						<option value="enUS">
+							English (US)
+						</option>
+					</select>
+					<select class="select" aria-label="Variant" name="system.count">
+						<option value="shortCount">
+							Short Count
+						</option>
+						<option value="longCount">
+							Long Count
+						</option>
+					</select>
 					<label class="checkbox">
 						<input type="checkbox" name="shortenMillia">
 						<span>Shorten millia</span>
@@ -124,15 +142,15 @@
 				const addTensDashesCheckbox = el.querySelector('[name="addTensDashes"]');
 				const shortenMilliaCheckbox = el.querySelector('[name="shortenMillia"]');
 				const oneGroupPerLineCheckbox = el.querySelector('[name="oneGroupPerLine"]');
+				const localeSelect = el.querySelector('[name="system.locale"]');
+				const variantSelect = el.querySelector('[name="system.count"]');
 
 				const options = {
 					stringify: {
-						system: systems.enUS.shortCount,
 						makeGroupOptions: {},
 						finalizeOptions: {},
 					},
 					parse: {
-						system: systems.enUS.shortCount,
 						type: 'bigint',
 					},
 				};
@@ -189,9 +207,33 @@
 					nameInput.placeholder = createNamePlaceholder(options);
 				});
 
+				localeSelect.addEventListener('change', (e) => {
+					const variantOptions = Array.from(variantSelect.options);
+					variantOptions.forEach((option) => {
+						option.disabled = !systems[e.currentTarget.value][option.value];
+					});
+					variantSelect.value = variantOptions.find((option) => !option.disabled).value;
+					options.stringify.system = systems[e.currentTarget.value][variantSelect.value];
+					options.parse.system = systems[e.currentTarget.value][variantSelect.value];
+					numberInput.dispatchEvent(new Event('input'));
+					nameInput.placeholder = createNamePlaceholder(options);
+				});
+
+				variantSelect.addEventListener('change', (e) => {
+					options.stringify.system = systems[localeSelect.value][e.currentTarget.value];
+					options.parse.system = systems[localeSelect.value][e.currentTarget.value];
+					numberInput.dispatchEvent(new Event('input'));
+					nameInput.placeholder = createNamePlaceholder(options);
+				});
+
 				options.stringify.makeGroupOptions.addTensDashes = addTensDashesCheckbox.checked;
 				options.stringify.makeGroupOptions.shortenMillia = shortenMilliaCheckbox.checked;
 				options.stringify.finalizeOptions.oneGroupPerLine = oneGroupPerLineCheckbox.checked;
+				options.stringify.system = systems[localeSelect.value][variantSelect.value];
+				options.parse.system = systems[localeSelect.value][variantSelect.value];
+				Array.from(variantSelect.options).forEach((option) => {
+					option.disabled = !systems[localeSelect.value][option.value];
+				});
 				nameInput.placeholder = createNamePlaceholder(options);
 			}
 			const mainForm = window.document.getElementById('mainForm');