Developing TicToe HTML5/Client-Server communication

Development log of TicToe HTML5

• Why tic tac toe?‎
• Idea and concept
• Core
  • User interface mock
  • Object model
  • Implementing Client Entities
  • Preparing the Server
  • Implementing Server Entities
  • Client-Server communication
  • Implementing the game logic
• Adding Features
  • Login and account creation
  • Hall of fame
  • Avatars and outfits

Manually logging in

With the server side implemented in the last chapter, we can now actually login. We visit http://localhost:8080/index.html in a web browser and open Firebug. There is an input field at the bottom, that allows you to call any defined method and to inspect any object.

First of all, we need to connect to the server. Type this command and wait for the message "connected" in the console log:

• marauroa.clientFramework.connect(null, null);
  • connected

Now we are going to create an account for testing. Please note: The password will be visible since it is just a method parameter. In the finished program there will be an user dialog for the password, with a hidden input field.

• marauroa.clientFramework.createAccount("testuser", "password", "test@example.com");
  • Account "testuser" created successfully.

After logging into that account, the server will send us some information, including a list of all character belonging to our account. The default implementation of marauroa.clientFramework.onAvailableCharacterDetails() is quite smart: It will automatically create a character, if there is none. Furthermore it will automatically pick the first one. This behaviour suites out test just fine, we may redefine it at a later stage, through.

• marauroa.clientFramework.login("testuser", "password");
  • Previous Logins []
  • ServerInfo ["tictoe", "TicToe"]
  • onAvailableCharacterDetails: Object {}
  • Character "testuser" created successfully.
  • onAvailableCharacterDetails: Object { testuser={...}}
  • Entering world

Inspecting the world

Manuel login

If all goes well, the last message will be "Entering world".

The world is empty at this stage, except for an object that represents our client. We can have a look at the world:

• marauroa.currentZone
  • Object { 2=Function, clear=function()}

There is even a short cut that points directly to the object, that represents our client:

• marauroa.me
  • Function { proto=Function, _rpclass="player", id="2", mehr...}

Do you remember that we have defined a draw() method for the player? Lets call it:.

• marauroa.me.draw()

You should now see, the player name printed in white in the top left corner of the content area. Congratulations-