fix: UI prevents players from playing blank, blank tiles

ui/src/Game.tsx

@@ -456,68 +456,77 @@ export function Game(props: {
                     className="check"
                     disabled={isGameOver || !isPlayersTurn}
                     onClick={async () => {
-                        const playedTiles = playerLetters.map((i) => {
+                        try {
-                            if (i == null) {
+                            const playedTiles = playerLetters.map((i) => {
-                                return null;
+                                if (i == null) {
-                            }
+                                    return null;
-
-                            if (i.location === LocationType.GRID) {
-                                let result: PlayedTile = {
-                                    index: i.index,
-                                    character: null
-                                };
-                                if (i.is_blank) {
-                                    result.character = i.text;
                                 }
 
-                                return result;
+                                if (i.location === LocationType.GRID) {
-                            }
+                                    let result: PlayedTile = {
-
+                                        index: i.index,
-                            return null;
+                                        character: null
-                        });
+                                    };
-
+                                    if (i.is_blank) {
-                        const committing = confirmedScorePoints > -1;
+                                        result.character = i.text;
-                        const result = props.api.play(playedTiles, committing);
+                                        if(result.character == null || result.character == " " || result.character == "") {
-
+                                            throw new Error("Blank tiles must contain a letter");
-                        result
-                            .then(
-                                (api_state) => {
-                                    console.log("Testing45")
-                                    console.log({api_state});
-
-                                    const play_tiles: TurnAction = api_state.update.type;
-                                    if (play_tiles.type == "PlayTiles") {
-                                        setConfirmedScorePoints(play_tiles.result.total);
-
-                                        if (committing) {
-                                            setAPIState(api_state);
                                         }
-
-                                    } else {
-                                        console.error("Inaccessible branch!!!")
                                     }
-                                }
-                            )
-                            .catch((error) => {
-                                console.error({error});
 
-                                if (error.endsWith(" is not a valid word")) {
+                                    return result;
-                                    const word = error.split(' ')[0];
-                                    // For whatever reason I can't pass props.api.add_to_dictionary directly
-                                    logDispatch(<AddWordButton word={word}
-                                                               addWordFn={(word) => {
-                                                                   props.api.add_to_dictionary(word)
-                                                                       .then((api_state) => {
-                                                                           setAPIState(api_state);
-                                                                       })
-                                                               }}/>);
-                                } else {
-                                    logDispatch(<div>{error}</div>);
                                 }
 
-
+                                return null;
                             });
 
+
+                            const committing = confirmedScorePoints > -1;
+                            const result = props.api.play(playedTiles, committing);
+
+                            result
+                                .then(
+                                    (api_state) => {
+                                        console.log("Testing45")
+                                        console.log({api_state});
+
+                                        const play_tiles: TurnAction = api_state.update.type;
+                                        if (play_tiles.type == "PlayTiles") {
+                                            setConfirmedScorePoints(play_tiles.result.total);
+
+                                            if (committing) {
+                                                setAPIState(api_state);
+                                            }
+
+                                        } else {
+                                            console.error("Inaccessible branch!!!")
+                                        }
+                                    }
+                                )
+                                .catch((error) => {
+                                    console.error({error});
+
+                                    if (error.endsWith(" is not a valid word")) {
+                                        const word = error.split(' ')[0];
+                                        // For whatever reason I can't pass props.api.add_to_dictionary directly
+                                        logDispatch(<AddWordButton word={word}
+                                                                   addWordFn={(word) => {
+                                                                       props.api.add_to_dictionary(word)
+                                                                           .then((api_state) => {
+                                                                               setAPIState(api_state);
+                                                                           })
+                                                                   }}/>);
+                                    } else {
+                                        logDispatch(<div>{error}</div>);
+                                    }
+
+
+                                });
+                        }
+                        catch(e) {
+                            logDispatch(<div>{e.message}</div>)
+                        }
+
                     }}>{confirmedScorePoints > -1 ? `Score ${confirmedScorePoints} points` : "Check"}</button>
                 <button
                     className="return"