From 1e1038074e9f4e4f53df2f867dabff904901a2aa Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 4 Jun 2022 14:49:34 +0300 Subject: [PATCH 1/2] update info panel --- src/Home.tsx | 3 +- src/components/BoardView.tsx | 8 +- src/components/Button.tsx | 44 +++++----- src/components/InfoPanel.tsx | 165 ++++++++++++++++++++++------------- src/theme/DefaultTheme.ts | 2 +- src/theme/Theme.ts | 2 +- 6 files changed, 134 insertions(+), 90 deletions(-) diff --git a/src/Home.tsx b/src/Home.tsx index f4b1156..0cd55d9 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -214,7 +214,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { )}
= ({ initial = 0 }) => {
{userKey === game.player2Id ? ( diff --git a/src/components/Button.tsx b/src/components/Button.tsx index bfe897b..6a2c361 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,22 +1,26 @@ -import * as React from 'react'; -import { FunctionComponent } from "react" +import * as React from "react"; +import { FunctionComponent } from "react"; -const Button: FunctionComponent<{ text: String,onClick: () => void, color: string }> = ({ text, color, onClick }) => { +const Button: FunctionComponent<{ + text: String; + onClick: () => void; + color: string; +}> = ({ text, color, onClick }) => { + return ( + + ); +}; - return ( - - ) -} - -export default Button \ No newline at end of file +export default Button; diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx index 6825317..a4f6e0d 100644 --- a/src/components/InfoPanel.tsx +++ b/src/components/InfoPanel.tsx @@ -1,66 +1,107 @@ -import { MancalaGame } from 'mancala.js'; -import * as React from 'react'; -import { FunctionComponent } from "react" -import { context } from '../context'; +import { MancalaGame } from "mancala.js"; +import * as React from "react"; +import { FunctionComponent } from "react"; +import { Context } from "../context"; + +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 { + return game?.checkIsPlayerTurn(userKey) + ? context.texts.YourTurn + : context.texts.OpponentTurn; + } + return undefined; +} + +const InfoPanelContainer: FunctionComponent<{ + context: Context; + color: string; +}> = (props) => { + return ( +
+ {props.children} +
+ ); +}; const InfoPanel: FunctionComponent<{ - game: MancalaGame, - crashMessage: string, - userKey: string, - userKeyWhoLeave: string, - searchingOpponent: boolean + context: Context; + game: MancalaGame; + crashMessage: string; + userKey: string; + userKeyWhoLeave: string; + searchingOpponent: boolean; }> = ({ - game, crashMessage, userKey, userKeyWhoLeave, searchingOpponent }) => { - if (searchingOpponent) { - return ( -

{ - context.texts.SearchingOpponent + " " + context.texts.PleaseWait - }

- ) - } + context, + game, + crashMessage, + userKey, + userKeyWhoLeave, + searchingOpponent, +}) => { + const isUserTurn = game?.checkIsPlayerTurn(userKey); + return ( + +

+ {getInfoPanelTextByGameState({ + context, + game, + crashMessage, + userKey, + userKeyWhoLeave, + searchingOpponent, + })} +

+ + ); +}; - if (crashMessage) { - return ( -

{ - context.texts.GameCrashed + " " + crashMessage - }

- ) - } - - if (userKeyWhoLeave) { - let message = context.texts.OpponentLeavesTheGame - - if (userKeyWhoLeave == userKey) { - message = context.texts.YouLeftTheGame - } - return ( -

- {message} -

- ) - } - - - 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 ( -

{ - context.texts.GameEnded + " " + whoWon - }

- ) - } else { - return ( -

{game.checkIsPlayerTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}

- ) - } - } - - return

- } - -export default InfoPanel \ No newline at end of file +export default InfoPanel; diff --git a/src/theme/DefaultTheme.ts b/src/theme/DefaultTheme.ts index e6fe2ae..d862960 100644 --- a/src/theme/DefaultTheme.ts +++ b/src/theme/DefaultTheme.ts @@ -3,7 +3,7 @@ import { Theme } from "./Theme"; const defaultTheme: Theme = { background: "#EEEEEE", boardColor: "#4D606E", - boardColorWhenPlayerTurn: "#84b8a6", + playerTurnColor: "#84b8a6", storeColor: "#3FBAC2", storeColorWhenPlayerTurn: "#6cab94", holeColor: "#D3D4D8", diff --git a/src/theme/Theme.ts b/src/theme/Theme.ts index 8027648..1b1046d 100644 --- a/src/theme/Theme.ts +++ b/src/theme/Theme.ts @@ -1,7 +1,7 @@ export type Theme = { background: string; boardColor: string; - boardColorWhenPlayerTurn: string; + playerTurnColor: string; storeColor: string; storeColorWhenPlayerTurn: string; holeColor: string; From 86a9779d03a65cd79fb4ef5d7f7dbb137b94a220 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 4 Jun 2022 14:52:29 +0300 Subject: [PATCH 2/2] remove storeColorWhenPlayerTurn from theme --- src/theme/DefaultTheme.ts | 1 - src/theme/Theme.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/theme/DefaultTheme.ts b/src/theme/DefaultTheme.ts index d862960..e778a06 100644 --- a/src/theme/DefaultTheme.ts +++ b/src/theme/DefaultTheme.ts @@ -5,7 +5,6 @@ const defaultTheme: Theme = { boardColor: "#4D606E", playerTurnColor: "#84b8a6", storeColor: "#3FBAC2", - storeColorWhenPlayerTurn: "#6cab94", holeColor: "#D3D4D8", pitSelectedColor: "#8837fa", ballColor: "#393E46", diff --git a/src/theme/Theme.ts b/src/theme/Theme.ts index 1b1046d..c950a43 100644 --- a/src/theme/Theme.ts +++ b/src/theme/Theme.ts @@ -3,7 +3,6 @@ export type Theme = { boardColor: string; playerTurnColor: string; storeColor: string; - storeColorWhenPlayerTurn: string; holeColor: string; pitSelectedColor: string; ballColor: string;