128 lines
4.0 KiB
TypeScript
128 lines
4.0 KiB
TypeScript
import * as React from 'react';
|
|
import { FunctionComponent, useState } from 'react';
|
|
import { Hole, Store, Game } from '../mancala';
|
|
|
|
type Theme = {
|
|
background : string,
|
|
boardColor: string
|
|
storeColor: string
|
|
holeColor: string
|
|
ballColor: string
|
|
}
|
|
|
|
const theme: Theme = {
|
|
background : "#EEEEEE",
|
|
boardColor: "#4D606E",
|
|
storeColor: "#3FBAC2",
|
|
holeColor: "#D3D4D8",
|
|
ballColor: "#393E46",
|
|
}
|
|
|
|
const BallView: FunctionComponent<{color : string}> = ({color}) => {
|
|
|
|
return (<div style={{
|
|
background: color,
|
|
margin: "1px",
|
|
width: "1vw",
|
|
height: "1vw",
|
|
borderRadius: "10vw"
|
|
}} >
|
|
</div>)
|
|
}
|
|
|
|
function range(size: number) {
|
|
var ans = [];
|
|
for (let i = 0; i < size; i++) {
|
|
ans.push(i);
|
|
}
|
|
return ans;
|
|
}
|
|
|
|
const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => void }> = ({ hole, color, onClick }) => {
|
|
const balls = [...range(hole.ballCount)].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>)
|
|
}
|
|
|
|
const StoreView: FunctionComponent<
|
|
{ store: Store, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => {
|
|
const balls = [...range(store.ballCount)].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?: Game, userKey: string, onHoleSelect: (index: number, hole: Hole) => void }> = ({
|
|
game, userKey, onHoleSelect }) => {
|
|
|
|
const player1Holes = game?.board.player1Holes.map((hole) => (
|
|
<HoleView hole={hole} color={theme.holeColor} onClick={() => {
|
|
if (game.turn == "player1") onHoleSelect(game.board.player1Holes.indexOf(hole), hole)
|
|
}} />
|
|
))
|
|
|
|
const player2Holes = game!!.board.player2Holes.map((hole) => (
|
|
<HoleView hole={hole} color={theme.holeColor} onClick={() => {
|
|
if (game.turn == "player2") onHoleSelect(game.board.player2Holes.indexOf(hole), hole)
|
|
}} />
|
|
))
|
|
|
|
return (
|
|
<div style={{
|
|
margin: '10px',
|
|
padding: '10px',
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(8, 11vw)',
|
|
gridTemplateRows: 'repeat(2, 11vw)',
|
|
borderRadius: "3vw",
|
|
background: theme.boardColor
|
|
}}>
|
|
{
|
|
game.getPlayerNameByKey(userKey) == "player2" ? (
|
|
<>
|
|
<StoreView store={game!!.board.player1Store} color={theme.storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
|
|
<StoreView store={game!!.board.player2Store} color={theme.storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
|
|
{player1Holes.reverse()}
|
|
{player2Holes}
|
|
</>
|
|
) : (
|
|
<>
|
|
<StoreView store={game!!.board.player2Store} color={theme.storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
|
|
<StoreView store={game!!.board.player1Store} color={theme.storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
|
|
{player2Holes.reverse()}
|
|
{player1Holes}
|
|
</>
|
|
)
|
|
}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BoardView |