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