Improved UI of Sudoku Games (Spandan-Bhattacharya#298)

Anshikaa-Saini · Feb 21, 2024 · 9cc8f91 · 9cc8f91
1 parent 9236c86
commit 9cc8f91
Show file tree

Hide file tree

Showing 12 changed files with 372 additions and 102 deletions.
diff --git a/Sudoku_Game_8x8/index.html b/Sudoku_Game_8x8/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta name="viewreport" content="width=device-width,initial-scale=1.0">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="stylesheet" href="./style.css">
   <title>8x8 Sudoku Solver</title>
 
@@ -12,16 +12,24 @@
 <body background="../assets/bg.webp">
   <h1>8x8 Sudoku Solver</h1>
   <div class="info">
-  <label for="size">Choose a difficulty:</label>
-    <select id="size" name="size" onchange="changeDifficulty(value)">
-      <option value="0" selected>Easy</option>
-      <option value="1">Medium</option>
-      <option value="2">Hard</option>
-    </select>
+    <div id="choose-size">
+      <label for="size">Difficulty:</label><br>
+      <select id="size" name="size" onchange="changeDifficulty(value)">
+        <option value="0" selected>Easy</option>
+        <option value="1">Medium</option>
+        <option value="2">Hard</option>
+      </select>
+    </div>
+
+    <div id="timer-container">
+      Time Remaining <br><span id="timer">10:00</span>
+    </div>
+
     <div class="lives-container">
-        <span id="lives">Lives: 5</span>
+      <span id="lives">Lives: <span id="hearts"><span id="h-1">❤️</span><span id="h-2">❤️</span><span
+            id="h-3">❤️</span></span></span>
     </div>
-</div>
+  </div>
   <div class="sudoku-container">
     <table>
       <tbody id="sudoku-grid"></tbody>

diff --git a/Sudoku_Game_8x8/script.js b/Sudoku_Game_8x8/script.js
@@ -19,8 +19,9 @@ const difficulties = [
     ],
 ];
 
-let lives = 5;
-let wrongInputs = 0;
+let lives = 3;
+let totalSeconds = 600; // 10 minutes in seconds
+let timerInterval;
 
 document.addEventListener('DOMContentLoaded', function () {
     const gridSize = 8;
@@ -55,6 +56,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     }
     changeDifficulty(0);
+    updateTimer();
 });
 
 function changeDifficulty(difficulty) {
@@ -95,10 +97,11 @@ function handleInput(event) {
         event.target.classList.add("output-cell");
         event.target.style.color = "red";
         if (!isNaN(parsedValue)) {
-            wrongInputs++;
+            document.getElementById(`h-${lives}`).style.display="none";
+           lives--;
         }
-        document.getElementById("lives").textContent = `Lives: ${lives - wrongInputs}`;
-        if (wrongInputs >= 5) {
+
+        if (lives<=0) {
             gameOver();
         }
     }
@@ -223,9 +226,16 @@ function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
 function resetGrid() {
-    lives = 5;
-    document.getElementById("lives").textContent = `Lives: ${lives}`;
-    wrongInputs = 0;
+    clearInterval(timerInterval);
+    totalSeconds = (3 - currentDifficulty) * 400;
+    updateTimer();
+    timerInterval = setInterval(updateTimer, 1000);
+
+    lives = 3;
+    document.getElementById(`h-1`).style.display="";
+    document.getElementById(`h-2`).style.display="";
+    document.getElementById(`h-3`).style.display="";
+
     const gridSize = 8;
     console.log(currentDifficulty);
     const puzzle = difficulties[currentDifficulty][Math.floor(Math.random() * difficulties[currentDifficulty].length)];
@@ -251,8 +261,28 @@ function gridReset() {
 }
 
 function complete() {
-    alert("Congratulation !!! You Solved The Game")
+    alert("Congratulation !!! You Solved The Game");
+    clearInterval(timerInterval);
 }
 
+function updateTimer() {
+    let timerElement = document.getElementById('timer');
+    let minutes, seconds;
+    console.log(totalSeconds);
+    minutes = Math.floor(totalSeconds / 60);
+    seconds = totalSeconds % 60;
+    timerElement.textContent = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+
+    if (totalSeconds <= 0) {
+        clearInterval(timerInterval);
+        alert("Time's UP");
+        resetGrid();
+    } else {
+        totalSeconds--;
+    }
+}
+
+timerInterval = setInterval(updateTimer, 1000); // Update the timer every second
+
 // Call gridReset to attach the event listener to the resetButton
 gridReset();
diff --git a/Sudoku_Game_8x8/style.css b/Sudoku_Game_8x8/style.css
@@ -39,10 +39,10 @@ table {
 }
 
 .cell {
-    width: 70px;
-    height: 70px;
+    width: 50px;
+    height: 50px;
     text-align: center;
-    font-size: 50px;
+    font-size: 40px;
     border: 1px solid #999;
     transform: all 0.3s ease-in-out;
     background: rgb(244, 213, 99);
@@ -142,4 +142,39 @@ select,option{
     font-size: 1.3rem;
     border-radius: 10px;
     padding: 2px;
+}
+
+#hearts{
+    display: flex;
+}
+
+#choose-size{
+    margin: 10px;
+    background-color: rgb(255, 175, 47);
+    padding:5px ;
+    border-radius: 10px;
+    line-height: 1.7rem;
+}
+
+#timer-container{
+    font-size: 1.1rem;
+    margin: 10px;
+    background-color: rgb(248, 255, 47);
+    padding:5px ;
+    border-radius: 10px;
+    line-height: 1.8rem;
+}
+#timer-container span{
+    font-size: 1.4rem;
+    background-color: white;
+    padding: 3px;
+    border-radius: 5px;
+}
+
+@media (max-width:500px){
+    .cell{
+        height: 10vw;
+        width: 10vw;
+        font-size: 7vw;
+    }
 }
