Add 'show specs' checkbox on creature page.

lib/pages/creature-page.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { SvgVocabulary } from "../svg-vocabulary";
 import {
   createSvgSymbolContext,
@@ -142,9 +142,28 @@ const MuscleArm = createCreatureSymbol("muscle arm");
 const Tail = createCreatureSymbol("tail");
 
 export const CreaturePage: React.FC<{}> = () => {
+  const [showSpecs, setShowSpecs] = useState(false);
+  const defaultCtx = useContext(CreatureContext);
+  const ctx: CreatureContextType = {
+    ...defaultCtx,
+    fill: showSpecs ? "none" : defaultCtx.fill,
+    showSpecs,
+  };
+
   return (
     <>
       <h1>Creature!</h1>
+      <p>
+        <label>
+          <input
+            type="checkbox"
+            checked={showSpecs}
+            onChange={(e) => setShowSpecs(e.target.checked)}
+          />{" "}
+          Show specs
+        </label>
+      </p>
+      <CreatureContext.Provider value={ctx}>
         <svg width="1280px" height="720px">
           <g transform-origin="50% 50%" transform="scale(0.5 0.5)">
             <Eye>
@@ -170,6 +189,7 @@ export const CreaturePage: React.FC<{}> = () => {
             </Eye>
           </g>
         </svg>
+      </CreatureContext.Provider>
     </>
   );
 };