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

Implement tooltip and clean up/refactor code base

Browse Source
This commit is contained in:
Bart Riemens
2019-08-29 12:02:22 +02:00
parent 9d723e4470
commit 8ba4a30644
10 changed files with 144 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Apple.js
View File

@@ -1,10 +1,14 @@
import styled from "styled-components";
import styled, { keyframes } from "styled-components";
const fade = keyframes`
from { transform: scale(.7) }
to { transform: scale(1) }
`;
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"
@@ -14,9 +18,10 @@ const Apple = styled.div.attrs(({ theme, zoom }) => ({
vertical-align: top;
&:after {
// content: "${props => (!props.died ? "🍎" : "🐛")}";
content: "🍎";
content: "${props => (!props.died ? "🍎" : "🐛")}";
// content: "🍎";
display: inline-block;
animation: ${fade} 1s ease-out alternate infinite;
}
`;

46
src/components/Button.js
View File

@@ -1,6 +1,6 @@
import React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
import styled, { css } from "styled-components";
const SharedStyle = () => `
border: 1px solid gray;
@@ -21,6 +21,11 @@ const SharedStyle = () => `
}
`;
const ButtonWrapper = styled.div`
position: relative;
display: inline-block;
`;
const StyledButton = styled.button`
${SharedStyle}
-webkit-appearance: none;
@@ -39,8 +44,30 @@ const StyledNavLink = styled(NavLink)`
}
`;
const Tooltip = styled.div`
position: absolute;
margin-top: 0.5rem;
border: 1px solid gray;
background-color: palevioletred;
color: papayawhip;
padding: 5px;
box-shadow: 1px 1px 3px #d0bfa3;
${props =>
props.hover
? css`
transition: opacity 400ms 200ms ease-in;
`
: css`
transition: opacity 100ms ease-out;
`}
white-space: nowrap;
opacity: ${props => (props.hover ? 1 : 0)};
`;
export const Button = (props, refs) => {
const [hover, setHover] = React.useState(false);
const updatedProps = { ...props };
let tooltip = null;
if (props.onClick) {
updatedProps.onClick = e => e.preventDefault() || props.onClick();
@@ -54,13 +81,20 @@ export const Button = (props, refs) => {
return StyledNavLink.render(updatedProps);
}
if (props.tooltip) {
tooltip = <Tooltip hover={hover}>{props.tooltip}</Tooltip>;
}
if (props.icon) {
return (
<i
onClick={updatedProps.onClick}
className={`fas fa-${props.icon} ${props.className}`}
style={{ display: "inline-block", fontSize: `${props.size || 1}rem` }}
/>
<ButtonWrapper onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
<i
onClick={updatedProps.onClick}
className={`fas fa-${props.icon} ${props.className}`}
style={{ display: "inline-block", fontSize: `${props.size || 1}rem` }}
/>
{tooltip}
</ButtonWrapper>
);
}

32
src/components/ControlPanel.js
View File

@@ -66,10 +66,34 @@ export const ControlPanel = ({
</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} />
<ToggleIconButton
toggle={!started}
icon="stop-circle"
tooltip={"Press 's' to stop"}
size={buttonSize}
onClick={stopSnake}
/>
<ToggleIconButton
toggle={started && !paused}
icon="play-circle"
size={buttonSize}
onClick={startSnake}
tooltip={"Press 'r' to start"}
/>
<ToggleIconButton
toggle={paused || !started}
icon="pause-circle"
size={buttonSize}
onClick={pauseSnake}
tooltip={"Press 'p' to pause"}
/>
<ToggleIconButton
toggle={!started}
icon="dot-circle"
size={buttonSize}
onClick={startSnake}
tooltip={"Press 'r' to restart"}
/>
</ButtonRow>
</Layout>
);

15
src/components/SnakePart.js
View File

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

3
src/containers/Snake.js
View File

@@ -11,7 +11,6 @@ import {
pauseSnake,
updateFrameSnake,
keyPressedSnake,
keys,
zoomIn,
zoomOut
} from "../redux/snake.js";
@@ -41,7 +40,6 @@ class Snake extends React.Component {
constructor(props) {
super(props);
this.handleKeyDown = this.handleKeyDown.bind(this);
this.supportedKeys = Object.values(keys);
window.me = this;
}
@@ -63,7 +61,6 @@ class Snake extends React.Component {
grid,
started,
paused,
snake,
died,
fps,
setFps,

8
src/enums/directions.js Normal file
View File

@@ -0,0 +1,8 @@
export const directions = {
UP: "UP",
DOWN: "DOWN",
LEFT: "LEFT",
RIGHT: "RIGHT"
};
export default directions;

32
src/enums/keys.js Normal file
View File

@@ -0,0 +1,32 @@
export const keys = {
UP: "ArrowUp",
RIGHT: "ArrowRight",
DOWN: "ArrowDown",
LEFT: "ArrowLeft",
EQUAL: "=",
PLUS: "+",
MINUS: "-",
h: "h",
j: "j",
k: "k",
l: "l",
p: "p",
s: "s",
r: "r",
1: "1",
2: "2",
3: "3",
4: "4",
5: "5",
6: "6",
7: "7",
8: "8",
9: "9",
0: "0"
};
export default keys;

11
src/redux/game.js
View File

@@ -1,4 +1,5 @@
import Module from "./module.js";
import keys from "../enums/keys.js";
export const MODULE_NAME = "GAME";
@@ -9,16 +10,6 @@ export const module = new Module(MODULE_NAME, {
fps: 8
});
export const keys = {
UP: "ArrowUp",
RIGHT: "ArrowRight",
DOWN: "ArrowDown",
LEFT: "ArrowLeft",
EQUAL: "=",
PLUS: "+",
MINUS: "-"
};
export const [START_LOOP, startLoop] = module.action("START_LOOP");
export const [STOP_LOOP, stopLoop] = module.action("STOP_LOOP");
export const [LOOP, loop] = module.action("LOOP", ({ recur, skip } = {}) => ({ recur, skip }));

83
src/redux/snake.js
View File

@@ -1,12 +1,7 @@
import Module from "./module.js";
import {
registerCaller,
unregisterCaller,
startLoop,
stopLoop,
subscribeKeyPressed,
unsubscribeKeyPressed
} from "./game.js";
import keys from "../enums/keys.js";
import directions from "../enums/directions.js";
import { registerCaller, unregisterCaller, startLoop, stopLoop, subscribeKeyPressed } from "./game.js";
const MODULE_NAME = "SNAKE";
const DEFAULT_GRID_SIZE = 16;
@@ -28,40 +23,6 @@ const initialState = {
/* === Snake Helper Functions ================================================================== */
export const directions = {
UP: "UP",
DOWN: "DOWN",
LEFT: "LEFT",
RIGHT: "RIGHT"
};
export const keys = {
UP: "ArrowUp",
RIGHT: "ArrowRight",
DOWN: "ArrowDown",
LEFT: "ArrowLeft",
h: "h",
j: "j",
k: "k",
l: "l",
snakePart: "snakePart",
s: "s",
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) {
return [Math.round(Math.random() * (size - 1)), Math.round(Math.random() * (size - 1))];
}
@@ -195,7 +156,7 @@ module.reducer(UPDATE_FRAME_SNAKE, state => {
}
/* Check if the snake hits itself */
if (newSnake.slice(0, -1).filter((snakePart, index) => comparePositions(snakePart, nextPosition)).length) {
if (newSnake.slice(0, -1).filter(snakePart => comparePositions(snakePart, nextPosition)).length) {
started = false;
died = true;
}
@@ -240,7 +201,7 @@ module.after(UPDATE_FRAME_SNAKE, (dispatch, { died }) => {
}
});
module.middleware(START_SNAKE, (dispatch, { started }) => {
module.middleware(START_SNAKE, dispatch => {
dispatch(resetSnake({ started: true, died: false }));
dispatch(registerCaller(UPDATE_FRAME_SNAKE));
dispatch(subscribeKeyPressed(KEY_PRESSED_SNAKE));
@@ -263,7 +224,6 @@ 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));
@@ -280,37 +240,16 @@ module.middleware(KEY_PRESSED_SNAKE, (dispatch, _, { key }) => {
if (key === keys.s) {
dispatch(stopSnake());
}
if (key === keys.snakePart) {
if (key === keys.p) {
dispatch(pauseSnake());
}
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));
/* Map the number keys to a zoom level */
const keyAsInt = parseInt(key, 10);
if (!isNaN(keyAsInt) && keyAsInt > 0 && keyAsInt <= 9) {
dispatch(setZoomLevel(0.6 + (keyAsInt - 1) * 0.2));
}
});

12
src/redux/ui.js
View File

@@ -6,25 +6,25 @@ export const showSpinner = () => ({ type: SHOW_SPINNER });
export const hideSpinner = () => ({ type: HIDE_SPINNER });
export const toggleSpinner = () => ({ type: TOGGLE_SPINNER });
export const reducers = (ui = {}, action) => {
export const reducers = (state = {}, action) => {
if (action.type === SHOW_SPINNER) {
return {
...ui,
...state,
spinner: true
};
}
if (action.type === HIDE_SPINNER) {
return {
...ui,
...state,
spinner: false
};
}
if (action.type === TOGGLE_SPINNER) {
return {
...ui,
spinner: !ui.spinner
...state,
spinner: !state.spinner
};
}
return ui;
return state;
};