Implementation Focus: World of Solitaire by Robert Schultz
A YUI-based application debuted up on Yahoo! Gallery the other day that was really impressive: A full in-browser Solitaire game built on top of YUI and providing a genuinely satisfying playing experience. I got in touch recently with the author of that app to ask him some questions about his experience building it and about what he's planning to do next.
Tell us a little bit about your background in frontend engineering. When did you get started? What kinds of projects have you been involved with?
My Dad brought home a Commodore 128D when I was about 9 years old. He showed me how to write BASIC programs for it and shortly thereafter I found myself writing text adventure games at 2 in the morning when I was supposed to be sleeping for school the next day. I knew then what I wanted to be when I grew up. In the early to mid 1990's I created my first web pages and coded some MacOS 8/9 applications using Pascal and C. Shortly after graduating high school, I got my first programming job in 1999 which lasted for 7 years. In that time my capabilities grew immensely and I learned a very wide variety of technologies and languages.
You've developed a slick Solitaire implementation using YUI. What got you started down that path — what made you want to build a great Solitaire experience for the browser?
What was the hardest part about building the game?
I had thought about the parts of the game I anticipated would be difficult long before I started writing any code. Things like card flipping, making a "solitaire engine" instead of a single type of solitaire, board layout and resizing of cards based on window size, etc. I felt pretty confident when coding started that I had "worked out" the tough parts in my head and on my 2-page design document.
For the most part that was true. However, one part of the game proved to be a constant thorn in my side throughout most of the development. This part was ensuring that cards were positioned above or below other cards correctly.
You wouldn't think it would be that difficult a task: set a CSS z-index and that's that. However with animation, card dragging, auto play, and the possibility to enable or disable these features there is a lot to keep track of. I ended up writing this part of the code at least four or five times. Each implementation either had hard-to-track-down bugs, used too much CPU or ran too often. When I finally nailed down this piece in a way that met the level of code elegance that I strive to maintain, I was quite relieved :)
What are your goals with the game and site? Do you plan to commercialize it or sell it to an online gaming site, or to build up traffic on your own site?
Goals I set for the game when I started included creating a nice looking game, one with a lot of features and different game types, and one that works in the big 5 web browsers: IE, Firefox, Safari, Opera and Konqueror. I believe for the most part that I've accomplished those goals. My current goals include adding more game types, more features and to continue to keep things as clean and as bug-free as feasible. I've thought about maybe creating some forums or a blog or something to build a community around the game. However, I'm not so sure that's something I'm really interested in doing as that would require time to manage in order to do well and I'm not sure I want to devote my time to that.
I have no plans at all to commercialize it in any way. I do not wish to ever charge for it as that would reduce the number of people who might enjoy it. I also don't intend to add any advertisements as that I feel would pollute the game experience.
I've only been working on it for about 2 months so far, and my primary goal is that people enjoy playing. My motivation to create it was not financial, but rather social. To bring happiness to people who play and because I love receiving thank you e-mails from people who enjoy playing.
What role did YUI play in the building of your Solitaire game? Which YUI components are you employing, and how are you using them?
YUI played a very key role in creation of the game. It's at the heart of the game and would have taken a SIGNIFICANT amount of extra time had I chosen not to use it.
The YUI components that are used in the game include:
- Event Utility — Handles clicks and mouse overs on the cards and menus
- Animation Utility — Animates all the flying, flipping and exploding cards
- Drag & Drop Utility — Enables the cards to be dragged dragged around and dropped
- Container Family — Powers the various dialogs in the game
- Dom Collection — Retrieves height, width and XY coordinates for various elements
- Connection Manager — Stores and retrieves game stats to and from the server
- Slider Control — Responsible for the 'Animation Speed' slider
- TreeView Control — Used for the game selection
- TabView Control — Different types of statistics are on different tabs
- Reset & Fonts CSS — I sure do like a clean, cross-browser CSS base
None of the components' core behavior needed to be modified in any significant way except for a slight change to the Drag & Drop code dealing with how it handles locked objects.
What led you to choose YUI as a foundation library for this project?
I chose it for many reasons.
First, it has great browser support and that was a key goal of the game. Second, YUI has a very clean, stable and modular API. The API has stellar documentation wonderful examples as well. Lastly I had been using YUI since it was first released as open source, and so I was very comfortable using it and was confident it could get the job done.
What projects are you taking on next?
For the time being I plan on continuing to enhance and support Solitaire until such a point where I feel it is complete enough for me to start working on something new.