Add random color sampling to debug page. (#86)

This adds a "random color sampling" section to the right side of the debug page.

I'm hoping this will make it easier for @mittimithai to work on his random color code, since it shows a bunch of random colors (100 right now) side-by-side, rather than requiring the developer to constantly click "randomize colors" on mandala/creature to get an idea of what the color spectrum looks like, 3 colors at a time.

lib/pages/debug-page.tsx

@@ -4,10 +4,13 @@ import { CreatureContext, CreatureContextType } from "../creature-symbol";
 import { createCreatureSymbolFactory } from "../creature-symbol-factory";
 import { HoverDebugHelper } from "../hover-debug-helper";
 import { Page } from "../page";
+import { Random } from "../random";
+import { createRandomColorPalette } from "../random-colors";
 import { createSvgSymbolContext } from "../svg-symbol";
 import { svgScale, SvgTransform } from "../svg-transform";
 import { SvgVocabulary } from "../svg-vocabulary";
 import { SymbolContextWidget } from "../symbol-context-widget";
+import { range } from "../util";
 
 const symbol = createCreatureSymbolFactory(SvgVocabulary);
 
@@ -51,6 +54,35 @@ const EYE_CREATURE = (
   </Eye>
 );
 
+const RandomColorSampling: React.FC<{}> = () => {
+  const [seed, setSeed] = useState(Date.now());
+  const NUM_COLORS = 100;
+  const rng = new Random(seed);
+  const palette = createRandomColorPalette(NUM_COLORS, rng);
+
+  return (
+    <>
+      <div className="thingy">
+        <div style={{ fontSize: 0 }}>
+          {range(NUM_COLORS).map((i) => (
+            <div
+              style={{
+                backgroundColor: palette[i],
+                width: "1rem",
+                height: "1rem",
+                display: "inline-block",
+              }}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="thingy">
+        <button onClick={() => setSeed(Date.now())}>Regenerate colors</button>
+      </div>
+    </>
+  );
+};
+
 export const DebugPage: React.FC<{}> = () => {
   const [symbolCtx, setSymbolCtx] = useState(createSvgSymbolContext());
   const defaultCtx = useContext(CreatureContext);
@@ -64,6 +96,8 @@ export const DebugPage: React.FC<{}> = () => {
     <Page title="Debug!">
       <div className="sidebar">
         <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx} />
+        <h2>Random color sampling</h2>
+        <RandomColorSampling />
       </div>
       <div className="canvas">
         <CreatureContext.Provider value={ctx}>