Add 🇯🇵 lorem ipsum

src/pages/LoremIpsum.tsx

@@ -7,36 +7,73 @@ import { createRandomGenerator } from '../random';
 const LOREM_IPSUM = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum velit nec vehicula viverra. Cras fermentum neque id faucibus mollis. Maecenas malesuada tellus vitae turpis maximus tempus. Donec sit amet ipsum lorem. Fusce vel eleifend elit, vel maximus mauris. Nam sed erat euismod, consectetur lorem vitae, lobortis est. Cras convallis tempus dapibus. Praesent convallis ac dui quis ultrices. Integer porta semper purus id placerat. Aliquam sed enim ut lorem dapibus luctus. Nulla ultrices ullamcorper ex in cursus. Maecenas augue libero, rhoncus ac porttitor id, dignissim at velit. Praesent pellentesque nec augue sit amet luctus. Nam finibus ultricies ligula ac pharetra. Aliquam pretium congue diam fringilla fermentum. Sed non lorem vel velit feugiat dignissim. Phasellus ultricies, eros at suscipit condimentum, dui tellus pretium libero, sed consectetur sapien mi ut ipsum. Ut mollis convallis ex sed aliquam. Sed sed lacus eu lectus ultrices ultrices. Quisque tincidunt leo non risus vehicula, eu congue ipsum molestie. Suspendisse laoreet ac mauris a fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum varius sem nec sagittis viverra. Mauris facilisis neque turpis, quis ultricies nisl mollis eget. Donec et leo id lectus vulputate maximus. Nullam bibendum ex massa, non tempus tortor molestie ac. Sed euismod libero libero, et consectetur sapien sagittis at. Etiam posuere, erat eu accumsan tempor, urna urna tempus purus, eu commodo odio erat nec tortor. Proin hendrerit, elit in pharetra efficitur, enim nunc facilisis felis, nec faucibus elit sem ut est. Morbi fermentum, arcu et venenatis aliquam, ex enim luctus purus, in elementum mauris turpis molestie ante. In hac habitasse platea dictumst. Curabitur sit amet ante arcu. Quisque ut fringilla ipsum. Fusce aliquet lorem quis sem maximus ultricies. Sed ex magna, euismod non faucibus at, maximus viverra risus. Curabitur eu nulla viverra, congue nisl eu, consequat odio. Mauris a posuere augue. Morbi lectus sem, iaculis sed orci sed, mollis pharetra nisl. Donec dolor felis, dictum id nibh quis, fringilla vulputate tellus. Suspendisse non nisi blandit, placerat tellus at, laoreet magna. Nam dignissim sollicitudin feugiat. Sed mattis diam quis erat gravida, quis auctor tellus varius. Maecenas commodo consequat interdum. Aenean pulvinar dictum tempus. Praesent pulvinar nibh ut auctor vestibulum. Morbi hendrerit nulla enim, ac sodales massa ornare id. Aenean quis pharetra nunc. Praesent sed hendrerit ex. Vestibulum faucibus sapien et tellus cursus, eget auctor lorem venenatis. Vestibulum porttitor turpis eget neque pretium, imperdiet sagittis quam posuere. Nullam cursus semper sodales. Nunc ante ante, volutpat vel felis lobortis, congue cursus purus. In sit amet felis ut felis fringilla imperdiet. In hac habitasse platea dictumst.';
 const LOREM_WORDS = LOREM_IPSUM.replaceAll(/[,.]/g, '').split(' ').filter(i => i != '').map(w => w.toLowerCase());
 
