initial commit

public/index.js

@@ -0,0 +1,64 @@
+const textArea = document.getElementById("text-input");
+const coordInput = document.getElementById("coord");
+const valInput = document.getElementById("val");
+const errorMsg = document.getElementById("error");
+
+document.addEventListener("DOMContentLoaded", () => {
+    textArea.value =
+        "..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..";
+    fillpuzzle(textArea.value);
+});
+
+textArea.addEventListener("input", () => {
+    fillpuzzle(textArea.value);
+});
+
+function fillpuzzle(data) {
+    let len = data.length < 81 ? data.length : 81;
+    for (let i = 0; i < len; i++) {
+        let rowLetter = String.fromCharCode('A'.charCodeAt(0) + Math.floor(i / 9));
+        let col = (i % 9) + 1;
+        if (!data[i] || data[i] === ".") {
+            document.getElementsByClassName(rowLetter + col)[0].innerText = " ";
+            continue;
+        }
+        document.getElementsByClassName(rowLetter + col)[0].innerText = data[i];
+    }
+    return;
+}
+
+async function getSolved() {
+    const stuff = { "puzzle": textArea.value }
+    const data = await fetch("/api/solve", {
+        method: "POST",
+        headers: {
+            "Accept": "application/json",
+            "Content-type": "application/json"
+        },
+        body: JSON.stringify(stuff)
+    })
+    const parsed = await data.json();
+    if (parsed.error) {
+        errorMsg.innerHTML = `<code>${JSON.stringify(parsed, null, 2)}</code>`;
+        return
+    }
+    fillpuzzle(parsed.solution)
+}
+
+async function getChecked() {
+    const stuff = { "puzzle": textArea.value, "coordinate": coordInput.value, "value": valInput.value }
+    const data = await fetch("/api/check", {
+        method: "POST",
+        headers: {
+            "Accept": "application/json",
+            "Content-type": "application/json"
+        },
+        body: JSON.stringify(stuff)
+    })
+    const parsed = await data.json();
+    errorMsg.innerHTML = `<code>${JSON.stringify(parsed, null, 2)}</code>`;
+}
+
+
+document.getElementById("solve-button").addEventListener("click", getSolved)
+document.getElementById("check-button").addEventListener("click", getChecked)

public/style.css

@@ -0,0 +1,138 @@
+code {
+    background: #d0d0d5;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-container {
+    max-width: 95%;
+    align-self: flex-start;
+}
+
+textarea {
+    width: 100%;
+}
+
+#user-stories {
+    font-size: 1.2em;
+}
+
+#error-msg {
+    color: red;
+    display: inline;
+    margin-left: 10px;
+}
+
+#sudoku-grid-container {
+    display: flex;
+    flex-direction: row;
+    margin-left: 20px;
+}
+
+#sudoku-grid {
+    text-align: center;
+    display: inline;
+}
+
+.grid {
+    border: 3px solid;
+    border-spacing: 0;
+}
+
+td {
+    border: 1px solid;
+    padding: 0.3em;
+}
+
+.yAxisLegend {
+    margin-top: 50px;
+    text-align: right;
+    font-weight: bold;
+}
+
+.yAxisLegend tr td {
+    border: 1px solid rgba(0, 0, 0, 0);
+    width: 2em;
+    height: 1.95em;
+}
+
+.xAxisLegend {
+    border: 3px solid rgba(0, 0, 0, 0);
+    border-spacing: 0;
+    font-weight: bold;
+}
+
+.xAxisLegend tr td {
+    border: 1px solid rgba(0, 0, 0, 0);
+    width: 2em;
+    height: 2em;
+    text-align: center;
+    vertical-align: bottom;
+    padding-bottom: 0;
+}
+
+.xAxisLegend tr td:nth-of-type(3n) {
+    border-right: 3px solid rgba(0, 0, 0, 0);
+}
+
+.sudoku-input {
+    border: 1px solid black;
+    width: 2em;
+    height: 2em;
+    text-align: center;
+}
+
+.C1,
+.C2,
+.C3,
+.C4,
+.C5,
+.C6,
+.C7,
+.C8,
+.C9,
+.F1,
+.F2,
+.F3,
+.F4,
+.F5,
+.F6,
+.F7,
+.F8,
+.F9 {
+    border-bottom: 3px solid;
+}
+
+.A3,
+.B3,
+.C3,
+.D3,
+.E3,
+.F3,
+.G3,
+.H3,
+.I3,
+.A6,
+.B6,
+.C6,
+.D6,
+.E6,
+.F6,
+.G6,
+.H6,
+.I6 {
+    border-right: 3px solid;
+}
+
+@media (min-width: 800px) {
+    .container {
+        flex-direction: row;
+    }
+
+    .form-container {
+        align-self: center;
+    }
+}