Add some mitigations against blank letter bug

ui/src/Game.tsx

@@ -47,6 +47,7 @@ export function Game(props: {
 
     const [isGameOver, setGameOver] = useState<boolean>(false);
     const [confirmedScorePoints, setConfirmedScorePoints] = useState<number>(-1);
+    const [isResetTrayButtonEnabled, setIsResetTrayButtonEnabled] = useState<boolean>(false);
 
     const [boardLetters, setBoardLetters] = useState<HighlightableLetterData[]>(() => {
         const newLetterData = [] as HighlightableLetterData[];
@@ -150,6 +151,10 @@ export function Game(props: {
 
             let tray: Tray = props.wasm.get_tray("Player");
 
+            if(update.override) {
+                playerLetters = [];
+            }
+
             return mergeTrays(playerLetters, tray.letters);
         } else if (update.action === TileDispatchActionType.MOVE) {
 
@@ -171,8 +176,17 @@ export function Game(props: {
             setConfirmedScorePoints(-1);
 
             return playerLetters.slice();
-        } if (update.action === TileDispatchActionType.SET_BLANK) {
+        } else if (update.action === TileDispatchActionType.SET_BLANK) {
             const blankLetter = playerLetters[update.blankIndex];
+
+            // FIXME DEBUG code
+            if(blankLetter == null || !blankLetter.is_blank){
+                window.alert("Bug was triggered!! Doing nothing.");
+                console.warn({playerLetters});
+                setIsResetTrayButtonEnabled(true);
+                return playerLetters.slice();
+            }
+
             if(blankLetter.text !== update.newBlankValue) {
                 blankLetter.text = update.newBlankValue;
                 if (blankLetter.location == LocationType.GRID) {
@@ -517,6 +531,13 @@ export function Game(props: {
                         }
                     }
                 }}>Pass</button>
+                {isResetTrayButtonEnabled && <button onClick={() => {
+                    trayDispatch({action: TileDispatchActionType.RETRIEVE, override: true});
+                    setConfirmedScorePoints(-1);
+                }}>
+                    Reset Tray
+                </button>}
+
             </div>
         </div>
 

ui/src/Menu.tsx

@@ -65,6 +65,7 @@ export function Menu(props: {settings: Settings, dictionary_text: string}) {
                 <div className="selection-buttons">
                     <button onClick={() => {
                         const seed = new Date().getTime();
+                        //const seed = 136; // seed for starting with a blank
                         const difficulty: Difficulty = {
                             proportion: processedProportionDictionary,
                             randomness: processedAIRandomness,

ui/src/UI.tsx

@@ -141,7 +141,7 @@ export function TileTray(props: { letters: Array<PlayableLetterData>, trayLength
                             props.trayDispatch({action: TileDispatchActionType.SET_BLANK, blankIndex: i, newBlankValue: value})
                         }}
                     />}
-                    key={"letter" + letter.index}
+                    key={"letter_tray" + letter.index}
                     location={{location: LocationType.TRAY, index: letter.index}}
                     tileDispatch={props.trayDispatch} />
 

ui/src/utils.ts

@@ -37,7 +37,7 @@ export enum TileDispatchActionType {
     RETURN,
     MOVE_TO_ARROW,
 }
-export type TileDispatchAction = {action: TileDispatchActionType, start?: CoordinateData, end?: CoordinateData, newBlankValue?: string, blankIndex?: number};
+export type TileDispatchAction = {action: TileDispatchActionType, start?: CoordinateData, end?: CoordinateData, newBlankValue?: string, blankIndex?: number, override?: boolean};
 export type TileDispatch = React.Dispatch<TileDispatchAction>;
 
 export enum Direction {