-
+
+
I previously dabbled with writing a sudoku @@ -44,8 +45,10 @@ border: 1px solid black; }
-
+
+
I’m not joking when I say I’m going to have to do baby steps here.
@@ -60,26 +63,21 @@ about the cells. I’ll make each box 210 pixels tall and wide. And slap a big ole border on there. Let’s make it 2px because we will want a narrower one for the cells. -.puzzle {
- width: 630px;
- height: 630px;
-}
-
-.box {
- border: 2px solid black;
- width: 210px;
- height: 210px;
-}
-
- .puzzle {
+ width: 630px;
+ height: 630px;
+}
+
+.box {
+ border: 2px solid black;
+ width: 210px;
+ height: 210px;
+}
Reload that and… right div’s auto linebreak after them.
I think we can “float: left” these bad boys and…
-
-
-
Right, now I’m pretty sure the boxes are 210 + 4 pixels wide because the border isn’t included. While I’m tempted to just math my way out of this I recall that you can specify the border-box sizing @@ -88,8 +86,9 @@ were 10 not 9 boxes in the screenshot with the 2 columns. That became even more obvious in the full grid.
-
+
+
Ok now we can just recreate all of this with the cells and should be good to go right?
@@ -100,27 +99,26 @@ 800px wide container. (Again just use flexbox).Finally this works!
-
+
+
Next up is to actually get some numbers in this bad boy. Now this is where I relent and use flexboxes because this StackOverflow answer convinced me.
-.cell {
- ...
-
- font-size: 40px;
- font-weight: bold;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
- .cell {
+ ...
+
+ font-size: 40px;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
Now to make it so I can get the page to display any puzzle I want @@ -130,32 +128,34 @@
I’ll can just get all of the cells by class name and iterate over them in the same order as the puzzle string and it will display relatively easily.
-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;
- }
- var cells = document.getElementsByClassName("cell");
- if (cells.length != 81) {
- console.log("Failure: wrong number of cells: " + cells.length);
- return;
- }
-
- for (i = 0; i < 81; i++) {
- if (puzzle[i] != '.') {
- cells[i].innerText = puzzle[i]
- }
- }
-}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;
+ }
+ var cells = document.getElementsByClassName("cell");
+ if (cells.length != 81) {
+ console.log("Failure: wrong number of cells: " + cells.length);
+ return;
+ }
+
+ for (i = 0; i < 81; i++) {
+ if (puzzle[i] != '.') {
+ cells[i].innerText = puzzle[i]
+ }
+ }
+}And hooray it works super well!
-
+
+
Oh wait… I didn’t think about the fact that the elements in the HTMLCollection from the document.getElementsByClassName call @@ -167,15 +167,17 @@ each cell an id from 1-81 and insert those manually. I’m sure there is a better way but hey this works.
Then with a quick update to the code.
-for (i = 0; i < 81; i++) {
- if (puzzle[i] != '.') {
- document.getElementById(i+1).innerText = puzzle[i]
- }
-}for (i = 0; i < 81; i++) {
+ if (puzzle[i] != '.') {
+ document.getElementById(i+1).innerText = puzzle[i]
+ }
+}It works!
-
+
+
Still some goofiness like the border on the outside being thinner than the interiors but I’m pretty happy with this for now.
@@ -184,21 +186,19 @@ see which pencil marks it has. These could be styled nicely but for now I just went with a span inside the cell div with the following style. -.cell > span {
- font-size: 10px;
- font-weight: normal;
- text-align: center;
- letter-spacing: 6px;
- word-wrap: anywhere;
-}.cell > span {
+ font-size: 10px;
+ font-weight: normal;
+ text-align: center;
+ letter-spacing: 6px;
+ word-wrap: anywhere;
+}The letter-spacing and wordwrap attributes let us just jam all of the pencil marks in as a single string and let the browser break them up into multiple lines for us.
This comes out quite nicely:
-
-
-
For this url trick we will add the pencil marks using a comma @@ -206,32 +206,30 @@
123,,,,456,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Using the string above we can use the following javascript code to parse and insert them:
- 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>";
- }
- }
- } 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>";
+ }
+ }
+ }Which also comes out nicely:
-
-
-