Indicate horizontal and vertical word validity

src/App.css

@@ -72,6 +72,26 @@ button:disabled {
   -webkit-overflow-scrolling: auto;
 }
 
+/* Checkbox styling */
+input[type="checkbox" i] {
+  all: unset;
+  text-decoration: none;
+  text-align: center;
+  appearance: none;
+  width: calc(var(--default-box-size) * 0.8);
+  height: calc(var(--default-box-size) * 0.8);
+  border-radius: 2px;
+  background-color: var(--light-color);
+  border: 3px solid var(--light-color);
+}
+
+input[type="checkbox" i]:checked {
+  background-image: url("./images/checkmark-black.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
 /* Slider setting styling */
 input[type="range"] {
   appearance: none;
@@ -342,6 +362,7 @@ a {
   font-size: calc(0.9 * var(--box-size));
   background-color: var(--dark-color);
   color: var(--light-color);
+  position: relative;
 }
 
 .letter.filled {
@@ -354,10 +375,33 @@ a {
   color: rgb(226 88 88);
 }
 
+.letter.verticalValid:not(.filled)::before {
+  content: "";
+  position: absolute;
+  left: calc(50% - (10% / 2));
+  top: 0%;
+  width: 10%;
+  height: 100%;
+  background-color: var(--light-color);
+  opacity: 15%;
+}
+
+.letter.horizontalValid:not(.filled)::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: calc(50% - (10% / 2));
+  height: 10%;
+  width: 100%;
+  background-color: var(--light-color);
+  opacity: 15%;
+}
+
 .letter-border {
   box-sizing: border-box;
   width: calc(var(--box-size) + 1px);
   height: calc(var(--box-size) + 1px);
+  position: relative;
 }
 
 .borderTop {

src/components/App.js

@@ -125,7 +125,11 @@ export default function App() {
     case "daily":
       // force reinitialize the daily state if the day has changed
       if (dailyGameState.seed != getDailySeed()) {
-        dailyDispatchGameState({action: "newGame", isDaily: true, useSaved: false});
+        dailyDispatchGameState({
+          action: "newGame",
+          isDaily: true,
+          useSaved: false,
+        });
       }
       return (
         <div className="App" id="crossjig">
@@ -142,7 +146,10 @@ export default function App() {
           </div>
           <Game
             dispatchGameState={dailyDispatchGameState}
-            gameState={dailyGameState}
+            gameState={{
+              ...dailyGameState,
+              indicateValidity: gameState?.indicateValidity ?? false,
+            }}
             setDisplay={setDisplay}
           ></Game>
         </div>

src/components/Board.js

@@ -1,6 +1,11 @@
 import React from "react";
 import Piece from "./Piece";
 import DragShadow from "./DragShadow";
+import { getGridFromPieces } from "../logic/getGridFromPieces";
+import { isKnown } from "@skedwards88/word_logic";
+import { trie } from "../logic/trie";
+import { getWordsFromPieces } from "../logic/getWordsFromPieces";
+import { transposeGrid } from "@skedwards88/word_logic";
 
 // Returns a grid with the number of letters at each location in the grid
 export function countingGrid(height, width, pieces) {
@@ -25,19 +30,102 @@ export function countingGrid(height, width, pieces) {
   return grid;
 }
 
+function getHorizontalValidityGrid({ grid, originalWords }) {
+  // return a 2D array of bools indicating whether
+  // the position corresponds to a letter on the board
+  // that is part of a valid horizontal word
+  const height = grid.length;
+  const width = grid[0].length;
+
+  const horizontalValidityGrid = Array(height)
+    .fill(undefined)
+    .map(() => Array(width).fill(false));
+
+  for (const [rowIndex, row] of grid.entries()) {
+    let word = "";
+    let indexes = [];
+    for (const [columnIndex, letter] of row.entries()) {
+      if (letter != "") {
+        word += letter;
+        indexes.push(columnIndex);
+      } else {
+        if (word.length > 1) {
+          // If the word is one of the original words, always consider it valid (in case we updated the dictionary in the interim).
+          // Otherwise, check whether it is a word in the trie.
+          let isWord = originalWords.includes(word);
+          if (!isWord) {
+            ({ isWord } = isKnown(word, trie));
+          }
+          if (isWord) {
+            indexes.forEach(
+              (index) => (horizontalValidityGrid[rowIndex][index] = true)
+            );
+          }
+        }
+        word = "";
+        indexes = [];
+      }
+    }
+    // Also end the word if we reach the end of the row
+    if (word.length > 1) {
+      // If the word is one of the original words, always consider it valid (in case we updated the dictionary in the interim).
+      // Otherwise, check whether it is a word in the trie.
+      let isWord = originalWords.includes(word);
+      if (!isWord) {
+        ({ isWord } = isKnown(word, trie));
+      }
+      if (isWord) {
+        indexes.forEach(
+          (index) => (horizontalValidityGrid[rowIndex][index] = true)
+        );
+      }
+    }
+  }
+
+  return horizontalValidityGrid;
+}
+
+function getWordValidityGrids({ pieces, gridSize }) {
+  const originalWords = getWordsFromPieces({
+    pieces,
+    gridSize,
+    solution: true,
+  });
+
+  const grid = getGridFromPieces({ pieces, gridSize, solution: false });
+
+  const horizontalValidityGrid = getHorizontalValidityGrid({
+    grid,
+    originalWords,
+  });
+
+  const transposedGrid = transposeGrid(grid);
+  const horizontalTransposedValidityGrid = getHorizontalValidityGrid({
+    grid: transposedGrid,
+    originalWords,
+  });
+  const verticalValidityGrid = transposeGrid(horizontalTransposedValidityGrid);
+
+  return [horizontalValidityGrid, verticalValidityGrid];
+}
+
 export default function Board({
   pieces,
   gridSize,
   dragPieceIDs,
   dragDestination,
   gameIsSolved,
   dispatchGameState,
+  indicateValidity,
 }) {
   const boardPieces = pieces.filter(
     (piece) => piece.boardTop >= 0 && piece.boardLeft >= 0
   );
 
   const overlapGrid = countingGrid(gridSize, gridSize, boardPieces);
+  const [horizontalValidityGrid, verticalValidityGrid] = indicateValidity
+    ? getWordValidityGrids({ pieces, gridSize })
+    : [undefined, undefined];
   const pieceElements = boardPieces.map((piece) => (
     <Piece
       key={piece.id}
@@ -46,6 +134,8 @@ export default function Board({
       overlapGrid={overlapGrid}
       gameIsSolved={gameIsSolved}
       dispatchGameState={dispatchGameState}
+      horizontalValidityGrid={horizontalValidityGrid}
+      verticalValidityGrid={verticalValidityGrid}
     />
   ));
 

src/components/Game.js

@@ -29,6 +29,7 @@ function Game({ dispatchGameState, gameState, setDisplay }) {
         dragDestination={gameState.dragState?.destination}
         gameIsSolved={gameState.gameIsSolved}
         dispatchGameState={dispatchGameState}
+        indicateValidity={gameState.indicateValidity}
       ></Board>
       {gameState.allPiecesAreUsed ? (
         <Result

src/components/Piece.js

@@ -6,6 +6,8 @@ function Letter({
   pieceRowIndex,
   pieceColIndex,
   overlapping,
+  isHorizontallyValid,
+  isVerticallyValid,
   gameIsSolved,
   dispatchGameState,
 }) {
@@ -28,6 +30,12 @@ function Letter({
   if (overlapping) {
     className += " overlapping";
   }
+  if (isHorizontallyValid) {
+    className += " horizontalValid";
+  }
+  if (isVerticallyValid) {
+    className += " verticalValid";
+  }
 
   return (
     <div
@@ -75,6 +83,8 @@ export default function Piece({
   piece,
   where,
   overlapGrid,
+  horizontalValidityGrid,
+  verticalValidityGrid,
   gameIsSolved,
   dispatchGameState,
 }) {
@@ -100,6 +110,18 @@ export default function Piece({
                 piece.boardLeft + colIndex
               ] > 1
             }
+            isHorizontallyValid={
+              isOnBoard &&
+              horizontalValidityGrid?.[piece.boardTop + rowIndex]?.[
+                piece.boardLeft + colIndex
+              ]
+            }
+            isVerticallyValid={
+              isOnBoard &&
+              verticalValidityGrid?.[piece.boardTop + rowIndex]?.[
+                piece.boardLeft + colIndex
+              ]
+            }
             gameIsSolved={gameIsSolved}
             dispatchGameState={dispatchGameState}
           />

src/components/Settings.js

@@ -4,10 +4,12 @@ export default function Settings({ setDisplay, dispatchGameState, gameState }) {
   function handleNewGame(event) {
     event.preventDefault();
     const newNumLetters = event.target.elements.numLetters.value;
+    const newIndicateValidity = event.target.elements.indicateValidity.checked;
 
     dispatchGameState({
       action: "newGame",
       numLetters: newNumLetters,
+      indicateValidity: newIndicateValidity,
     });
     setDisplay("game");
   }
@@ -36,6 +38,23 @@ export default function Settings({ setDisplay, dispatchGameState, gameState }) {
             </div>
           </div>
         </div>
+
+        <div className="setting">
+          <div className="setting-description">
+            <label htmlFor="indicateValidity">Indicate validity</label>
+            <div className="setting-info">
+              Indicate whether letters form a valid word
+            </div>
+          </div>
+          <input
+            id="indicateValidity"
+            type="checkbox"
+            defaultChecked={gameState.indicateValidity}
+            onChange={() =>
+              dispatchGameState({ action: "changeIndicateValidity" })
+            }
+          />
+        </div>
       </div>
       <div id="setting-buttons">
         <button type="submit" aria-label="new game">
@@ -46,7 +65,7 @@ export default function Settings({ setDisplay, dispatchGameState, gameState }) {
           aria-label="cancel"
           onClick={() => setDisplay("game")}
         >
-          Cancel
+          Return
         </button>
       </div>
     </form>

src/logic/gameInit.js

@@ -42,6 +42,7 @@ function getGridSizeForLetters(numLetters) {
 
 export function gameInit({
   numLetters,
+  indicateValidity = false,
   useSaved = true,
   isDaily = false,
   seed,
@@ -142,5 +143,6 @@ export function gameInit({
     hintTally: 0,
     dragCount: 0,
     dragState: undefined,
+    indicateValidity: indicateValidity,
   };
 }

src/logic/gameReducer.js

@@ -501,6 +501,11 @@ function updateCompletionState(gameState) {
 export function gameReducer(currentGameState, payload) {
   if (payload.action === "newGame") {
     return gameInit({ ...payload, seed: undefined, useSaved: false });
+  } else if (payload.action === "changeIndicateValidity") {
+    return {
+      ...currentGameState,
+      indicateValidity: !currentGameState.indicateValidity,
+    };
   } else if (payload.action === "getHint") {
     sendAnalytics("hint");
 

src/logic/gameSolvedQ.js

@@ -49,7 +49,11 @@ export function gameSolvedQ(pieces, gridSize) {
     };
   }
 
-  const originalWords = getWordsFromPieces({ pieces, gridSize });
+  const originalWords = getWordsFromPieces({
+    pieces,
+    gridSize,
+    solution: true,
+  });
 
   const { gameIsSolved, reason } = crosswordValidQ({
     grid: grid,