diff --git a/ui/src/Game.tsx b/ui/src/Game.tsx index e1482a2..e227d89 100644 --- a/ui/src/Game.tsx +++ b/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(-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(() => { + 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 { return props.wasm.get_current_player(); }, [turnCount]); diff --git a/ui/src/UI.tsx b/ui/src/UI.tsx index bd50085..d015030 100644 --- a/ui/src/UI.tsx +++ b/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
+ let letterClassName = "letter"; + if (props.data.highlight) { + letterClassName += " highlight"; + } + return
{props.data.text}
{props.data.points}
@@ -130,7 +134,7 @@ export function TileTray(props: { letters: Array, trayLength export function Grid(props: { cellTypes: CellType[], playerLetters: Array, - boardLetters: LetterData[], + boardLetters: HighlightableLetterData[], dispatch: TileDispatch}) { const elements = props.cellTypes.map((ct, i) => { diff --git a/ui/src/style.less b/ui/src/style.less index c945df8..954b421 100644 --- a/ui/src/style.less +++ b/ui/src/style.less @@ -122,6 +122,11 @@ font-style: italic; } + +} + +.highlight { + color: red; } .board-log { diff --git a/ui/src/utils.ts b/ui/src/utils.ts index b6803aa..9a825e0 100644 --- a/ui/src/utils.ts +++ b/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,