Behind the Evolution Revamp

Evolution has had quite a makeover. It now looks something like this:

Evolution 5 Screenshot

Navigation

On the left, is a OpenRico Accordion Widget. I like Rico’s Accordion because it’s backwards compatible. Turn off Javascript and you can still navigate the site – all of the “tabs” will be open at once. If you’ve got CSS off too you get a good ole list. There is some extreme CSS styling on the navigation to make it look colourful, add rollover background colors, etc. A grey version of the navigation bar is available by changing the option in the Preferences page. All that does is load a different CSS file. Another nice thing is having a fixed navigation bar using position: fixed. No more scrolling to the top of the page to find your way around.

Continent Status, Quick Message, Search, Help

The links at the top give you quick and easy access to your continent status, quick message, etc. When you click on one of the links, we call Rico’s Effect.Size to expand the panel. A JavaScript DOM CSS call (style.display = ‘block’) shows the content of the panel when it’s fully expanded. On the continent status and help panels, we use a XmlHttpRequest call to grab some extra information. For example, loading information on Research and Development is way over the top on every page load. Therefore it’s loaded on the fly using XmlHttpRequest. One of the nice things about the resizing animation is it actually disguises the loading of extra content via XmlHttpRequest. The animation takes around 0.5 seconds and loading the contents of the panel via XmlHttpRequest takes about the same time.

There’s a nice combination effect of Fade and Animate Position when you close the panel. The panel slowly fades until it’s invisible whilst the contents also move towards the right. Some JavaScript is used to work out how far to the right the panel can be moved without creating a horizontal scroll bar for a few moments. Quite cinematic 🙂 You may have also noticed rounded corners, again thanks to Rico.

Continent Boxes

5 points for every Stargate and Star Trek reference you can find 😉

Continent Boxes

Now, I really like this feature. Whenever you click on someone else’s continent box or name throughout Evolution you get a popup box. This box provides quick access to send the person a message, scan them, view their avatar, information on their alliance, etc. Rounded corners, once again, thanks to Rico.

Rico Problems and Making Rico Smaller

At over 70KB, Rico is quite a monster. Simply removing livegrid and drag and drop from the Javascript file, I got it down to a more acceptable size at 38KB. It also fixed two Rico bugs in the process – autoscrolling (middle clicking scroll bug) and text selection in Internet Explorer.

4 thoughts on “Behind the Evolution Revamp

Leave a Reply

Your email address will not be published. Required fields are marked *