From 9572aab1ed8fe1d0d8a6da4023474a23a5ad58b6 Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Tue, 21 Sep 2021 10:40:07 -0400
Subject: [PATCH] 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                     |  9 +++++++--
 lib/pages/creature-page/core.tsx |  4 ++--
 lib/pages/friendly-page-names.ts | 10 ++++++++++
 lib/pages/gallery-page.tsx       |  3 ++-
 4 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 lib/pages/friendly-page-names.ts

diff --git a/lib/page.tsx b/lib/page.tsx
index ea2cb92..98dbca8 100644
--- a/lib/page.tsx
+++ b/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>
diff --git a/lib/pages/creature-page/core.tsx b/lib/pages/creature-page/core.tsx
index 51e8174..9d181bb 100644
--- a/lib/pages/creature-page/core.tsx
+++ b/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}
diff --git a/lib/pages/friendly-page-names.ts b/lib/pages/friendly-page-names.ts
new file mode 100644
index 0000000..c452074
--- /dev/null
+++ b/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;
+}
diff --git a/lib/pages/gallery-page.tsx b/lib/pages/gallery-page.tsx
index 75f5454..d136d7f 100644
--- a/lib/pages/gallery-page.tsx
+++ b/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>
   );