Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved UI of Sudoku Games #298

Merged
merged 1 commit into from
Feb 21, 2024
Merged

Improved UI of Sudoku Games #298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 17 additions & 9 deletions Sudoku_Game_8x8/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand Down
48 changes: 39 additions & 9 deletions Sudoku_Game_8x8/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -55,6 +56,7 @@ document.addEventListener('DOMContentLoaded', function () {

}
changeDifficulty(0);
updateTimer();
});

function changeDifficulty(difficulty) {
Expand Down Expand Up @@ -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();
}
}
Expand Down Expand Up @@ -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)];
Expand All @@ -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();
41 changes: 38 additions & 3 deletions Sudoku_Game_8x8/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
}
}
26 changes: 17 additions & 9 deletions Sudoku_Game_9x9/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand Down
45 changes: 36 additions & 9 deletions Sudoku_Game_9x9/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -55,6 +56,7 @@ document.addEventListener('DOMContentLoaded', function () {

}
changeDifficulty(0);
updateTimer();
});

function changeDifficulty(difficulty) {
Expand Down Expand Up @@ -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();
}
}
Expand Down Expand Up @@ -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)];
Expand All @@ -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();
35 changes: 35 additions & 0 deletions Sudoku_Game_9x9/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
28 changes: 27 additions & 1 deletion css_files/sudocu_game_4x4.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,6 @@ label{
font-size: 1.5rem;
padding:5px ;
border-radius: 10px;
margin-left: 50px;
}

.info{
Expand All @@ -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;
}
Loading