Nuno Silva

Getting an html element Attribute

To do this i use mootools, a very fast and handy JavaScript framework.

Imagine that you got an element as following:

<img id="image" src="..." aaa="true" />

To get the value attribute “aaa” using mootools you only need to do the following:

$("image").getAttribute("aaa");

This solution will work in all browsers.

Ajax Requests and Mootools

A simple ajax request using Mootools:

new Ajax('Ajax.aspx', {
	method: 'get',
	update: $('updateElement')
}).request();

All worked fine in Firefox and Opera. But in IE didn’t. The request simply wasn’t being made. Why?

Well, it seems that IE makes cache of the request. To avoid this feature, you only need to change the code above into the following:

var ajax = new Ajax('Ajax.aspx', {
	method: 'get',
	update: $('updateElement')
});

if (window.ie) {
	ajax.setHeader('If-Modified-Since', 'Sat, 1 Jan 2000 00:00:00 GMT');
}
ajax.request();

“The If-Modified-Since request-header field is used with the GET method to make it conditional: if the requested resource has not been modified since the time specified in this field, a copy of the resource will not be returned from the server; instead, a 304 (not modified) response will be returned without any Entity-Body.”
source: http://www.freesoft.org/CIE/RFC/1945/58.htm

Because the content has been modified since the date passed, the request will be made to the server in order to get a fresh copy of the page.

Other solution could be adding a time stamp to the request, example:add a query string attribute with the current date.

50 games in one Semester?

Yeah, it’s true. The creators of “Tower of Goo” created more than 50 games in one semester. An there were only 3 rules:

1. Each game must be made in less than seven days
2. Each game must be made by exactly one person
3. Each game must be based around a common theme i.e. “gravity”, “vegetation”, “swarms”, etc.

This is what I call Extreme Game Design (and programming)!

Here is the article that explains this experiment: www.gamasutra.com

You can also see the website of this experiment at www.experimentalgameplay.com

reCaptcha - Part 2

In this second part, i will show how to make an ASP.NET Validation control that uses the reCaptcha framework.

I named this control ReCaptchaValidator. This validator extends the abstract class BaseValidator. And so soon we arrived to the first point.

ReCaptchaValidator could implement the interface IValidator, but he would lose a functionality that is very useful. the property ValidationGroup. This property allows you to tell the validator that he will only make the validation when an input with the same validation group makes a post back.

Example

<asp:Button ValidationGroup="test" runat="server"/>

When the above control makes a post back to the server, only the controls in the validation group named “test” will be called.

So, the ReCaptchaValidater extends BaseValidator. Starting explanation, all the action will occur in the EvaluateIsValid, a method inherited from BaseValidator:

protected override bool EvaluateIsValid() {
     string parameters = ReCaptchaParameters();

     string result = ValidateCaptcha(parameters);
     bool isValid = result.Equals("true\nsuccess");

     if( !isValid ) {
          ErrorMessage = "Your are not a human!";
          Controls.Add( new LiteralControl(ErrorMessage));
     }
     return isValid;
}

This method will call the private method ReCaptchaParameters that will return all the parameters needed to make the Web Request to the reCaptcha url. This Web Request will be made by the method ValidateCaptcha to which the parameters are passed. (ReCaptchaParameters and ValidateCaptcha are defined below)

Then the result of the Web Request is validated. If the result is different from the string “true\nsuccess”, then the user didn’t inserted the captcha correctly (or a BOT is trying to register in your site).

/// <summary>
/// Gathers the parameters for reCaptchaValidator
/// </summary>
/// <returns></returns>
private static string ReCaptchaParameters() {
     string response = GetFormValue("recaptcha_response_field");
     string challenge = GetFormValue("recaptcha_challenge_field");
     string IP = HttpContext.Current.Request.UserHostName;

     StringBuilder builder = new StringBuilder();

     builder.AppendFormat( "privatekey={0}&", PrivateKey );
     builder.AppendFormat( "remoteip={0}&", IP );
     builder.AppendFormat( "challenge={0}&", challenge );
     builder.AppendFormat( "response={0}", response );

     return builder.ToString();
}

