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

Update first post and css

This commit is contained in:
Drew Galbraith 2023-05-03 23:36:43 -07:00
parent 25a8a078bb
commit a347fee0de
3 changed files with 138 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
blog/2023/04/2023-04-10-sudoku.md
View File

@ -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. 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 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. want a narrower one for the cells.
``` ```css
.puzzle { .puzzle {
width: 630px; width: 630px;
height: 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. Reload that and... right div's auto linebreak after them.
I think we can "float: left" these bad boys and... 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. 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 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 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 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? 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! Finally this works!
![grid](images/sudoku-5.png) ![We have a grid!](images/sudoku-5.png){.center-img}
## Displaying a puzzle ## 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) [this](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div/13515693)
StackOverflow answer convinced me. StackOverflow answer convinced me.
``` ```css
.cell { .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 ### 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. puzzle string and it will display relatively easily.
``` ```js
window.onload = (event) => { window.onload = (event) => {
var params = new URLSearchParams(window.location.search); var params = new URLSearchParams(window.location.search);
var puzzle = params.get("p"); var puzzle = params.get("p");
@ -153,7 +153,7 @@ window.onload = (event) => {
And hooray it works super well! 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 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 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. Then with a quick update to the code.
``` ```js
for (i = 0; i < 81; i++) { for (i = 0; i < 81; i++) {
if (puzzle[i] != '.') { if (puzzle[i] != '.') {
document.getElementById(i+1).innerText = puzzle[i] document.getElementById(i+1).innerText = puzzle[i]
@ -176,7 +176,7 @@ for (i = 0; i < 81; i++) {
It works! 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 Still some goofiness like the border on the outside being thinner than the interiors but I'm pretty
happy with this for now. 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 These could be styled nicely but for now I just went with a span inside the cell div with the
following style. following style.
``` ```css
.cell > span { .cell > span {
font-size: 10px; font-size: 10px;
font-weight: normal; 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: This comes out quite nicely:
![pencil marks](images/sudoku-9.png) ![](images/sudoku-9.png){.center-img}
### Reading the pencil marks from the url ### 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: Using the string above we can use the following javascript code to parse and insert them:
``` ```js
var marks_param = params.get("m"); var marks_param = params.get("m");
if (marks_param === null) { if (marks_param === null) {
return; 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: Which also comes out nicely:
![full puzzle](images/sudoku-10.png) ![](images/sudoku-10.png){.center-img}

208
public/blog/2023/04/sudoku.html
View File

@ -7,7 +7,8 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>Writing a Sudoku Solver: Displaying the Grid</h1> <h1 class="page-title">Writing a Sudoku Solver: Displaying the
Grid</h1>
<div class="date">Published 2023-04-10</div> <div class="date">Published 2023-04-10</div>
<p>I previously dabbled with writing a <a <p>I previously dabbled with writing a <a
href="https://gitlab.com/dgalbraith33/sudoku-solver">sudoku href="https://gitlab.com/dgalbraith33/sudoku-solver">sudoku
@ -44,8 +45,10 @@
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a> <span class="kw">border</span>: <span class="dv">1</span><span class="dt">px</span> <span class="dv">solid</span> <span class="cn">black</span><span class="op">;</span></span> <span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a> <span class="kw">border</span>: <span class="dv">1</span><span class="dt">px</span> <span class="dv">solid</span> <span class="cn">black</span><span class="op">;</span></span>
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div> <span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<figure> <figure>
<img src="images/sudoku-1.png" alt="border" /> <img src="images/sudoku-1.png" class="center-img"
<figcaption aria-hidden="true">border</figcaption> alt="A box with nothing in it." />
<figcaption aria-hidden="true">A box with nothing in
it.</figcaption>
</figure> </figure>
<p>I’m not joking when I say I’m going to have to do baby steps <p>I’m not joking when I say I’m going to have to do baby steps
here.</p> here.</p>
@ -60,26 +63,21 @@
about the cells. I’ll make each box 210 pixels tall and wide. And 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 slap a big ole border on there. Let’s make it 2px because we will
want a narrower one for the cells.</p> want a narrower one for the cells.</p>
<pre><code>.puzzle { <div class="sourceCode" id="cb3"><pre
width: 630px; class="sourceCode css"><code class="sourceCode css"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="fu">.puzzle</span> {</span>
height: 630px; <span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">width</span>: <span class="dv">630</span><span class="dt">px</span><span class="op">;</span></span>
} <span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">height</span>: <span class="dv">630</span><span class="dt">px</span><span class="op">;</span></span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a>}</span>
.box { <span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a></span>
border: 2px solid black; <span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a><span class="fu">.box</span> {</span>
width: 210px; <span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a> <span class="kw">border</span>: <span class="dv">2</span><span class="dt">px</span> <span class="dv">solid</span> <span class="cn">black</span><span class="op">;</span></span>
height: 210px; <span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a> <span class="kw">width</span>: <span class="dv">210</span><span class="dt">px</span><span class="op">;</span></span>
}</code></pre> <span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a> <span class="kw">height</span>: <span class="dv">210</span><span class="dt">px</span><span class="op">;</span></span>
<figure> <span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<img src="images/sudoku-2.png" alt="boxes" /> <p><img src="images/sudoku-2.png" class="center-img" /></p>
<figcaption aria-hidden="true">boxes</figcaption>
</figure>
<p>Reload that and… right div’s auto linebreak after them.</p> <p>Reload that and… right div’s auto linebreak after them.</p>
<p>I think we can “float: left” these bad boys and…</p> <p>I think we can “float: left” these bad boys and…</p>
<figure> <p><img src="images/sudoku-3.png" class="center-img" /></p>
<img src="images/sudoku-3.png" alt="boxes2" />
<figcaption aria-hidden="true">boxes2</figcaption>
</figure>
<p>Right, now I’m pretty sure the boxes are 210 + 4 pixels wide <p>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 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 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 were 10 not 9 boxes in the screenshot with the 2 columns. That
became even more obvious in the full grid.</p> became even more obvious in the full grid.</p>
<figure> <figure>
<img src="images/sudoku-4.png" alt="boxes3" /> <img src="images/sudoku-4.png" class="center-img"
<figcaption aria-hidden="true">boxes3</figcaption> alt="Off by one errors…" />
<figcaption aria-hidden="true">Off by one errors…</figcaption>
</figure> </figure>
<p>Ok now we can just recreate all of this with the cells and should <p>Ok now we can just recreate all of this with the cells and should
be good to go right?</p> be good to go right?</p>
@ -100,27 +99,26 @@
800px wide container. (Again just use flexbox).</p> 800px wide container. (Again just use flexbox).</p>
<p>Finally this works!</p> <p>Finally this works!</p>
<figure> <figure>
<img src="images/sudoku-5.png" alt="grid" /> <img src="images/sudoku-5.png" class="center-img"
<figcaption aria-hidden="true">grid</figcaption> alt="We have a grid!" />
<figcaption aria-hidden="true">We have a grid!</figcaption>
</figure> </figure>
<h2 id="displaying-a-puzzle">Displaying a puzzle</h2> <h2 id="displaying-a-puzzle">Displaying a puzzle</h2>
<p>Next up is to actually get some numbers in this bad boy. Now this <p>Next up is to actually get some numbers in this bad boy. Now this
is where I relent and use flexboxes because <a is where I relent and use flexboxes because <a
href="https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div/13515693">this</a> href="https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div/13515693">this</a>
StackOverflow answer convinced me.</p> StackOverflow answer convinced me.</p>
<pre><code>.cell { <div class="sourceCode" id="cb4"><pre
... class="sourceCode css"><code class="sourceCode css"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="fu">.cell</span> {</span>
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">...</span></span>
font-size: 40px; <span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a></span>
font-weight: bold; <span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a> <span class="kw">font-size</span>: <span class="dv">40</span><span class="dt">px</span><span class="op">;</span></span>
display: flex; <span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a> <span class="kw">font-weight</span>: <span class="dv">bold</span><span class="op">;</span></span>
align-items: center; <span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a> <span class="kw">display</span>: <span class="dv">flex</span><span class="op">;</span></span>
justify-content: center; <span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a> <span class="kw">align-items</span>: <span class="dv">center</span><span class="op">;</span></span>
}</code></pre> <span id="cb4-8"><a href="#cb4-8" aria-hidden="true" tabindex="-1"></a> <span class="kw">justify-content</span>: <span class="dv">center</span><span class="op">;</span></span>
<figure> <span id="cb4-9"><a href="#cb4-9" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<img src="images/sudoku-6.png" alt="cell number" /> <p><img src="images/sudoku-6.png" class="center-img" /></p>
<figcaption aria-hidden="true">cell number</figcaption>
</figure>
<h3 id="taking-the-puzzle-from-the-url">Taking the puzzle from the <h3 id="taking-the-puzzle-from-the-url">Taking the puzzle from the
URL</h3> URL</h3>
<p>Now to make it so I can get the page to display any puzzle I want <p>Now to make it so I can get the page to display any puzzle I want
@ -130,32 +128,34 @@
<p>I’ll can just get all of the cells by class name and iterate over <p>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 them in the same order as the puzzle string and it will display
relatively easily.</p> relatively easily.</p>
<pre><code>window.onload = (event) =&gt; { <div class="sourceCode" id="cb5"><pre
var params = new URLSearchParams(window.location.search); class="sourceCode js"><code class="sourceCode javascript"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="bu">window</span><span class="op">.</span><span class="at">onload</span> <span class="op">=</span> (<span class="bu">event</span>) <span class="kw">=&gt;</span> {</span>
var puzzle = params.get(&quot;p&quot;); <span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> params <span class="op">=</span> <span class="kw">new</span> <span class="fu">URLSearchParams</span>(<span class="bu">window</span><span class="op">.</span><span class="at">location</span><span class="op">.</span><span class="at">search</span>)<span class="op">;</span></span>
if (puzzle === null) { <span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> puzzle <span class="op">=</span> params<span class="op">.</span><span class="fu">get</span>(<span class="st">&quot;p&quot;</span>)<span class="op">;</span></span>
return; <span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (puzzle <span class="op">===</span> <span class="kw">null</span>) {</span>
} <span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span><span class="op">;</span></span>
if (puzzle.length != 81) { <span id="cb5-6"><a href="#cb5-6" aria-hidden="true" tabindex="-1"></a> }</span>
console.log(&quot;Failure: puzzle url len is &quot; + puzzle.length); <span id="cb5-7"><a href="#cb5-7" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (puzzle<span class="op">.</span><span class="at">length</span> <span class="op">!=</span> <span class="dv">81</span>) {</span>
return; <span id="cb5-8"><a href="#cb5-8" aria-hidden="true" tabindex="-1"></a> <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(<span class="st">&quot;Failure: puzzle url len is &quot;</span> <span class="op">+</span> puzzle<span class="op">.</span><span class="at">length</span>)<span class="op">;</span></span>
} <span id="cb5-9"><a href="#cb5-9" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span><span class="op">;</span></span>
var cells = document.getElementsByClassName(&quot;cell&quot;); <span id="cb5-10"><a href="#cb5-10" aria-hidden="true" tabindex="-1"></a> }</span>
if (cells.length != 81) { <span id="cb5-11"><a href="#cb5-11" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> cells <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">getElementsByClassName</span>(<span class="st">&quot;cell&quot;</span>)<span class="op">;</span></span>
console.log(&quot;Failure: wrong number of cells: &quot; + cells.length); <span id="cb5-12"><a href="#cb5-12" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (cells<span class="op">.</span><span class="at">length</span> <span class="op">!=</span> <span class="dv">81</span>) {</span>
return; <span id="cb5-13"><a href="#cb5-13" aria-hidden="true" tabindex="-1"></a> <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(<span class="st">&quot;Failure: wrong number of cells: &quot;</span> <span class="op">+</span> cells<span class="op">.</span><span class="at">length</span>)<span class="op">;</span></span>
} <span id="cb5-14"><a href="#cb5-14" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span><span class="op">;</span></span>
<span id="cb5-15"><a href="#cb5-15" aria-hidden="true" tabindex="-1"></a> }</span>
for (i = 0; i &lt; 81; i++) { <span id="cb5-16"><a href="#cb5-16" aria-hidden="true" tabindex="-1"></a></span>
if (puzzle[i] != &#39;.&#39;) { <span id="cb5-17"><a href="#cb5-17" aria-hidden="true" tabindex="-1"></a> <span class="cf">for</span> (i <span class="op">=</span> <span class="dv">0</span><span class="op">;</span> i <span class="op">&lt;</span> <span class="dv">81</span><span class="op">;</span> i<span class="op">++</span>) {</span>
cells[i].innerText = puzzle[i] <span id="cb5-18"><a href="#cb5-18" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (puzzle[i] <span class="op">!=</span> <span class="st">&#39;.&#39;</span>) {</span>
} <span id="cb5-19"><a href="#cb5-19" aria-hidden="true" tabindex="-1"></a> cells[i]<span class="op">.</span><span class="at">innerText</span> <span class="op">=</span> puzzle[i]</span>
} <span id="cb5-20"><a href="#cb5-20" aria-hidden="true" tabindex="-1"></a> }</span>
}</code></pre> <span id="cb5-21"><a href="#cb5-21" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb5-22"><a href="#cb5-22" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<p>And hooray it works super well!</p> <p>And hooray it works super well!</p>
<figure> <figure>
<img src="images/sudoku-7.png" alt="bad puzzles" /> <img src="images/sudoku-7.png" class="center-img"
<figcaption aria-hidden="true">bad puzzles</figcaption> alt="This isn’t quite right." />
<figcaption aria-hidden="true">This isn’t quite right.</figcaption>
</figure> </figure>
<p>Oh wait… I didn’t think about the fact that the elements in the <p>Oh wait… I didn’t think about the fact that the elements in the
HTMLCollection from the document.getElementsByClassName call 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 each cell an id from 1-81 and insert those manually. I’m sure there
is a better way but hey this works.</p> is a better way but hey this works.</p>
<p>Then with a quick update to the code.</p> <p>Then with a quick update to the code.</p>
<pre><code>for (i = 0; i &lt; 81; i++) { <div class="sourceCode" id="cb6"><pre
if (puzzle[i] != &#39;.&#39;) { class="sourceCode js"><code class="sourceCode javascript"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="cf">for</span> (i <span class="op">=</span> <span class="dv">0</span><span class="op">;</span> i <span class="op">&lt;</span> <span class="dv">81</span><span class="op">;</span> i<span class="op">++</span>) {</span>
document.getElementById(i+1).innerText = puzzle[i] <span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (puzzle[i] <span class="op">!=</span> <span class="st">&#39;.&#39;</span>) {</span>
} <span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a> <span class="bu">document</span><span class="op">.</span><span class="fu">getElementById</span>(i<span class="op">+</span><span class="dv">1</span>)<span class="op">.</span><span class="at">innerText</span> <span class="op">=</span> puzzle[i]</span>
}</code></pre> <span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb6-5"><a href="#cb6-5" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<p>It works!</p> <p>It works!</p>
<figure> <figure>
<img src="images/sudoku-8.png" alt="good puzzle" /> <img src="images/sudoku-8.png" class="center-img"
<figcaption aria-hidden="true">good puzzle</figcaption> alt="We have a puzzle!" />
<figcaption aria-hidden="true">We have a puzzle!</figcaption>
</figure> </figure>
<p>Still some goofiness like the border on the outside being thinner <p>Still some goofiness like the border on the outside being thinner
than the interiors but I’m pretty happy with this for now.</p> than the interiors but I’m pretty happy with this for now.</p>
@ -184,21 +186,19 @@
see which pencil marks it has. These could be styled nicely but for 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 now I just went with a span inside the cell div with the following
style.</p> style.</p>
<pre><code>.cell &gt; span { <div class="sourceCode" id="cb7"><pre
font-size: 10px; class="sourceCode css"><code class="sourceCode css"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="fu">.cell</span> <span class="op">&gt;</span> span {</span>
font-weight: normal; <span id="cb7-2"><a href="#cb7-2" aria-hidden="true" tabindex="-1"></a> <span class="kw">font-size</span>: <span class="dv">10</span><span class="dt">px</span><span class="op">;</span></span>
text-align: center; <span id="cb7-3"><a href="#cb7-3" aria-hidden="true" tabindex="-1"></a> <span class="kw">font-weight</span>: <span class="dv">normal</span><span class="op">;</span></span>
letter-spacing: 6px; <span id="cb7-4"><a href="#cb7-4" aria-hidden="true" tabindex="-1"></a> <span class="kw">text-align</span>: <span class="dv">center</span><span class="op">;</span></span>
word-wrap: anywhere; <span id="cb7-5"><a href="#cb7-5" aria-hidden="true" tabindex="-1"></a> <span class="kw">letter-spacing</span>: <span class="dv">6</span><span class="dt">px</span><span class="op">;</span></span>
}</code></pre> <span id="cb7-6"><a href="#cb7-6" aria-hidden="true" tabindex="-1"></a> <span class="kw">word-wrap</span>: anywhere<span class="op">;</span></span>
<span id="cb7-7"><a href="#cb7-7" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
<p>The letter-spacing and wordwrap attributes let us just jam all of <p>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 the pencil marks in as a single string and let the browser break
them up into multiple lines for us.</p> them up into multiple lines for us.</p>
<p>This comes out quite nicely:</p> <p>This comes out quite nicely:</p>
<figure> <p><img src="images/sudoku-9.png" class="center-img" /></p>
<img src="images/sudoku-9.png" alt="pencil marks" />
<figcaption aria-hidden="true">pencil marks</figcaption>
</figure>
<h3 id="reading-the-pencil-marks-from-the-url">Reading the pencil <h3 id="reading-the-pencil-marks-from-the-url">Reading the pencil
marks from the url</h3> marks from the url</h3>
<p>For this url trick we will add the pencil marks using a comma <p>For this url trick we will add the pencil marks using a comma
@ -206,32 +206,30 @@
<p>123,,,,456,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,</p> <p>123,,,,456,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,</p>
<p>Using the string above we can use the following javascript code <p>Using the string above we can use the following javascript code
to parse and insert them:</p> to parse and insert them:</p>
<pre><code> var marks_param = params.get(&quot;m&quot;); <div class="sourceCode" id="cb8"><pre
if (marks_param === null) { class="sourceCode js"><code class="sourceCode javascript"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> marks_param <span class="op">=</span> params<span class="op">.</span><span class="fu">get</span>(<span class="st">&quot;m&quot;</span>)<span class="op">;</span></span>
return; <span id="cb8-2"><a href="#cb8-2" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (marks_param <span class="op">===</span> <span class="kw">null</span>) {</span>
} <span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span><span class="op">;</span></span>
var marks = marks_param.split(&quot;,&quot;); <span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb8-5"><a href="#cb8-5" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> marks <span class="op">=</span> marks_param<span class="op">.</span><span class="fu">split</span>(<span class="st">&quot;,&quot;</span>)<span class="op">;</span></span>
if (marks.length != 81) { <span id="cb8-6"><a href="#cb8-6" aria-hidden="true" tabindex="-1"></a></span>
console.log(&quot;Failure: marks url len is &quot; + marks.length); <span id="cb8-7"><a href="#cb8-7" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (marks<span class="op">.</span><span class="at">length</span> <span class="op">!=</span> <span class="dv">81</span>) {</span>
return; <span id="cb8-8"><a href="#cb8-8" aria-hidden="true" tabindex="-1"></a> <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(<span class="st">&quot;Failure: marks url len is &quot;</span> <span class="op">+</span> marks<span class="op">.</span><span class="at">length</span>)<span class="op">;</span></span>
} <span id="cb8-9"><a href="#cb8-9" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span><span class="op">;</span></span>
<span id="cb8-10"><a href="#cb8-10" aria-hidden="true" tabindex="-1"></a> }</span>
for (i = 0; i &lt; 81; i++) { <span id="cb8-11"><a href="#cb8-11" aria-hidden="true" tabindex="-1"></a></span>
if (marks[i].length &gt; 0) { <span id="cb8-12"><a href="#cb8-12" aria-hidden="true" tabindex="-1"></a> <span class="cf">for</span> (i <span class="op">=</span> <span class="dv">0</span><span class="op">;</span> i <span class="op">&lt;</span> <span class="dv">81</span><span class="op">;</span> i<span class="op">++</span>) {</span>
var cell = document.getElementById(i+1); <span id="cb8-13"><a href="#cb8-13" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (marks[i]<span class="op">.</span><span class="at">length</span> <span class="op">&gt;</span> <span class="dv">0</span>) {</span>
if (cell.innerHTML.trim().length &gt; 0) { <span id="cb8-14"><a href="#cb8-14" aria-hidden="true" tabindex="-1"></a> <span class="kw">var</span> cell <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">getElementById</span>(i<span class="op">+</span><span class="dv">1</span>)<span class="op">;</span></span>
console.log(&quot;Pencil marks in cell with number: &quot; + (i+1)); <span id="cb8-15"><a href="#cb8-15" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (cell<span class="op">.</span><span class="at">innerHTML</span><span class="op">.</span><span class="fu">trim</span>()<span class="op">.</span><span class="at">length</span> <span class="op">&gt;</span> <span class="dv">0</span>) {</span>
} else { <span id="cb8-16"><a href="#cb8-16" aria-hidden="true" tabindex="-1"></a> <span class="bu">console</span><span class="op">.</span><span class="fu">log</span>(<span class="st">&quot;Pencil marks in cell with number: &quot;</span> <span class="op">+</span> (i<span class="op">+</span><span class="dv">1</span>))<span class="op">;</span></span>
cell.innerHTML = &quot;&lt;span&gt;&quot; + marks[i] + &quot;&lt;/span&gt;&quot;; <span id="cb8-17"><a href="#cb8-17" aria-hidden="true" tabindex="-1"></a> } <span class="cf">else</span> {</span>
} <span id="cb8-18"><a href="#cb8-18" aria-hidden="true" tabindex="-1"></a> cell<span class="op">.</span><span class="at">innerHTML</span> <span class="op">=</span> <span class="st">&quot;&lt;span&gt;&quot;</span> <span class="op">+</span> marks[i] <span class="op">+</span> <span class="st">&quot;&lt;/span&gt;&quot;</span><span class="op">;</span></span>
} <span id="cb8-19"><a href="#cb8-19" aria-hidden="true" tabindex="-1"></a> }</span>
}</code></pre> <span id="cb8-20"><a href="#cb8-20" aria-hidden="true" tabindex="-1"></a> }</span>
<span id="cb8-21"><a href="#cb8-21" aria-hidden="true" tabindex="-1"></a> }</span></code></pre></div>
<p>Which also comes out nicely:</p> <p>Which also comes out nicely:</p>
<figure> <p><img src="images/sudoku-10.png" class="center-img" /></p>
<img src="images/sudoku-10.png" alt="full puzzle" />
<figcaption aria-hidden="true">full puzzle</figcaption>
</figure>
</div> </div>
</body> </body>
</html> </html>

19
public/css/styles.css
View File

@ -7,3 +7,22 @@ body {
margin: auto; 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;
}