Add display of previous tiles

src/wasm.rs

@@ -54,6 +54,16 @@ impl GameWasm {
         serde_wasm_bindgen::to_value(&cell_types)
     }
 
+    pub fn get_board_letters(&self) -> Result<JsValue, Error> {
+        let board = self.0.get_board();
+
+        let letters: Vec<Option<Letter>> = board.cells.iter().map(|cell| -> Option<Letter> {
+            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<JsValue, JsValue> {
         let tray_tile_locations: Vec<Option<PlayedTile>> = serde_wasm_bindgen::from_value(tray_tile_locations)?;
 

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, (_) => {
+    const [playerLetters, trayDispatch] = useReducer(movePlayableLetters, []);
-            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 [logInfo, logDispatch] = useReducer(addLogInfo, []);
@@ -152,7 +140,11 @@ export function Game(props: {wasm: GameWasm}) {
     const [turnCount, setTurnCount] = useState<number>(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(<h4>Turn {turnCount}</h4>);
         setConfirmedScorePoints(-1);
@@ -164,7 +156,7 @@ export function Game(props: {wasm: GameWasm}) {
 
     return <>
         <div className="board-log">
-            <Grid cellTypes={cellTypes} playerLetters={playerLetters} dispatch={trayDispatch}/>
+            <Grid cellTypes={cellTypes} playerLetters={playerLetters} boardLetters={boardLetters} dispatch={trayDispatch}/>
             <div className="message-log">
                 <Scores playerScores={playerAndScores}/>
                 <div className="log">
@@ -301,16 +293,30 @@ export function TileTray(props: { letters: Array<PlayableLetterData>, trayLength
 
 }
 
-function Grid(props: {cellTypes: CellType[], playerLetters: Array<PlayableLetterData>, dispatch: TileDispatch}) {
+function Grid(props: {
+        cellTypes: CellType[],
+        playerLetters: Array<PlayableLetterData>,
+        boardLetters: LetterData[],
+        dispatch: TileDispatch}) {
+
     const elements = props.cellTypes.map((ct, i) => {
         const {className, text} = cell_type_to_details(ct);
 
-        return <div key={i} className={"grid-spot " + className}>
+        let tileElement: JSX.Element;
-            <span>{text}</span>
+        if (props.boardLetters[i] !== undefined) {
-            <TileSlot
+            tileElement = <Letter data={props.boardLetters[i]} />;
+        } else {
+            tileElement = <>
+                <span>{text}</span>
+                <TileSlot
                 tile={undefined}
                 location={{location: LocationType.GRID, index: i}}
-                dispatch={props.dispatch} />
+                dispatch={props.dispatch} /></>;
+        }
+
+        return <div key={i} className={"grid-spot " + className}>
+
+            {tileElement}
         </div>;
     });