Crafity/snake
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve control panel, add zoom and fps controls

Browse Source
This commit is contained in:
Bart Riemens
2019-08-28 10:03:28 +02:00
parent aa1bf44f7c
commit 9d723e4470
10 changed files with 225 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/index.html
View File

@@ -4,6 +4,18 @@
<meta charset="UTF-8" />
<title>Redux Demo</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100,400|Raleway:100,400,700|Rubik:500" rel="stylesheet" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.9.0/css/solid.css"
integrity="sha384-ypqxM+6jj5ropInEPawU1UEhbuOuBkkz59KyIbbsTu4Sw62PfV3KUnQadMbIoAzq"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.9.0/css/fontawesome.css"
integrity="sha384-NnhYAEceBbm5rQuNvCv6o4iIoPZlkaWfvuXVh4XkRNvHWKgu/Mk2nEjFZpPQdwiz"
crossorigin="anonymous"
/>
</head>
<body>
<div id="root"></div>

20
src/components/Apple.js
View File

@@ -1,15 +1,21 @@
import styled from "styled-components";
export const Apple = styled.div.attrs({ role: "img", "aria-label": "apple" })`
width: ${({ theme }) => theme.snake.cell.size};
height: ${({ theme }) => theme.snake.cell.size};
const Apple = 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,
fontSize: (zoom || 1) * 1.3 + "rem",
lineHeight: (zoom || 1) * 1.7 + "rem",
paddingLeft: (zoom || 1) * 0.0625 + "rem"
}
}))`
display: inline-block;
font-size: 1.3rem;
vertical-align: top;
line-height: 1.8rem;
padding-left: 0.0625rem;
&:after {
content: "${props => (!props.died ? "🍎" : "🐛")}";
// content: "${props => (!props.died ? "🍎" : "🐛")}";
content: "🍎";
display: inline-block;
}
`;

27
src/components/Button.js
View File

@@ -54,6 +54,16 @@ export const Button = (props, refs) => {
return StyledNavLink.render(updatedProps);
}
if (props.icon) {
return (
<i
onClick={updatedProps.onClick}
className={`fas fa-${props.icon} ${props.className}`}
style={{ display: "inline-block", fontSize: `${props.size || 1}rem` }}
/>
);
}
return StyledButton.render(updatedProps);
};
@@ -61,4 +71,21 @@ export const ToggleButton = styled(Button)`
background-color: ${props => (props.toggle ? "silver" : null)};
`;
export const IconButton = styled(Button)`
margin: 0 0.2rem;
display: inline-block;
cursor: pointer;
&:before {
text-shadow: 0 0 1px black, 1px 1px 3px #d0bfa3;
}
`;
export const ToggleIconButton = styled(IconButton)`
color: ${props => (props.toggle ? "#e6b4c4" : null)};
&:before {
text-shadow: 0 0 1px gray, 0 0 1px #d0bfa3;
}
`;
export default Button;

73
src/components/ControlPanel.js
View File

@@ -1,21 +1,76 @@
import React from "react";
import styled from "styled-components";
import Button, { ToggleButton } from "../components/Button.js";
import Button, { IconButton, ToggleIconButton } from "../components/Button.js";
const buttonSize = 2.5;
const Layout = styled.div`
display: flex;
flex-direction: column;
`;
export const ControlPanel = ({ updateFrameSnake, paused, pauseSnake, stopSnake, startSnake, fps }) => (
const ButtonRow = styled.div`
display: flex;
place-content: center;
align-content: space-around;
`;
const HorizontalStack = styled.div`
display: flex;
width: 100%;
// place-content: center;
align-content: center;
place-content: space-between;
`;
const VerticalStack = styled.div`
display: flex;
flex-direction: column;
place-content: center;
align-content: space-around;
`;
export const ControlPanel = ({
updateFrameSnake,
paused,
started,
pauseSnake,
stopSnake,
startSnake,
fps,
zoom,
setFps,
zoomIn,
zoomOut
}) => (
<Layout>
<h1>Control Panel</h1>
<ToggleButton toggle={paused} onClick={pauseSnake}>
{paused ? "Resume" : "Pause"}
</ToggleButton>
<Button onClick={stopSnake}>Stop</Button>
<Button onClick={startSnake}>Reset</Button>
<span>FPS: {fps}</span>
{
// <h1>Control Panel</h1>
// <ToggleButton toggle={paused} onClick={pauseSnake}>
// {paused ? "Resume" : "Pause"}
// </ToggleButton>
}
<HorizontalStack style={{ minHeight: "2rem" }}>
<span>Zoom: {zoom}</span>
<div style={{ display: "inline-block" }}>
<IconButton icon="minus-circle" size={1} onClick={zoomOut} />
<IconButton icon="plus-circle" size={1} onClick={zoomIn} />
</div>
</HorizontalStack>
<HorizontalStack style={{ minHeight: "2rem" }}>
<span>FPS: {fps}</span>
<div style={{ display: "inline-block" }}>
<IconButton icon="minus-circle" size={1} onClick={() => setFps(fps - 1)} />
<IconButton icon="plus-circle" size={1} onClick={() => setFps(fps + 1)} />
</div>
</HorizontalStack>
<ButtonRow>
<ToggleIconButton toggle={!started} icon="stop-circle" size={buttonSize} onClick={stopSnake} />
<ToggleIconButton toggle={started && !paused} icon="play-circle" size={buttonSize} onClick={startSnake} />
<ToggleIconButton toggle={paused || !started} icon="pause-circle" size={buttonSize} onClick={pauseSnake} />
<ToggleIconButton toggle={!started} icon="dot-circle" size={buttonSize} onClick={startSnake} />
</ButtonRow>
</Layout>
);

8
src/components/Scoreboard.js
View File

@@ -76,7 +76,7 @@ const CardCSSTransition = styled(CSSTransition)`
&.card-appear-active {
${Card} {
transition: transform ease-out 250ms, opacity ease-out 100ms;
transition: transform ease-in 250ms, opacity ease-in 100ms;
transform: rotateX(0deg);
opacity: 1;
}
@@ -84,7 +84,7 @@ const CardCSSTransition = styled(CSSTransition)`
&.card-enter-active {
${Card} {
transition: transform ease-out 250ms 250ms, opacity ease-out 100ms;
transition: transform ease-in 250ms 250ms, opacity ease-in 100ms;
transform: rotateX(0deg);
opacity: 1;
}
@@ -94,13 +94,13 @@ const CardCSSTransition = styled(CSSTransition)`
&.card-exit {
${Card} {
transform: rotateX(0deg);
transition: transform ease-out 250ms, opacity ease-out 100ms 150ms;
transition: transform ease-in 250ms, opacity ease-in 100ms 150ms;
opacity: 1;
}
&.card-exit-active {
${Card} {
transition: transform ease-out 250ms, opacity ease-out 100ms 150ms;
transition: transform ease-in 250ms, opacity ease-in 100ms 150ms;
transform: rotateX(90deg);
opacity: 0;
}

10
src/components/SnakePart.js
View File

@@ -1,13 +1,13 @@
import styled, { css } from "styled-components";
export const SnakePart = styled.div`
width: ${({ theme }) => theme.snake.cell.size};
height: ${({ theme }) => theme.snake.cell.size};
width: ${({ theme, zoom }) => theme.snake.cell.size * (zoom || 1)}rem;
height: ${({ theme, zoom }) => theme.snake.cell.size * (zoom || 1)}rem;
display: inline-block;
font-size: 1.3rem;
font-size: ${props => (props.zoom || 1) * 1.3}rem;
vertical-align: top;
line-height: 1.8rem;
padding-left: 0.0625rem;
line-height: ${props => (props.zoom || 1) * 1.7}rem;
padding-left: ${props => (props.zoom || 1) * 0.0625}rem;
${props =>
!props.died

25
src/components/Stage.js
View File

@@ -1,26 +1,35 @@
import React from "react";
import styled from "styled-components";
const Row = styled.div`
const Row = styled.div.attrs(({ theme, zoom }) => ({
style: {
height: theme.snake.cell.size * (zoom || 1) + "rem"
}
}))`
white-space: nowrap;
`;
const Cell = styled.div`
width: ${({ theme }) => theme.snake.cell.size};
height: ${({ theme }) => theme.snake.cell.size};
border: ${({ theme }) => theme.snake.cell.border};
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: 1px 1px 4px gray inset, -1px -1px 4px #fff inset;
`;
export const Stage = ({ data, children }) => (
export const Stage = ({ data, children, zoom = 1 }) => (
<div>
{data.map((r, y) => (
<Row key={`y${y}`}>
<Row key={`y${y}`} zoom={zoom}>
{r.map((c, x) => (
<Cell key={`x${x}y${y}`}>{children(c)}</Cell>
<Cell key={`x${x}y${y}`} zoom={zoom}>
{children(c, zoom)}
</Cell>
))}
</Row>
))}

33
src/containers/Snake.js
View File

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
import styled from "styled-components";
/* Redux Modules */
import { module as gameModule, keyPress } from "../redux/game.js";
import { module as gameModule, keyPress, setFps } from "../redux/game.js";
import {
module as snakeModule,
startSnake,
@@ -11,7 +11,9 @@ import {
pauseSnake,
updateFrameSnake,
keyPressedSnake,
keys
keys,
zoomIn,
zoomOut
} from "../redux/snake.js";
/* Components */
@@ -24,12 +26,15 @@ import Apple from "../components/Apple.js";
const Layout = styled.div`
display: flex;
width: 100%;
place-content: space-between;
place-content: center;
margin-top: 2rem;
`;
const SidePanel = styled.div`
display: flex;
flex-direction: column;
margin-left: 2rem;
place-content: space-between;
`;
class Snake extends React.Component {
@@ -61,27 +66,36 @@ class Snake extends React.Component {
snake,
died,
fps,
score
setFps,
score,
zoom,
zoomIn,
zoomOut
} = this.props;
return (
<React.Fragment>
<Layout>
<Stage data={grid}>
<Stage data={grid} zoom={zoom}>
{cell =>
(cell.type === "apple" && <Apple died={died} />) ||
(cell.type === "snake" && <SnakePart value={cell} died={died} />)
(cell.type === "apple" && <Apple zoom={zoom} died={died} />) ||
(cell.type === "snake" && <SnakePart zoom={zoom} value={cell} died={died} />)
}
</Stage>
<SidePanel>
<Scoreboard score={score} zoom={2} />
<ControlPanel
updateFrameSnake={updateFrameSnake}
started={started}
paused={paused}
pauseSnake={pauseSnake}
stopSnake={stopSnake}
startSnake={startSnake}
fps={fps}
setFps={setFps}
zoom={zoom}
zoomIn={zoomIn}
zoomOut={zoomOut}
/>
</SidePanel>
</Layout>
@@ -105,7 +119,10 @@ const mapActionsToProps = {
pauseSnake,
updateFrameSnake,
keyPressedSnake,
keyPress
keyPress,
setFps,
zoomIn,
zoomOut
};
export default connect(

60
src/redux/snake.js
View File

@@ -10,9 +10,11 @@ import {
const MODULE_NAME = "SNAKE";
const DEFAULT_GRID_SIZE = 16;
const DEFAUL_ZOOM_STEP = 0.1;
const initialState = {
grid: createGrid(DEFAULT_GRID_SIZE),
zoom: 1.5,
size: DEFAULT_GRID_SIZE,
paused: false,
vX: 1,
@@ -46,7 +48,18 @@ export const keys = {
snakePart: "snakePart",
s: "s",
r: "r"
r: "r",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
8: "8",
9: "9",
0: "0"
};
function randomPosition(size) {
@@ -106,6 +119,9 @@ export const [START_SNAKE, startSnake] = module.action("START_SNAKE");
export const [RESET_SNAKE, resetSnake] = module.action("RESET_SNAKE", options => ({ ...options }));
export const [STOP_SNAKE, stopSnake] = module.action("STOP_SNAKE");
export const [PAUSE_SNAKE, pauseSnake] = module.action("PAUSE_SNAKE");
export const [ZOOM_IN, zoomIn] = module.action("ZOOM_IN", step => ({ step }));
export const [SET_ZOOM_LEVEL, setZoomLevel] = module.action("SET_ZOOM_LEVEL", level => ({ level }));
export const [ZOOM_OUT, zoomOut] = module.action("ZOOM_OUT", step => ({ step }));
export const [UPDATE_FRAME_SNAKE, updateFrameSnake] = module.action("UPDATE_FRAME_SNAKE");
export const [CHANGE_DIRECTION, changeDirection] = module.action("CHANGE_DIRECTION", direction => ({ direction }));
export const [KEY_PRESSED_SNAKE, keyPressedSnake] = module.action("KEY_PRESSED_SNAKE", key => ({ key }));
@@ -117,8 +133,18 @@ export const [UPDATE_STATE, updateState] = module.action("UPDATE_STATE", (newSta
/* === Reducers ================================================================================= */
module.reducer(UPDATE_STATE, (state, { newState, fullUpdate }) => (fullUpdate ? newState : { ...state, ...newState }));
module.reducer(ZOOM_IN, (state, { step = DEFAUL_ZOOM_STEP }) => ({
...state,
zoom: Math.round((state.zoom + step) * 10) / 10
}));
module.reducer(SET_ZOOM_LEVEL, (state, { level }) => ({ ...state, zoom: level }));
module.reducer(ZOOM_OUT, (state, { step = DEFAUL_ZOOM_STEP }) =>
state.zoom - step >= 0.5 ? { ...state, zoom: Math.round((state.zoom - step) * 10) / 10 } : { ...state, zoom: 1 }
);
module.reducer(RESET_SNAKE, (state, options) => {
const grid = createGrid(state.size);
const zoom = state.zoom;
const apple = options.started ? randomPosition(state.size) : initialState.apple;
const snake = options.started ? [[0, 0]] : initialState.snake;
@@ -126,7 +152,7 @@ module.reducer(RESET_SNAKE, (state, options) => {
snake.forEach((snakePart, i) =>
markCell(grid, snakePart, { type: "snake", index: snake.length - 1 - i, brightness: brightness(snake.length, i) })
);
return { ...state, ...initialState, grid, snake, apple, ...options };
return { ...state, ...initialState, grid, zoom, snake, apple, ...options };
});
module.reducer(CHANGE_DIRECTION, (state, { direction }) => {
@@ -223,7 +249,7 @@ module.middleware(START_SNAKE, (dispatch, { started }) => {
module.middleware(STOP_SNAKE, (dispatch, { started }) => {
dispatch(unregisterCaller(UPDATE_FRAME_SNAKE));
dispatch(unsubscribeKeyPressed(KEY_PRESSED_SNAKE));
// dispatch(unsubscribeKeyPressed(KEY_PRESSED_SNAKE));
dispatch(stopLoop());
dispatch(resetSnake({ started: false }));
});
@@ -237,6 +263,7 @@ module.middleware(PAUSE_SNAKE, (dispatch, { paused }) => {
}
});
// eslint-disable-next-line complexity
module.middleware(KEY_PRESSED_SNAKE, (dispatch, _, { key }) => {
if (key === keys.UP || key === keys.k) {
dispatch(changeDirection(directions.UP));
@@ -259,4 +286,31 @@ module.middleware(KEY_PRESSED_SNAKE, (dispatch, _, { key }) => {
if (key === keys.r) {
dispatch(startSnake());
}
if (key === keys[1]) {
dispatch(setZoomLevel(0.6));
}
if (key === keys[2]) {
dispatch(setZoomLevel(0.8));
}
if (key === keys[3]) {
dispatch(setZoomLevel(1));
}
if (key === keys[4]) {
dispatch(setZoomLevel(1.2));
}
if (key === keys[5]) {
dispatch(setZoomLevel(1.4));
}
if (key === keys[6]) {
dispatch(setZoomLevel(1.6));
}
if (key === keys[7]) {
dispatch(setZoomLevel(1.8));
}
if (key === keys[8]) {
dispatch(setZoomLevel(2));
}
if (key === keys[9]) {
dispatch(setZoomLevel(2.2));
}
});

2
src/theming/theme.js
View File

@@ -24,7 +24,7 @@ const themes = {
snake: {
cell: {
border: "0.0625rem solid papayawhip",
size: "1.5rem"
size: 1.5
},
cellColors: {
" ": "",