Add AI turn highlighting

ui/src/Game.tsx

@@ -9,6 +9,7 @@ import {
     Tray, TurnAction, TurnAdvanceResult
 } from "word_grid";
 import {
+    HighlightableLetterData,
     LocationType,
     matchCoordinate,
     mergeTrays,
@@ -37,8 +38,6 @@ export function Game(props: {
         return props.wasm.get_board_cell_types();
     }, []);
 
-
-
     const [confirmedScorePoints, setConfirmedScorePoints] = useState<number>(-1);
 
     function movePlayableLetters(playerLetters: PlayableLetterData[], update: TileDispatchAction) {
@@ -121,9 +120,33 @@ export function Game(props: {
     const playerAndScores: PlayerAndScore[] = useMemo(() => {
         return props.wasm.get_scores();
     }, [turnCount]);
-    const boardLetters: LetterData[] = useMemo(() => {
-        return props.wasm.get_board_letters();
+
+    const [boardLetters, setBoardLetters] = useState<HighlightableLetterData[]>(() => {
+        const newLetterData = [] as HighlightableLetterData[];
+        for(let i=0; i<15*15; i++) {
+            newLetterData.push(undefined);
+        }
+        return newLetterData;
+
+    });
+
+    useEffect(() => {
+        const newLetterData = props.wasm.get_board_letters() as LetterData[];
+
+        // we need to go through and set 'highlight' field to either true or false
+        // it will always be false if the player that just went was the AI
+        // TODO - build in support for multiple other players
+        for(let i=0; i<newLetterData.length; i++) {
+            const newLetter = newLetterData[i];
+            if(boardLetters[i] === undefined && newLetter !== undefined && playerTurnName == props.settings.playerName) {
+                newLetter.highlight = true;
+            } else if(newLetter !== undefined) {
+                newLetter.highlight = false;
+            }
+        }
+        setBoardLetters(newLetterData);
     }, [turnCount]);
+
     const playerTurnName = useMemo(() => {
         return props.wasm.get_current_player();
     }, [turnCount]);

ui/src/UI.tsx

@@ -6,7 +6,7 @@ import {
     CellType,
     LocationType,
     PlayableLetterData,
-    CoordinateData, TileDispatchActionType, TileDispatch,
+    CoordinateData, TileDispatchActionType, TileDispatch, HighlightableLetterData,
 } from "./utils";
 
 
@@ -41,7 +41,7 @@ export function TileSlot(props: { tile?: React.JSX.Element | undefined, location
 
 }
 
-export function Letter(props: { data: LetterData, letterUpdater?: (value: string) => void }): React.JSX.Element {
+export function Letter(props: { data: HighlightableLetterData, letterUpdater?: (value: string) => void }): React.JSX.Element {
 
     function modifyThisLetter(value:string){
         props.letterUpdater(value);
@@ -78,7 +78,11 @@ export function Letter(props: { data: LetterData, letterUpdater?: (value: string
         if (props.data.is_blank) { // not ephemeral
             className += " prev-blank";
         }
-        return <div className="letter">
+        let letterClassName = "letter";
+        if (props.data.highlight) {
+            letterClassName += " highlight";
+        }
+        return <div className={letterClassName}>
             <div className={className}>{props.data.text}</div>
             <div className="letter-points">{props.data.points}</div>
         </div>
@@ -130,7 +134,7 @@ export function TileTray(props: { letters: Array<PlayableLetterData>, trayLength
 export function Grid(props: {
         cellTypes: CellType[],
         playerLetters: Array<PlayableLetterData>,
-        boardLetters: LetterData[],
+        boardLetters: HighlightableLetterData[],
         dispatch: TileDispatch}) {
 
     const elements = props.cellTypes.map((ct, i) => {

ui/src/style.less

@@ -122,6 +122,11 @@
     font-style: italic;
   }
 
+
+}
+
+.highlight {
+  color: red;
 }
 
 .board-log {

ui/src/utils.ts

@@ -27,6 +27,7 @@ export interface CoordinateData {
 }
 
 export type PlayableLetterData = LetterData & CoordinateData;
+export type HighlightableLetterData = LetterData & {highlight: boolean};
 
 export enum TileDispatchActionType {
     MOVE,