From f64c6008251c38007bb70f677d887ec17d3b46d6 Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Tue, 16 Feb 2021 20:54:05 -0500
Subject: [PATCH] Factor out <AutoSizingSvg>.

---
 lib/pages/creature-page.tsx | 50 ++++++++++++++++++++++---------------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/lib/pages/creature-page.tsx b/lib/pages/creature-page.tsx
index 6339420..342e86e 100644
--- a/lib/pages/creature-page.tsx
+++ b/lib/pages/creature-page.tsx
@@ -240,14 +240,39 @@ function randomlyReplaceParts(rng: Random, creature: JSX.Element): JSX.Element {
   });
 }
 
-const SVG_PADDING = 5;
-
-export const CreaturePage: React.FC<{}> = () => {
+const AutoSizingSvg: React.FC<{
+  padding: number;
+  children: JSX.Element | JSX.Element[];
+}> = (props) => {
   const ref = useRef<SVGSVGElement>(null);
   const [x, setX] = useState(0);
   const [y, setY] = useState(0);
   const [width, setWidth] = useState(1);
   const [height, setHeight] = useState(1);
+
+  useEffect(() => {
+    if (ref.current) {
+      const bbox = ref.current.getBBox();
+      setX(bbox.x - props.padding);
+      setY(bbox.y - props.padding);
+      setWidth(bbox.width + props.padding * 2);
+      setHeight(bbox.height + props.padding * 2);
+    }
+  });
+
+  return (
+    <svg
+      width={`${width}px`}
+      height={`${height}px`}
+      viewBox={`${x} ${y} ${width} ${height}`}
+      ref={ref}
+    >
+      {props.children}
+    </svg>
+  );
+};
+
+export const CreaturePage: React.FC<{}> = () => {
   const [showSpecs, setShowSpecs] = useState(false);
   const [randomSeed, setRandomSeed] = useState<number | null>(null);
   const defaultCtx = useContext(CreatureContext);
@@ -261,16 +286,6 @@ export const CreaturePage: React.FC<{}> = () => {
       ? EYE_CREATURE
       : randomlyReplaceParts(new Random(randomSeed), EYE_CREATURE);
 
-  useEffect(() => {
-    if (ref.current) {
-      const bbox = ref.current.getBBox();
-      setX(bbox.x - SVG_PADDING);
-      setY(bbox.y - SVG_PADDING);
-      setWidth(bbox.width + SVG_PADDING * 2);
-      setHeight(bbox.height + SVG_PADDING * 2);
-    }
-  });
-
   return (
     <>
       <h1>Creature!</h1>
@@ -288,16 +303,11 @@ export const CreaturePage: React.FC<{}> = () => {
         <button onClick={() => setRandomSeed(Date.now())}>Randomize!</button>
       </p>
       <CreatureContext.Provider value={ctx}>
-        <svg
-          width={`${width}px`}
-          height={`${height}px`}
-          viewBox={`${x} ${y} ${width} ${height}`}
-          ref={ref}
-        >
+        <AutoSizingSvg padding={5}>
           <g transform-origin="50% 50%" transform="scale(0.5 0.5)">
             {creature}
           </g>
-        </svg>
+        </AutoSizingSvg>
       </CreatureContext.Provider>
     </>
   );