51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
|
|
import React from "react";
|
|
|
|
import "./BoardPieces.css";
|
|
import { useStyles } from './Styles.js';
|
|
|
|
const Road = ({ color, onClick }) => {
|
|
const classes = useStyles();
|
|
return <div className="Road" onClick={() => onClick('road')}><div className={['Shape', classes[color]].join(' ')}/></div>;
|
|
}
|
|
|
|
const Settlement = ({ color, onClick }) => {
|
|
const classes = useStyles();
|
|
return <div className="Settlement" onClick={() => onClick('settlement')}><div className={['Shape', classes[color]].join(' ')}/></div>;
|
|
}
|
|
|
|
const City = ({ color, onClick }) => {
|
|
const classes = useStyles();
|
|
return <div className="City" onClick={() => onClick('city')}><div className={['Shape', classes[color]].join(' ')}/></div>;
|
|
}
|
|
|
|
const BoardPieces = ({ player, onClick }) => {
|
|
if (!player) {
|
|
return <></>;
|
|
}
|
|
|
|
const color = player.color;
|
|
|
|
const roads = [];
|
|
for (let i = 0; i < player.roads; i++) {
|
|
roads.push(<Road onClick={onClick} key={`road-${i}`} color={color}/>);
|
|
}
|
|
const settlements = [];
|
|
for (let i = 0; i < player.settlements; i++) {
|
|
settlements.push(<Settlement onClick={onClick} key={`settlement-${i}`} color={color}/>);
|
|
}
|
|
const cities = [];
|
|
for (let i = 0; i < player.cities; i++) {
|
|
cities.push(<City onClick={onClick} key={`city-${i}`} color={color}/>);
|
|
}
|
|
|
|
return (
|
|
<div className='BoardPieces' data-active={onClick !== undefined}>
|
|
<div className='Cities'>{cities}</div>
|
|
<div className='Settlements'>{settlements}</div>
|
|
<div className='Roads'>{roads}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { BoardPieces }; |