drew
/
tiramisu-one
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial Sudoku display tool

This commit is contained in:
Drew Galbraith 2023-04-10 19:31:58 -07:00
parent 0ce03a052b
commit 100a4f5922
5 changed files with 275 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
public/css/sudoku.css Normal file
View File

@ -0,0 +1,39 @@
body {
font-family: sans-serif;
}
.container {
max-width: 800px;
margin: auto;
}
.box {
border: 2px solid black;
width: 210px;
height: 210px;
float: left;
}
.cell {
border: 1px solid black;
width: 70px;
height: 70px;
float:left;
box-sizing: border-box;
font-size: 40px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.cell > span {
font-size: 12px;
font-weight: normal;
text-align: center;
letter-spacing: 11px;
word-wrap: anywhere;
padding-left: 10px;
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

0
public/index.html Normal file
View File

40
public/scripts/sudoku.js Normal file
View File

@ -0,0 +1,40 @@
window.onload = (event) => {
var params = new URLSearchParams(window.location.search);
var puzzle = params.get("p");
if (puzzle === null) {
return;
}
if (puzzle.length != 81) {
console.log("Failure: puzzle url len is " + puzzle.length);
return;
}
for (i = 0; i < 81; i++) {
if (puzzle[i] != '.') {
document.getElementById(i+1).innerText = puzzle[i]
}
}
var marks_param = params.get("m");
if (marks_param === null) {
return;
}
var marks = marks_param.split(",");
if (marks.length != 81) {
console.log("Failure: marks url len is " + marks.length);
return;
}
for (i = 0; i < 81; i++) {
if (marks[i].length > 0) {
var cell = document.getElementById(i+1);
if (cell.innerHTML.trim().length > 0) {
console.log("Pencil marks in cell with number: " + (i+1));
} else {
cell.innerHTML = "<span>" + marks[i] + "</span>";
}
}
}
}

196
public/sudoku.html Normal file
View File

@ -0,0 +1,196 @@
<!DOCTYPE html>
<html>
<head>
<title>Sudoku</title>
<link rel="stylesheet" href="css/sudoku.css">
<script src="scripts/sudoku.js"></script>
</head>
<body>
<div class="container">
<h1>Sudoku</h1>
<div class="puzzle">
<div class="box">
<div id="1" class="cell">
</div>
<div id="2" class="cell">
</div>
<div id="3" class="cell">
</div>
<div id="10" class="cell">
</div>
<div id="11" class="cell">
</div>
<div id="12" class="cell">
</div>
<div id="19" class="cell">
</div>
<div id="20" class="cell">
</div>
<div id="21" class="cell">
</div>
</div>
<div class="box">
<div id="4" class="cell">
</div>
<div id="5" class="cell">
</div>
<div id="6" class="cell">
</div>
<div id="13" class="cell">
</div>
<div id="14" class="cell">
</div>
<div id="15" class="cell">
</div>
<div id="22" class="cell">
</div>
<div id="23" class="cell">
</div>
<div id="24" class="cell">
</div>
</div>
<div class="box">
<div id="7" class="cell">
</div>
<div id="8" class="cell">
</div>
<div id="9" class="cell">
</div>
<div id="16" class="cell">
</div>
<div id="17" class="cell">
</div>
<div id="18" class="cell">
</div>
<div id="25" class="cell">
</div>
<div id="26" class="cell">
</div>
<div id="27" class="cell">
</div>
</div>
<div class="box">
<div id="28" class="cell">
</div>
<div id="29" class="cell">
</div>
<div id="30" class="cell">
</div>
<div id="37" class="cell">
</div>
<div id="38" class="cell">
</div>
<div id="39" class="cell">
</div>
<div id="46" class="cell">
</div>
<div id="47" class="cell">
</div>
<div id="48" class="cell">
</div>
</div>
<div class="box">
<div id="31" class="cell">
</div>
<div id="32" class="cell">
</div>
<div id="33" class="cell">
</div>
<div id="40" class="cell">
</div>
<div id="41" class="cell">
</div>
<div id="42" class="cell">
</div>
<div id="49" class="cell">
</div>
<div id="50" class="cell">
</div>
<div id="51" class="cell">
</div>
</div>
<div class="box">
<div id="34" class="cell">
</div>
<div id="35" class="cell">
</div>
<div id="36" class="cell">
</div>
<div id="43" class="cell">
</div>
<div id="44" class="cell">
</div>
<div id="45" class="cell">
</div>
<div id="52" class="cell">
</div>
<div id="53" class="cell">
</div>
<div id="54" class="cell">
</div>
</div>
<div class="box">
<div id="55" class="cell">
</div>
<div id="56" class="cell">
</div>
<div id="57" class="cell">
</div>
<div id="64" class="cell">
</div>
<div id="65" class="cell">
</div>
<div id="66" class="cell">
</div>
<div id="73" class="cell">
</div>
<div id="74" class="cell">
</div>
<div id="75" class="cell">
</div>
</div>
<div class="box">
<div id="58" class="cell">
</div>
<div id="59" class="cell">
</div>
<div id="60" class="cell">
</div>
<div id="67" class="cell">
</div>
<div id="68" class="cell">
</div>
<div id="69" class="cell">
</div>
<div id="76" class="cell">
</div>
<div id="77" class="cell">
</div>
<div id="78" class="cell">
</div>
</div>
<div class="box">
<div id="61" class="cell">
</div>
<div id="62" class="cell">
</div>
<div id="63" class="cell">
</div>
<div id="70" class="cell">
</div>
<div id="71" class="cell">
</div>
<div id="72" class="cell">
</div>
<div id="79" class="cell">
</div>
<div id="80" class="cell">
</div>
<div id="81" class="cell">
</div>
</div>
</div>
</div>
</body>
</html>