Fixes

src/App.js

@@ -14,8 +14,10 @@ function App() {
   const [updateDummyBoard, setUpdateDummyBoard] = useState(true);
   const [activeGame, setActiveGame] = useState(null);
 
-  const handleSetRows = value => {
+  const handleSetRows = event => {
-    if (value < 3 || value > 99) {
+    const value = parseInt(event.target.value);
+
+    if (value == 0) {
       return;
     }
 
@@ -23,8 +25,10 @@ function App() {
     setRows(value);
   };
 
-  const handleSetCols = value => {
+  const handleSetCols = event => {
-    if (value < 3 || value > 99) {
+    const value = parseInt(event.target.value);
+
+    if (value == 0) {
       return;
     }
 
@@ -57,11 +61,11 @@ function App() {
   const handleSetMines = event => {
     const value = parseInt(event.target.value);
     if (value < 1 || value > 99) {
-      return;
+      return value;
     }
     const matrixSize = rows * cols;
     if (value >= matrixSize) {
-      return;
+      return value;
     }
 
     setMines(value);
@@ -183,6 +187,14 @@ function App() {
   };
 
   const handleCreateNewGame = () => {
+    if (rows < 3) {
+      setRows(3);
+    }
+
+    if (cols < 3) {
+      setCols(3);
+    }
+
     gameClient.createNewGame(rows, cols, mines).then(response => {
       setActiveGame(response);
       setFlags(mines);

src/components/Header/Header.js

@@ -22,7 +22,7 @@ const Header = ({
           <input
             className="box"
             id="rows"
-            onChange={event => setRows(parseInt(event.target.value))}
+            onChange={event => setRows(event)}
             type="number"
             value={rows}
           />
@@ -32,7 +32,7 @@ const Header = ({
           <input
             className="box"
             id="cols"
-            onChange={event => setCols(parseInt(event.target.value))}
+            onChange={event => setCols(event)}
             type="number"
             value={cols}
           />

src/components/Header/styles.scss

@@ -1,7 +1,6 @@
 @import '../../assets/scss/variables';
 
 .header {
-  max-width: 400px;
   width: 100%;
   margin: 0 auto;
   display: flex;