Designing the board

.eslintrc

@@ -26,7 +26,7 @@
       1,
       "multiline"
     ],
-    "react/jsx-closing-bracket-location": 1,
+    "react/jsx-closing-bracket-location": 0,
     "react/jsx-curly-spacing": 1,
     "react/jsx-indent-props": [
       2,

src/App.js

@@ -1,7 +1,13 @@
 import React from 'react';
 
+import { Canvas } from 'components';
+
 function App() {
-  return <div className="App">hello world!</div>;
+  return (
+    <div className="app">
+      <Canvas />
+    </div>
+  );
 }
 
 export default App;

src/assets/scss/_variables.scss

@@ -0,0 +1,5 @@
+$gray-light: #f6f6f6;
+$gray-mid: #e3e3e3;
+$gray-dark: #333;
+$gray: #d1d1d1;
+$red: #ec433c;

src/assets/scss/styles.scss

@@ -1,7 +1,8 @@
 @import 'reset';
+@import 'variables';
 
 body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 14px;
-  background-color: #f6f6f6;
+  background-color: $gray-light;
 }

src/components/Board/Board.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Board = () => {
+  return <div className="board">Board here</div>;
+};
+
+export default Board;

src/components/Board/index.js

@@ -0,0 +1 @@
+export { default } from './Board';

src/components/Canvas/Canvas.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Header } from 'components';
+import './styles.scss';
+
+const Canvas = () => {
+  return (
+    <div className="canvas">
+      <Header />
+    </div>
+  );
+};
+
+export default Canvas;

src/components/Canvas/index.js

@@ -0,0 +1 @@
+export { default } from './Canvas';

src/components/Canvas/styles.scss

@@ -0,0 +1,26 @@
+@import '../../assets/scss/variables';
+
+.canvas {
+  max-width: 1000px;
+  width: 100%;
+  min-width: 500px;
+  background-color: $gray-mid;
+  margin: 0 auto;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+}
+
+.box {
+  border-radius: 0;
+  border-width: 3px;
+  border-style: solid;
+  background-color: $gray;
+  border-color: lighten($gray, 20%) darken($gray, 20%) darken($gray, 20%)
+    lighten($gray, 20%);
+
+  &:hover,
+  &:focus {
+    background-color: lighten($gray, 10%);
+  }
+}

src/components/Header/Header.js

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import './styles.scss';
+
+const difficulty = {
+  custom: {
+    rows: 10,
+    cols: 10,
+    mines: 5,
+    flags: 5
+  },
+  beginner: {
+    rows: 20,
+    cols: 20,
+    mines: 5,
+    flags: 5
+  },
+  intermediate: {
+    rows: 50,
+    cols: 50,
+    mines: 15,
+    flags: 15
+  },
+  expert: {
+    rows: 100,
+    cols: 100,
+    mines: 50,
+    flags: 50
+  }
+};
+
+const Header = () => {
+  const [selectedDifficulty, setSelectedDifficulty] = useState('beginner');
+  const [rows, setRows] = useState(difficulty.beginner.rows);
+  const [cols, setCols] = useState(difficulty.beginner.cols);
+  const [mines, setMines] = useState(difficulty.beginner.mines);
+  const [flags, setFlags] = useState(5);
+  const [resetContent] = useState('🙂');
+
+  const handleSetDifficulty = event => {
+    setSelectedDifficulty(event.target.value);
+    setRows(difficulty[event.target.value].rows);
+    setCols(difficulty[event.target.value].cols);
+    setMines(difficulty[event.target.value].mines);
+    setFlags(difficulty[event.target.value].flags);
+  };
+
+  const handleSetMines = event => {
+    setMines(parseInt(event.target.value));
+    setFlags(parseInt(event.target.value));
+  };
+
+  return (
+    <div className="header">
+      <div className="flags led-panel box">{flags}</div>
+      <div className="settings">
+        {selectedDifficulty === 'custom' && (
+          <div className="custom">
+            <input
+              className="box"
+              onChange={event => setRows(parseInt(event.target.value))}
+              type="number"
+              value={rows}
+            />
+            <input
+              className="box"
+              onChange={event => setCols(parseInt(event.target.value))}
+              type="number"
+              value={cols}
+            />
+            <input
+              className="box"
+              onChange={event => handleSetMines(event)}
+              type="number"
+              value={mines}
+            />
+          </div>
+        )}
+        <select
+          className="box"
+          onChange={event => handleSetDifficulty(event)}
+          value={selectedDifficulty}>
+          <option value="custom">Custom</option>
+          <option value="beginner">Beginner</option>
+          <option value="intermediate">Intermediate</option>
+          <option value="expert">Expert</option>
+        </select>
+      </div>
+
+      <div className="reset box">{resetContent}</div>
+      <div className="timer led-panel box">000</div>
+    </div>
+  );
+};
+
+export default Header;

src/components/Header/index.js

@@ -0,0 +1 @@
+export { default } from './Header';

src/components/Header/styles.scss

@@ -0,0 +1,43 @@
+@import '../../assets/scss/variables';
+
+.header {
+  max-width: 500px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 5px;
+
+  .led-panel {
+    font-family: 'Space Mono', monospace;
+    background: $gray-dark;
+    color: $red;
+    text-shadow: 0 0 2px rgba($red, 1);
+    line-height: 30px;
+    letter-spacing: 0.05em;
+    text-align: center;
+    width: 30px;
+  }
+
+  .settings {
+    max-width: 221px;
+    display: flex;
+    justify-content: space-between;
+
+    .custom {
+      display: flex;
+      justify-content: space-between;
+
+      input {
+        width: 30px;
+        text-align: center;
+      }
+    }
+  }
+
+  .reset {
+    width: 30px;
+    line-height: 30px;
+    text-align: center;
+    cursor: pointer;
+  }
+}

src/components/index.js

@@ -0,0 +1,3 @@
+export { default as Canvas } from './Canvas';
+export { default as Header } from './Header';
+export { default as Board } from './Board';