122 lines
2.9 KiB
TypeScript
122 lines
2.9 KiB
TypeScript
import { MancalaGame } from "mancala.js";
|
|
import * as React from "react";
|
|
import { FunctionComponent } from "react";
|
|
import { Context } from "../context/context";
|
|
import { getColorByBrightness } from "../util/ColorUtil";
|
|
|
|
function getInfoPanelTextByGameState(params: {
|
|
context: Context;
|
|
game?: MancalaGame;
|
|
crashMessage?: string;
|
|
userKey?: string;
|
|
userKeyWhoLeave?: string;
|
|
searchingOpponent: boolean;
|
|
}): string | undefined {
|
|
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 userKey ? game.checkIsPlayerTurn(userKey)
|
|
? context.texts.YourTurn
|
|
: context.texts.OpponentTurn : undefined;
|
|
}
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
const InfoPanelContainer: FunctionComponent<{
|
|
context: Context;
|
|
color: string;
|
|
}> = (props) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
background: props.color
|
|
}}
|
|
>
|
|
<style jsx>{`
|
|
div {
|
|
padding: 1vw 2vw;
|
|
margin-top: 1vw;
|
|
border-radius: 10vw;
|
|
}
|
|
`}
|
|
</style>
|
|
{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 = userKey ? game?.checkIsPlayerTurn(userKey) : false;
|
|
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;
|