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

refactor BoardView

Browse Source
This commit is contained in:
Halit Aksoy 2022-09-02 00:10:41 +03:00
parent 2ea22f5303
commit 35750af200
2 changed files with 19 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/MancalaApp.tsx
View File

@ -77,6 +77,7 @@ const MancalaApp: FunctionComponent = () => {
context.themeManager.theme.textColor, context.themeManager.theme.textColor,
context.themeManager.theme.textLightColor context.themeManager.theme.textLightColor
); );
if(!userKey) return <></>;
return ( return (
<> <>
<BrowserRouter> <BrowserRouter>

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

@ -13,49 +13,39 @@ const BoardView: FunctionComponent<{
context: Context; context: Context;
boardId: string; boardId: string;
boardViewModel: BoardViewModel; boardViewModel: BoardViewModel;
userKey: string; revert: boolean;
onPitSelect: (index: number, pit: Pit) => void; onPitSelect: (index: number, pit: Pit) => void;
}> = ({ game, context, boardId, boardViewModel, userKey, onPitSelect: onPitSelect }) => { }> = ({ game, context, boardId, boardViewModel, revert, onPitSelect: onPitSelect }) => {
const mancalaGame = game?.mancalaGame; const mancalaGame = game?.mancalaGame;
const createPitView = (key: any, pitViewModel: PitViewModel, onClick: () => void) => {
return <PitView key={key} pitViewModel={pitViewModel} onClick={onClick} />;
};
const player1Pits = mancalaGame?.board.player1Pits.map((pit, index) => {
const pitViewModel = boardViewModel.pits[pit.index];
return createPitView(index, pitViewModel, () => {
if (mancalaGame?.turnPlayerId === mancalaGame?.player1Id && userKey === mancalaGame?.player1Id)
onPitSelect(mancalaGame?.board.player1Pits.indexOf(pit), pit);
});
});
const player2Pits = mancalaGame?.board.player2Pits.map((pit, index) => {
const pitViewModel = boardViewModel.pits[pit.index];
return createPitView(index, pitViewModel, () => {
if (mancalaGame?.turnPlayerId === mancalaGame?.player2Id && userKey === mancalaGame?.player2Id)
onPitSelect(mancalaGame?.board.player2Pits.indexOf(pit), pit);
});
});
const theme = context.themeManager.theme; const theme = context.themeManager.theme;
const player1BankViewModel =
boardViewModel.pits[mancalaGame?.board.player1BankIndex()]; const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
const player2BankViewModel = return <PitView key={key} pitViewModel={pitViewModel} onClick={() => onPitSelect(pit.index, pit)} />;
boardViewModel.pits[mancalaGame?.board.player2BankIndex()]; };
const isPlayer2 = userKey === mancalaGame?.player2Id; const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
const player1Pits = createPitViewList(mancalaGame?.board.player1Pits);
const player2Pits = createPitViewList(mancalaGame?.board.player2Pits);
const player1BankIndex = mancalaGame?.board.player1BankIndex();
const player2BankIndex = mancalaGame?.board.player2BankIndex();
const player1BankViewModel = boardViewModel.pits[player1BankIndex];
const player2BankViewModel = boardViewModel.pits[player2BankIndex];
return ( return (
<div className="board" style={{ background: theme.boardColor }}> <div className="board" style={{ background: theme.boardColor }}>
<StoreView <StoreView
context={context} context={context}
pitViewModel={isPlayer2 ? player2BankViewModel : player1BankViewModel} pitViewModel={revert ? player2BankViewModel : player1BankViewModel}
gridColumn="8 / 9" gridColumn="8 / 9"
gridRow="1 / 3" gridRow="1 / 3"
/> />
<StoreView <StoreView
context={context} context={context}
pitViewModel={isPlayer2 ? player1BankViewModel : player2BankViewModel} pitViewModel={revert ? player1BankViewModel : player2BankViewModel}
gridColumn="1 / 2" gridColumn="1 / 2"
gridRow="1 / 3" gridRow="1 / 3"
/> />
{isPlayer2 ? player1Pits?.reverse() : player2Pits?.reverse()} {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
{isPlayer2 ? player2Pits : player1Pits} {revert ? player2Pits : player1Pits}
<style jsx>{` <style jsx>{`
.board { .board {
padding: 2vw; padding: 2vw;