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

use styled-jsx in BoardView

Browse Source
This commit is contained in:
Halit Aksoy 2022-07-14 23:13:41 +03:00
parent adeb5ba977
commit e59c91f080
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/board/BoardView.tsx
View File

@ -39,18 +39,7 @@ const BoardView: FunctionComponent<{
boardViewModel.pits[game.board.player2BankIndex()];
const isPlayer2 = userKey === game?.player2Id;
return (
<div
style={{
margin: "1vw",
padding: "2vw",
display: "grid",
gridTemplateColumns: "repeat(8, 11vw)",
gridTemplateRows: "repeat(2, 11vw)",
borderRadius: "3vw",
transition: "background-color 0.5s",
background: theme.boardColor,
}}
>
<div className="board" style={{ background: theme.boardColor }}>
<StoreView
context={context}
pitViewModel={isPlayer2 ? player2BankViewModel : player1BankViewModel}
@ -65,6 +54,17 @@ const BoardView: FunctionComponent<{
/>
{isPlayer2 ? player1Pits?.reverse() : player2Pits?.reverse()}
{isPlayer2 ? player2Pits : player1Pits}
<style jsx>{`
.board {
margin: 1vw;
padding: 2vw;
display: grid;
grid-template-columns: repeat(8, 11vw);
grid-template-rows: repeat(2, 11vw);
border-radius: 3vw;
transition: background-color 0.5s;
}
`}</style>
</div>
);
};