Преглед на файлове

Add sudoku solver into projects.

Lee Morgan преди 5 години
родител
ревизия
61ecce60f2
променени са 6 файла, в които са добавени 317 реда и са изтрити 0 реда
  1. 6 0
      routes.js
  2. BIN
      views/images/sudoku.png
  3. 6 0
      views/main/index.html
  4. 55 0
      views/sudoku/index.css
  5. 127 0
      views/sudoku/index.html
  6. 123 0
      views/sudoku/index.js

+ 6 - 0
routes.js

@@ -12,4 +12,10 @@ module.exports = function(app){
     app.get("/images/touchscreen", (req, res)=>{res.sendFile(`${views}/images/touchscreen.jpeg`)});
     app.get("/images/subline", (req, res)=>{res.sendFile(`${views}/images/subline.png`)});
     app.get("/images/budgeteer", (req, res)=>{res.sendFile(`${views}/images/budgeteer.jpeg`)});
+    app.get("/images/sudoku", (req, res)=>{res.sendFile(`${views}/images/sudoku.png`)});
+
+    //Sudoku
+    app.get("/sudoku", (req, res)=>{res.sendFile(`${views}/sudoku/index.html`)});
+    app.get("/sudoku/style", (req, res)=>{res.sendFile(`${views}/sudoku/index.css`)});
+    app.get("/sudoku/code", (req, res)=>{res.sendFile(`${views}/sudoku/index.js`)});
 }

BIN
views/images/sudoku.png


+ 6 - 0
views/main/index.html

@@ -92,6 +92,12 @@
                     <img src="/images/budgeteer" alt="Budgeteer">
                     <p>A simple web application to help people to budget their money in a simple and approachable manner.</p>
                 </a>
+
+                <a class="card" href="/sudoku">
+                    <h2>Sudoku Solver</h2>
+                    <img src="/images/sudoku" alt="Sudoku">
+                    <p>Stuck on a particularly difficult game of sudoku? Enter any sudoku puzzle and have it solved immediately.</p>
+                </a>
             </div>
 
             <div id="about" style="display:none;">

+ 55 - 0
views/sudoku/index.css

@@ -0,0 +1,55 @@
+#sudokuStrand{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: monospace;
+}
+
+    #sudokuStrand > *{
+        margin: 15px;
+    }
+
+    input{
+        width: 50px;
+        border: none;
+        font-size: 40px;
+        text-align: center;
+    }
+
+    table{
+        border-collapse: collapse;
+        border: 6px solid black;
+    }
+
+    th, td {
+        border: 1px solid black;
+    }
+
+    td:nth-of-type(3n){
+        border-right: 6px solid black;
+    }
+
+    tr:nth-of-type(3n){
+        border-bottom: 6px solid black;
+    }
+
+    .button{
+        background: none;
+        border: 5px solid black;
+        box-shadow: 1px 1px 1px black;
+        text-decoration: none;
+        color: black;
+        font-size: 25px;
+        padding: 10px;
+        cursor: pointer;
+        display: inline-block;
+        box-sizing: border-box;
+        vertical-align: middle;
+        font-family: 'IBM Plex Mono', monospace;
+        transition: 0.6s;
+    }
+
+        .button:hover{
+            background: black;
+            color: white;
+        }

+ 127 - 0
views/sudoku/index.html

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+        <meta charset="utf-8">
+        <title>Sudoku Solver</title>
+        <link rel="stylesheet" href="/sudoku/style">
+	</head>
+    <body>
+        <div id="sudokuStrand">
+            <h1>Sudoku Solver</h1>
+
+            <div class="buttonsDiv">
+                <button id="solve" class="button" onclick="sudokuObj.solve()">Solve</button>
+
+                <button id="reset" class="button" onclick="sudokuObj.reset()">Reset</button>
+
+                <a class="button" href="/">Return</a>
+            </div>
+
+            <table>
+                <tbody>
+                    <tr>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                    </tr>
+                    <tr>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                    </tr>
+                    <tr>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                    </tr>
+                    <tr>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                    </tr>
+                    <tr>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                    </tr>
+                    <tr>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                    </tr>
+                    <tr>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                    </tr>
+                    <tr>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                    </tr>
+                    <tr>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                        <td><input type="text"></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <script src="/sudoku/code"></script>
+    </body>
+</html>

+ 123 - 0
views/sudoku/index.js

@@ -0,0 +1,123 @@
+let arr = [];
+let emptyX = [];
+let emptyY = [];
+let count = 0;
+
+solve = ()=>{
+    getInputs();
+    recurse(0);
+    fillIn();
+}
+
+getInputs = ()=>{
+    let tbody = document.querySelector("tbody");
+    
+    for(let row of tbody.children){
+        rowArr = [];
+        for(let td of row.children){
+            let rowValue = td.children[0].value;
+            if(rowValue === ""){
+                rowArr.push(0);
+            }else{
+                rowArr.push(parseInt(rowValue));
+            }
+        }
+
+        arr.push(rowArr);
+    }
+
+    //Make a note of all empty spots
+    for(let y = 0; y < 9; y++){
+        for(let x = 0; x < 9; x++){
+            if(arr[y][x] === 0){
+                emptyY.push(y);
+                emptyX.push(x);
+            }
+        }
+    }
+}
+
+recurse = (emptyIndex)=>{
+    count++;
+    if(emptyIndex === emptyX.length){
+        return true;
+    }
+
+    for(let n = 1; n <= 9; n++){
+        if(isValid(emptyY[emptyIndex], emptyX[emptyIndex], n)){
+            arr[emptyY[emptyIndex]][emptyX[emptyIndex]] = n;
+            let isDone = recurse(emptyIndex + 1);
+            if(isDone){
+                return true;
+            }
+        }
+    }
+
+    arr[emptyY[emptyIndex]][emptyX[emptyIndex]] = 0;  
+}
+
+
+isValid = (y, x, n)=>{
+    for(let y2 = 0; y2 < 9; y2++){
+        if(arr[y2][x] === n){
+            return false;
+        }
+    }
+
+    for(let x2 = 0; x2 < 9; x2++){
+        if(arr[y][x2] === n){
+            return false;
+        }
+    }
+
+    let squareInputs = [getArrForBox(y), getArrForBox(x)];
+    for(let i of squareInputs[0]){
+        for(let j of squareInputs[1]){
+            if(arr[i][j] === n){
+                return false;
+            }
+        }
+    }
+
+    return true;
+},
+
+getArrForBox = (coord)=>{
+    let coords = [[0, 1, 2], [3, 4, 5], [6, 7, 8]];
+    for(let set of coords){
+        for(let num of set){
+            if(num === coord){
+                return set;
+            }
+        }
+    }
+}
+
+fillIn = ()=>{
+    let tbody = document.querySelector("tbody");
+
+    for(let i = 0; i < 9; i++){
+        let row = tbody.children[i];
+        for(let j = 0; j < 9; j++){
+            row.children[j].children[0].value = arr[i][j];
+        }
+    }
+}
+
+reset = ()=>{
+    let tbody = document.querySelector("tbody");
+
+    for(let row of tbody.children){
+        for(let td of row.children){
+            td.children[0].value = "";
+        }
+    }
+
+    arr = [];
+    emptyX = [];
+    emptyY = [];
+    count = 0;
+}
+
+document.getElementById("solve").onclick = ()=>{solve()};
+document.getElementById("reset").onclick = ()=>{reset()};