From 2384d1eac305c08f9d4fe55fe9fee8f3890792eb Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Mon, 15 Feb 2021 08:34:22 -0500
Subject: [PATCH] Add a placeholder creature page.

---
 lib/browser-main.tsx        |  2 ++
 lib/pages/creature-page.tsx | 24 ++++++++++++++++++++++++
 2 files changed, 26 insertions(+)
 create mode 100644 lib/pages/creature-page.tsx

diff --git a/lib/browser-main.tsx b/lib/browser-main.tsx
index 89c1714..b853dbe 100644
--- a/lib/browser-main.tsx
+++ b/lib/browser-main.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { WavesPage } from "./pages/waves-page";
 import { VocabularyPage } from "./pages/vocabulary-page";
+import { CreaturePage } from "./pages/creature-page";
 
 const Pages = {
   vocabulary: VocabularyPage,
+  creature: CreaturePage,
   waves: WavesPage,
 };
 
diff --git a/lib/pages/creature-page.tsx b/lib/pages/creature-page.tsx
new file mode 100644
index 0000000..d6ec0d7
--- /dev/null
+++ b/lib/pages/creature-page.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Random } from "../random";
+import { SvgVocabulary } from "../svg-vocabulary";
+
+export const CreaturePage: React.FC<{}> = () => {
+  const rand = new Random(1);
+  const parts: string[] = [];
+
+  for (let i = 0; i < 5; i++) {
+    parts.push(rand.choice(SvgVocabulary).name);
+  }
+
+  return (
+    <>
+      <h1>Creature!</h1>
+      <p>TODO: Make a creature with maybe the following parts:</p>
+      <ul>
+        {parts.map((name, i) => (
+          <li key={i}>{name}</li>
+        ))}
+      </ul>
+    </>
+  );
+};