Continued porting to React

src/app/Coriolis.jsx

@@ -8,13 +8,15 @@ import Header from './components/Header';
 import AboutPage from './pages/AboutPage';
 import NotFoundPage from './pages/NotFoundPage';
 import OutfittingPage from './pages/OutfittingPage';
+import ComparisonPage from './pages/ComparisonPage';
 import ShipyardPage from './pages/ShipyardPage';
 
 export default class Coriolis extends React.Component {
 
   static childContextTypes = {
     language: React.PropTypes.object.isRequired,
-    route: React.PropTypes.object
+    sizeRatio: React.PropTypes.number.isRequired,
+    route: React.PropTypes.object.isRequired
   };
 
   constructor() {
@@ -24,19 +26,21 @@ export default class Coriolis extends React.Component {
     this._closeMenu = this._closeMenu.bind(this);
     this._showModal = this._showModal.bind(this);
     this._hideModal = this._hideModal.bind(this);
-    this._onLanguageChange = this._onLanguageChange.bind(this)
+    this._onLanguageChange = this._onLanguageChange.bind(this);
+    this._onSizeRatioChange = this._onSizeRatioChange.bind(this)
     this._keyDown = this._keyDown.bind(this);
 
     this.state = {
       page: null,
       language: getLanguage(Persist.getLangCode()),
-      route: null
+      route: null,
+      sizeRatio: Persist.getSizeRatio()
     };
 
     Router('', (r) => this._setPage(ShipyardPage, r));
     Router('/outfit/:ship/:code?', (r) => this._setPage(OutfittingPage, r));
-    // Router('/compare/:name', compare);
-    // Router('/comparison/:code', comparison);
+    Router('/compare/:name?', (r) => this._setPage(ComparisonPage, r));
+    Router('/comparison/:code', (r) => this._setPage(ComparisonPage, r));
     Router('/about', (r) => this._setPage(AboutPage, r));
     Router('*', (r) => this._setPage(null, r));
   }
@@ -54,6 +58,10 @@ export default class Coriolis extends React.Component {
     this.setState({ language: getLanguage(Persist.getLangCode()) });
   }
 
+  _onSizeRatioChange(sizeRatio) {
+    this.setState({ sizeRatio });
+  }
+
   _keyDown(e) {
     switch (e.keyCode) {
       case 27:
@@ -63,36 +71,59 @@ export default class Coriolis extends React.Component {
     }
   }
 
+  /**
+   * Opens the modal display with the specified content
+   * @param  {React.Component} content Modal Content
+   */
   _showModal(content) {
     let modal = <div className='modal-bg' onClick={(e) => this._hideModal() }>{content}</div>;
     this.setState({ modal });
   }
 
+  /**
+   * Hides any open modal
+   */
   _hideModal() {
     if (this.state.modal) {
       this.setState({ modal: null });
     }
   }
 
+  /**
+   * Sets the open menu state
+   * @param  {string|object} currentMenu The reference to the current menu
+   */
   _openMenu(currentMenu) {
     if (this.state.currentMenu != currentMenu) {
       this.setState({ currentMenu });
     }
   }
 
+  /**
+   * Closes the open menu
+   */
   _closeMenu() {
     if (this.state.currentMenu) {
       this.setState({ currentMenu: null });
     }
   }
 
+  /**
+   * Creates the context to be passed down to pages / components containing
+   * language, sizeRatio and route references
+   * @return {object} Context to be passed down
+   */
   getChildContext() {
     return {
       language: this.state.language,
-      route: this.state.route
+      route: this.state.route,
+      sizeRatio: this.state.sizeRatio
     };
   }
 
+  /**
+   * Adds necessary listeners and starts Routing
+   */
   componentWillMount() {
     // Listen for appcache updated event, present refresh to update view
     if (window.applicationCache) {
@@ -107,7 +138,7 @@ export default class Coriolis extends React.Component {
     window.addEventListener('resize', InterfaceEvents.windowResized);
     document.addEventListener('keydown', this._keyDown);
     Persist.addListener('language', this._onLanguageChange);
-    Persist.addListener('language', this._onLanguageChange);
+    Persist.addListener('sizeRatio', this._onSizeRatioChange);
     InterfaceEvents.addListener('openMenu', this._openMenu);
     InterfaceEvents.addListener('closeMenu', this._closeMenu);
     InterfaceEvents.addListener('showModal', this._showModal);
@@ -116,6 +147,10 @@ export default class Coriolis extends React.Component {
     Router.start();
   }
 
+  /**
+   * Renders the main app
+   * @return {React.Component} The main app
+   */
   render() {
     return (
       <div onClick={this._closeMenu}>