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 }> = ({
    game, crashMessage, userKey, userKeyWhoLeave }) => {

    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