Learning Ruby

Reference, Mnemonic & Ramblings

Developing Web-based BlackJack

So, i am finally done developing the web-version of the BlackJack game! Like i mentioned in the previous post, it was suggested in the TeaLeaf course to use procedural programming to keep it simple and focused on web application development learning!

Quoted below are the reasons for two major simplifications adopted in this first web-app development exercise -

Why procedural programming instead of OOP:

We chose to not use OOP to manage our code. We've seen that many people get stuck on OOP and can't move forward, and we want people to focus on web development and primary, HTTP in this lesson.

Why simpler session-based persistence (cookies) instead of databases:

We chose to not include databases in this section, and instead chose to use the session, which is cookie-backed, for cheap persistence. Again, the reason is because many people get stuck on database concepts, which are important, but we want to direct focus on dealing with HTTP.

Relational database will be introduced and used in the subsequent TeaLeaf courses.

Sinatra Files/Folder Structure for My App:

  • main.rb: the main Ruby file with handlers for the HTTP requests
  • config.ru: Sinatra settings and launcher file
    • use rackup -p ABCD to initiate a local WeBrick server @ port ABCD (defaults to 9292)
  • public
  • views
    • layout.erb: default (but customizable) erb layout to encompass the other erb templates in
    • other erb templates (use , :layout false while rendering to avoid embedding these in the layout.erb)

Thumb Rules Followed:

  • /GET requests generally render '.erb' (Embedded Ruby HTML templates)
  • /POST requests generally redirect to another request (typically a \GET request handler)

Salient Features:

  • Empty string or blank spaces not allowed as player name
  • Initial chip-count or bet cannot be empty/blank, non-numeric, or > remaining chips
  • Auto adjusts bet amount if set > remaining chips and warns player accordingly
  • Using the session hash the app remembers the following:
    • last player's name
    • previous bet amount
  • Tracks and displays chip-count on the round, and betting pages
  • Player wins - message in green
  • Player loses - message in red
  • Game pushes (ties) - message in blue
  • "AJAXified" the Hit, Stay and Dealer Next Card buttons - avoids reloading the entire page

Key Takeaways:

  • the difference between client side vs server side code
  • what the DOM means and how to use jQuery to manipulate it
  • unobtrusive JavaScript, and AJAX: when, and how, to use them
  • dealing with re-binding issues when the DOM changes (the green highlighted lines are preferred over the red highlighted ones in the AJAX code below) 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    $(document).ready(function() {

- $('#hit_form input').click(function() {
+ $(document).on('click', '#hit_form input', function() {

    $.ajax({
      type: 'POST',
      url: '/round/player/hit'
    }).done(function(msg) {

-     $('#game_area').html(msg);
+     $('#game_area').replaceWith(msg);

    });
    // prevent from further execution of the route
    return false; // or event.preventDefault();
  });
});

Other Notes:

  • The equivalent of ShotGun gem for Windows is the Sinatra/Reloader gem. Both enable on the fly changes to the code; i.e. the local server instance need not be restarted to see the changes made to the code, a simple page refresh is enough once the changes are saved. 
    1
2
3

    if RUBY_PLATFORM.downcase.include?('w32')
  require 'sinatra/reloader'
end

comments powered by Disqus