From a347fee0dec91ea5d498a67842cbd02c65aa39e5 Mon Sep 17 00:00:00 2001 From: Drew Galbraith Date: Wed, 3 May 2023 23:36:43 -0700 Subject: [PATCH] Update first post and css --- blog/2023/04/2023-04-10-sudoku.md | 32 ++--- public/blog/2023/04/sudoku.html | 208 +++++++++++++++--------------- public/css/styles.css | 19 +++ 3 files changed, 138 insertions(+), 121 deletions(-) diff --git a/blog/2023/04/2023-04-10-sudoku.md b/blog/2023/04/2023-04-10-sudoku.md index b399283..5ede9f4 100644 --- a/blog/2023/04/2023-04-10-sudoku.md +++ b/blog/2023/04/2023-04-10-sudoku.md @@ -40,7 +40,7 @@ puzzle with nothing in it. } ``` -![border](images/sudoku-1.png) +![A box with nothing in it.](images/sudoku-1.png){.center-img} I'm not joking when I say I'm going to have to do baby steps here. @@ -54,7 +54,7 @@ Let's focus on the 9 main boxes in the grid now before worrying about the cells. 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. -``` +```css .puzzle { width: 630px; height: 630px; @@ -67,13 +67,13 @@ want a narrower one for the cells. } ``` -![boxes](images/sudoku-2.png) +![](images/sudoku-2.png){.center-img} Reload that and... right div's auto linebreak after them. I think we can "float: left" these bad boys and... -![boxes2](images/sudoku-3.png) +![](images/sudoku-3.png){.center-img} 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 @@ -82,7 +82,7 @@ sizing to avoid this. Now this works! Now the astute of you may have noticed that there were 10 not 9 boxes in the screenshot with the 2 columns. That became even more obvious in the full grid. -![boxes3](images/sudoku-4.png) +![Off by one errors...](images/sudoku-4.png){.center-img} Ok now we can just recreate all of this with the cells and should be good to go right? @@ -93,7 +93,7 @@ just use flexbox). Finally this works! -![grid](images/sudoku-5.png) +![We have a grid!](images/sudoku-5.png){.center-img} ## Displaying a puzzle @@ -102,7 +102,7 @@ flexboxes because [this](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div/13515693) StackOverflow answer convinced me. -``` +```css .cell { ... @@ -114,7 +114,7 @@ StackOverflow answer convinced me. } ``` -![cell number](images/sudoku-6.png) +![](images/sudoku-6.png){.center-img} ### Taking the puzzle from the URL @@ -126,7 +126,7 @@ I'll can just get all of the cells by class name and iterate over them in the sa puzzle string and it will display relatively easily. -``` +```js window.onload = (event) => { var params = new URLSearchParams(window.location.search); var puzzle = params.get("p"); @@ -153,7 +153,7 @@ window.onload = (event) => { And hooray it works super well! -![bad puzzles](images/sudoku-7.png) +![This isn't quite right.](images/sudoku-7.png){.center-img} Oh wait... I didn't think about the fact that the elements in the HTMLCollection from the document.getElementsByClassName call wouldn't be in the row order of the puzzle (all of the cells @@ -166,7 +166,7 @@ those manually. I'm sure there is a better way but hey this works. Then with a quick update to the code. -``` +```js for (i = 0; i < 81; i++) { if (puzzle[i] != '.') { document.getElementById(i+1).innerText = puzzle[i] @@ -176,7 +176,7 @@ for (i = 0; i < 81; i++) { It works! -![good puzzle](images/sudoku-8.png) +![We have a puzzle!](images/sudoku-8.png){.center-img} Still some goofiness like the border on the outside being thinner than the interiors but I'm pretty happy with this for now. @@ -187,7 +187,7 @@ Now to really visualize the solver's state, we'll also need to see which pencil These could be styled nicely but for now I just went with a span inside the cell div with the following style. -``` +```css .cell > span { font-size: 10px; font-weight: normal; @@ -202,7 +202,7 @@ string and let the browser break them up into multiple lines for us. This comes out quite nicely: -![pencil marks](images/sudoku-9.png) +![](images/sudoku-9.png){.center-img} ### Reading the pencil marks from the url @@ -212,7 +212,7 @@ For this url trick we will add the pencil marks using a comma separated array li Using the string above we can use the following javascript code to parse and insert them: -``` +```js var marks_param = params.get("m"); if (marks_param === null) { return; @@ -238,4 +238,4 @@ Using the string above we can use the following javascript code to parse and ins Which also comes out nicely: -![full puzzle](images/sudoku-10.png) +![](images/sudoku-10.png){.center-img} diff --git a/public/blog/2023/04/sudoku.html b/public/blog/2023/04/sudoku.html index b0418db..5461d72 100644 --- a/public/blog/2023/04/sudoku.html +++ b/public/blog/2023/04/sudoku.html @@ -7,7 +7,8 @@
-

Writing a Sudoku Solver: Displaying the Grid

+

Writing a Sudoku Solver: Displaying the +Grid

Published 2023-04-10

I previously dabbled with writing a sudoku @@ -44,8 +45,10 @@ border: 1px solid black; }

- border - + A box with nothing in it. +

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;
-}
-
- boxes - -
+ 
.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…

-
- boxes2 - -
+

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.

- boxes3 - + Off by one errors… +

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!

- grid - + We have a grid! +

Displaying a puzzle

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 number - -
+ 
.cell {
+  ...
+
+  font-size: 40px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+

Taking the puzzle from the URL

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!

- bad puzzles - + This isn’t quite right. +

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!

- good puzzle - + We have a puzzle! +

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:

-
- pencil marks - -
+

Reading the pencil marks from the url

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:

-
- full puzzle - -
+

diff --git a/public/css/styles.css b/public/css/styles.css index d2b411b..87df0bb 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -7,3 +7,22 @@ body { margin: auto; } +img { + max-width: 100%; + max-height: 500px; +} + +.center-img { + display: block; + margin-left: auto; + margin-right: auto; +} + +figcaption { + text-align: center; + font-style: italic; +} + +h2 { + border-bottom: 1px solid #000; +}