allow toggling hints in mahjong

ayan4m1 · Jan 1, 2024 · 29689a1 · 29689a1
1 parent eb7a70a
commit 29689a1
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 24 deletions.
diff --git a/src/components/mahjongBoard.js b/src/components/mahjongBoard.js
@@ -49,6 +49,7 @@ export default function MahjongBoard({ images }) {
   const boardRef = useRef(null);
   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 [layout, setLayout] = useState(generateLayout('turtle'));
@@ -115,7 +116,7 @@ export default function MahjongBoard({ images }) {
   }, [layout]);
 
   useEffect(() => {
-    if (matches === 0) {
+    if (matches.length === 0) {
       setFailed(true);
       stopTimer();
     }
@@ -163,8 +164,8 @@ export default function MahjongBoard({ images }) {
           </Col>
           <Col xs={2}>
             <p className="mb-0">
-              {matches}{' '}
-              {matches === 1 && (
+              {matches.length}{' '}
+              {matches.length === 1 && (
                 <FontAwesomeIcon icon={faExclamationTriangle} color="orange" />
               )}
             </p>
@@ -190,7 +191,7 @@ export default function MahjongBoard({ images }) {
               <Button disabled>
                 <FontAwesomeIcon icon={faFolderOpen} /> Load
               </Button>
-              <Button disabled>
+              <Button onClick={() => setShowHints((prevVal) => !prevVal)}>
                 <FontAwesomeIcon icon={faHighlighter} /> Hint
               </Button>
             </ButtonGroup>
@@ -211,6 +212,14 @@ export default function MahjongBoard({ images }) {
               }
               y={tile.y * 64 - tile.layer * -5 + (boardRect?.top ?? 0)}
               active={activeTile === tile.index}
+              hint={
+                showHints &&
+                Boolean(
+                  matches.find(
+                    ([a, b]) => a.index === tile.index || b.index === tile.index
+                  )
+                )
+              }
               imageUrl={
                 images.nodes.find((node) =>
                   node.relativePath.endsWith(getTileImagePath(tile))

diff --git a/src/components/mahjongTile.js b/src/components/mahjongTile.js
@@ -2,7 +2,15 @@ import PropTypes from 'prop-types';
 
 import { getTileFriendlyName } from 'utils/mahjong';
 
-export default function MahjongTile({ tile, x, y, imageUrl, active, onClick }) {
+export default function MahjongTile({
+  tile,
+  x,
+  y,
+  imageUrl,
+  active,
+  hint,
+  onClick
+}) {
   return (
     <button
       onClick={() => onClick(tile)}
@@ -39,6 +47,26 @@ export default function MahjongTile({ tile, x, y, imageUrl, active, onClick }) {
           />
         </svg>
       )}
+      {hint && (
+        <svg
+          width={53}
+          height={64}
+          viewBox="0 0 53 64"
+          style={{ zIndex: 10000 }}
+        >
+          <rect
+            x={0}
+            y={0}
+            height={64}
+            width={53}
+            fill="#00ff00"
+            fillOpacity={0.4}
+            stroke="#00ff00"
+            strokeWidth={2}
+            rx={8}
+          />
+        </svg>
+      )}
     </button>
   );
 }
@@ -47,6 +75,7 @@ MahjongTile.propTypes = {
   tile: PropTypes.object.isRequired,
   imageUrl: PropTypes.string.isRequired,
   active: PropTypes.bool,
+  hint: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
   x: PropTypes.number,
   y: PropTypes.number

diff --git a/src/utils/mahjong.js b/src/utils/mahjong.js
@@ -144,25 +144,31 @@ export function isMatch(aTile, bTile) {
 
   return true;
 }
+function dedupeMatches(matches) {
+  return matches.flatMap(([a, b]) => {
+    const target = matches.find(
+      ([searchA, searchB]) => searchA === b && searchB === a
+    );
+
+    return target ? [target] : [];
+  });
+}
 export function getAvailableMatches(layout) {
-  return (
-    layout.reduce(
-      (matches, tile) =>
-        matches +
-        layout.reduce((innerMatches, otherTile) => {
-          if (tile.index === otherTile.index) {
-            return innerMatches;
-          } else if (
-            isOpen(tile, layout) &&
-            isOpen(otherTile, layout) &&
-            isMatch(tile, otherTile)
-          ) {
-            return innerMatches + 1;
-          } else {
-            return innerMatches;
-          }
-        }, 0),
-      0
-    ) / 2
+  return dedupeMatches(
+    layout.flatMap((tile) => {
+      const match = layout.find(
+        (searchTile) =>
+          searchTile.index !== tile.index &&
+          isOpen(searchTile, layout) &&
+          isOpen(tile, layout) &&
+          isMatch(searchTile, tile)
+      );
+
+      if (match) {
+        return [[tile, match]];
+      } else {
+        return [];
+      }
+    })
   );
 }