From fed01fb6af5bbb745de73eb1a1c3bb6ad72dcecb Mon Sep 17 00:00:00 2001 From: Michel Wilhelm Date: Sat, 7 Nov 2020 12:05:41 -0300 Subject: [PATCH] Designing the board --- .eslintrc | 2 +- src/App.js | 8 ++- src/assets/scss/_variables.scss | 5 ++ src/assets/scss/styles.scss | 3 +- src/components/Board/Board.js | 7 +++ src/components/Board/index.js | 1 + src/components/Canvas/Canvas.js | 13 +++++ src/components/Canvas/index.js | 1 + src/components/Canvas/styles.scss | 26 +++++++++ src/components/Header/Header.js | 95 +++++++++++++++++++++++++++++++ src/components/Header/index.js | 1 + src/components/Header/styles.scss | 43 ++++++++++++++ src/components/index.js | 3 + 13 files changed, 205 insertions(+), 3 deletions(-) create mode 100644 src/assets/scss/_variables.scss create mode 100644 src/components/Board/Board.js create mode 100644 src/components/Board/index.js create mode 100644 src/components/Canvas/Canvas.js create mode 100644 src/components/Canvas/index.js create mode 100644 src/components/Canvas/styles.scss create mode 100644 src/components/Header/Header.js create mode 100644 src/components/Header/index.js create mode 100644 src/components/Header/styles.scss create mode 100644 src/components/index.js diff --git a/.eslintrc b/.eslintrc index 1d9022a..859fdeb 100644 --- a/.eslintrc +++ b/.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, diff --git a/src/App.js b/src/App.js index c1116b6..19f2ff4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,13 @@ import React from 'react'; +import { Canvas } from 'components'; + function App() { - return
hello world!
; + return ( +
+ +
+ ); } export default App; diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss new file mode 100644 index 0000000..2aa1e95 --- /dev/null +++ b/src/assets/scss/_variables.scss @@ -0,0 +1,5 @@ +$gray-light: #f6f6f6; +$gray-mid: #e3e3e3; +$gray-dark: #333; +$gray: #d1d1d1; +$red: #ec433c; diff --git a/src/assets/scss/styles.scss b/src/assets/scss/styles.scss index 1e93ec5..3de4258 100644 --- a/src/assets/scss/styles.scss +++ b/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; } diff --git a/src/components/Board/Board.js b/src/components/Board/Board.js new file mode 100644 index 0000000..1164154 --- /dev/null +++ b/src/components/Board/Board.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const Board = () => { + return
Board here
; +}; + +export default Board; diff --git a/src/components/Board/index.js b/src/components/Board/index.js new file mode 100644 index 0000000..cdb7b71 --- /dev/null +++ b/src/components/Board/index.js @@ -0,0 +1 @@ +export { default } from './Board'; diff --git a/src/components/Canvas/Canvas.js b/src/components/Canvas/Canvas.js new file mode 100644 index 0000000..1fa513d --- /dev/null +++ b/src/components/Canvas/Canvas.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { Header } from 'components'; +import './styles.scss'; + +const Canvas = () => { + return ( +
+
+
+ ); +}; + +export default Canvas; diff --git a/src/components/Canvas/index.js b/src/components/Canvas/index.js new file mode 100644 index 0000000..dd22256 --- /dev/null +++ b/src/components/Canvas/index.js @@ -0,0 +1 @@ +export { default } from './Canvas'; diff --git a/src/components/Canvas/styles.scss b/src/components/Canvas/styles.scss new file mode 100644 index 0000000..140fd76 --- /dev/null +++ b/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%); + } +} diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js new file mode 100644 index 0000000..b5f3af7 --- /dev/null +++ b/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 ( +
+
{flags}
+
+ {selectedDifficulty === 'custom' && ( +
+ setRows(parseInt(event.target.value))} + type="number" + value={rows} + /> + setCols(parseInt(event.target.value))} + type="number" + value={cols} + /> + handleSetMines(event)} + type="number" + value={mines} + /> +
+ )} + +
+ +
{resetContent}
+
000
+
+ ); +}; + +export default Header; diff --git a/src/components/Header/index.js b/src/components/Header/index.js new file mode 100644 index 0000000..579f1ac --- /dev/null +++ b/src/components/Header/index.js @@ -0,0 +1 @@ +export { default } from './Header'; diff --git a/src/components/Header/styles.scss b/src/components/Header/styles.scss new file mode 100644 index 0000000..312ec79 --- /dev/null +++ b/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; + } +} diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..ee7eb91 --- /dev/null +++ b/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';