add hints

src/components/Game.js

@@ -68,6 +68,8 @@ function Game({dispatchGameState, gameState, isDaily}) {
             gridSize={Math.sqrt(gameState.letters.length)}
             letters={gameState.letters}
             key={shape.join("-")}
+            dispatchGameState={dispatchGameState}
+            shapeIndex={index}
           ></Shape>
         ))}
       </div>

src/components/Shape.js

@@ -1,7 +1,7 @@
 import React from "react";
 import {indexesToWord} from "../logic/indexesToWord";
 
-function ShapeBox({filled, solved}) {
+function ShapeBox({filled, solved, dispatchGameState, shapeIndex}) {
   let className = "shapeBox";
   if (filled) {
     className += " filled";
@@ -10,10 +10,28 @@ function ShapeBox({filled, solved}) {
     }
   }
 
-  return <div className={className}></div>;
+  return (
+    <div
+      className={className}
+      onClick={
+        filled
+          ? () => {
+              dispatchGameState({action: "hint", shapeIndex});
+            }
+          : undefined
+      }
+    ></div>
+  );
 }
 
-export function Shape({shape, foundSolution, gridSize, letters}) {
+export function Shape({
+  shape,
+  foundSolution,
+  gridSize,
+  letters,
+  dispatchGameState,
+  shapeIndex,
+}) {
   const shapeIsSolved = foundSolution.every((i) => i != undefined);
   const emptyGrid = Array(gridSize * gridSize).fill();
 
@@ -22,16 +40,16 @@ export function Shape({shape, foundSolution, gridSize, letters}) {
       filled={shape.includes(index)}
       solved={shapeIsSolved}
       key={index}
+      dispatchGameState={dispatchGameState}
+      shapeIndex={shapeIndex}
     ></ShapeBox>
   ));
 
   const word = indexesToWord(foundSolution, letters);
 
   return (
     <div className="shapeAndWord">
-      <div className="shape">
-        {boxes}
-      </div>
+      <div className="shape">{boxes}</div>
       <div className="foundWord">{word}</div>
     </div>
   );

src/logic/gameReducer.js

@@ -134,6 +134,34 @@ export function gameReducer(currentGameState, payload) {
       foundSolutions: newFoundSolutions,
       result: "",
     };
+  } else if (payload.action === "hint") {
+    console.log("hi")
+    // A hint reveals one letter at a time (in order) of the official solution
+    const actualSolution =
+      currentGameState.officialSolutions[payload.shapeIndex];
+    let newFoundSolutions = cloneDeep(currentGameState.foundSolutions);
+    let hintedSolution = newFoundSolutions[payload.shapeIndex];
+
+    // Since hints may have been given previously, get the next unrevealed index for the hint
+    const nextHintIndex = hintedSolution.findIndex(
+      (i) => i === null || i === undefined
+    );
+
+    // If all hints have been given for the shape, return
+    if (nextHintIndex < 0) {
+      return {
+        ...currentGameState,
+      };
+    }
+
+    // Otherwise, reveal the next letter
+    const hintValue = actualSolution[nextHintIndex];
+    newFoundSolutions[payload.shapeIndex][nextHintIndex] = hintValue;
+
+    return {
+      ...currentGameState,
+      foundSolutions: newFoundSolutions,
+    };
   } else if (payload.action === "todo handle other cases") {
     return {
       ...currentGameState,