Implementation Focus: World of Solitaire by Robert Schultz

By YUI TeamAugust 20th, 2007

Robert SchultzA 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.

Robert Schultz has been programming for almost 20 years. His favorite programming languages are C and JavaScript, although he is also fluent in and enjoys working with PHP, XSLT, various flavors of SQL and other languages and technologies. He has been published in CPU magazine for his creation of csourcesearch.net in early 2005. What currently excites him is pushing the boundaries of web page development by utilizing technologies such as JavaScript, CSS and server-side capabilities. Building clean, useful, cross-platform web pages while continuing to enhance his capabilities as a programmer while producing elegant code gives him great feelings of satisfaction and joy in life. —Eric

World of Solitaire by Robert Schultz

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.

However, what truly stuck with me and matured was my love of coding for the web. This was especially true after experimenting with IE4 DHTML and JavaScript Remote Scripting, an early precursor to modern AJAX. I moved to Boston in early 2006 for my second job where creating a rich AJAX front end was my first task. I examined a large number of JavaScript toolkits and ended up choosing the newly released YUI Library. I’ve been working with it ever since then.

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?

Well I had been trying to come up with a project I could work on in my spare time for several months. I was browsing the web one day and saw that someone had implemented a JavaScript version of Solitaire. I had not thought of the idea before then. I searched the web for more implementations of Solitaire with JavaScript and was fairly disappointed by all of them. They were all basically just unpolished prototypes with various bugs and glitches. I was fairly certain that I could produce a very nice looking version that was truly a game rather than just a proof of concept. After a few more weeks of tossing the idea around my head I finally decided to do it.

Choosing a deck style in World of Solitaire.

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
  • YUI Compressor — Before a new version is put live on the server I run a bash script which parses the index page, concatenates all the JavaScript, runs the YUI Compressor and then updates a new index page with the concatenated compressed version. The difference in loading speed between 1 compressed JavaScript file and almost 60 uncompressed ones is quite substantial.

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?

I’m not really sure. Perhaps another JavaScript game. Maybe something with multiple players or maybe one that is a bit more original than Solitaire. I have a big document full of ideas that I’ve had over the past few years. Maybe I’ll take a peek through those. Maybe the release of this game will open up some new opportunities or spin up some new ideas. I haven’t really thought too much about what might be 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.

28 Comments

  1. Very interesting, I’ve created a card game using just HTML/Javascript, but on the Prototype framework, and mine can be played two player (on different computers) over the web. I’ve also made Othello (Reversi)

    http://code.google.com/p/jaxgames/

    I’m impressed with the fluidity of the animation, Scriptaculous is a tad laggy on Firefox.

    I also started out on a C64 ;P

  2. @Kroc — Looks very cool. Thanks for sharing that. Firefox, especially on a Mac, seems laggy for animation generally. -Eric

  3. I’d be interested in finding out how many hours he worked on this. It seems to me that a pure-Java version (either a standalone application, an applet, or a WebStart application) would take much less development time.

  4. @Neil – I started it just about 2 months ago. No more than 6 hours per weekday night and no more than 10 hours per weekend. Many days I didn’t get a chance to work on it at all.

    I didn’t want to go down the ‘Java’ route because that would raise the barrier for entry. Grandma would need to have Java installed in order to play. Also part of the reason for doing it was to prove that it could be done and show that JavaScript based web pages are a viable platform for more than just ‘traditional websites’ :)

  5. Nice game. Though resizing the browser window is pretty time-consuming…

    Here’s my SVG+JS Solitaire game prototype – I think I banged this out over a weekend: http://www.codedread.com/solitaire.php. It’s obviously missing some of the nicities like animation and auto-flipping…

  6. Oh and here’s freecell (done in an evening once I had the solitaire framework): http://www.codedread.com/freecell.php

    Same “rough edges” disclaimer as above. Of course it only works in browsers that support SVG: Firefox 1.5+, Opera 9+, Safari 3+ and IE+ASV

  7. Very nice Sembiance, ive spent a few days playing this and love it.

  8. [...] em Implementation Focus: World of Solitaire by Robert Schultz é possível ler uma interessante entrevista (em Inglês) com o desenvolvedor do [...]

  9. [...] Schultz pushed the use of the YUI library (Yahoo User Interface) to it’s limits. He created a full browser based Solitaire game and it’s amazing! Smooth [...]

  10. [...] YUI Blog 上看到用 YUI 做出 Web 版的接龍:Implementation Focus: World of Solitaire by Robert Schultz,遊戲的站台在這:World of [...]

  11. [...] of your stats you’ll need to register though. Robert Shultz, the developer of the game, gave an interview over Yahoo about the building process, the technology he used, and his plans for future [...]

  12. [...] Robert gave an interview to the YUI blog that discusses implementation details. [...]

  13. [...] Biraz önce Rss okuyucumda belirdi, girdim baktım, bi acayip oldum böyle . Ajaxian‘da Robert Gave isimli bir amcam “I can’t bealive it’s not flash” yani [...]

  14. [...] ver também uma entrevista que Robert deu para o blog Yahoo! User [...]

  15. [...] And for the two geeks out there, Robert Shultz, the developer of the game, gave an interview yuiblog.com/blog/2007/08/20/schultz-solitaire/ about how he built it and the stuff he [...]

  16. [...] … kann man zum Beispiel auf der Seite worldofsolitaire.com betrachten. Das bekannte Spiel Solitär ist dort, komplett auf Ajax basierend, umgesetzt worden. Eine beachtliche Leistung wie ich finde. Näheres zur Umsetzung findet sich in einem Interview mit dem Entwickler. [...]

  17. [...] Робърт Шулц и за библиотека използва популярния Yahoo! UI. Тук той дава подробно интервю и обяснява защо използва [...]

  18. @Robert – Great job! very cool.

  19. [...] Backgroundinfos zu techn Details gibt es vom Entwickler persönlich [...]

  20. [...] Implementation Focus: World of Solitaire Play World of [...]

  21. [...] progress from Robert Schultz on World of Solitaire: Last August we told you about Robert Schultz, who’s created a fantastic, highly polished card-gaming platform at worldofsolitaire.com. [...]

  22. Thank you Mr Shultz for a free site to play solitaire type games without advertising. Makes me realize how much I use it when the site is no longer available. Any plans to bring it back ?

  23. @angie — The site seems to be working for me…maybe there was just a temporary glitch?

  24. Hi Robert,
    I am a DAILY player on your fun website. I really enjoy the new games and keep trying to improve. Something happened today (I use firefox) and I can’t get your website. Help, I am hooked!!!
    Martha

  25. [...] (Of course, we can never mention YUI and card games without also mentioning Robert Schultz’s incomporable World of Solitaire site.)Compressing CSS and Javascript with Y!UI Compressor: Nick Skelton of beardscratchers.com has [...]

  26. It would be great if I could access it. It was always in my favourites and played every nite for years and tonite….nada…no can do….cannot locate file…unable to download…yada yada yada….whaaaatttt happened!!!!

  27. charlie burns said:
    July 29, 2010 at 7:17 pm

    todays date july29 ,time approximately i turned on my computor and was unable to open worldofsolitaire.com note said page could not be found turn computor on and off and even left it off for a few hours.still can not get worldofsolitarie to boot up. is there a problem with your site?all else works on my set. help??????

  28. Nice game………..