Sudoku – added another reduction algorithm

Posted on by
Reply

Simple Reduction – Filters the list of possible values based on the existing values on the board.  So if a number exists in the box’s row, column, or group; remove that number from the list of possible values for the box. (complete)

Advance Reduction – Filters the list of possible values based on the possible list of values.  This will have two parts:

  1. If a certain box has a possible value of #, and no other boxes in it’s row, column, or group can have a value of #, then that box’s value is #. (complete)
  2. If a box has a possible value of (#1, #2), and another box in it’s row, column, or group has a possible value of (#1, #2), then all other boxes in that row, column, or group cannot have either value #1 nor #2. (incomplete)

I have also removed HTML 5′s Local Storage usage from the program in order to make the mobile version more compatible with android based phones.  All of the fade in/out effects have also been removed; this was done so to speed up the UI for mobile (still too sluggish though).

Mobile CSS Styles

Posted on by
Reply

Ran into a few unexpected rendering issues when creating a mobile site.

  1. My host does not do sub-domains the way I expected them to.  mobile.rickcoder.com creates a new page with an iframe that points to my actual pages; this made all the header attributes that were designed for mobile to be thrown out.
  2. HTML 5 doctype adds default padding to a few elements, especially when those elements are display: inline-block.
The updated mobile sudoku renders much better now.

I also changed the layout for the mobile sudoku to fit inside an iPhone screen without scrolling.  The configuration settings were moved into a popup panel instead of taking up static space.

The game itself was also updated for the mobile version.  The default settings are now using no reduction algorithm, and the difficulty level is set to easy.

Right now, there are 3 versions of sudoku: stand alone, embedded, and mobile.  Ideally, they would all share the same javascript file and HTML file, but that is not things ended up:

  • I was still able to use1 javascript file for all 3 versions; this was simple to accomplish since the behavior of the game is always the same
  • I had to use 2 CSS files: one for the mobile version, which is expected, and another for the stand alone and embedded version
  • The part that was annoying was having to use 3 different HTML files – the stand alone and embedded version can share the same file if I used frames, but that was something I wanted to avoid. The WordPress version is a PHP file, since I wanted it to inherit the theme of this site.  The mobile version uses DIV elements to represent pages, so I had to pull out the contents and put them into a DIV.  There is a work around for both of these situations, but I was drunk when I put up the mobile site, so the extra coding was not going to happen.

Going Mobile

Posted on by
Reply

I noticed that Sudoku works fairly well on a mobile platform after I opened it on an iPhone.  I wanted to take it a step further and customize the layout, so I created a mobile version for some of the apps.

Initially, I updated the backbone.js files* to make Sudoku render more appropriately for the mobile platform.  Halfway through the process, I realized that it was silly since style sheets were created for this very reason.  After a few tweaks; I was able to get the mobile version to render the appropriately.

* The Views in backbone.js is designed to render a model within an ‘element’.  It is simple to specify what that element is, as well as add classes to that element; but if you wanted to add classes conditionally, you would have to either do it at the bind moment during the template rendering level, or attach the classes after it has been rendered.

The problem with doing it during the template rendering phase is that you will not be able to attach classes directly to the containing div.  This is normally not an issue, but it is if you want jQuery Mobile to render grid elements.  In the end, I went with a fixed layout designed for mobile apps.

Sudoku Solver

Posted on by
Reply

There is no escaping the need to fully understand scope and closures when dealing with JavaScript.

Most of the bumps that came along the way were caused by scoping issues with the variables.The objects in JavaScript are usually references; so passing them through a function, especially when done so w/i a loop, can have some unexpected results. This was very apparent when I was passing each group of numbers, from the Sudoku puzzle, to a reducing function.

The rest of the program was very straight forward; I borrowed heavily from the previous program for the aesthetics and core components:

  • 81 boxes for the grid (model: Box)
  • 1 board to hold the boxes (collection: BoxList)
  • 27 groups to hold the vertical rows, horizontal rows, and sections (collection: Group); these groups will be used to validate the input
  • Currently, it has one algorithm used to figure out the value of the box: remove all the numbers that exist in the vertical, horizontal, and section groups from the current box’s list of possible values.  If the possible value is only 1 number, then set the value and reduce again.

Updated Sudoku: You can now load a puzzle from Web Sudoku.

 

Sample backbone.js program tweaked

Posted on by
Reply

Memory has been updated with a few jQuery animations, some updates to .map() to let it run on older browsers, and a tweak to the default reply form from WordPress.

I wanted the cards to slide in, one by one, instead of just instantly appearing. To make an element fade in with jQuery, I used .fadeIn(delay), but to have the effect cascade from one element to the next, I had to use recursion and pass the next element into the callback part of the fade in function: .fadeIn(delay, nextElement).

Underscore.js (included in backbone.js) has a .map() function, as well as jQuery. In newer browsers, the object calling .map() knows works out the conflict and can determine which library should process it, but for for older browsers, you have to remove this ambiguity: {array}.map(fnc) was changed to _.map({array},fnc)

The reply form for this theme took up a lot of real estate, so I collapsed the $('#commentform').hide() and made it $('#commentform').slideDown() when the user $('#respond').hover() over it. I also used a setTimeout() delay to collapse the form again when the user mouses out; the delay prevents the form from collapsing unintentionally.

Customizing Page Templates

Posted on by
Reply

I am trying to get a one of my pages to render with the current WordPress theme, but I also want to add my own <head> tags so that I can include links to jQuery / backbone / etc…

Ideally, I should be able to create a template, or a widget(?), that allows me to create my page through the Dashboard. The Dashboard would also have an extra space for me to insert <head>er information.

This template-hierarchy chart may be useful.

Update 1: Creating a custom template

Setting up a new template is very easy. It may be preferable to create multiple templates with header information already included in the templates, but this approach would not be ideal for coders; for now, I will just go with this approach.

Themes in WordPress goes beyond aesthetics and touches more on “presentation.” Each page can be created with a specific template; to add your own template, you can just go into the “/wp-content/themes/{current theme}” folder and create a file called “{template-name}-page.php”. The name of the file is not important, as long as the “Template Name: ” is specified in the comments. To speed things up, just copy an existing template and modify it accordingly.

Update 2: Proper way to include javascript files

It is better to register your javascript files and then include them by their registered name. This prevents duplicates and conflicts down the line. Useful.

Conclusion: Memory program is now using a template

I ended up creating a template called page-memory.php, and WordPress automatically links that to my Memory page since the ‘slug’ (e.g. memory) matches it. Inside page-memory.php, I called the get_header(‘memory’) and created a header-memory.php with all the necessary headers (didn’t register them properly since it was not needed for this case)