/// <summary>
/// Validates the capcha inserted by the user
/// </summary>
/// <param name="parameters">parameters to verify</param>
/// <returns>response of the capcth</returns>
private static string ValidateCaptcha( string parameters ) {
     try {
          WebRequest request =
          WebRequest.Create( "http://api-verify.recaptcha.net/verify" );

          request.ContentType = "application/x-www-form-urlenpred";
          request.Method = "POST";

          StreamWriter writer =
          new StreamWriter( request.GetRequestStream() );
          writer.Write( parameters );
          writer.Close();

          //Response
          HttpWebResponse webResponse =
          (HttpWebResponse)request.GetResponse();
          StreamReader myReader =
          new StreamReader( webResponse.GetResponseStream() );

          string response = myReader.ReadToEnd();

          myReader.Close();
          webResponse.Close();

          return response;
     }catch( WebException ) {
          //Do Some Exception threatment
          return string.Empty;
     }
}

In the Render method we will render all the code necessary to show the reCaptcha validator:

/// <summary>
/// Writes the javascript to show the validation Captcha
/// </summary>
/// <param name="writer"></param>
protected override void Render(HtmlTextWriter writer) {
     writer.Write(
     @"
     <script>
     var RecaptchaOptions = {{theme : 'blackglass', tabindex : 2}};
     </script>
     <script type='text/javascript'
	 src='http://api.recaptcha.net/challenge?k={0}'&
	 gt;</script>
     <noscript>
     <iframe src='http://api.recaptcha.net/noscript?k={0}'
	 height='300' width='500'
	 frameborder='0'></iframe><br/>
     <textarea name='recaptcha_challenge_field' rows='3'
	 cols='40'></textarea>
     <input type='hidden' name='recaptcha_response_field'
	 value='manual_challenge'>
     </noscript>", PublicKey );

     dummy.Visible = false;

     base.Render(writer);
}

Noticed the dummy.Visible = false in the render? This is the second point i wanted to talk about. The validators that inherit from BaseValidator were made to validate other controls. In this case, we don’t want to validate any asp.net control. The control we want to validate is provided by a third party code (all the javascript in the render method).

Because of this fact, the validator has an hack. A TextBox with the name “dummy” is created and it’s ID is passed to the property of BaseValidator, ControlToValidate. This way we can surpass the limitation of BaseValidator. Notice that, if this validator didn’t extend BaseValidator, but implemented IValidator, this hack would not be needed.

I made this hack on the event OnInit:

protected override void OnInit(EventArgs e) {
     dummy.ID = "aaa";
     Controls.Add(dummy);
     ControlToValidate = "aaa";

     base.OnInit(e);
}

An that’s it. A free captcha control that you can use in all yout web applications.

For your commodity, the ReCaptchaValidator code is available here (in C#) and here (in VB) (Note: the VB code was created using a converter so it might not be exactly like the C# original file).

reCaptcha - Part 1

What is reCaptcha?

reCaptcha is a Captcha program that can tell the difference between a human and a machine. And Plus, it helps to digitalize books. And how does it do it?

Recapcha uses a 2 word challenge. A first word, that is an already known word, and a second word that comes from a digitalized book. If the user inserts the known word correctly, then the second word is assumed as correct and you helped to translate a digitalize one word.

A more complete explanation can be found here, at reCaptcha official page.

How to use reCaptcha

1. Register in the website. With your registration you will have to give the domain where you intend to use reCaptcha.
2. Then, a private and a public key will be generated (for localhost test proposes, you can use the same keys as in production).
3. Insert the following piece of javascript into your page:

   <script type="text/javascript"
   src="http://api.recaptcha.net/challenge?k=your_public_key">
   </script>
   
   <noscript>
   <iframe src="http://api.recaptcha.net/noscript?k=your_public_key"
   height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
   value="manual_challenge">
   </noscript>

And a box, similar to the one below, will appear.

Then, for this process to work, a request must be made to http://api-verify.recaptcha.net/verify with the right parameters in order to validate the captcha.

The steps to do this are:

1. Insert a submit button and place the above script and that button inside a form.
2. Click on the submit button so all the input fields can be posted into the server.
3. Then make a Web Request to “http://api-verify.recaptcha.net/verify” with the right parameters. These parameters are:
   1. privatekey - the private you already generated
   2. remoteip - the DNS name of the remote client
   3. challenge - the text you wrote in the reCaptcha control. The value of “recaptcha_challenge_field” sent via the form
   4. response - The value of “recaptcha_response_field” sent via the form
4. Verify if the response is correct.

The Web request you make to the above url will retrieve a response separated by a \n. In the first part of the response, the possible values are true or false. If the first part has the value false, then the second part is the error code. You can find the list of error codes here in the section “Error Code Reference”. This page also has all the information you need make your implementation.

In Part 2 of this article i will show how to implement an ASP.NET Validator control that uses this API.

The Beginning of a Game - Game Design

How many of you, developers, once though: I really liked to develop a game.

The answer is simple: Most of you.

But beginning a game requires a lot of work. It requires a good idea that must be worked until exhaustion in order to develop a good starting base. This is the begging of the Game design.

Game design is the most important part of making a game. Is the Design that will define the success of a game. The game can be programmed by the best programmer in the world. That doesn’t mean the game will have success.

So what is game Design? Is a process that defines all the concept, rules, way of work of a game.

So, in the beggining of this phase, a lot of things must be done. The original idea must be polished by all the elements of the team. All the ideas must be putted above the table and discussed. Another thing that also helps a lot is to study similar games. And similar games are not necessarily games of the same type. Means games of the same market:

Example: You want to create a game for the Web, so one of the things you must do is explore all the games you can find (wikipedia is a wonderful starting point) of the same market (Web games in general).

And why? Because the type of game is not what matters. What matters are the concepts.

A good example are the GameForge games. Correct me if i’m wrong but games like Bitefight and DarkPirates aren’t exactly the same? User interface apart , the engine looks exactly the same: a place to shop, things you can buy to upgrade you character(Bitefight)/Ship(DarkPirates), find enemies to attack,etc. These two games are a good examples of similar concepts with different background stories.

If a good study of the market is a essential to start the design of a game, a brainstorm also is.

Only imaging new ideas, discussing them in several different perspectives, sometimes with people outside of the game development area (friends, family) can make your game unique, or at least different enough to attract different kind people to play it.

For example, in the current version of Orion’s Belt, the concept that separates Orion’s Belt for the other web games in the market is the Board game. It’s the “thing” that separates Orion’s Belt from all the other Massive multi Player web games in the web.

Of Course, because all members of team the have grew and news ideas have appeared and, in the last 4 years, we managed to build a good community that is always getting new idea. So, in Orion’s Belt 2 we will have concepts that are new in MMPOG (Browser based) and will make the game even more attractive to new players.

So, the ideas that you need to retain of this post are:

• Choose the subject of the game
• Explore the market for that type of game
• Gather the ideas that you think that are most relevant for your game
• Explore other types of games. All you can think of. There is always a concept, a feature, a new idea that you can use in your game
• Discuss all the ideas that you have with your team, your friends, your family.
• And the gold rule: Sometimes the times what you like is not necessarily what can provide good form of entertainment.

UPDATE: there was a problem with my wordpress and comments were shut down. I already took care of the problem. you can now comment this post

Shuffle a Collection

Shuffle a collection… hum, i must iterate the collection, change the elements from place, bummer… Well, not really.

The only thing you need to do to shuffle a collection is……. a sort.

Explaining: In C#, a Collection like List<t> (where T is the template element) has a method named Sort. Well, this method can receive has a parameter an IComparer<t>, an object that compares 2 other objects of type T.

The object that implement IComparer should look like this:

public class ElementShuffle : IComparer<element> {

	#region Fields

	Random rnd = new Random()

	#region 

	#region IComparer<element> Members

	public int Compare( Element x, Element y ) {
 		if( x.Equals(y)) {
 			return 0;
 		}
	 	return rnd.Next(-1, 1);
 	}

	#endregion

}

In the above class, Element is the type of object of the collection, and ElementShuffle the implementation of IComparer<T>.

When you want to shuffle you collection you just need to call the Sort method:

List<Element> elements = new List<Element>();
...
elements.Sort(new ElementShuffle());

So what you gain by doing this? A much cleaner code, and a very easy way to do a shuffle.

But not the most efficient. Although it’s a clean way to make, like Carlos Rodrigues said in his comment to this post, this way may not be the most efficient. The Fisher-Yates algorithm:

	public static void Shuffle( List elements ) {
		Random rng = new Random();
		int n = elements.Count;
		while( n > 1 ) {
			int k = rng.Next(n);
			–n;
			int temp = elements[n];
			elements[n] = elements[k];
			elements[k] = temp;
		}
	}

Source: Fisher-Yates algorithm - Wikipedia

Is a lot faster. Here are the results:

Time Fisher-Yates algorithm: 220,3168 ms
Time Comparer: 2213,1824 ms

With this post i learned a lesson: Sometimes the most elegant way to resolve a problem, is not the most efficient. It’s always good to check if your algorithm is more or less efficient than a “not so elegant way”.

Master Pages

In the end of 2007, i worked for a big company that still used in their sites asp.net 1.1. In fact, in their main site, the entire middleware is made in C# 1.1 (their site was launch at the beginning of 2008).

For this reason, there must still exist several applications made in ASP.NET 1.1 that will need some maintenance and new developments.

The challenge here is to develop a control that can simulate master pages in asp.net 1.1 similar to the one that exists in asp.net 2.0+. You make the master page using a .ascx control and make a .aspx webform has you would make in asp.net 2.0, meaning:

• In the ascx of the master page you will have something like this:

<asp:placeholder id='placeholder' runat="server"/>

• And in the aspx you will have something like this:

<ctrl:contentplaceholder master="Master.ascx" runat="server">
	YOUR CONTENT
</ctrl:contentplaceholder>

where contentplaceholder is the control described below and master the name of the file of your master page. Has you will see below in the code, you can also omit this field and configure it’s value in the app settings of the web.config:

The code control is simple has below:

public class ContentPlaceholder : Control {	

	private string masterPage;

	public string MasterPage {
            get {
		if( masterPage == null ||
		masterPage == string.Empty ) {
		     return "~/" +
                     ConfigurationSettings.AppSettings["MasterPage"];
		}
		return masterPage;
	     }
	     set { masterPage = value; }
	}

	private void ChangeControls( Control src, Control dst ) {
		while( src.Controls.Count > 0 ){
			Control c = src.Controls[0];
			src.Controls.Remove( c );
			dst.Controls.Add( c );
		}
	}

	private void LoadMaster( Control master ) {
		PlaceHolder contentPlaceholder = (PlaceHolder)
                        master.FindControl( “placeholder” );
		ChangeControls( this, contentPlaceholder );
		ChangeControls( master, this );
	}

	protected override void OnInit(EventArgs e) {
		Control master = Page.LoadControl( MasterPage );
		LoadMaster( master );
	}
}

In Resume, in the OnInit event the controls of the web page are removed from the aspx page, the content of the master page is inserted in the aspx, and the content previously removed is inserted in the placeholder of the master page:

• 1. The OnInit is called. At this point the aspx only has the content inside (the control contentPlaceholder with the content of the page inside).
• 2. The content is removed from the aspx.
• 3. The content of the master page is added into the aspx control tree.
• 4. The original content is inserted inside the placeholder of the master page. This placeholder must have the id = ‘placeholder’ (name hardcoded for the example inside the above control )

I hope this example helps someone that still work with the old framework 1.1. This can be handy in big projects where you have hundreds of aspx to change.

Wrapp a div around other div’s with float

Today i discovered something interesting with div’s.

Imagine that you have the following code:

<div id='mainDiv'>
   <div style='float:left'>Div #1</div>
   <div style='float:right'>Div #2</div>
</div>

And you wanted that the div named “mainDiv” to have a background color. Well in IE7 everything works fine with the xhtml code

above. But in FireFox the “mainDiv” there is an unusual behaviour.

Below is a image that ilustrates what you get in Firefox (on the left) and what you get using IE7 (on the right) with the xhtml code above:

Notice that the main div, in IE7, warps all content, but in Firefox the div remains with a minimum height.

Io solve the problem you could try (has i did) to put a height in the “mainDiv”. Although it worked (for the content that i

had inside the Div), you never know what the the height of the mainDiv is going to be.

The correct solution for the problem must be one that adapts the height the mainDiv to the maximum height of it’s content.

The solution is simple:

<div id='mainDiv'>
   <div style='float:left'>Div #1</div>
   <div style='float:right'>Div #2</div>
   <div style='clear:both'></div>
</div>

Adding the empty div with the style property “clear” set to “both” makes the mainDiv’s height extend to the full height of

it’s childs, making the xhtml generic for all browsers.

(UPDATE)
Due to the several solutions in the comments i will comment there here one by one.

Alternate Solution 1: the clearFix : thank to Joao A.

The solution in in fact very elegant and we only need to add something to your style sheet. The solution objective is to add

the pseudo element :after into that

“mainDiv”:

#mainDiv:after {
	content: ".";
	line-height: 0;
	height: 0;
	visibility: hidden;
	display: block;
	clear: both;
}

The pseudo element objective is to add some content after the element “mainDiv”. So the soluction passes by adding the

content “.”, removing the height of the content, hide that content and finnally clear both side of the div. in fact we are

doing the same has the original soluction without adding the extra div to the markup.

Alternate Solution 2: adding the float:left style to the “mainDiv” element : thanks to Vítor Pires.

This solution is actually very simple:

The solution is simple:

<div id='mainDiv' style='float:left' >
   <div style='float:left'>Div #1</div>
   <div style='float:right'>Div #2</div>
   <div style='clear:both'></div>
</div>

Alternate Solution 3: adding the overflow style to the “mainDiv” element : thanks to Jeff and href=’http://btm.anfo.pl/’ target=’_blank’>BTM.

very simple just like the previous one. Add the overflow style property with the value ‘hidden’ or ‘auto’.

The solution is simple:

<div id='mainDiv' style='overflow:hidden;' >
   <div style='float:left'>Div #1</div>
   <div style='float:right'>Div #2</div>
   <div style='clear:both'></div>
</div>

The only difference bettween the usage of overflow:hidden and overflow:auto is just that if you have a fixed height in the mainDiv, with overflow:hidden, the content will the content that surpasses the size of the div will be hidden, but with overflow:auto a sroll will appear.

The Solution 2 and the solution 3 are actually very good (and simple) to use in specific situation. if you want the content of the mainDiv to appear below it, than use solution 3 (or 1). Otherside, if you want the content to appear side by side with the div, use the float property in the main element.

I’m happy

At the end of my second day of full time development of the new version of Orion’s Belt, there is only one thing that i can say: I’m happy

My part is the battle (here is a shot for you that don’t know what the hell i am talking about). In some few words, the battle is no more than a chess like board game, with 8 different units on each side. Each one of them has it’s own attack, defense, range, special abilities and bonus.

In this 3rd version we decided not to change anything in terms of gameplay. The great optimizations will be in the Battle Core and in the Design. Why you ask? Because we consider that we have a pretty mature game, with a very strategic gameplay that our few (but very addicted) players love.

In the engine and in the design are our flaws.

The Engine is not extensible enough and all the Orion’s Belt Core is going to change. So, this is a good chance to upgrade all the code (meaning rewrite 90% of what we made in the past). Rewriting the code means:

• making the battle independent of everything else. If tomorrow we want to build a stand alone application with all this code, it will be possible (at least more possible than with the current version).
• making futures addictions to the core (like new units, new unit powers, new ultimate weapons) very easy to make. In our current version doing all of this is a synonym of making a lot of spaghetti code. In the new version we will simple extend some classes (one for each feature) and the engine will automatically use them.
• full support for 4 players in a single board.
• support for battles against an AI Agent.
• and much, much more

All of this using .NET 2.0 (the use of generics will boost the Battle Core performance).

The new design will also help a lot. We want to make the battle page one of the most cool pages of the new Orion’s Belt version (never forgetting that this page must be cool and usable at the same time). Must be something that the players see and say: WOOOOOOOO.

And who is the guy that going to make this happen? Marco Vale.

Visit his site: it’s worth the time spent