diff --git a/Sudoku_Game_9x9/index.html b/Sudoku_Game_9x9/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta name="viewreport" content="width=device-width,initial-scale=1.0">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="stylesheet" href="./style.css">
   <title>9x9 Sudoku Solver</title>
 
@@ -12,16 +12,24 @@
 <body background="../assets/bg.webp">
   <h1>9x9 Sudoku Solver</h1>
   <div class="info">
-  <label for="size">Choose a difficulty:</label>
-    <select id="size" name="size" onchange="changeDifficulty(value)">
-      <option value="0" selected>Easy</option>
-      <option value="1">Medium</option>
-      <option value="2">Hard</option>
-    </select>
+    <div id="choose-size">
+      <label for="size">Difficulty:</label><br>
+      <select id="size" name="size" onchange="changeDifficulty(value)">
+        <option value="0" selected>Easy</option>
+        <option value="1">Medium</option>
+        <option value="2">Hard</option>
+      </select>
+    </div>
+
+    <div id="timer-container">
+      Time Remaining <br><span id="timer">10:00</span>
+    </div>
+
     <div class="lives-container">
-        <span id="lives">Lives: 5</span>
+      <span id="lives">Lives: <span id="hearts"><span id="h-1">❤️</span><span id="h-2">❤️</span><span
+            id="h-3">❤️</span></span></span>
     </div>
-</div>
+  </div>
   <div class="sudoku-container">
     <table>
       <tbody id="sudoku-grid"></tbody>

diff --git a/Sudoku_Game_9x9/script.js b/Sudoku_Game_9x9/script.js
@@ -19,8 +19,9 @@ const difficulties = [
     ],
 ];
 
