Add help system and initial help file

ChangeLog.md

@@ -1,3 +1,6 @@
+#2.2.11
+  * Add help system and initial help file
+
 #2.2.10
   * Fix detailed export of module reinforcement packages
   * Use damagedist for exact breakdown of weapons that have more than one type of damage

src/app/Coriolis.jsx

@@ -6,7 +6,10 @@ import Persist from './stores/Persist';
 
 import Header from './components/Header';
 import Tooltip from './components/Tooltip';
+import ModalExport from './components/ModalExport';
+import ModalHelp from './components/ModalHelp';
 import ModalImport from './components/ModalImport';
+import ModalPermalink from './components/ModalPermalink';
 import * as CompanionApiUtils from './utils/CompanionApiUtils';
 import { outfitURL } from './utils/UrlGenerators';
 
@@ -159,14 +162,25 @@ export default class Coriolis extends React.Component {
         this._hideModal();
         this._closeMenu();
         break;
+      case 72:     // 'h'
+        if (e.ctrlKey || e.metaKey) { // CTRL/CMD + h
+          e.preventDefault();
+          this._showModal(<ModalHelp />);
+        }
+        break;
       case 73:     // 'i'
         if (e.ctrlKey || e.metaKey) { // CTRL/CMD + i
           e.preventDefault();
           this._showModal(<ModalImport />);
         }
         break;
-      case 101010:  // 's'
-        if (e.ctrlKey || e.metaKey) { // CTRL/CMD + i
+      case 76:  // 'l'
+        if (e.ctrlKey || e.metaKey) { // CTRL/CMD + l
+          e.preventDefault();
+          this._showModal(<ModalPermalink url={window.location.href}/>);
+        }
+      case 83:  // 's'
+        if (e.ctrlKey || e.metaKey) { // CTRL/CMD + s
           e.preventDefault();
           this.emitter.emit('command', 'save');
         }

src/app/components/Header.jsx

@@ -5,12 +5,13 @@ import { Insurance } from '../shipyard/Constants';
 import Link from './Link';
 import ActiveLink from './ActiveLink';
 import cn from 'classnames';
-import { Cogs, CoriolisLogo, Hammer, Rocket, StatsBars } from './SvgIcons';
+import { Cogs, CoriolisLogo, Hammer, Help, Rocket, StatsBars } from './SvgIcons';
 import { Ships } from 'coriolis-data/dist';
 import Persist from '../stores/Persist';
 import { toDetailedExport } from '../shipyard/Serializer';
 import ModalDeleteAll from './ModalDeleteAll';
 import ModalExport from './ModalExport';
+import ModalHelp from './ModalHelp';
 import ModalImport from './ModalImport';
 import Slider from './Slider';
 import { outfitURL } from '../utils/UrlGenerators';
@@ -74,7 +75,7 @@ export default class Header extends TranslatedComponent {
     this._openBuilds = this._openMenu.bind(this, 'b');
     this._openComp = this._openMenu.bind(this, 'comp');
     this._openSettings = this._openMenu.bind(this, 'settings');
-    this._openHelp = this._openMenu.bind(this, 'help');
+    this._showHelp = this._showHelp.bind(this);
     this.languageOptions = [];
     this.insuranceOptions = [];
     this.state = {
@@ -249,6 +250,17 @@ export default class Header extends TranslatedComponent {
     />);
   }
 
+  /**
+   * Show help modal
+   * @param  {SyntheticEvent} e Event
+   */
+  _showHelp(e) {
+    let translate = this.context.language.translate;
+    e.preventDefault();
+
+    this.context.showModal(<ModalHelp title={translate('help')} />);
+  }
+
   /**
    * Show import modal
    * @param  {SyntheticEvent} e Event
@@ -360,23 +372,6 @@ export default class Header extends TranslatedComponent {
     );
   }
 
-  /**
-   * Generate the help menu
-   * @return {React.Component} Menu
-   */
-  _getHelpMenu() {
-    let translate = this.context.language.translate;
-
-    return (
-      <div className='menu-list' onClick={ (e) => e.stopPropagation() } style={{ whiteSpace: 'nowrap' }}>
-        <div>{translate('introduction')}</div>
-        <div>{translate('importing your build')}</div>
-        <div>{translate('engineers')}</div>
-        <div>{translate('tricks and tips')}</div>
-      </div>
-    );
-  }
-
   /**
    * Generate the settings menu
    * @return {React.Component} Menu
@@ -539,11 +534,11 @@ export default class Header extends TranslatedComponent {
           </div>
           {openedMenu == 'settings' ? this._getSettingsMenu() : null}
         </div>
+
         <div className='r menu'>
-          <div className={cn('menu-header', { selected: openedMenu == 'help' })} onClick={this._openHelp}>
-            <Cogs className='xl warning'/><span className='menu-item-label'>{translate('help')}</span>
+          <div className={cn('menu-header')} onClick={this._showHelp}>
+            <Help className='xl warning'/>
           </div>
-          {openedMenu == 'help' ? this._getHelpMenu() : null}
         </div>
       </header>
     );

src/app/components/ModalHelp.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import TranslatedComponent from './TranslatedComponent';
+
+/**
+ * Help Modal
+ */
+export default class ModalHelp extends TranslatedComponent {
+
+  static propTypes = {
+    title: React.PropTypes.string
+  };
+
+  /**
+   * Constructor
+   * @param  {Object} props   React Component properties
+   */
+  constructor(props) {
+    super(props);
+  }
+
+  /**
+   * Focus on textarea and select all
+   */
+  componentDidMount() {
+    const e = findDOMNode(this.refs.exportField);
+    if (e) {
+      e.focus();
+      e.select();
+    }
+  }
+
+  /**
+   * Render the modal
+   * @return {React.Component} Modal Content
+   */
+  render() {
+    const translate = this.context.language.translate;
+    const text = translate('HELP_TEXT');
+
+    return <div className='modal' onClick={ (e) => e.stopPropagation() }>
+      <h2>{translate(this.props.title || 'Help')}</h2>
+      <div dangerouslySetInnerHTML={{__html: text}} />
+      <button className='r dismiss cap' onClick={this.context.hideModal}>{translate('close')}</button>
+    </div>;
+  }
+}

src/app/components/SvgIcons.jsx

@@ -534,6 +534,25 @@ export class Rocket extends SvgIcon {
   }
 }
 
+/**
+ * Help
+ */
+export class Help extends SvgIcon {
+  /**
+   * Overriden view box
+   * @return {String} view box
+   */
+  viewBox() { return '0 0 200 200'; }
+
+  /**
+   * Generate the SVG
+   * @return {React.Component} SVG Contents
+   */
+  svg() {
+    return <path d="M90.381 140.644a225.03 225.03 0 0 1-.106-5.706c0-7.47 1.058-13.92 3.172-19.346 1.55-4.087 4.052-8.21 7.505-12.367 2.536-3.031 7.1-7.453 13.688-13.267 6.59-5.815 10.872-10.448 12.844-13.9 1.974-3.453 2.96-7.224 2.96-11.312 0-7.4-2.89-13.9-8.667-19.503-5.779-5.602-12.862-8.403-21.248-8.403-8.104 0-14.87 2.536-20.296 7.61-5.427 5.074-8.986 13.003-10.677 23.784L50 65.91c1.762-14.448 6.995-25.511 15.698-33.194 8.704-7.68 20.208-11.522 34.514-11.522 15.152 0 27.237 4.124 36.258 12.369C145.49 41.807 150 51.779 150 63.477c0 6.766-1.585 13.003-4.756 18.712-3.17 5.708-9.372 12.65-18.605 20.824-6.201 5.496-10.253 9.55-12.156 12.156-1.904 2.609-3.312 5.603-4.23 8.986-.915 3.383-1.443 8.88-1.584 16.49H90.38zm-1.163 38.162v-21.67h21.67v21.67h-21.67z"/>;
+  }
+}
+
 /**
  * ListModifications (engineers)
  */

src/app/i18n/en.js

@@ -182,4 +182,84 @@ export const terms = {
   thermres: 'Thermal resistance',
   wepcap: 'Weapons capacity',
   weprate: 'Weapons recharge rate',
+
+  // Help text
+  HELP_TEXT: `
+<h1>Introduction</h1>
+Coriolis is a ship builder for Elite: Dangerous.  This help file provides you with the information you need to use Coriolis.
+
+<h1>Importing Your Ship Into Coriolis</h1>
+Often, you will want to start with your existing ship in Coriolis and see how particular changes might affect it, for example upgrading your FSD.  There are a number of tools that can be used to import your ship without you having to create it manually.  This has the added benefit of copying over any engineering modifications that have taken place as well. </p>
+
+<h2>Importing Your Ship From EDDI</h2>
+To import your ship from EDDI first ensure that your connection to the Frontier servers' companion API is working.  To do this check the 'Companion App' tab where you should see "Your connection to the companion app is operational".  If not then follow the instructions in the companion app tab in EDDI to connect to the Frontier servers.</p>
+
+Once you have a working companion API connection go to the 'Shipyard' tab.  At the right-hand side of each ship is an 'Export to Coriolis' button that will open your default web browser in Coriolis with the ship's build. </p>
+
+Note that Internet Explorer and Edge might not import correctly, due to their internal restrictions on URL length.  If you find that this is the case then please change your default browser to Chrome. </p>
+
+<h2>Importing Your Ship From EDMC</h2>
+
+<h1>Understanding And Using The Outfitting Panels</h1>
+The outfitting page is where you will spend most of your time, and contains the information for your ship.  Information on each of the panels is provided below. </p>
+
+<h2>Key Values</h2>
+Along the top of the screen are some of the key values for your build.  This is a handy reference for the values, but more information is provided for the values in the further panels. </p>
+
+Here, along with most places in Coriolis, acronyms will have tooltips explaining what they mean.  Hover over the acronym to obtain more detail, or look in the glossary at the end of this help.</p>
+
+<h2>Modules</h2>
+The next set of panels laid out horizontally across the screen contain the modules you have put in your build.  From left to right these are the core modules, the internal modules, the hardpoints and the utility mounts.  These represent the available slots in your ship and cannot be altered.  Each slot has a class, or size, and in general any module up to a given size can fit in a given slot (exceptions being bulkheads, life support and sensors in core modules and restricted internal slots, which can only take a subset of module depending on their restrictions). </p>
+
+To add a module to a slot left-click on the slot and select the required module.  Only the modules capable of fitting in the selected slot will be shown. </p>
+
+To remove a module from a slot right-click on the module. </p>
+
+To move a module from one slot to another drag it.  If you instead want to copy the module drag it whilst holding down the 'Alt' key. </p>
+
+<h2>Power Management</h2>
+The power management panel provides information about power usage and priorities.  It allows you to enable and disable individual modules, as well as set power priorities for each module.
+
+<h2>Costs</h2>
+
+By default Coriolis uses the standard costs, however discounts for your ship, modules and insurance can be altered in the 'Settings' at the top-right of the page.
+
+<h2>Offence Summary</h2>
+
+<h2>Defence Summary</h2>
+
+<h2>Movement Summary</h2>
+
+<h2>Jump Range</h2>
+
+<h2>Damage Dealt</h2>
+
+<h2>Damage Received</h2>
+
+<h1>Keyboard Shortcuts</h1>
+<dl>
+<dt>Ctrl-e</dt><dd>open export dialogue (outfitting page only)</dd>
+<dt>Ctrl-h</dt><dd>open help dialogue</dd>
+<dt>Ctrl-i</dt><dd>open import dialogue</dd>
+<dt>Ctrl-l</dt><dd>open shortlink dialogue</dd>
+<dt>Esc</dt><dd>close any open dialogue</dd>
+</dl>
+<h1>Glossary</h1>
+<dl>
+<dt>Absolute damage</dt><dd>A type of damage, without any protection.  Absolute damage is always dealt at 100% regardless of if the damage is to shields, hull or modules, and irrespective of resistances</dd>
+<dt>DPS</dt><dd>Damage per second; the amount of damage that a weapon or a ship can deal per second to a target under optimum conditions</dd>
+<dt>EPS</dt><dd>Energy per second; the amount of energy that a weapon or a ship drains from the weapons capacitor per second when firing</dd>
+<dt>HPS</dt><dd>Heat per second; the amount of heat that a weapon or a ship generates per second when firing</dd>
+<dt>Effectivness</dt><dd>A comparison of the maximum DPS of a given weapon to the actual DPS of the given weapon in a specific situation.  DPS can be reduced by range to the target, the target's hull and shield resistances, and the target's hardness</dd>
+<dt>Explosive damage</dt><dd>A type of damage, protected against by explosive resistance</dd>
+<dt>Hardness</dt><dd>The inherent resistance to damage of a ship's hull.  Hardness is defined on a per-ship basis and there is currently nothing that can be done to change it.  Hardness of a ship's hull is compared to the piercing of weapons: if piercing is higher than hardness the weapon does 100% damage, otherwise it does a fraction of its damage calculated as piercing/hardness</dd>
+<dt>Falloff</dt><dd>The distance at which a weapons starts to do less damage than its stated DPS</dd>
+<dt>Kinetic damage</dt><dd>A type of damage, protected against by kinetic resistance</dd>
+<dt>SDPS</dt><dd>Sustained damage per second; the amount of damage that a weapon or a ship can deal per second to a target, taking in to account ammunition reload</dd>
+<dt>SEPS</dt><dd>Sustained energy per second; the amount of energy that a weapon or a ship drains from the weapons capacitor per second when firing, taking in to account ammunition reload</dd>
+<dt>SHPS</dt><dd>Sustained heat per second; the amount of heat that a weapon or a ship generates per second when firing, taking in to account ammunition reload</dd>
+<dt>Thermal damage</dt><dd>A type of damage, protected against by thermal resistance</dd>
+</dl>
+
+  `,
 };

src/app/pages/OutfittingPage.jsx

@@ -52,6 +52,8 @@ export default class OutfittingPage extends Page {
   constructor(props, context) {
     super(props, context);
     this.state = this._initState(context);
+    this._keyDown = this._keyDown.bind(this);
+    this._exportBuild = this._exportBuild.bind(this);
   }
 
   /**
@@ -181,7 +183,7 @@ export default class OutfittingPage extends Page {
     let translate = this.context.language.translate;
     let { buildName, ship } = this.state;
     this.context.showModal(<ModalExport
-      title={buildName + ' ' + translate('export')}
+      title={(buildName || ship.name) + ' ' + translate('export')}
       description={translate('PHRASE_EXPORT_DESC')}
       data={toDetailedBuild(buildName, ship, ship.toString())}
     />);
@@ -258,6 +260,7 @@ export default class OutfittingPage extends Page {
    */
   componentWillMount() {
     this.resizeListener = this.context.onWindowResize(this._updateDimensions);
+    document.addEventListener('keydown', this._keyDown);
   }
 
   /**
@@ -281,6 +284,23 @@ export default class OutfittingPage extends Page {
     this.context.showModal(<ModalPermalink url={window.location.href}/>);
   }
 
+  /**
+   * Handle Key Down
+   * @param  {Event} e  Keyboard Event
+   */
+  _keyDown(e) {
+    // .keyCode will eventually be replaced with .key
+    switch (e.keyCode) {
+      case 69:     // 'e'
+        if (e.ctrlKey || e.metaKey) { // CTRL/CMD + e
+          e.preventDefault();
+          console.log('Export')
+          this._exportBuild();
+        }
+        break;
+      }
+    }
+
   /**
    * Render the Page
    * @return {React.Component} The page contents