Game Client Breakdown
The asteroid.ventures game client is broken into a few different parts. This reduces code duplication and, when combined with ajax, it means that we don't have to reload the whole page just to update one part of the client. Below is an overview of the different parts:
Most of these sections are broken down into one or more template (.tpl) files which are then pieced together by the server as requested. The game frame should be present on nearly every page, so it is primarily the content and webGL scene sections that will be altered when navigating through the game. On some pages (such as the system view or asteroid search page) the content section is emptied so that the webGL scene comes to the forefront of the game. This should be handled similarly to traditional RTS games wherein the main world overview is often overlaid with various popup windows and UI sections. In general, the frame should be treated as a persistent HUD, the "content section" is used just as overlaying windows might be, and the webGL scene is for viewing and interacting with the world scene. Now let's dive into the details of how we might use these sections:
If you've been on the internet before, you're probably familiar with the concept of a navbar. This is a list of links that take you to different pages. Our navbar isn't quite that simple though, clicking one of the navbar links will usually leave the game frame and resource bar untouched, but will load new html into the "content section". This is accomplished via the onclick listeners and jquery's $.load() in /js/game_frame_nav.js.
When $.load('#content') is called, a new content section is loaded over the existing one. These content sections are defined in the .tpl templates found in /tpl/content. The /content route in app.py reads these templates and then returns the html. Also, if the requested .tpl file is not found a "under construction" image is returned (like the one shown above). This means that if you want to change a "page", you just need to modify (or add) the appropriate .tpl file in /tpl/content/.
Content bits (tiles or other widgets) can be appended to the existing content section. This is useful for data which appears to be streaming in, or for posting responses to actions. The asteroid track responder, for instance, will push a text content/tile to the content section to show asteroid track success, insufficient funds, or error. For details on how to do this, take a look at using websockets to append html to the content section.
The webGL scene is broken into a few "chunks", primarily these are: (loaded 1st) the WLSL shaders (/tpl/page_chunks/webGL_shaders), a bit of html and js to define the DOM and set vars (/tpl/systemView.tpl or /tpl/searchView.tpl), and (loaded last) the js includes in html (/tpl/page_chunks/webGL_js.tpl).
If you are looking to modify the scene, you'll want to take a look at these three parts to see what is being loaded. That being said, most of the work for the scene is done in /js/main.js.