Halit Aksoy
9278ed7447
Board components size themselves from a --board-unit CSS variable instead of vw. By default it is 1vw, so the game page looks the same; with the new width prop the same board renders small, e.g. in previews.
84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import * as React from "react";
|
|
import { FunctionComponent } from "react";
|
|
import { Context } from "../../context/context";
|
|
import { BoardViewModel, PitViewModel } from "@mancala/core";
|
|
import PitView from "./PitView";
|
|
import StoreView from "./StoreView";
|
|
import { Game } from "@mancala/core";
|
|
import { Pit } from "mancala.js";
|
|
|
|
const BoardView: FunctionComponent<{
|
|
game: Game;
|
|
context: Context;
|
|
boardId: string;
|
|
boardViewModel: BoardViewModel;
|
|
revert: boolean;
|
|
onPitSelect: (index: number, pit: Pit) => void;
|
|
// Width in px, e.g. for previews; by default the board is as wide as the viewport.
|
|
width?: number;
|
|
}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect, width }) => {
|
|
const mancalaGame = game?.mancalaGame;
|
|
const theme = context.themeManager.theme;
|
|
|
|
// The board is 92 units wide (8 columns of 11 plus padding); all board parts are sized in units.
|
|
const unit = width !== undefined ? width / 92 : (typeof window !== "undefined" ? window.innerWidth / 100 : 10);
|
|
const pitWidth = unit * 11;
|
|
const sizeVariables = {
|
|
"--board-unit": width !== undefined ? `${unit}px` : "1vw",
|
|
"--board-spacing": width !== undefined ? `${unit * 0.3}px` : "5px",
|
|
} as React.CSSProperties;
|
|
|
|
const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => (
|
|
<PitView
|
|
key={key}
|
|
pitViewModel={pitViewModel}
|
|
context={context}
|
|
onClick={() => onPitSelect(pit.index, pit)}
|
|
fontSize={pitWidth / 6}
|
|
/>
|
|
);
|
|
|
|
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 (
|
|
<div className="board" style={{ background: theme.boardColor, ...sizeVariables }}>
|
|
<StoreView
|
|
context={context}
|
|
pitViewModel={revert ? player2BankViewModel : player1BankViewModel}
|
|
gridColumn="8 / 9"
|
|
gridRow="1 / 3"
|
|
fontSize={pitWidth / 6}
|
|
/>
|
|
<StoreView
|
|
context={context}
|
|
pitViewModel={revert ? player1BankViewModel : player2BankViewModel}
|
|
gridColumn="1 / 2"
|
|
gridRow="1 / 3"
|
|
fontSize={pitWidth / 6}
|
|
/>
|
|
{revert ? player1Pits?.reverse() : player2Pits?.reverse()}
|
|
{revert ? player2Pits : player1Pits}
|
|
<style jsx>{`
|
|
.board {
|
|
padding: calc(2 * var(--board-unit));
|
|
display: grid;
|
|
grid-template-columns: repeat(8, calc(11 * var(--board-unit)));
|
|
grid-template-rows: repeat(2, calc(11 * var(--board-unit)));
|
|
border-radius: calc(3 * var(--board-unit));
|
|
transition: background-color 0.5s;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BoardView;
|