Design Document Client Side Overview
The client side application is divided into sections by page. In other words, the server can send a number of different pages to the client browser. Each such page will have its own associated JavaScript file(s) and its own associated CSS file. Pages that include PHP code will have the extension 'php'. Other pages will have the extension 'html'.
Currently I have implemented six pages, but more will be added as needed.
The Index Page
The index.html page is one of the two pages which is not password protected. It is the introductory page to BOARD18 and contains a welcome message. It is currently used for logging in to Board18 and for registering new players. Links to some player ID and password recovery functions should be added soon.
The Access-denied Page
The access-denied.html page is the other of the two pages which is not password protected. It is the page that handles unauthorized access to password protected pages. It has an access denied message and a button that transfers the player to the index.html page.
The Main Page
The board18Main.php page displays a list of the logged in player's active games. The player can select any of the listed games to start a game session in that game. He can also select a link to the board18New page if he wishes to start a new game. A link may be added in the future for adding or modifying game boxes.
The New Game Page
The board18New.php page contains a form that can be used to create a new BOARD18 game session. It displays a list of the available game boxes and a list of the available players as aids to filling out the form.
The Board Page
The board page consists mainly of the game board map and the left sidebar containing the tile and token trays. This is an overview of its main features.
Main Menu
The main menu drops down from the header devision. Actually this is true for all BOARD18 pages. It has sub menu's that can be used for navigation and for other page specific actions.
Selecting Trays
The left sidebar contains the active tray beneath a drop down tray selection menu. Clicking on the name of a tray makes that tray the active tray.
Selecting Tiles from Tray
The tiles or tokens in the active tray are displayed with a count of available items in the upper left corner. If the count is zero then the tile is grayed out and cannot be selected. Clicking on a tile in the active tray will select that tile and it will be highlighted with a red background.
Dropping Tiles on Board
When a tile on the active tray is highlighted (selected), it can be placed on a map hex by clicking on the center of the hex. A tile will be centered on the hex. A token will be centered on the point that is clicked. The dropped item has NOT yet been permanently placed and can be further adjusted before it is.
Rotating Tiles
Clicking on a dropped tile before the move has been submitted will cause the tile to be rotated clockwise. There are also menu items that can be used to rotate a tile in this situation.
Moving Tokens
Clicking on a hex containing a dropped token before the move has been submitted will cause the token to be repositioned to the point of the click.
Submitting Moves
A move in progress will be submitted to the server database when the Accept Move menu item is clicked. A move in progress will be discarded when the Cancel Move menu item is clicked.
The Drop Down Menu
To be provided at a later date.
The Stock Market Page
To be provided at a later date.