This evening, I was able to knock out features 2, 10, and 12.
There is now a winning animation that uses some cheerleader icons from IconBuffet.
The load time is pretty much instantaneous now.
The player now has the ability to save the state of his game and later restore it.
For example, the HTML behind the page with connect on it looks like:
<html> <head> <title>PlayDeez Games</title> <link rel="stylesheet" type="text/css" href="styles/standard.css" /> </head> <body id="pagebody"> </body> <script src="scripts/common/pagebody.js"></script>
<script src="scripts/common/titlepanel.js"></script> <script src="scripts/common/sidebar.js"></script> <script src="scripts/common/utilities.js"></script> <script src="scripts/jsconnect.js"></script> <script src="scripts/jsconnect/connect.js"></script> </html>
As you can see… not much there. All of the work is done in the JS files. All of my layout stuff is in the scripts in scripts/common.
Typically, when I am building a page in this manner, I build up a string filled with HTML, and at some point find an object in the DOM and set that objects innerHTML to the string I generated.
When I started putting together Connect! (which actually began as a Yahoo! Widget, which is why I made some of the architectural decisions I did), I instead APPENDED strings with HTML to the innerHTML of my main <DIV>. For a Connect! board with 64 nodes, 56 vertical connectors, 56 horizontal connectors, a background image, a cheerleader image, and 6 buttons, thats close to 200 DOM objects getting inserted, one at a time, into another DOM object. No wonder it seemed to take forever to load.
So, I switched the code so that it instead build up a string as it went, and only put the objects into the DIV at a single time. The result: nearly instant load.