Add word definition link on hover and on game end

src/App.css

@@ -25,6 +25,13 @@ body {
   align-items: center;
   text-transform: uppercase;
   font-weight: bold;
+  position: relative;
+}
+
+.Row-letter:before {
+    content: '';
+    position: absolute;
+    inset: -4px -4px -4px -4px;
 }
 
 .Row-annotation {
@@ -33,6 +40,42 @@ body {
   text-align: start;
 }
 
+.Row-definition { 
+  position: absolute;
+  padding-left: 12px;
+  height: 40px;
+  margin-left: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Icon-container img {
+  height: 18px;
+  width: 18px;
+  filter: invert(61%) sepia(85%) saturate(3%) hue-rotate(318deg) brightness(93%) contrast(82%);
+}
+
+.Icon-container img:hover {
+  filter: invert(50%) sepia(0%) saturate(15%) hue-rotate(137deg) brightness(98%) contrast(89%);
+}
+
+.target-word {
+  color: unset !important;
+  display: inline;
+  text-decoration: none;
+}
+
+.target-word:hover {
+  text-decoration: underline;
+}
+
 .App-container {
   position: relative;
   max-width: 500px;

src/Game.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Row, RowState } from "./Row";
 import dictionary from "./dictionary.json";
-import { Clue, clue, describeClue, violation } from "./clue";
+import { Clue, clue, describeClue, getClueDefinitionLink, getStringDefinitionLink, violation } from "./clue";
 import { Keyboard } from "./Keyboard";
 import targetList from "./targets.json";
 import {
@@ -66,7 +66,7 @@ function Game(props: GameProps) {
   const [gameState, setGameState] = useState(GameState.Playing);
   const [guesses, setGuesses] = useState<string[]>([]);
   const [currentGuess, setCurrentGuess] = useState<string>("");
-  const [hint, setHint] = useState<string>(
+  const [hint, setHint] = useState<string | JSX.Element>(
     challengeError
       ? `Invalid challenge string, playing random game.`
       : `Make your first guess!`
@@ -159,9 +159,14 @@ function Game(props: GameProps) {
       setCurrentGuess((guess) => "");
 
       const gameOver = (verbed: string) =>
-        `You ${verbed}! The answer was ${target.toUpperCase()}. (Enter to ${
-          challenge ? "play a random game" : "play again"
-        })`;
+        <>
+          You ${verbed}! The answer was&nbsp;
+          <a className="target-word">
+            {target.toUpperCase()}
+          </a>
+          . (Enter to {
+            challenge ? "play a random game" : "play again"}
+        </>;
 
       if (currentGuess === target) {
         setHint(gameOver("won"));
@@ -254,7 +259,17 @@ function Game(props: GameProps) {
           disabled={gameState !== GameState.Playing || guesses.length === 0}
           onClick={() => {
             setHint(
-              `The answer was ${target.toUpperCase()}. (Enter to play again)`
+              <>
+                The answer was&nbsp;
+                  <a 
+                    className="target-word" 
+                    href={getStringDefinitionLink(target)} 
+                    target="_blank"
+                  >
+                    {target.toUpperCase()}
+                  </a>
+                . (Enter to play again)
+              </>
             );
             setGameState(GameState.Lost);
             (document.activeElement as HTMLElement)?.blur();
@@ -274,7 +289,7 @@ function Game(props: GameProps) {
       <p
         role="alert"
         style={{
-          userSelect: /https?:/.test(hint) ? "text" : "none",
+          userSelect: typeof hint === "string" && /https?:/.test(hint) ? "text" : "none",
           whiteSpace: "pre-wrap",
         }}
       >

src/Row.tsx

@@ -1,4 +1,6 @@
-import { Clue, clueClass, CluedLetter, clueWord } from "./clue";
+import { MouseEvent, useRef, useState } from "react";
+import { Clue, clueClass, CluedLetter, clueWord, getClueDefinitionLink } from "./clue";
+import searchIcon from "./images/search.svg";
 
 export enum RowState {
   LockedIn,
@@ -13,14 +15,34 @@ interface RowProps {
   annotation?: string;
 }
 
+interface DefinitionProps {
+  shown: boolean,
+  left: number;
+  width: number;
+}
+
 export function Row(props: RowProps) {
+  const [definitionInfo, setDefinitionInfo] = useState<DefinitionProps>({ shown: false, left: 0, width: 0 });
+  const lastLetterRef = useRef<HTMLTableCellElement>(null);
   const isLockedIn = props.rowState === RowState.LockedIn;
   const isEditing = props.rowState === RowState.Editing;
+  function showDictionary(e: MouseEvent<HTMLTableCellElement>) {
+    let lastLetterLeft = lastLetterRef.current?.offsetLeft ?? 0;
+    let lastLetterWidth = lastLetterRef.current?.offsetWidth ?? 0;
+    setDefinitionInfo({ shown: true, left: lastLetterLeft, width: lastLetterWidth });
+  }
+  function hideDictionary(e: MouseEvent<HTMLTableCellElement>) {
+    let toElement = e.relatedTarget as Element;
+    if (toElement.className === "Row-definition" || toElement.className === "Icon-img") return;
+    setDefinitionInfo({ shown: false, left: 0, width: 0 });
+
+  }
   const letterDivs = props.cluedLetters
     .concat(Array(props.wordLength).fill({ clue: Clue.Absent, letter: "" }))
     .slice(0, props.wordLength)
     .map(({ clue, letter }, i) => {
       let letterClass = "Row-letter";
+      let isLastLetter = i === props.wordLength - 1;
       if (isLockedIn && clue !== undefined) {
         letterClass += " " + clueClass(clue);
       }
@@ -35,6 +57,9 @@ export function Row(props: RowProps) {
                 (clue === undefined ? "" : ": " + clueWord(clue))
               : ""
           }
+          onMouseEnter={showDictionary}
+          onMouseLeave={hideDictionary}
+          ref={isLastLetter ? lastLetterRef : undefined}
         >
           {letter}
         </td>
@@ -48,6 +73,27 @@ export function Row(props: RowProps) {
       {props.annotation && (
         <span className="Row-annotation">{props.annotation}</span>
       )}
+      {isLockedIn && definitionInfo.shown && (
+        <div 
+          className="Row-definition"
+          onMouseLeave={hideDictionary}
+          style={{
+            left: definitionInfo.left + definitionInfo.width
+          }}
+        >
+          <a 
+            className="Icon-container" 
+            href={getClueDefinitionLink(props.cluedLetters)}
+            target="_blank"
+            title="View Definition"
+          >
+            <img 
+              className="Icon-img" 
+              src={searchIcon} 
+            />
+          </a>
+        </div>
+      )}
     </tr>
   );
 }

src/clue.ts

@@ -105,3 +105,11 @@ export function violation(
   }
   return undefined;
 }
+
+export function getClueDefinitionLink(clues: CluedLetter[]): string {
+  return getStringDefinitionLink(clues.map(clue => clue.letter).join(''));
+}
+
+export function getStringDefinitionLink(word: string): string {
+  return `https://www.collinsdictionary.com/dictionary/english/${word}`;
+}

src/declaration.d.ts

@@ -0,0 +1 @@
+declare module "*.svg";