mancala/src/components/InfoPanel.tsx

import * as React from 'react';
import { FunctionComponent } from "react"
import { context } from '../context';
import { Game } from '../mancala';

const InfoPanel: FunctionComponent<{
    game: Game,
    crashMessage: string,
    userKey: string,
    userKeyWhoLeave: string,
    searchingOpponent: boolean
}> = ({
    game, crashMessage, userKey, userKeyWhoLeave, searchingOpponent }) => {
        if (searchingOpponent) {
            return (
                <h4>{
                    context.texts.SearchingOpponent + " " + context.texts.PleaseWait
                }</h4>
            )
        }

        if (crashMessage) {
            return (
                <h4>{
                    context.texts.GameCrashed + " " + crashMessage
                }</h4>
            )
        }

        if (userKeyWhoLeave) {
            let message = context.texts.OpponentLeavesTheGame

            if (userKeyWhoLeave == userKey) {
                message = context.texts.YouLeftTheGame
            }
            return (
                <h4>
                    {message}
                </h4>
            )
        }

        if (game) {
            if (game.state == "ended") {
                const whoWon = game.getWonPlayer() == userKey ? context.texts.YouWon : context.texts.YouLost
                return (
                    <h4>{
                        context.texts.GameEnded + " " + whoWon
                    }</h4>
                )
            } else {
                return (
                    <h4>{game.checkGameTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
                )
            }
        }

        return <h4></h4>
    }

export default InfoPanel