At Bangkok, there are a number of open soure web framework community for example rubyonrails, seam. At these community, they have demos application powered by the framework. the demo application is Hangman.

I decided to implement Hangman in django. I have a goal to build not just a demo, it should be fun and attractive. Let get its start!

User interactive

The game will send the request using Ajax. The data send black and forth will be format in the JSON format. I will use Jquery for the javascript client library.

Word and category

Word will be stored in the database. Word is grouped as category. When user select category, the client side java script will make a request to server to get the category session variable. Below is a game model.

from django.db import models
from django.utils.translation import ugettext_lazy as _

class Category(models.Model):
    """Category model."""
    title       = models.CharField(_('title'), max_length=100)
    def __unicode__(self):
        return u'%s' % self.title

class Word(models.Model):
    """Word models"""
    word = models.CharField(_('word'), max_length=20)
    categories = models.ForeignKey(Category)

    def __unicode__(self):
        return self.word

class HangManImage(models.Model):
    number = models.IntegerField()
    image_file = models.ImageField(upload_to='hangman/hangman_images', null=True, blank=True)
    image_url = models.URLField(null=True, blank=True)

    def __unicode__(self):
        return 'Hangman photo number %s.'%self.number

    def get_absolute_url(self):
        if self.image_file: return self.image_file.url
        if self.image_url: return self.image_url

As you can see, I also have a image model, to hold the hangman image. This must have 10 items, otherwise, the views will use the default image.

Game state persistence

Persistence of game state, user selected category is implement django session. Whenever user does an action, a request will be sent to the server, state variable will be and update the state and return an appropriate response to player

Server side rendering

When data need to be updated, client will send the parameters to the server, some data back from server is rendered at the server side. For example, see the available character and answer. These html is render at the server side, when client receive the data, it put the data in the correct html div.

Below is server rendering

Word random

The word is queried randomly base on presenting of category state variable. If there is category session variable, the query will used the session to select the word, otherwise, it will randomly select on the whole table. Below is example query,

#get category
category = request.session.get(CATEGORY, '')
#get random word
if category:
    word = Word.objects.filter(categories__title = category).order_by('?')[0].word.lower()
else:
    word = Word.objects.order_by('?')[0].word.lower()

You can try it here. You also can download the code. Below is screen short. Enjoy!