Rename 'creature' to 'cluster'. (#223)

This fixes #222. Note that it only renames it in the UI, not in the code or the TOML metadata, as that would require a ton of changes, and possibly break old links.

lib/page.tsx

@@ -1,6 +1,7 @@
 import React, { MouseEvent, useContext } from "react";
 import { Helmet } from "react-helmet";
 import type { PageName } from "./pages";
+import { getFriendlyPageName } from "./pages/friendly-page-names";
 
 import "./page.css";
 
@@ -38,7 +39,7 @@ const PageLink: React.FC<{ page: PageName }> = ({ page }) => {
 
   return (
     <a href={href} onClick={handleClick}>
-      {page}
+      {getFriendlyPageName(page)}
     </a>
   );
 };
@@ -51,7 +52,11 @@ const Navbar: React.FC<{}> = (props) => {
       <ul className="navbar">
         {pc.allPages.map((pageName) => (
           <li key={pageName}>
-            {pc.currPage === pageName ? pageName : <PageLink page={pageName} />}
+            {pc.currPage === pageName ? (
+              getFriendlyPageName(pageName)
+            ) : (
+              <PageLink page={pageName} />
+            )}
           </li>
         ))}
       </ul>

lib/pages/creature-page/core.tsx

@@ -313,7 +313,7 @@ export const CreaturePageWithDefaults: React.FC<
   );
 
   return (
-    <Page title="Creature!">
+    <Page title="Cluster!">
       <div className="sidebar">
         <CompositionContextWidget ctx={compCtx} onChange={setCompCtx} />
         <RandomizerWidget
@@ -330,7 +330,7 @@ export const CreaturePageWithDefaults: React.FC<
           </div>
           <div className="thingy">
             <NumericSlider
-              label="Random creature complexity"
+              label="Random cluster complexity"
               min={0}
               max={MAX_COMPLEXITY_LEVEL}
               step={1}

lib/pages/friendly-page-names.ts

@@ -0,0 +1,10 @@
+import type { PageName } from ".";
+
+/**
+ * Return the human-friendly page name of the given page, which we'd
+ * like to show to end-users.
+ */
+export function getFriendlyPageName(pageName: PageName): string {
+  if (pageName === "creature") return "cluster";
+  return pageName;
+}

lib/pages/gallery-page.tsx

@@ -16,6 +16,7 @@ import { createPageWithStateSearchParams } from "../page-with-shareable-state";
 import { svgScale, SvgTransform } from "../svg-transform";
 import { CreatureDesign } from "./creature-page/core";
 import { deserializeCreatureDesign } from "./creature-page/serialization";
+import { getFriendlyPageName } from "./friendly-page-names";
 
 import "./gallery-page.css";
 import {
@@ -128,7 +129,7 @@ const GalleryCompositionView: React.FC<GalleryComposition> = (props) => {
         <a href={url} target="_blank">
           {props.title}
         </a>{" "}
-        {props.kind} by {props.ownerName}
+        {getFriendlyPageName(props.kind)} by {props.ownerName}
       </p>
     </div>
   );