Implement web / desktop configuration interface

Overview

At this time CypherPoker.JS has two primary configuration files, one for the API services server: https://github.com/monicanagent/cypherpoker.js/blob/master/src/server/config.json

... and one for the client https://github.com/monicanagent/cypherpoker.js/blob/master/src/web/scripts/settings.json

The server configuration focuses primarily on shared services settings such as primary HD wallet addresses, server listening ports, fees, external API URLs, etc., whereas the client configuration has more single-user oriented settings like API services URLs, encryption strength, card deck definition, etc.

In the web-only version of CypherPoker.JS only the client configuration is available for updating but the server and desktop bundle should include options to configure both.

Generally speaking, most of the options in both configurations should be update-able through a browser-based form (on the desktop this is displayed in the Electron Chrome window), and must include an option to save. The layout and design of this form should match the rest of the application but would otherwise be left to the developer to determine.

Code Conventions and Standards

Most files intended to be loaded into a blank browser window should be stored in the root web directory. Accompanying graphics and other assets are stored in the assets directory. Any templates (dynamic HTML elements included with the main UI), should be stores in the templates directory. The template system is not discussed here since the user interface for this task will most likely be in its own window with accompanying scripts and stylesheets included in the standard HTML headers (I can elaborate further if this is not the case, however).

JavaScript functionality should be saved in the web/scripts directory since it's shared for both web and desktop (the standalone Node.js server will have no browser-based administration interface). Naming conventions don't need to be strictly adhered to but generally camelCase (first letter in first word is lowercase, then each first letter of subsequent words is uppercase), is used for variable and function declarations while PascalCase (each word begins with an uppercase letter) is used for file names. For consistency, following this style is preferred.

JSDoc is used to add descriptive code documentation. This is important since the code is regularly scraped to produce documentation for the project. See any other JavaScript file in the project for examples.

Note that the links below point to a specific version of CypherPoker.JS so that the line numbers match what's being referred to. However, you should use the most current version of the source code since certain functionality (like new window options for the IPC call), are not available in older versions.

Client Configuration Saving and Restoration

Saving in the client (web-only) may in the future be done to a server (a remote file system or database, for example), but at the present time should be done to localStorage.

The location of the client configuration file is defined in the index.js file. It's loaded using the loadJSON function in the same file which should remain unaffected since it's shared in other parts of the application. Instead, the section of the startup script where supporting libraries and classes are loaded should be changed to use the following logic:

If valid configuration data is available in localStorage, bypass external loading of JSON data and use the localStorage data instead, then continue initializing the application in the same sequence as currently.

An example of loading data from localStorage can be found in the restoreAccounts function of CypherPoker.JS, and saving to localStorage is demonstrated in the saveAccounts function of the same class.

Server / Desktop Configuration Saving and Restoration

The location of the server config.json file is defined in the main server.js file and this file is loaded using the loadConfig function in the same file. Note that the loading logic here is more extensive than in the client in order to support non-local configs (on a remote server or database, for example). This function will not likely need to be changed since any configuration updates will be made to the same file, overwriting it.

The server/desktop portion has full Node.js functionality available so loading is done via readFileSync and saving can be done using writeFileSync.

User Interface Integration

A "Configure" or "Settings" option should be added to the main application menu template. Instead of adding custom "onclick" handler, the existing pattern should be followed and a new case block added to the onMainMenuClick function of the CypherPokerUI class.

To determine if the application is running in web-only more or in server-desktop mode, the global isDesktop function can be used:

if (isDesktop()) {
   //configure both client and server using localStorage and filesystem
} else {
  //configure only client using localStorage
}

Since there may be more options than can fit in the current UI, functionality similar to the Main Menu's new_window option handler can be used:

var configURL = "./configure.html";
var windowName = "CypherPoker.JS Configuration";
var windowID = "CypherPoker.JS-config-"+String(Math.random()).split("0.")[1];;
if (isDesktop()) {
   var requestData = new Object();
    requestData.url = configURL;
    requestData.winName= windowName;
   //windowID is not used
   var result = IPCSend("new-window", requestData)
} else {
    try {
       var windowFeatures = ""; //use default window features
       var window = document.open(configURL , windowID , windowFeatures);
   } catch (err) {
      alert (err.stack);
   }
}

Note that the configure.html file doesn't exist--creating it and any custom styling (either in the existing index.css file or a new one) is part of this task.

monicanagent / cypherpoker.js