Updates zoom feature

Author: Roman Babaev

src/App/index.js

@@ -4,6 +4,11 @@ import { FooterPanel } from "../FooterPanel";
 import { Hat } from "../Hat";
 import { Minesweeper } from "../core";
 import { Options } from "../Options";
+import {
+  ZOOM_MIN,
+  ZOOM_MAX,
+  ZOOM_DEFAULT
+} from '../constants';
 import "./styles.css";
 
 function preventZoom(event) {
@@ -35,7 +40,13 @@ export default class App extends React.Component {
   toggleOptions = () =>
     this.setState(({ showOptions }) => ({ showOptions: !showOptions }));
 
-  handleZoomChange = zoom => zoom && this.setState({ zoom });
+  handleZoomChange = zoom => zoom && zoom > 0 && this.setState({
+    zoom: zoom > ZOOM_MAX
+      ? ZOOM_MAX
+      : zoom < ZOOM_MIN
+        ? ZOOM_MIN
+        : zoom
+  });
 
   newGame = (arena, mines) => this.game.configure(arena, mines);
 

src/FooterPanel/index.js

@@ -1,17 +1,42 @@
 import React from "react";
 import { Button, ControlsPanel, Switcher } from "@tarantool.io/ui-kit";
 import b_ from 'b_';
+import { ZOOM_STEP } from '../constants';
 import "./styles.css";
 
 const b = b_.lock('FooterPanel');
 
-export const FooterPanel = ({ flaggingMode, zoom, onFlaggingSwitch, onZoomChange }) => (
+export const FooterPanel = ({
+  flaggingMode,
+  zoom,
+  onFlaggingSwitch,
+  onZoomChange
+}) => (
   <ControlsPanel
     className={b()}
     controls={[
-      <Button className={b('zoomButton')} text='+' size='xs' onClick={() => onZoomChange(zoom + 0.5)} />,
-      <Button className={b('zoomButton')} text='-' size='xs' onClick={() => onZoomChange(zoom - 0.5)} />,
-      <Switcher onChange={onFlaggingSwitch} title="Flag" checked={flaggingMode}>Flag</Switcher>
+      <Button
+        key='+'
+        className={b('zoomButton')}
+        text='+'
+        size='xs'
+        onClick={() => onZoomChange(zoom + ZOOM_STEP)}
+      />,
+      <Button
+        key='-'
+        className={b('zoomButton')}
+        text='-'
+        size='xs'
+        onClick={() => onZoomChange(zoom - ZOOM_STEP)}
+      />,
+      <Switcher
+        key='f'
+        onChange={onFlaggingSwitch}
+        title='Flag'
+        checked={flaggingMode}
+      >
+        Flag
+      </Switcher>
     ]}
   />
 );

src/Hat/index.js

@@ -20,13 +20,30 @@ export const Hat = ({
     className={b()}
     thin
     controls={[
-      <Text className={b('output')} title='Mines counter'>💣{minesLeftCount}</Text>,
-      <Text className={b('output')} title='Timer'>⏱{timerValue === null ? 0 : Math.round(timerValue / 1000)}</Text>,
-      <Button onClick={onResetClick} title='New game (Space)' intent={gameState === 'playing' ? 'secondary' : 'primary'}>
+      <Text
+        key='c'
+        className={b('output')}
+        title='Mines counter'
+      >
+        💣{minesLeftCount}
+      </Text>,
+      <Text
+        key='t'
+        className={b('output')}
+        title='Timer'
+      >
+        ⏱{timerValue === null ? 0 : Math.round(timerValue / 1000)}
+      </Text>,
+      <Button
+        key='n'
+        onClick={onResetClick}
+        title='New game (Space)'
+        intent={gameState === 'playing' ? 'secondary' : 'primary'}
+      >
         {gameState === "playing" ? "🙂" : gameState === "won" ? "😎" : "😵"}
         New game
       </Button>,
-      <Button onClick={onOptionsClick} title="Options">Options</Button>
+      <Button key='o' onClick={onOptionsClick} title="Options">Options</Button>
     ]}
   />
 );

src/constants.js

@@ -0,0 +1,4 @@
+export const ZOOM_MIN = 0.25;
+export const ZOOM_MAX = 4;
+export const ZOOM_STEP = 0.25;
+export const ZOOM_DEFAULT = 1;