40 lines
903 B
JavaScript
40 lines
903 B
JavaScript
import React from "react";
|
|
import styled from "styled-components";
|
|
|
|
const Row = styled.div.attrs(({ theme, zoom }) => ({
|
|
style: {
|
|
height: theme.snake.cell.size * (zoom || 1) + "rem"
|
|
}
|
|
}))`
|
|
white-space: nowrap;
|
|
`;
|
|
|
|
const Cell = styled.div.attrs(({ theme, zoom }) => ({
|
|
style: {
|
|
height: theme.snake.cell.size * (zoom || 1) + "rem",
|
|
width: theme.snake.cell.size * (zoom || 1) + "rem",
|
|
border: theme.snake.cell.border
|
|
}
|
|
}))`
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
box-shadow: ${({ theme }) => theme.stage.cell.boxShadow};
|
|
`;
|
|
|
|
export const Stage = ({ data, children, zoom = 1 }) => (
|
|
<div>
|
|
{data.map((r, y) => (
|
|
<Row key={`y${y}`} zoom={zoom}>
|
|
{r.map((c, x) => (
|
|
<Cell key={`x${x}y${y}`} zoom={zoom}>
|
|
{children(c, zoom)}
|
|
</Cell>
|
|
))}
|
|
</Row>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
export default Stage;
|