Nuno Silva

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”.

Divs instead of tables

One of the complicated things when we are doing a design is to doing it only using divs and not tables. Some of us always use tables. And why? because it’s simple? Maybe using div’s is not so dificult after all.

First, there are several reasons to use a div layout instead of a table based layout:

• Flexibility: The main reason not to use tables in the main layout of your website is, in my opinion, flexibility. Has you can see in csszengarden, using divs to divide the content, turns the page layout into a flexible layout where you can make almost everything you want without change any html. If you want change the style of your page, you change the css. This is the way it should be made.
• Separation of Concepts: Using a table based layout you are mixing two concepts: Style and Content. Why? Because using a table based layout you only need to write some xhtml (has you will see below).
• Accessibility: Div layouts are more accessibility friendly.
• SEO Optimization: A Div layout is more optimized for search engines crawls.
• Bandwidth: using divs saves bandwidth because you need less xhtml to reach your objective.

I will take has example webgames.zi-yu.com, a website whose design is integrally constituted by divs but, in it’s original form, it was made using a table.

Let´s start with the layout of the page:

As we can see in the image above, there are 4 main areas, each one divided in subareas:

• A: the main title
• B: the left menu
• C: the main content
• D: the footer

Using tables this layout would be very simple to make:

	<table>
		<tr>
			<td rowspan="2">A1</td>
			<td colspan="2">A2</td>
		</tr>
		<tr>
			<td colspan="2">A3</td>
		</tr>
		<tr>
			<td rowspan="2">B1</td>
			<td colspan="2">C1</td>
		</tr>
		<tr>
			<td>C2</td>
			<td>C3</td>
		</tr>
		<tr>
			<td colspan="3">D1</td>
		</tr>
	</table>

With div’s the layout would be even simpler (and more easy to read - in my opinion, semantically correct). Let’s start by the beginning. We have 4 different areas, so we will have 4 different divs:

<div id="allContent">
	<div id="topMenu"></div>
	<div id="leftMenu"></div>
	<div id="mainContent"></div>
	<div id="footer"></div>
</div>

Now that we have the sections defined, let’s take care of the sub sections:

<div id="allContent">
	<div id="topMenu">
		<div id="logo"></div>
		<div id="topMenuUp"></div>
		<div id="topMenuDown"></div>
	</div>
	<div id="leftMenu"></div>
	<div id="mainContent">
		<div id="mainMenu"></div>
		<div id="mainContentLeft"></div>
		<div id="mainContentRight"></div>
	</div>
	<div id="footer"></div>
</div>

At this point all the sections of the page are defined. We only need to apply the css style to adjust it’s position and size. In this style (and in all the styles i make) i always consider a resolution of 1024×768. For this resolution, the maximum size i use is 1000, because of the vertical scroll of the browser. Normally this scroll is hidden but when it appears, the size of the layout is reduced and the horizontal scroll appears (thing that we don’t want).

So, considering the width of the layout 1000 pixels, let’s start with the logo:

#logo {
	width:252px;
	height:110px;
	float:left;
}

#topMenuUp {
	height:20px;
	border:0px;
}

#topMenuDown {
	height:90px;
	padding-left:0px;
	text-align:center;
	border-bottom:solid 1px black;
}

What the css above will do? Normally the 2 divs are positioned by default one below the other. So we will maintain that behavior for the div’s with the id topMenuUp and topMenuDown (only the height of them will be adjusted). Regarding the div with the id logo, we need to align it to the left, so we use float:left to obtain that result.

Next, the main content and the left menu. Generally i use the following stategy: if i have several containers in the same level, i separate them inside larger divs. So, i separated the leftMenu (area B of the picture above) and the div’s in the area C. The div’s in the area C i putted them inside a larger div in order to aligned them all at the same time into the right of the leftMenu div:

#leftMenu {
	width:252px;
	float:left;
	display:block;
}

#mainContent {
	width:745px;
	float:right;
	display:block;
}

Regarding the different sections inside the div mainContent, there is a top section (area C1), that will fill mainContent top, and two other div (areas C2 and C3) that will fill the rest of the div.

So regarding the div mainMenu (area C1), we will apply the following style:

#mainMenu {
	height:48px;
	padding:0;
	margin:0;
	clear:both;
}

The clear:both style is very important. It allows the div mainMenu not to have any content at it’s left or at it’s right. So, if other div (like the ones below) have a float style applied to it, that div will appear below mainMenu div.

Because the div mainMenu has the clear:both applied, the divs mainContentLeft and mainContentRight can be aligned with floats without a problem:

#mainContentLeft {
	float:left;
	width:584px;
}

#mainContentRight {
	float:right;
	width:160px;
}

Finally the footer. To this div i’ll just apply a clear:both style just to guaranty that no other div will overlap it:

#footer {
	height:48px;
	clear:both;
}

And that’s it, a layout that, at first sight, would be difficult to be made with divs, but, with simple css, it becomes very simple.

In conclusion, using divs, floats, clears and widths you can make almost any layout you want.

Balloon Bliss

Finally Vortix Games Studios released it’s first game: Balloon Bliss.

It’s very innovator and addict game! At least someone had the courage to make a game different of what we used to see.

Try it at Big Fish Games website: direct link

Sushi

Saturday was the day of another of my classes of sushi with Rodrigo at Rock’n Sushi.

Here are some pictures. Want for some sushi?

some of the sushi i made

a special sushi named “Carioca” (Fried futomaki)

The general aspect of the table with all the sushi we done

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.

Physics made simple

I remember that only theme in high school that i had difficult with was physics. I don’t know why, but at that time i didn’t understood nothing of what the teacher said in the classroom.

That’s why i didn’t mind to had a teacher like Walter Lewin. His classes Web es are a hell of a ride.

Yahoo’s People of the web has a cool interview with him here: http://potw.news.yahoo.com/s/potw/63302/high-wire-act.. It Also has a video with samples of his classes. Simply Great

kilobyte

The final explanation of a KiloByte:

Source: http://xkcd.com/394/

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

WebGames

Finally the new site of the zi-yu portal has been launched. It’s name is WebGames and it is a portal of web based games.

I think this portal can become a good reference of web based games for all players in the web.

Pre made a very good job. Speaking of Pre: Happy Birthday my friend!