From d694a71493064f8a9415d7a147d338e82cd24c48 Mon Sep 17 00:00:00 2001 From: Drew Galbraith Date: Wed, 3 May 2023 16:12:31 -0700 Subject: [PATCH] Fix links to images --- blog/2023-04-10-sudoku.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/blog/2023-04-10-sudoku.md b/blog/2023-04-10-sudoku.md index 101da96..5543640 100644 --- a/blog/2023-04-10-sudoku.md +++ b/blog/2023-04-10-sudoku.md @@ -37,7 +37,7 @@ puzzle with nothing in it. } ``` --- Screenshot: sudoku-1.png +[border](sudoku-1.png) I'm not joking when I say I'm going to have to do baby steps here. @@ -64,13 +64,13 @@ want a narrower one for the cells. } ``` --- Screenshot: sudoku-2.png +[boxes](sudoku-2.png) Reload that and... right div's auto linebreak after them. I think we can "float: left" these bad boys and... --- Screenshot: sudoku-3.png +[boxes2](sudoku-3.png) 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 @@ -79,7 +79,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. --- Screenshot: sudoku-4.png??? +[boxes3](sudoku-4.png) Ok now we can just recreate all of this with the cells and should be good to go right? @@ -90,7 +90,7 @@ just use flexbox). Finally this works! --- Screenshot: sudoku-5.png +[grid](sudoku-5.png) ## Displaying a puzzle @@ -111,7 +111,7 @@ StackOverflow answer convinced me. } ``` --- Screenshot: sudoku-6.png +[cell number](sudoku-6.png) ### Taking the puzzle from the URL @@ -150,7 +150,7 @@ window.onload = (event) => { And hooray it works super well! --- Screenshot: sudoku-7.png +[bad puzzles](sudoku-7.png) 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 @@ -173,7 +173,7 @@ for (i = 0; i < 81; i++) { It works! --- Screenshot: sudoku-8.png +[good puzzle](sudoku-8.png) Still some goofiness like the border on the outside being thinner than the interiors but I'm pretty happy with this for now. @@ -199,7 +199,7 @@ string and let the browser break them up into multiple lines for us. This comes out quite nicely: --- Screenshot: sudoku-9.png +[pencil marks](sudoku-9.png) ### Reading the pencil marks from the url @@ -235,4 +235,4 @@ Using the string above we can use the following javascript code to parse and ins Which also comes out nicely: --- Screenshot: sudoku-10.png +[full puzzle](sudoku-10.png)