Added Loading bar for initial load

[systemtwo]

Addressing the first part of Issue #120

[crazy2be]

http://www.justinmcgirr.com/gitdefence/loadingScreen/game/

[crazy2be]

Lots of work to do tonight, so I won't get a chance to properly merge/comment on this until tomorrow at the earliest.

However, a few quick comments:

• Your alignment seems off in window.onload(). I suspect you are using tabs, while the rest of the code is using spaces. Although I'd love to be using tabs, the rest of the code uses spaces, so consistency is more important (especially within the same file!)
• All of the include.js scripts include a bunch more scripts themselves, which are appended at the end of the DOM. There is no loading progress for these, and the bar will remain stuck at 100% on slow connections for some time because of this. Not a huge deal, but it would be nice to fix, if it's not too difficult. You might be able to use script.onload. Might be overkill, this one's up to you.
• It would be nice to have it vertically centered, although it makes the code a wee bit uglier.
• (nitpick) Your spacing around value:property is sometimes value: property in css. I prefer the latter, but it doesn't really matter as long as it's consistent.

• loaderBox shouldn't need width:100% or margin:auto

• Color should be set on the body rather than the #loaderBox
• Font should probably be monospace to match the rest of the game (and perhaps green as well, but it's up to you)
• You should probably just remove the loaderBox when the game loads, rather than keeping it around without a height.

[yeerkkiller1]

So it turns out the IE loading bug is because dynamically loading scripts does not delay the onload call. So it may be best if all of the include scripts are pulled out to regular script tags inside the HTML. This will result in fast loading, should remove the IE bug and will make the progress divisions as clear as possible.

This would also make the progress more accurate, preventing the progress from stopping or slowing due to dynamically loaded scripts and instead having the progress bar actually represent our best guess of the progress left.

[crazy2be]

Script tags or dynamically loaded makes no difference really, but yes I agree they should probably all be in one list somewhere. In buildblast, we actually generate this list using a simple python script, which has the advantage that you can generate both dynamic loader code and automatic minification code automatically. On May 24, 2013 12:00 PM, "yeerkkiller1" notifications@github.com wrote:

So it turns out the IE loading bug is because dynamically loading scripts does not delay the onload call. So it may be best if all of the include scripts are pulled out to regular script tags inside the HTML. This will result in fast loading, should remove the IE bug and will make the progress divisions as clear as possible.

This would also make the progress more accurate, preventing the progress from stopping or slowing due to dynamically loaded scripts and instead having the progress bar actually represent our best guess of the progress left.

— Reply to this email directly or view it on GitHubhttps://github.com/gitdefence/game-off-2012/pull/124#issuecomment-18413901 .

[crazy2be]

It also means all scripts in the scripts folder are included automatically (after the script is run, anyway), which is nice to avoid having dead scripts.

[crazy2be]

This is how we do includes in buildblast:

https://github.com/crazy2be/buildblast/blob/master/client/js/genincludes.py

https://github.com/crazy2be/buildblast/blob/master/client/js/includes.js

[crazy2be]

So, the ideal solution would be something like what we do in buildblast (see above links). This makes minification easier, ensures all existing files are actually used, and is generally just nicer.

However, that does take a bit more work, so I would accept a pull request (And i suspect @yeerkkiller1 would as well, although that's up to him) which simply hard-codes all of the script paths, getting rid of the multiple include.js files. This would allow us to better support IE (current onload behaviour is a flaky hack), while being a little bit simpler than having python generate it. It also gives us a easy transition to having python generate the list and minified scripts in the future.

[crazy2be]

Other things that would be nice:

• [ ] Remove progress bar on load
• [ ] Vertical centering (you have to use tables or display:table-cell)
• [ ] Monospace font (to match the rest of the game).

[crazy2be]

LGTM.