From 1e1038074e9f4e4f53df2f867dabff904901a2aa Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 4 Jun 2022 14:49:34 +0300 Subject: [PATCH 01/11] 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 02/11] 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; From b125632da097168d71a1364b0dec9f721584a4e4 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 4 Jun 2022 17:15:28 +0300 Subject: [PATCH 03/11] add color util --- src/util/ColorUtil.ts | 51 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/util/ColorUtil.ts diff --git a/src/util/ColorUtil.ts b/src/util/ColorUtil.ts new file mode 100644 index 0000000..5f82d97 --- /dev/null +++ b/src/util/ColorUtil.ts @@ -0,0 +1,51 @@ +//from this gist https://gist.github.com/jfsiii/5641126 + +// from http://www.w3.org/TR/WCAG20/#relativeluminancedef +export function relativeLuminanceW3C( + R8bit: number, + G8bit: number, + B8bit: number +) { + const RsRGB = R8bit / 255; + const GsRGB = G8bit / 255; + const BsRGB = B8bit / 255; + + const R = + RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4); + const G = + GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4); + const B = + BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4); + + // For the sRGB colorspace, the relative luminance of a color is defined as: + const L = 0.2126 * R + 0.7152 * G + 0.0722 * B; + + return L; +} + +export function relativeLuminanceW3CHexColor(hexColor: string): number { + const [r, g, b] = hexToRgb(hexColor); + return relativeLuminanceW3C(r, g, b); +} + +// from https://www.codegrepper.com/code-examples/javascript/javascript+convert+color+string+to+rgb +export function rgbToHex(r: number, g: number, b: number): string { + return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); +} + +// from https://www.codegrepper.com/code-examples/javascript/javascript+convert+color+string+to+rgb +export function hexToRgb( + hex: string, + result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) +): number[] { + return result ? result.map((i) => parseInt(i, 16)).slice(1) : null; + //returns [23, 14, 45] -> reformat if needed +} + +export function getColorByLuminance( + color: string, + lightColor: string, + darkColor: string +): string { + return relativeLuminanceW3CHexColor(color) < 0.5 ? darkColor : lightColor; +} From 53a77b2d4b00d4b88e97664710ab93ae88ddb992 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Sat, 4 Jun 2022 17:16:32 +0300 Subject: [PATCH 04/11] add new theme --- src/Home.tsx | 14 ++++++++------ src/animation/PitAnimator.ts | 8 +++++++- src/components/BoardView.tsx | 8 +++++++- src/components/Button.tsx | 12 ++++++++++-- src/components/InfoPanel.tsx | 20 +++++++++++--------- src/theme/DefaultTheme.ts | 34 +++++++++++++++++++++++----------- src/theme/OldTheme.ts | 20 ++++++++++++++++++++ src/theme/Theme.ts | 10 ++++++---- 8 files changed, 92 insertions(+), 34 deletions(-) create mode 100644 src/theme/OldTheme.ts diff --git a/src/Home.tsx b/src/Home.tsx index 0cd55d9..c102865 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -166,8 +166,9 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { const renderNewGameButton = () => { const newGame = (