Adjust zoom wrap size on arena change

Author: Roman Babaev

src/App/index.js

@@ -37,7 +37,7 @@ export default class App extends React.Component {
 
   handleZoomChange = zoom => zoom && this.setState({ zoom });
 
-  newGame = (arena = [10, 10], mines = 25) => this.game.configure(arena, mines);
+  newGame = (arena, mines) => this.game.configure(arena, mines);
 
   render() {
     const {
@@ -62,7 +62,7 @@ export default class App extends React.Component {
         />
         <Arena
           gameState={gameState}
-          size={arena}
+          arena={arena}
           cells={this.game.getCells()}
           onCellOpen={this.game.handleCellClick}
           onCellFlag={this.game.flagCell}

src/Arena/index.js

@@ -26,7 +26,10 @@ export class Arena extends React.PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    if (prevProps.zoom !== this.props.zoom) {
+    if (
+      prevProps.arena !== this.props.arena
+      || prevProps.zoom !== this.props.zoom
+    ) {
       const innerElement = this.innerRef && this.innerRef.current;
 
       if (innerElement) {
@@ -39,7 +42,7 @@ export class Arena extends React.PureComponent {
   render() {
     const {
       cells = [],
-      size,
+      arena,
       onCellFlag,
       onCellOpen,
       gameState,
@@ -62,8 +65,8 @@ export class Arena extends React.PureComponent {
           <div
             className={b('inner')}
             style={{
-              width: size[0] * cellSize,
-              height: size[1] * cellSize,
+              width: arena[0] * cellSize,
+              height: arena[1] * cellSize,
               transform: `scale(${zoom})`
             }}
             ref={this.innerRef}

src/ArenaCell/index.js

@@ -1,6 +1,11 @@
 import React, { memo, useState } from "react";
 import b_ from "b_";
-import { getCellNeighborMines, CELL_FLAGGED, CELL_OPENED, CELL_MINED } from '../core/helpers';
+import {
+  getCellNeighborMines,
+  CELL_FLAGGED,
+  CELL_OPENED,
+  CELL_MINED
+} from '../core/helpers';
 import "./styles.css";
 
 const b = b_.lock("ArenaCell");