mancala/src/components/InfoPanel.tsx

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

const InfoPanel: FunctionComponent<{
    game: MancalaGame,
    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 wonPlayer = game.getWonPlayerId();
                let whoWon = game.getWonPlayerId() === userKey ? context.texts.YouWon : context.texts.YouLost
                if(!wonPlayer){
                    whoWon = context.texts.GameDraw
                }
                return (
                    <h4>{
                        context.texts.GameEnded + " " + whoWon
                    }</h4>
                )
            } else {
                return (
                    <h4>{game.checkIsPlayerTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
                )
            }
        }

        return <h4></h4>
    }

export default InfoPanel