diff --git a/src/wasm.rs b/src/wasm.rs index 59e7984..e622854 100644 --- a/src/wasm.rs +++ b/src/wasm.rs @@ -54,6 +54,16 @@ impl GameWasm { serde_wasm_bindgen::to_value(&cell_types) } + pub fn get_board_letters(&self) -> Result { + let board = self.0.get_board(); + + let letters: Vec> = board.cells.iter().map(|cell| -> Option { + cell.value.clone() + }).collect(); + + serde_wasm_bindgen::to_value(&letters) + } + pub fn receive_play(&mut self, player: &str, tray_tile_locations: JsValue, commit_move: bool) -> Result { let tray_tile_locations: Vec> = serde_wasm_bindgen::from_value(tray_tile_locations)?; diff --git a/ui/src/elements.tsx b/ui/src/elements.tsx index bd36f30..391b2af 100644 --- a/ui/src/elements.tsx +++ b/ui/src/elements.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import {GameWasm, Letter as LetterData, MyResult, PlayedTile, PlayerAndScore, Tray, WordResult} from "word_grid"; -import {useEffect, useMemo, useReducer, useState} from "react"; +import {JSX, useEffect, useMemo, useReducer, useState} from "react"; export enum LocationType { GRID, @@ -132,19 +132,7 @@ export function Game(props: {wasm: GameWasm}) { } - const [playerLetters, trayDispatch] = useReducer(movePlayableLetters, null, (_) => { - let tray: Tray = props.wasm.get_tray("Player"); - - // initial state - let letters: PlayableLetterData[] = tray.letters.map((ld, i) => { - ld["location"] = LocationType.TRAY; - ld["index"] = i; - return ld as PlayableLetterData; - }) - - return letters; - }); - + const [playerLetters, trayDispatch] = useReducer(movePlayableLetters, []); const [logInfo, logDispatch] = useReducer(addLogInfo, []); @@ -152,7 +140,11 @@ export function Game(props: {wasm: GameWasm}) { const [turnCount, setTurnCount] = useState(1); const playerAndScores: PlayerAndScore[] = useMemo(() => { return props.wasm.get_scores(); - }, [turnCount]) + }, [turnCount]); + const boardLetters: LetterData[] = useMemo(() => { + return props.wasm.get_board_letters(); + }, [turnCount]); + useEffect(() => { logDispatch(

Turn {turnCount}

); setConfirmedScorePoints(-1); @@ -164,7 +156,7 @@ export function Game(props: {wasm: GameWasm}) { return <>
- +
@@ -301,16 +293,30 @@ export function TileTray(props: { letters: Array, trayLength } -function Grid(props: {cellTypes: CellType[], playerLetters: Array, dispatch: TileDispatch}) { +function Grid(props: { + cellTypes: CellType[], + playerLetters: Array, + boardLetters: LetterData[], + dispatch: TileDispatch}) { + const elements = props.cellTypes.map((ct, i) => { const {className, text} = cell_type_to_details(ct); - return
- {text} - ; + } else { + tileElement = <> + {text} + + dispatch={props.dispatch} />; + } + + return
+ + {tileElement}
; });