refactor bounding box logic to hook

src/components/mahjongBoard.js

@@ -36,6 +36,7 @@ import {
   isMatch
 } from 'utils/mahjong';
 import useTimer from 'hooks/useTimer';
+import useBoundingBoxRef from 'hooks/useBoundingBoxRef';
 
 export default function MahjongBoard({ images }) {
   const {
@@ -50,8 +51,8 @@ export default function MahjongBoard({ images }) {
   const [solved, setSolved] = useState(false);
   const [failed, setFailed] = useState(false);
   const [showHints, setShowHints] = useState(false);
-  const [boardRect, setBoardRect] = useState(null);
   const [activeTile, setActiveTile] = useState(null);
+  const boardRect = useBoundingBoxRef(boardRef, [solved, failed]);
   const [layout, setLayout] = useState(generateLayout('turtle'));
   const matches = useMemo(() => getAvailableMatches(layout), [layout]);
   const completePct = useMemo(() => 1 - layout.length / 144, [layout]);
@@ -102,12 +103,6 @@ export default function MahjongBoard({ images }) {
     resetTimer();
   }, [setLayout, resetTimer]);
 
-  useEffect(() => {
-    if (boardRef.current) {
-      setBoardRect(boardRef.current.getBoundingClientRect());
-    }
-  }, [boardRef, solved, failed]);
-
   useEffect(() => {
     if (!layout.length) {
       setSolved(true);

src/components/mahjongTile.js

@@ -37,8 +37,8 @@ export default function MahjongTile({
           <rect
             x={0}
             y={0}
-            height={64}
             width={53}
+            height={64}
             fill={active ? '#ff0000' : '#00ff00'}
             fillOpacity={0.4}
             stroke={active ? '#ff0000' : '#00ff00'}

src/hooks/useBoundingBoxRef.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+
+export default function useBoundingBoxRef(ref, dependencies = []) {
+  const [rect, setRect] = useState(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      setRect(ref.current.getBoundingClientRect());
+    }
+  }, [ref, ...dependencies]);
+
+  return rect;
+}