A logic based, combinatorial number-placement puzzle.
- Developer: Marc Whitbread
- Developer URL: http://marcwhitbread.com/
- Project URLs:
To develop a mobile first, responsive, and exclusively touch/mouse driven experience to avoid the keyboard entirely. This was achieved by removing the input field for populating a cells value and adding an option grid in stead. In addition, this would provide the user with the option to store more than one value in a tile more intuitively. Multiple selected options is also a very realistic scenario when working out a Sudoku puzzle.
The decision to add a large object hierarchy (Board > Region > Tile > Option) at the outset of the project was to mitigate any risk of inflexibility in any additions to functionality at each of the levels that arose beyond the foresight of the initial functional design.
A single controller is required to construct the board object and apply to the scope on DOM ready.
Object responsible for maintaining state of completion, loading, timing and 9 region objects.
Contains 9 tile objects.
Trade off: Separating tiles into region objects adds unnecessary complexity to the application but leaves a few pros:
- scalability to return to the code later and add functions applicable at the region level easily
- reduce calculations related to validation of regional tiles
Supplied with answers and defaults. Object responsible for maintaining state of validity, display, guesses and 9 option objects
Object responsible for selected state. This object is not necessarily required but if expanding state of validity to an option itself as opposed to the tile, the option object would be able to handle it.
Test specifically stated that frameworks were not to be used. Time constrains, AngularJS model-view 2-way binding reduced testing time surrounding events and kicking back classes to the DOM to update state.
Generating puzzles with a specific number of tiles and adding a difficulty option.
Maintaining state in the browser beyond a page refresh.
Use of templating engine like handlebars
To time how quickly the player can finish the puzzle.
To allow the user to restart the puzzle.
To optionally allow the user instant feedback from the board if has any values conflicting with any other tile in it's region, row, or column.
Employed the use of viewport units for a seamless experience across supported devices.
Automated LESS compilation, JS concatenation and minification.
Original implementation used AngularJS, converted to jQuery based on requirements. Framework leveraged solely for 2 way model-view binding to reduce testing time that would have been impacted UI updates with jQuery.
jQuery objects selected and HTML templates and stored in models for updating back to the view.
Simplify and organize CSS code. Mixins used to simplify cross-browser prefix specific CSS attributes (transform, border-radius, transition).
External storage and data model of default puzzle.
Trade off:
- Separating data from metadata for scalability by simplifying data source replacement
- Deduces initial page load time by offloading until game start
Font based icons to expedite UI development.