diff --git a/package.json b/package.json index 9201418..dcd869a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mancala-frontend", - "version": "0.1.3-beta.7", + "version": "0.1.3-beta.8", "description": "", "main": "index.js", "scripts": { @@ -14,6 +14,8 @@ "author": "", "license": "ISC", "dependencies": { + "@szhsin/react-menu": "^3.0.2", + "@types/": "szhsin/react-menu", "@types/uuid": "^8.3.4", "mancala.js": "^0.0.2-beta.2", "react": "^17.0.2", diff --git a/src/Home.tsx b/src/Home.tsx index f4b1156..10ec01a 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -18,6 +18,10 @@ import { GameMove } from "./models/GameMove"; import PitAnimator from "./animation/PitAnimator"; import BoardViewModel from "./viewmodel/BoardViewModel"; import { v4 } from "uuid"; +import { Menu, MenuButton, MenuItem } from "@szhsin/react-menu"; +import "@szhsin/react-menu/dist/index.css"; +import "@szhsin/react-menu/dist/transitions/slide.css"; +import { getColorByLuminance } from "./util/ColorUtil"; type ConnectionState = "connecting" | "error" | "connected" | "reconnecting"; @@ -116,6 +120,12 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { }; }, []); + React.useEffect(() => { + context.themeManager.onThemeChange = () => { + updateBoardViewModel(pitAnimator.getBoardViewModelFromGame(game)); + }; + }, [boardViewModel]); + const resetGameState = () => { setGame(undefined); setCrashMessage(undefined); @@ -166,8 +176,9 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { const renderNewGameButton = () => { const newGame = ( + ); +}; - 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..88187ad 100644 --- a/src/components/InfoPanel.tsx +++ b/src/components/InfoPanel.tsx @@ -1,66 +1,109 @@ -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"; +import { getColorByLuminance } 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 { + 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); + const containerColor = isUserTurn + ? context.themeManager.theme.playerTurnColor + : context.themeManager.theme.holeColor; + const textColor = getColorByLuminance( + containerColor, + context.themeManager.theme.primary, + context.themeManager.theme.primaryLight + ); + 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/context.tsx b/src/context.tsx index 140c840..0fd4cc5 100644 --- a/src/context.tsx +++ b/src/context.tsx @@ -2,7 +2,6 @@ import { Texts, TrTr } from "./const/texts"; import { RTMT } from "./rtmt/rtmt"; import { RTMTWS } from "./rtmt/rtmt_websocket"; import { UserKeyStore, UserKeyStoreImpl } from "./store/key_store"; -import defaultTheme from "./theme/DefaultTheme"; import ThemeManager from "./theme/ThemeManager"; export type Context = { @@ -16,7 +15,7 @@ export const initContext = () => { const rtmt = new RTMTWS(); const userKeyStore = new UserKeyStoreImpl(); const texts = TrTr; - const themeManager = new ThemeManager(defaultTheme); + const themeManager = new ThemeManager(); return { rtmt: rtmt, userKeyStore: userKeyStore, diff --git a/src/index.html b/src/index.html index cf30955..e6ca5a9 100644 --- a/src/index.html +++ b/src/index.html @@ -11,6 +11,8 @@ +