Visually indicate horizontal and vertical words

src/App.css

@@ -342,6 +342,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 +355,31 @@ a {
   color: rgb(226 88 88);
 }
 
+.letter.verticalValid::before{
+  content: '';
+  position: absolute;
+  left: 18%;
+  top: 38%;
+  width: 1px;
+  height: 6px;
+  background-color: var(--light-color);
+}
+
+.letter.horizontalValid::after{
+  content: '';
+  position: absolute;
+  left: 10%;
+  top: 45%;
+  height: 1px;
+  width: 6px;
+  background-color: var(--light-color);
+}
+
 .letter-border {
   box-sizing: border-box;
   width: calc(var(--box-size) + 1px);
   height: calc(var(--box-size) + 1px);
+  z-index: 1;
 }
 
 .borderTop {

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,6 +30,79 @@ 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,
@@ -38,6 +116,7 @@ export default function Board({
   );
 
   const overlapGrid = countingGrid(gridSize, gridSize, boardPieces);
+  const [horizontalValidityGrid, verticalValidityGrid] = getWordValidityGrids({ pieces, gridSize });
   const pieceElements = boardPieces.map((piece) => (
     <Piece
       key={piece.id}
@@ -46,6 +125,8 @@ export default function Board({
       overlapGrid={overlapGrid}
       gameIsSolved={gameIsSolved}
       dispatchGameState={dispatchGameState}
+      horizontalValidityGrid={horizontalValidityGrid}
+      verticalValidityGrid={verticalValidityGrid}
     />
   ));
 

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/logic/gameSolvedQ.js

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

src/logic/getSolutionFromPieces.js → src/logic/getGridFromPieces.js

@@ -1,4 +1,7 @@
-export function getSolutionFromPieces({ pieces, gridSize }) {
+export function getGridFromPieces({ pieces, gridSize, solution }) {
+  // Compiles a 2D array representing the letter locations on the board
+  // If solution is true, uses the solutionTop/solutionLeft value of each piece
+  // otherwise, uses the boardTop/boardLeft value
   if (pieces === undefined) {
     throw new Error("Pieces must be defined.");
   }
@@ -11,11 +14,17 @@ export function getSolutionFromPieces({ pieces, gridSize }) {
     Array.from({ length: gridSize }, () => "")
   );
 
+  const topKey = solution ? "solutionTop" : "boardTop";
+  const leftKey = solution ? "solutionLeft" : "boardLeft";
+
   for (const piece of pieces) {
+    if (!solution && (piece[topKey] == undefined || piece[leftKey] == undefined)) {
+      continue;
+    }
     const letters = piece.letters;
-    let top = piece.solutionTop;
+    let top = piece[topKey];
     for (let rowIndex = 0; rowIndex < letters.length; rowIndex++) {
-      let left = piece.solutionLeft;
+      let left = piece[leftKey];
       for (let colIndex = 0; colIndex < letters[rowIndex].length; colIndex++) {
         if (letters[rowIndex][colIndex]) {
           if (grid[top][left] == undefined) {
@@ -28,6 +37,5 @@ export function getSolutionFromPieces({ pieces, gridSize }) {
       top += 1;
     }
   }
-
   return grid;
 }