117 lines
2.8 KiB
TypeScript
117 lines
2.8 KiB
TypeScript
import { MancalaGame } from "mancala.js";
|
|
import * as React from "react";
|
|
import { FunctionComponent } from "react";
|
|
import { Context } from "../context";
|
|
import { getColorByBrightness } from "../util/ColorUtil";
|
|
|
|
function getInfoPanelTextByGameState(params: {
|
|
context: Context;
|
|
game: MancalaGame;
|
|
crashMessage: string;
|
|
userKey: string;
|
|
userKeyWhoLeave: string;
|
|
searchingOpponent: boolean;
|
|
}): string {
|
|
const {
|
|
context,
|
|
game,
|
|
crashMessage,
|
|
userKey,
|
|
userKeyWhoLeave,
|
|
searchingOpponent,
|
|
} = params;
|
|
if (searchingOpponent) {
|
|
return context.texts.SearchingOpponent + " " + context.texts.PleaseWait;
|
|
} else if (crashMessage) {
|
|
return context.texts.GameCrashed + " " + crashMessage;
|
|
} else if (userKeyWhoLeave) {
|
|
let message = context.texts.OpponentLeavesTheGame;
|
|
if (userKeyWhoLeave == userKey) {
|
|
message = context.texts.YouLeftTheGame;
|
|
}
|
|
return message;
|
|
} else 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 context.texts.GameEnded + " " + whoWon;
|
|
} else {
|
|
if (game) {
|
|
return game.checkIsPlayerTurn(userKey)
|
|
? context.texts.YourTurn
|
|
: context.texts.OpponentTurn;
|
|
}
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
const InfoPanelContainer: FunctionComponent<{
|
|
context: Context;
|
|
color: string;
|
|
}> = (props) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
background: props.color,
|
|
padding: "1vw 2vw",
|
|
marginTop: "1vw",
|
|
borderRadius: "10vw",
|
|
}}
|
|
>
|
|
{props.children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const InfoPanel: FunctionComponent<{
|
|
context: Context;
|
|
game: MancalaGame;
|
|
crashMessage: string;
|
|
userKey: string;
|
|
userKeyWhoLeave: string;
|
|
searchingOpponent: boolean;
|
|
}> = ({
|
|
context,
|
|
game,
|
|
crashMessage,
|
|
userKey,
|
|
userKeyWhoLeave,
|
|
searchingOpponent,
|
|
}) => {
|
|
const isUserTurn = game?.checkIsPlayerTurn(userKey);
|
|
const containerColor = isUserTurn
|
|
? context.themeManager.theme.playerTurnColor
|
|
: context.themeManager.theme.boardColor;
|
|
const textColor = getColorByBrightness(
|
|
containerColor,
|
|
context.themeManager.theme.textColor,
|
|
context.themeManager.theme.textLightColor
|
|
);
|
|
const text = getInfoPanelTextByGameState({
|
|
context,
|
|
game,
|
|
crashMessage,
|
|
userKey,
|
|
userKeyWhoLeave,
|
|
searchingOpponent,
|
|
});
|
|
if (text) {
|
|
return (
|
|
<InfoPanelContainer context={context} color={containerColor}>
|
|
<h4 style={{ margin: "0", color: textColor }}>
|
|
{text}
|
|
</h4>
|
|
</InfoPanelContainer>
|
|
);
|
|
} else {
|
|
return (<div></div>)
|
|
}
|
|
};
|
|
|
|
export default InfoPanel;
|