-let lives = 5;
-let wrongInputs = 0;
+let lives = 3;
+let totalSeconds = 600; // 10 minutes in seconds
+let timerInterval;
 
 document.addEventListener('DOMContentLoaded', function () {
     const gridSize = 9;
@@ -55,6 +56,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     }
     changeDifficulty(0);
+    updateTimer();
 });
 
 function changeDifficulty(difficulty) {
@@ -95,10 +97,10 @@ function handleInput(event) {
         event.target.classList.add("output-cell");
         event.target.style.color = "red";
         if (!isNaN(parsedValue)) {
-            wrongInputs++;
+            document.getElementById(`h-${lives}`).style.display="none";
+            lives--;
         }
-        document.getElementById("lives").textContent = `Lives: ${lives - wrongInputs}`;
-        if (wrongInputs >= 5) {
+        if (lives<=0) {
             gameOver();
         }
     }
@@ -223,9 +225,14 @@ function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
 function resetGrid() {
-    lives = 5;
-    document.getElementById("lives").textContent = `Lives: ${lives}`;
-    wrongInputs = 0;
+    clearInterval(timerInterval);
+    totalSeconds = (3 - currentDifficulty) * 600;
+    updateTimer();
+    timerInterval = setInterval(updateTimer, 1000);
+    lives = 3;
+    document.getElementById(`h-1`).style.display="";
+    document.getElementById(`h-2`).style.display="";
+    document.getElementById(`h-3`).style.display="";
     const gridSize = 9;
     console.log(currentDifficulty);
     const puzzle = difficulties[currentDifficulty][Math.floor(Math.random() * difficulties[currentDifficulty].length)];
@@ -251,8 +258,28 @@ function gridReset() {
 }
 
 function complete() {
-    alert("Congratulation !!! You Solved The Game")
+    alert("Congratulation !!! You Solved The Game");
+    clearInterval(timerInterval);
 }
 
+function updateTimer() {
+    let timerElement = document.getElementById('timer');
+    let minutes, seconds;
+    console.log(totalSeconds);
+    minutes = Math.floor(totalSeconds / 60);
+    seconds = totalSeconds % 60;
+    timerElement.textContent = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+
+    if (totalSeconds <= 0) {
+        clearInterval(timerInterval);
+        alert("Time's UP");
+        resetGrid();
+    } else {
+        totalSeconds--;
+    }
+}
+
+timerInterval = setInterval(updateTimer, 1000); // Update the timer every second
+
 // Call gridReset to attach the event listener to the resetButton
 gridReset();
diff --git a/Sudoku_Game_9x9/style.css b/Sudoku_Game_9x9/style.css
@@ -142,4 +142,39 @@ select,option{
     font-size: 1.3rem;
     border-radius: 10px;
     padding: 2px;
+}
+
+#hearts{
+    display: flex;
+}
+
+#choose-size{
+    margin: 10px;
+    background-color: rgb(255, 175, 47);
+    padding:5px ;
+    border-radius: 10px;
+    line-height: 1.7rem;
+}
+
+#timer-container{
+    font-size: 1.1rem;
+    margin: 10px;
+    background-color: rgb(248, 255, 47);
+    padding:5px ;
+    border-radius: 10px;
+    line-height: 1.8rem;
+}
+#timer-container span{
+    font-size: 1.4rem;
+    background-color: white;
+    padding: 3px;
+    border-radius: 5px;
+}
+
+@media (max-width:800px){
+    .cell{
+        height: 8vw;
+        width: 8vw;
+        font-size: 6vw;
+    }
 }
diff --git a/css_files/sudocu_game_4x4.css b/css_files/sudocu_game_4x4.css
@@ -127,7 +127,6 @@ label{
     font-size: 1.5rem;
     padding:5px ;
     border-radius: 10px;
-    margin-left: 50px;
 }
 
 .info{
@@ -143,4 +142,31 @@ select,option{
     font-size: 1.3rem;
     border-radius: 10px;
     padding: 2px;
+}
+
+#hearts{
+    display: flex;
+}
+
+#choose-size{
+    margin: 10px;
+    background-color: rgb(255, 175, 47);
+    padding:5px ;
+    border-radius: 10px;
+    line-height: 1.7rem;
+}
+
+#timer-container{
+    font-size: 1.1rem;
+    margin: 10px;
+    background-color: rgb(248, 255, 47);
+    padding:5px ;
+    border-radius: 10px;
+    line-height: 1.8rem;
+}
+#timer-container span{
+    font-size: 1.4rem;
+    background-color: white;
+    padding: 3px;
+    border-radius: 5px;
 }