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.
20 lines
559 B
TypeScript
20 lines
559 B
TypeScript
import * as React from "react";
|
|
import { FunctionComponent } from "react";
|
|
|
|
const StoneView: FunctionComponent<{ color: string }> = ({ color }) => {
|
|
return (
|
|
<div className="stone" style={{ background: color }}>
|
|
<style jsx>{`
|
|
.stone {
|
|
margin: 1px;
|
|
width: calc(1 * var(--board-unit));
|
|
height: calc(1 * var(--board-unit));
|
|
border-radius: calc(10 * var(--board-unit));
|
|
transition: background-color 0.5s;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StoneView; |