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

feature : change theme when user turn change

Browse Source
This commit is contained in:
Halit Aksoy 2022-04-23 13:45:39 +03:00
parent a0dcc82677
commit e4dcd143be
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/BoardView.tsx
View File

@ -5,7 +5,9 @@ import { Hole, Store, Game } from '../mancala';
type Theme = {
background : string,
boardColor: string
boardColorWhenPlayerTurn: string
storeColor: string
storeColorWhenPlayerTurn: string
holeColor: string
ballColor: string
}
@ -13,7 +15,9 @@ type Theme = {
const theme: Theme = {
background : "#EEEEEE",
boardColor: "#4D606E",
boardColorWhenPlayerTurn: "#84b8a6",
storeColor: "#3FBAC2",
storeColorWhenPlayerTurn: "#6cab94",
holeColor: "#D3D4D8",
ballColor: "#393E46",
}
@ -93,6 +97,10 @@ const BoardView: FunctionComponent<{ game?: Game, userKey: string, onHoleSelect:
}} />
))
const isUserTurn = game.checkGameTurn(userKey);
const storeColor = isUserTurn ? theme.storeColor : theme.storeColorWhenPlayerTurn;
return (
<div style={{
margin: '10px',
@ -101,20 +109,20 @@ const BoardView: FunctionComponent<{ game?: Game, userKey: string, onHoleSelect:
gridTemplateColumns: 'repeat(8, 11vw)',
gridTemplateRows: 'repeat(2, 11vw)',
borderRadius: "3vw",
background: theme.boardColor
background: isUserTurn ? theme.boardColor : theme.boardColorWhenPlayerTurn
}}>
{
game.getPlayerNameByKey(userKey) == "player2" ? (
<>
<StoreView store={game!!.board.player1Store} color={theme.storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
<StoreView store={game!!.board.player2Store} color={theme.storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
<StoreView store={game!!.board.player1Store} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
<StoreView store={game!!.board.player2Store} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
{player1Holes.reverse()}
{player2Holes}
</>
) : (
<>
<StoreView store={game!!.board.player2Store} color={theme.storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
<StoreView store={game!!.board.player1Store} color={theme.storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
<StoreView store={game!!.board.player2Store} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
<StoreView store={game!!.board.player1Store} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
{player2Holes.reverse()}
{player1Holes}
</>