+const LOREM_JP_RANGE_HIRAGANA = [0x3041, 0x3096];
+const LOREM_JP_RANGE_KATAKANA = [0x30A0, 0x30FF];
+const LOREM_JP_RANGES_KANJI = [
+	[0x3400, 0x4DB5],
+	[0x4E00, 0x9FCB],
+	[0xF900, 0xFA6A]
+];
+
 const LoremIpsum: Component = () => {
 	const [output, setOutput] = createSignal('');
 	const [length, setLength] = createSignal(300);
 	const [seed, setSeed] = createSignal('0');
+	const [type, setType] = createSignal('latin');
 
-	createEffect(on([length, seed], () => {
+	createEffect(on([length, seed, type], () => {
 		const generator = createRandomGenerator(seed());
+		const t = type();
 
 		let str = '';
 		let wordsSinceLastPeriod = 0;
 		while (str.trim().length < length() - 1) {
-			let word = LOREM_WORDS[Math.floor(generator() * LOREM_WORDS.length)];
+			if (t == 'latin') {
-			if (wordsSinceLastPeriod == 0) {
+				let word = LOREM_WORDS[Math.floor(generator() * LOREM_WORDS.length)];
-				word = word.charAt(0).toUpperCase() + word.substring(1);
+				if (wordsSinceLastPeriod == 0) {
-			}
+					word = word.charAt(0).toUpperCase() + word.substring(1);
-			str += word + ' ';
+				}
-			wordsSinceLastPeriod++;
+				str += word + ' ';
+				wordsSinceLastPeriod++;
 
-			console.log(wordsSinceLastPeriod);
+				if (generator() < wordsSinceLastPeriod * wordsSinceLastPeriod * 0.002) {
-			if (generator() < wordsSinceLastPeriod * wordsSinceLastPeriod * 0.002) {
+					str = str.trim() + '. ';
-				str = str.trim() + '. ';
+					wordsSinceLastPeriod = 0;
-				wordsSinceLastPeriod = 0;
+				} else if (generator() < 0.1) {
-			} else if (generator() < 0.1) {
+					str = str.trim() + ', ';
-				str = str.trim() + ', ';
+				}
+			} else if (t == 'japanese') {
+				const num = generator();
+
+				let codePointRange;
+				if (num < 0.5) {
+					codePointRange = LOREM_JP_RANGE_HIRAGANA;
+				} else if (num < 0.75) {
+					codePointRange = LOREM_JP_RANGE_KATAKANA;
+				} else {
+					codePointRange = LOREM_JP_RANGES_KANJI[Math.floor(generator() * LOREM_JP_RANGES_KANJI.length)];
+				}
+
+				const codePoint = Math.floor(generator() * (codePointRange[1] - codePointRange[0]) + codePointRange[0]);
+				str += String.fromCodePoint(codePoint);
+				wordsSinceLastPeriod++;
+
+				if (generator() < wordsSinceLastPeriod * wordsSinceLastPeriod * 0.0002) {
+					str = str.trim() + '。';
+					wordsSinceLastPeriod = 0;
+				} else if (generator() < 0.02) {
+					str = str.trim() + '、';
+				}
 			}
 		}
 
-		str = str.trim();
+		if (t == 'latin') {
-		if (str.endsWith(',')) str = str.substring(0, str.length - 1);
+			str = str.trim();
-		if (!str.endsWith('.')) str += '.';
+			if (str.endsWith(',')) str = str.substring(0, str.length - 1);
+			if (!str.endsWith('.')) str += '.';
+		} else if (t == 'japanese') {
+			if (!str.endsWith('。')) str += '。';
+		}
 
 		setOutput(str);
 	}));
@@ -55,6 +92,11 @@ const LoremIpsum: Component = () => {
 			<h3>Length</h3>
 			<input type={'range'} min={0} max={5000} value={length()} oninput={e => setLength(parseInt(e.currentTarget.value))} />
 			<input type={'number'} min={0} value={length()} oninput={e => setLength(parseInt(e.currentTarget.value))} />
+			<h3>Style</h3>
+			<select onchange={e => setType(e.currentTarget.value)}>
+				<option value={'latin'}>Latin</option>
+				<option value={'japanese'}>Japanese</option>
+			</select>
 			<h3>Seed</h3>
 			<input min={0} max={100} value={seed()} onInput={e => setSeed(e.currentTarget.value)} />
 			<h2>Output</h2>

src/pages/Page.module.css

@@ -23,7 +23,8 @@ a {
 }
 
 input,
-textarea {
+textarea,
+select {
 	background-color: var(--element-bg);
 	color: white;
 	padding: 10px;
@@ -32,6 +33,10 @@ textarea {
 	border: none;
 }
 
+select:hover {
+	cursor: pointer;
+}
+
 button {
 	background-color: var(--element-bg);
 	color: white;