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

format : BoardView

Browse Source
This commit is contained in:
Halit Aksoy 2022-05-08 17:13:21 +03:00
parent 446b619a8f
commit fdfb69c7e6
1 changed files with 171 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

286
src/components/BoardView.tsx
View File

@ -1,136 +1,192 @@
import { Bank, MancalaGame, Pit } from 'mancala.js';
import * as React from 'react';
import { FunctionComponent, useState } from 'react';
import { Bank, MancalaGame, Pit } from "mancala.js";
import * as React from "react";
import { FunctionComponent, useState } from "react";
type Theme = {
background : string,
boardColor: string
boardColorWhenPlayerTurn: string
storeColor: string
storeColorWhenPlayerTurn: string
holeColor: string
ballColor: string
}
background: string;
boardColor: string;
boardColorWhenPlayerTurn: string;
storeColor: string;
storeColorWhenPlayerTurn: string;
holeColor: string;
ballColor: string;
};
const theme: Theme = {
background : "#EEEEEE",
boardColor: "#4D606E",
boardColorWhenPlayerTurn: "#84b8a6",
storeColor: "#3FBAC2",
storeColorWhenPlayerTurn: "#6cab94",
holeColor: "#D3D4D8",
ballColor: "#393E46",
}
background: "#EEEEEE",
boardColor: "#4D606E",
boardColorWhenPlayerTurn: "#84b8a6",
storeColor: "#3FBAC2",
storeColorWhenPlayerTurn: "#6cab94",
holeColor: "#D3D4D8",
ballColor: "#393E46",
};
const BallView: FunctionComponent<{color : string}> = ({color}) => {
return (<div style={{
const BallView: FunctionComponent<{ color: string }> = ({ color }) => {
return (
<div
style={{
background: color,
margin: "1px",
width: "1vw",
height: "1vw",
borderRadius: "10vw"
}} >
</div>)
}
borderRadius: "10vw",
}}
></div>
);
};
function range(size: number) {
var ans = [];
for (let i = 0; i < size; i++) {
ans.push(i);
}
return ans;
var ans = [];
for (let i = 0; i < size; i++) {
ans.push(i);
}
return ans;
}
const HoleView: FunctionComponent<{ hole: Pit, color: string, onClick: () => void }> = ({ hole, color, onClick }) => {
const balls = [...range(hole.stoneCount)].map((i) => <BallView color={theme.ballColor}/>)
const HoleView: FunctionComponent<{
hole: Pit;
color: string;
onClick: () => void;
}> = ({ hole, color, onClick }) => {
const balls = [...range(hole.stoneCount)].map((i) => (
<BallView color={theme.ballColor} />
));
return (<div
onClick={onClick}
style={{
background: color,
margin: "5px",
padding: "5px",
borderRadius: "10vw",
display: 'flex',
alignItems: 'center',
alignContent: 'center',
justifyContent: 'center',
justifyItems: 'center',
flexWrap: "wrap",
}} >
{balls}
</div>)
}
return (
<div
onClick={onClick}
style={{
background: color,
margin: "5px",
padding: "5px",
borderRadius: "10vw",
display: "flex",
alignItems: "center",
alignContent: "center",
justifyContent: "center",
justifyItems: "center",
flexWrap: "wrap",
}}
>
{balls}
</div>
);
};
const StoreView: FunctionComponent<
{ store: Bank, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => {
const balls = [...range(store.stoneCount)].map((i) => <BallView color={theme.ballColor}/>)
return (<div style={{
gridColumn: gridColumn,
gridRow: gridRow,
background: color,
margin: "5px",
borderRadius: "10vw",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
alignContent: 'center',
flexWrap: "wrap",
}} >
{balls}
</div>)
}
const StoreView: FunctionComponent<{
store: Bank;
color: string;
gridColumn: string;
gridRow: string;
}> = ({ store, color, gridColumn, gridRow }) => {
const balls = [...range(store.stoneCount)].map((i) => (
<BallView color={theme.ballColor} />
));
return (
<div
style={{
gridColumn: gridColumn,
gridRow: gridRow,
background: color,
margin: "5px",
borderRadius: "10vw",
display: "flex",
alignItems: "center",
justifyContent: "center",
alignContent: "center",
flexWrap: "wrap",
}}
>
{balls}
</div>
);
};
const BoardView: FunctionComponent<{ game?: MancalaGame, userKey: string, onHoleSelect: (index: number, hole: Pit) => void }> = ({
game, userKey, onHoleSelect }) => {
const player1Pits = game?.board.player1Pits.map((hole) => (
<HoleView hole={hole} color={theme.holeColor} onClick={() => {
if (game.turnPlayerId === game.player1Id) onHoleSelect(game.board.player1Pits.indexOf(hole), hole)
}} />
))
const BoardView: FunctionComponent<{
game?: MancalaGame;
userKey: string;
onHoleSelect: (index: number, hole: Pit) => void;
}> = ({ game, userKey, onHoleSelect }) => {
const player1Pits = game?.board.player1Pits.map((hole) => (
<HoleView
hole={hole}
color={theme.holeColor}
onClick={() => {
if (game.turnPlayerId === game.player1Id)
onHoleSelect(game.board.player1Pits.indexOf(hole), hole);
}}
/>
));
const player2Pits = game!!.board.player2Pits.map((hole) => (
<HoleView hole={hole} color={theme.holeColor} onClick={() => {
if (game.turnPlayerId === game.player2Id) onHoleSelect(game.board.player2Pits.indexOf(hole), hole)
}} />
))
const player2Pits = game!!.board.player2Pits.map((hole) => (
<HoleView
hole={hole}
color={theme.holeColor}
onClick={() => {
if (game.turnPlayerId === game.player2Id)
onHoleSelect(game.board.player2Pits.indexOf(hole), hole);
}}
/>
));
const isUserTurn = game.checkIsPlayerTurn(userKey)
const isUserTurn = game.checkIsPlayerTurn(userKey);
const storeColor = isUserTurn ? theme.storeColor : theme.storeColorWhenPlayerTurn;
const storeColor = isUserTurn
? theme.storeColor
: theme.storeColorWhenPlayerTurn;
return (
<div style={{
margin: '10px',
padding: '20px',
display: 'grid',
gridTemplateColumns: 'repeat(8, 11vw)',
gridTemplateRows: 'repeat(2, 11vw)',
borderRadius: "3vw",
background: isUserTurn ? theme.boardColor : theme.boardColorWhenPlayerTurn
}}>
{
userKey === game.player2Id ? (
<>
<StoreView store={game!!.board.player1Bank} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
<StoreView store={game!!.board.player2Bank} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
{player1Pits.reverse()}
{player2Pits}
</>
) : (
<>
<StoreView store={game!!.board.player2Bank} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
<StoreView store={game!!.board.player1Bank} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
{player2Pits.reverse()}
{player1Pits}
</>
)
}
return (
<div
style={{
margin: "10px",
padding: "20px",
display: "grid",
gridTemplateColumns: "repeat(8, 11vw)",
gridTemplateRows: "repeat(2, 11vw)",
borderRadius: "3vw",
background: isUserTurn
? theme.boardColor
: theme.boardColorWhenPlayerTurn,
}}
>
{userKey === game.player2Id ? (
<>
<StoreView
store={game!!.board.player1Bank}
color={storeColor}
gridColumn="1 / 2"
gridRow="1 / 3"
/>
<StoreView
store={game!!.board.player2Bank}
color={storeColor}
gridColumn="8 / 9"
gridRow="1 / 3"
/>
{player1Pits.reverse()}
{player2Pits}
</>
) : (
<>
<StoreView
store={game!!.board.player2Bank}
color={storeColor}
gridColumn="1 / 2"
gridRow="1 / 3"
/>
<StoreView
store={game!!.board.player1Bank}
color={storeColor}
gridColumn="8 / 9"
gridRow="1 / 3"
/>
{player2Pits.reverse()}
{player1Pits}
</>
)}
</div>
);
};
</div>
)
}
export default BoardView
export default BoardView;