jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor InfoPanel

Browse Source
This commit is contained in:
Halit Aksoy 2022-07-23 00:28:12 +03:00
parent 1c830b0853
commit 3817a1fe09
1 changed files with 10 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/InfoPanel.tsx
View File

@ -3,6 +3,7 @@ import * as React from "react";
import { FunctionComponent } from "react"; import { FunctionComponent } from "react";
import { Context } from "../context/context"; import { Context } from "../context/context";
import { getColorByBrightness } from "../util/ColorUtil"; import { getColorByBrightness } from "../util/ColorUtil";
import CircularPanel from "./CircularPanel";
function getInfoPanelTextByGameState(params: { function getInfoPanelTextByGameState(params: {
context: Context; context: Context;
@ -10,7 +11,6 @@ function getInfoPanelTextByGameState(params: {
crashMessage?: string; crashMessage?: string;
userKey?: string; userKey?: string;
userKeyWhoLeave?: string; userKeyWhoLeave?: string;
searchingOpponent: boolean;
}): string | undefined { }): string | undefined {
const { const {
context, context,
@ -18,11 +18,8 @@ function getInfoPanelTextByGameState(params: {
crashMessage, crashMessage,
userKey, userKey,
userKeyWhoLeave, userKeyWhoLeave,
searchingOpponent,
} = params; } = params;
if (searchingOpponent) { if (crashMessage) {
return context.texts.SearchingOpponent + " " + context.texts.PleaseWait;
} else if (crashMessage) {
return context.texts.GameCrashed + " " + crashMessage; return context.texts.GameCrashed + " " + crashMessage;
} else if (userKeyWhoLeave) { } else if (userKeyWhoLeave) {
let message = context.texts.OpponentLeavesTheGame; let message = context.texts.OpponentLeavesTheGame;
@ -50,44 +47,24 @@ function getInfoPanelTextByGameState(params: {
return 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<{ const InfoPanel: FunctionComponent<{
context: Context; context: Context;
game?: MancalaGame; game?: MancalaGame;
crashMessage?: string; crashMessage?: string;
userKey?: string; userKey?: string;
userKeyWhoLeave?: string; userKeyWhoLeave?: string;
searchingOpponent: boolean; style?: React.CSSProperties;
visible?: boolean;
}> = ({ }> = ({
context, context,
game, game,
crashMessage, crashMessage,
userKey, userKey,
userKeyWhoLeave, userKeyWhoLeave,
searchingOpponent, style,
visible
}) => { }) => {
if (visible === false) return <></>;
const isUserTurn = userKey ? game?.checkIsPlayerTurn(userKey) : false; const isUserTurn = userKey ? game?.checkIsPlayerTurn(userKey) : false;
const containerColor = isUserTurn const containerColor = isUserTurn
? context.themeManager.theme.playerTurnColor ? context.themeManager.theme.playerTurnColor
@ -102,16 +79,15 @@ const InfoPanel: FunctionComponent<{
game, game,
crashMessage, crashMessage,
userKey, userKey,
userKeyWhoLeave, userKeyWhoLeave
searchingOpponent,
}); });
if (text) { if (text) {
return ( return (
<InfoPanelContainer context={context} color={containerColor}> <CircularPanel style={style} color={containerColor}>
<h4 style={{ margin: "0", color: textColor }}> <h4 style={{ margin: "0", color: textColor }}>
{text} {text}
</h4> </h4>
</InfoPanelContainer> </CircularPanel>
); );
} else { } else {
return (<div></div>) return (<div></div>)