Add files via upload

css/style.css

@@ -77,10 +77,13 @@ h3 {
     display: block;
     width: 50px;
     font-size: 35px;
+    border-radius: 50%;
     margin: auto;
+    transition: 1000ms;
 }
 
 .smiley-button:hover {
+    background-color: rgb(172, 245, 245);
     cursor: pointer;
 }
 
@@ -94,11 +97,18 @@ h3 {
 }
 
 .safe-clicks{
+    font-family:Verdana, Geneva, Tahoma, sans-serif;
+    font: size 10px;
+    padding-top: 15px;
+    color: rgb(70, 50, 0);
     margin: auto;
-    background-color: aqua;
+    background-color: rgb(203, 243, 109);
     width: 100px;
-    height: 30px;
+    height: 55px;
+    border-radius: 20px;
+    transition: 1500ms;
 }
 .safe-clicks:hover{
     cursor: pointer;
+    color: rgb(228, 210, 196);
 }

index.html

@@ -17,14 +17,17 @@
     <!-- </div> -->
 
     <div class="smiley-button" onclick="smileyButton(this)">😀</div>
-    <div class="safe-clicks" onclick="safeClicks()">safe clicks</div>
+    <div class="safe-clicks" onclick="safeClicks(this)">safe clicks</div>
     <!-- <div class="hints" onclick="onHintsClick(this)">🎆🎆🎆</div> -->
 
     <h2>
         | Life:
         <span class="lives">3❤️</span>
         | timer:
-        <span class="timer">0</span> |
+        <span class="timer">0</span> 
+        | safe clicks
+        <span class="safe">3</span> |
+
     </h2>
     <div class="game-over">
         <div class="lose"></div>

js/click.js

@@ -27,37 +27,37 @@ function onLevelsClick(click) {
     onInit()
 }
 
-function firstClick(row, col) {
+function firstClick(i, j) {
     if (gGame.shownCount) return
-    createsMines(gBoard)
+    expandShown(i, j)
     gGame.shownCount++
-
+    
     gIntervalSecs = setInterval(getTimer, 1000)
-
-    setMinesNegsCount(row, col)
-
-    expandShown(row, col)
+    setMinesNegsCount(i, j)
+    createsMines(gBoard)
+    
+
     renderBoard(gBoard, '.board-container')
-
+    renderCell({ i, j }, null)
 }
 
-function onCellClicked(elCell, row, col) {
-    firstClick(row, col)
+function onCellClicked(elCell, i, j) {
+    firstClick(i, j)
     gGame.shownCount++
 
-    const currCell = gBoard[row][col]
+    const currCell = gBoard[i][j]
 
     currCell.isShown = true
     currCell.minesAroundCount = null
 
     if (!gGame.isOn || currCell.minesAroundCount || currCell.isMarked) return
 
-    setMinesNegsCount(row, col)
+    setMinesNegsCount(i, j)
 
     elCell.style.backgroundColor = 'azure'
 
     if (currCell.minesAroundCount) elCell.innerText = currCell.minesAroundCount
-    if (!currCell.minesAroundCount) expandShown(row, col)
+    if (!currCell.minesAroundCount) expandShown(i, j)
     if (currCell.isMine) checkGameOver(elCell)
     checkWin()
 }
@@ -83,23 +83,31 @@ function smileyButton(click) {
     onInit()
 }
 
-function safeClicks() {
+function safeClicks(click) {
+    if (!gGame.safeClicksCount) return
+    gGame.safeClicksCount--
+
+    click.style.color = getRandomColor()
+    click.style.backgroundColor = getRandomColor()
+    if (!gGame.safeClicksCount) click.style.display = 'none'
+
     var cell = getSafeClicks()
-    renderCell(cell, '😀')
+    renderCell(cell, '👌')
+
     setTimeout(() => {
         renderCell(cell, ' ')
     }, 1000)
+    renderSubtitle()
 }
 
 function getSafeClicks() {
-    gGame.safeClicks = true
-    var safes = []
+    const safes = []
     for (var i = 0; i < gBoard.length; i++) {
         for (var j = 0; j < gBoard[i].length; j++) {
             const currCell = gBoard[i][j]
             if (!currCell.isShown && !currCell.isMine) safes.push({ i, j })
         }
     }
-    var idx = getRandomInt(0, safes.length)
+    const idx = getRandomInt(0, safes.length)
     return safes[idx]
 }

js/main.js

@@ -16,17 +16,20 @@ const gGame = {
     secsPassed: 0,
     lives: 2,
     isHint: false,
-    safeClicks: false
+    safeClicksCount: 3
 }
 
 function onInit() {
+    const elSafeClicks = document.querySelector('.safe-clicks')
     const elWin = document.querySelector('.win')
     elWin.style.display = 'none'
-
+    elSafeClicks.style.display = 'block'
+
     gGame.secsPassed = 0
     gGame.isOn = true
     gGame.shownCount = 0
-
+    gGame.safeClicksCount = 3
+
     clearInterval(gIntervalSecs)
 
     gBoard = buildBoard()
@@ -81,6 +84,14 @@ function renderBoard(mat, selector) {
     elContainer.innerHTML = strHTML
 }
 
+function renderCell(location, value) {
+    const cellSelector = '.' + getClassName(location)
+    const elCell = document.querySelector(cellSelector)
+    elCell.innerHTML = value
+    elCell.style.backgroundColor = value === ' ' ? 'rgb(155, 205, 249)' : 'azure'
+}
+
+
 function createsMines(board) {
     for (var i = 0; i < gLevel.MINES; i++) {
         var idxI = getRandomInt(0, gLevel.SIZE)
@@ -126,9 +137,11 @@ function renderSubtitle() {
 
     const elLives = document.querySelector('.lives')
     const elTimer = document.querySelector('.timer')
+    const elSafe = document.querySelector('.safe')
 
     elLives.innerText = gGame.lives ? live : dead
     elTimer.innerText = gGame.secsPassed
+    elSafe.innerText = gGame.safeClicksCount
 }
 
 
@@ -160,13 +173,13 @@ function checkWin() {
     if (!gGame.isOn) return
     const elSmileyButton = document.querySelector('.smiley-button')
     const elWin = document.querySelector('.win')
-    
+
     const winMsg = `win!!! \n 🎉 \n seconds:${gGame.secsPassed}`
 
     for (var i = 0; i < gBoard.length; i++) {
         for (var j = 0; j < gBoard[i].length; j++) {
             const currCell = gBoard[i][j]
-            if (!currCell.isShown && !currCell.isMarked 
+            if (!currCell.isShown && !currCell.isMarked
                 || currCell.isMine && !currCell.isMarked) return false
         }
     }

js/util.js

@@ -1,11 +1,5 @@
 'use strict'
 
-function renderCell(location, value) {
-    const cellSelector = '.' + getClassName(location)
-    const elCell = document.querySelector(cellSelector)
-    elCell.innerHTML = value
-    elCell.style.backgroundColor = value === ' ' ? 'rgb(155, 205, 249)' : 'azure'
-}
 
 function getClassName(position) {
     const className = `cell-${position.i}-${position.j}`