diff --git a/src/App.js b/src/App.js index 7ddd8f5..4e810e8 100644 --- a/src/App.js +++ b/src/App.js @@ -79,6 +79,19 @@ function App() { }) ); } + + if (activeGame && activeGame.win === false) { + console.log(activeGame); + // search for all mines on board + activeGame.board.map((row, rowId) => + row.map((col, colId) => { + if (col === -1) { + const cell = document.getElementById(`cell_${rowId}_${colId}`); + cell.classList.add('mined'); + } + }) + ); + } }); const handleCellClick = (row, col) => { @@ -107,6 +120,7 @@ function App() { cell.innerHTML = points; } else { cell.classList.add('mined'); + cell.classList.add('mined-red'); document.getElementsByClassName('reset')[0].innerHTML = '👻'; } diff --git a/src/components/Board/styles.scss b/src/components/Board/styles.scss index 886e1f0..742d020 100644 --- a/src/components/Board/styles.scss +++ b/src/components/Board/styles.scss @@ -68,6 +68,9 @@ background-repeat: no-repeat; background-position: center center; background-size: 90%; + } + + &-cell.mined-red { background-color: rgba(255, 0, 0, 0.6); }