diff --git a/src/App.js b/src/App.js index 3346022..b7374d7 100644 --- a/src/App.js +++ b/src/App.js @@ -72,7 +72,10 @@ function App() { return; } const cell = document.getElementById(`cell_${row}_${col}`); - if (cell.classList.contains('flagged')) { + if ( + cell.classList.contains('flagged') || + cell.classList.contains('question') + ) { return; } @@ -109,9 +112,12 @@ function App() { return; } - if (cell.classList.contains('flagged')) { + if (cell.classList.contains('question')) { + cell.classList.remove('question'); + } else if (cell.classList.contains('flagged')) { cell.classList.remove('flagged'); setFlags(flags + 1); + cell.classList.add('question'); } else if (flags > 0) { cell.classList.add('flagged'); setFlags(flags - 1); diff --git a/src/assets/images/question.png b/src/assets/images/question.png new file mode 100644 index 0000000..20a34eb Binary files /dev/null and b/src/assets/images/question.png differ diff --git a/src/components/Board/styles.scss b/src/components/Board/styles.scss index 4248bd4..5d4c760 100644 --- a/src/components/Board/styles.scss +++ b/src/components/Board/styles.scss @@ -14,6 +14,13 @@ background-position: center center; } + &-cell.question { + background-image: url(../../assets/images/question.png); + background-repeat: no-repeat; + background-position: center center; + background-size: 70%; + } + &-cell.revealed { padding: 2px; border: 1px solid $gray-border;