WordGrid/ui/src/Game.tsx

import * as React from "react";
import {
    GameState,
    GameWasm, Letter,
    Letter as LetterData,
    MyResult,
    PlayedTile,
    PlayerAndScore,
    ScoreResult,
    Tray, TurnAction, TurnAdvanceResult
} from "../../pkg/word_grid";
import {
    HighlightableLetterData,
    LocationType,
    matchCoordinate,
    mergeTrays,
    PlayableLetterData,
    Settings,
    TileDispatchAction,
    TileDispatchActionType
} from "./utils";
import {useEffect, useMemo, useReducer, useRef, useState} from "react";
import {TileExchangeModal} from "./TileExchange";
import {Grid, Scores, TileTray} from "./UI";

function addLogInfo(existingLog: React.JSX.Element[], newItem: React.JSX.Element) {
    newItem = React.cloneElement(newItem, { key:  existingLog.length })
    existingLog.push(newItem);
    return existingLog.slice();
}

export function Game(props: {
    wasm: GameWasm,
    settings: Settings,
    end_game_fn: () => void,
}) {

    const cellTypes = useMemo(() => {
        return props.wasm.get_board_cell_types();
    }, []);

    const [isGameOver, setGameOver] = useState<boolean>(false);
    const [confirmedScorePoints, setConfirmedScorePoints] = useState<number>(-1);

    function movePlayableLetters(playerLetters: PlayableLetterData[], update: TileDispatchAction) {

        if(update.action === TileDispatchActionType.RETRIEVE) {

            let tray: Tray = props.wasm.get_tray("Player");

            return mergeTrays(playerLetters, tray.letters);
        } else if (update.action === TileDispatchActionType.MOVE) {

            let startIndex = matchCoordinate(playerLetters, update.start);
            let endIndex = matchCoordinate(playerLetters, update.end);

            if(startIndex != null) {
                let startLetter = playerLetters[startIndex];
                startLetter.location = update.end.location;
                startLetter.index = update.end.index;
            }

            if(endIndex != null) {
                let endLetter = playerLetters[endIndex];
                endLetter.location = update.start.location;
                endLetter.index = update.start.index;
            }

            setConfirmedScorePoints(-1);

            return playerLetters.slice();
        } if (update.action === TileDispatchActionType.SET_BLANK) {
            const blankLetter = playerLetters[update.blankIndex];
            if(blankLetter.text !== update.newBlankValue) {
                blankLetter.text = update.newBlankValue;
                if (blankLetter.location == LocationType.GRID) {
                    setConfirmedScorePoints(-1);
                }
            }
            return playerLetters.slice();
        } else if (update.action === TileDispatchActionType.RETURN) {
            return mergeTrays(playerLetters, playerLetters);
        } else {
            console.error("Unknown tray update");
            console.error({update});
        }

    }


    function exchangeFunction(selectedArray: Array<boolean>) {

        const result: MyResult<TurnAction | string> = props.wasm.exchange_tiles(selectedArray);

        if(result.response_type === "ERR") {
            logDispatch(<div><em>{(result.value as string)}</em></div>);
        } else {
            handlePlayerAction(result.value as TurnAction, props.settings.playerName);
            setTurnCount(turnCount + 1);

            if(result.game_state.type === "Ended") {
                endGame(result.game_state);
            }
        }

    }

    function addWordFn(word: string) {
        props.wasm.add_word(word);
    }

    const [playerLetters, trayDispatch] = useReducer(movePlayableLetters, []);
    const [logInfo, logDispatch] = useReducer(addLogInfo, []);

    const [turnCount, setTurnCount] = useState<number>(1);
    const playerAndScores: PlayerAndScore[] = useMemo(() => {
        return props.wasm.get_scores();
    }, [turnCount, isGameOver]);

    const [boardLetters, setBoardLetters] = useState<HighlightableLetterData[]>(() => {
        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 HighlightableLetterData[];

        // 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<newLetterData.length; i++) {
            const newLetter = newLetterData[i];
            if(boardLetters[i] === undefined && newLetter !== undefined && playerTurnName == props.settings.playerName) {
                newLetter.highlight = true;
            } else if(newLetter !== undefined) {
                newLetter.highlight = false;
            }
        }
        setBoardLetters(newLetterData);
    }, [turnCount]);

    const playerTurnName = useMemo(() => {
        return props.wasm.get_current_player();
    }, [turnCount]);

    const logDivRef = useRef(null);

    const [isTileExchangeOpen, setIsTileExchangeOpen] = useState<boolean>(false);

    useEffect(() => {
        // Effect is to keep the log window scrolled down
        if (logDivRef.current != null) {
            logDivRef.current.scrollTo(0, logDivRef.current.scrollHeight); // scroll down
        }
    }, [logInfo]);

    const remainingTiles = useMemo(() => {
        return props.wasm.get_remaining_tiles();
    }, [turnCount, isGameOver]);

    const remainingAITiles = useMemo(() => {
        let result = props.wasm.get_player_tile_count(props.settings.aiName) as MyResult<number | String>;
        if(result.response_type == "OK") {
            return result.value as number;
        } else {
            console.error(result.value);
            return -1;
        }

    }, [turnCount, isGameOver]);

    function handlePlayerAction(action: TurnAction, playerName: string) {
        
        if (action.type == "PlayTiles"){
            const result = action.result;
            result.words.sort((a, b) => b.score - a.score);
            for(let word of result.words) {
                logDispatch(<div>{playerName} received {word.score} points for playing '{word.word}.'</div>);
            }
            logDispatch(<div>{playerName} received a total of <strong>{result.total} points</strong> for their turn.</div>);
        } else if(action.type == "ExchangeTiles") {
            logDispatch(<div>{playerName} exchanged {action.tiles_exchanged} tile{action.tiles_exchanged > 1 ? 's' : ''} for their turn.</div>);
        }
        else if(action.type == "Pass"){
            logDispatch(<div>{playerName} passed.</div>);
        }
    }

    function endGame(state: GameState) {

        if(state.type != "InProgress") {

            setGameOver(true);
            logDispatch(<h4>Scoring</h4>);

            const scores = props.wasm.get_scores() as PlayerAndScore[];
            let pointsBonus = 0;
            for(const playerAndScore of scores) {
                const name = playerAndScore.name;

                if(name == state.finisher) {
                    // we'll do the finisher last
                    continue
                }

                const letters = state.remaining_tiles.get(name);
                if(letters.length == 0) {
                    logDispatch(<div>{name} has no remaining tiles.</div>);
                } else {
                    let pointsLost = 0;
                    let letterListStr = '';
                    for(let i=0; i<letters.length; i++) {
                        const letter = letters[i];
                        const letterText = letter.is_blank ? 'a blank' : letter.text;
                        pointsLost += letter.points;

                        letterListStr += letterText;

                        // we're doing a list of 3 or more so add commas
                        if(letters.length > 2) {
                            if(i == letters.length - 2) {
                                letterListStr += ', and ';
                            } else if (i < letters.length - 2) {
                                letterListStr += ', ';
                            }
                        } else if (i == 0 && letters.length == 2){
                            // list of 2
                            letterListStr += ' and ';
                        }

                    }
                    logDispatch(<div>{name} penalized {pointsLost} points for not using {letterListStr}.</div>);
                    pointsBonus += pointsLost;
                }
            }

            if(state.finisher != null) {
                logDispatch(<div>{state.finisher} receives {pointsBonus} bonus for completing first.</div>);
            }

            const highestScore = scores
                .map((score) => score.score)
                .sort((a, b) => b - a)
                .at(0);

            const playersAtHighest = scores.filter((score) => score.score == highestScore);
            let endGameMsg: string = '';

            if(playersAtHighest.length > 1 && state.finisher == null) {
                endGameMsg = "Tie game!";
            } else if (playersAtHighest.length > 1 && state.finisher != null) {
                // if there's a tie then the finisher gets the win
                endGameMsg = `${playersAtHighest[0].name} won by finishing first!`;
            }
            else {
                endGameMsg = `${playersAtHighest[0].name} won!`;
            }
            logDispatch(<h4>Game over - {endGameMsg}</h4>);
        } else {
            // what are we doing in this function?!
            console.error("endGame was called despite the state being InProgress!");
        }

    }

    function runAI() {
        const result: MyResult<TurnAdvanceResult> = props.wasm.advance_turn();
        if(result.response_type === "OK" && result.value.type == "AIMove") {
            handlePlayerAction(result.value.action, props.settings.aiName);
            if(result.game_state.type === "Ended") {
                endGame(result.game_state);
            }

        } else {
            // this would be quite surprising
            console.error({result});
        }

        setTurnCount(turnCount + 1);
    }

    useEffect(() => {
        logDispatch(<h4>Turn {turnCount}</h4>);
        logDispatch(<div>{playerTurnName}'s turn</div>)
        setConfirmedScorePoints(-1);
        trayDispatch({action: TileDispatchActionType.RETRIEVE});
        if(playerTurnName != props.settings.playerName && !isGameOver) {
            runAI();
        }

    }, [turnCount]);


    return <>
        <TileExchangeModal
            playerLetters={playerLetters}
            isOpen={isTileExchangeOpen}
            setOpen={setIsTileExchangeOpen}
            exchangeFunction={exchangeFunction}
        />
        <div className="board-log">
            <Grid cellTypes={cellTypes} playerLetters={playerLetters} boardLetters={boardLetters} dispatch={trayDispatch}/>
            <div className="message-log">
                <Scores playerScores={playerAndScores}/>
                <div className="log" ref={logDivRef}>
                    {logInfo}
                </div>
            </div>
        </div>
        <div className="tray-row">
            <div>
                <div>
                    {remainingTiles} letters remaining
                </div>
                <div>
                    {props.settings.aiName} has {remainingAITiles} tiles
                </div>
                <button
                    disabled={remainingTiles == 0}
                    onClick={() => {
                    trayDispatch({action: TileDispatchActionType.RETURN}); // want all tiles back on tray for tile exchange
                    setIsTileExchangeOpen(true);
                    }}>Open Tile Exchange</button>
            </div>
        
            <TileTray letters={playerLetters} trayLength={props.settings.trayLength} dispatch={trayDispatch}/>
            <div className="player-controls">
                <button className="check" onClick={() => {
                    const playedTiles = playerLetters.map((i) => {
                        if (i === undefined) {
                            return null;
                        }

                        if (i.location === LocationType.GRID) {
                            let result: PlayedTile = {
                                index: i.index,
                                character: undefined
                            };
                            if (i.is_blank) {
                                result.character = i.text;
                            }

                            return result;
                        }

                        return null;
                    });

                    const result: MyResult<{ type: "PlayTiles"; result: ScoreResult } | string> = props.wasm.receive_play(playedTiles, confirmedScorePoints > -1);
                    console.log({result});

                    if(result.response_type === "ERR") {
                        const message = result.value as string;
                        if (message.endsWith("is not a valid word")) {
                            // extract out word
                            const word = message.split(" ")[0];
                            logDispatch(<AddWordButton word={word} addWordFn={addWordFn} />);
                        } else {
                            logDispatch(<div><em>{message}</em></div>);
                        }

                    } else {

                        const score_result = (result.value as { type: "PlayTiles"; result: ScoreResult }).result;
                        const total_points = score_result.total;


                        if (confirmedScorePoints > -1) {
                            handlePlayerAction({type: "PlayTiles", result: score_result}, props.settings.playerName);
                            setTurnCount(turnCount + 1);
                        }

                        if (result.game_state.type === "Ended") {
                            endGame(result.game_state);
                        }

                        setConfirmedScorePoints(total_points);
                    }



                }}>{confirmedScorePoints > -1 ? `Score ${confirmedScorePoints} points` : "Check"}</button>
                <button className="return" onClick={() => {
                    trayDispatch({action: TileDispatchActionType.RETURN});
                }}>Return Tiles</button>
                <button className="pass" onClick={() => {
                    if (window.confirm("Are you sure you want to pass?")) {
                        const result = props.wasm.skip_turn() as MyResult<string>;
                        handlePlayerAction({type: "Pass"}, props.settings.playerName);
                        setTurnCount(turnCount + 1);

                        if (result.game_state.type === "Ended") {
                            endGame(result.game_state);
                        }
                    }
                }}>Pass</button>
            </div>
        </div>


    </>;

}

function AddWordButton(props: {word: string, addWordFn: (x: string) => void}) {
    const [isClicked, setIsClicked] = useState<boolean>(false);

    if (!isClicked) {
        return <div>
            <em>{props.word} is not a valid word.</em>
            <button
                className="add-to-dictionary"
                disabled={isClicked}
                onClick={() => {
                    setIsClicked(true);
                    props.addWordFn(props.word);
                }}>
                Add to dictionary
            </button>
        </div>;
    } else {
        return <div>
            <em>{props.word} was added to dictionary.</em>
        </div>;
    }

}