Adding SudokuGame from a past repo

abanoub-refaat · Aug 29, 2024 · c1e410c · c1e410c
1 parent 6c85f59
commit c1e410c
Show file tree

Hide file tree

Showing 4 changed files with 323 additions and 0 deletions.
diff --git a/SudokuGame/Sudoku.css b/SudokuGame/Sudoku.css
@@ -0,0 +1,110 @@
+body{
+    height: 120vb;
+    background-color: #f0f0f0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.content{
+    display: flex;
+    flex-direction: column;
+}
+hr {
+    width: 600px;
+}
+#errors{
+    color: rgb(252, 124, 78);
+}
+#board {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 450px;
+    height: 450px;
+    margin-bottom: 10px;
+}
+.tile {
+    width: 49px;
+    height: 49px;
+    border: 1px solid lightgray;
+    font-size: 20px;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+#digits{
+    display: flex;
+    flex-wrap: wrap;
+    width: 450px;
+    height: 50px;
+}
+.number{
+    width: 44px;
+    height: 44px;
+    border: 1px solid #212529;
+    margin: 3px;
+    font-size: 20px;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+}
+.number-selected {
+    background-color: rgb(173, 173, 173);
+}
+.tile-start{
+    background-color: whitesmoke;
+}
+.h-line {
+    border-bottom: 1px solid #212529;
+}
+.v-line{
+    border-right: 1px solid #212529;
+}
+#blank-screen{
+    display: none;
+    width: 500px;
+    height: 450px;
+    border-radius: 12px;
+    background-color: whitesmoke;
+    z-index: 1;
+
+}
+#blank-screen a{
+    color: white;
+    text-decoration: none;
+}
+@media (max-width: 768px) {
+    hr {
+        width: 350px;
+    }
+    #board {
+        width: 335px;
+        height: 335px;
+    }
+    #digits {
+        width: 335px;
+    }
+    .number{
+        width: 35px;
+        height: 35px;
+        margin: 1px;
+        font-size: 15px;
+    }
+    .tile{
+        width: 37px;
+        height: 37px;
+    }
+    p{
+        font-size: 12px;
+    }
+    #blank-screen {
+        width: 350px;
+    }
+}
diff --git a/SudokuGame/Sudoku.html b/SudokuGame/Sudoku.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no">
+    <title>Sudoku</title>
+    <link rel="stylesheet" href="Sudoku.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <script src="Sudoku.js"></script>
+</head>
+
+<body>
+    <div id="blank-screen">
+        <div class="lose-msg p-4 text-center">
+            <h2>You Missed 10 Times!</h2>
+            <br>
+            <p>If you want to try again click New Game</p>
+            <br>
+            <div class="btn bg-success"><a href="index.html">New Game</a></div>
+        </div>
+    </div>
+    <main id= "main-content" class="content justify-content-center align-items-center text-center">
+        <h1 class="fw-bold">Let's Play Sudoku!</h1>
+        <hr>
+        <h2 id="errors">0</h2>
+        <div id="board"></div>
+        <br>
+        <div id="digits"></div>
+        <p class="m-4">Implemented by Abanoub Refaat</p>         
+    </main>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script>
+
+</body>
+
+</html>
diff --git a/SudokuGame/Sudoku.js b/SudokuGame/Sudoku.js
@@ -0,0 +1,105 @@
+"strict mode"
+let numberSelected = null;
+let  tileSelected = null;
+let errors = 0;
+
+let board = [
+    "--65----8",
+    "-95----2-",
+    "7--9--3--",
+    "----4-27-",
+    "---873---",
+    "-79-5----",
+    "--2--8--9",
+    "-5----81-",
+    "3----54--"
+]
+
+let solution = [
+    "136524798",
+    "895367124",
+    "724981356",
+    "583649371",
+    "261873945",
+    "479152683",
+    "642718539",
+    "957436812",
+    "318295467"
+]
+
+window.onload = function(){
+    setGame();
+}
+
+function setGame(){
+    for(let i = 1; i <= 9; i++){
+        //<div id="i" class="number">1</div>
+        let number = document.createElement("div");
+        //adding an id to each div.
+        number.id = i;
+        //adding a text in the div with the value of i.
+        number.innerText = i;
+        number.addEventListener("click", selectNumber);
+        //adding a number class to each div.
+        number.classList.add("number");
+        document.getElementById("digits").appendChild(number);
+    }
+    //Board
+    for(let j = 0; j < 9; j++){
+        for(let k = 0; k < 9; k++){
+            let tile = document.createElement("div");
+            tile.id = j.toString() + "-" + k.toString();
+            //adding the numbers in its tiles
+            if(board[j][k] != "-"){
+                tile.innerText = board[j][k];
+                tile.classList.add("tile-start");
+            }
+            //adding the line seperator between each 3x3 border
+            if(j == 2 || j == 5){
+                tile.classList.add("v-line");
+            }
+            if(k == 2 || k == 5){
+                tile.classList.add("h-line");
+            }
+            tile.addEventListener("click", selectedTile);
+            tile.classList.add("tile");
+            document.getElementById("board").append(tile);
+        }
+    }
+}
+
+function selectNumber(){
+    if(numberSelected != null){
+        //removing the class form the unselcted div
+        numberSelected.classList.remove("number-selected");
+    }
+    //this refers to the div itself.
+    numberSelected = this;
+    numberSelected.classList.add("number-selected");
+}
+function selectedTile(){
+    if(numberSelected){
+        if(this.innerText != ""){
+            return;
+        }
+        let coords = this.id.split("-");
+        let r = parseInt(coords[0]);
+        let c = parseInt(coords[1]);
+
+        if(solution[r][c] == numberSelected.id){
+            this.innerText = numberSelected.id;
+        }
+        else if(errors >= 9){
+           let main = document.getElementById("main-content");
+           let lose = document.getElementById("blank-screen");
+           lose.style.display = "flex";
+           lose.style.justifyContent = "center";  
+           lose.style.alignItems = "center";
+           main.style.display = "none";
+        }
+        else{
+            errors += 1;
+            document.getElementById("errors").innerText = errors;
+        }
+    }
+}
diff --git a/SudokuGame/index.html b/SudokuGame/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sudoku</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <style>
+        body {
+            height: 100vb;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #f0f0f0;
+        }
+        .content {
+            width: 500px;
+            height: 450px;
+        }
+        ul{
+            padding-left: 0;
+            margin: 0 0 1rem;
+        }
+        li{
+            margin: 15px;
+            list-style-type: none;
+        }
+        .new-game:hover{
+            background-color: #115837 !important;
+        }
+        a{
+            color: white;
+            text-decoration: none;
+        }
+        @media (max-width:768px){
+            .content {
+                width: 360px;
+                height: 530px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="content card text-center p-4">
+        <div class="card-body">
+            <h1 class="fw-semibold">Rules</h1>
+            <ul class="text-start">
+                <li>A 9×9 square must be filled in with numbers from 1-9 with no repeated numbers in each line,
+                    horizontally
+                    or
+                    vertically</li>
+                <li>there are 3×3 squares marked out in the grid, and each of these squares can't have any repeat
+                    numbers</li>
+                <li>If you missed the 10 times the game will restart! BE CAREFULL!</li>
+            </ul>
+            <p class="fw-semibold m-4">If You are Ready Start a New Game</p>
+            <div class="btn new-game bg-success" style="color: white;"><a href="Sudoku.html">New Game</a>
+            </div>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>