Merge branch 'feature/guides' into develop

sho-87 · Mar 4, 2020 · ea38363 · ea38363
2 parents dcb986e + 7e015a5
commit ea38363
Show file tree

Hide file tree

Showing 11 changed files with 120 additions and 67 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "rok-talents",
   "title": "RoK Talents",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "dataVersion": 1,
   "description": "Rise of Kingdoms talent builder",
   "homepage": "http://www.roktalents.com",
@@ -16,7 +16,13 @@
     "url": "http://www.simonho.ca"
   },
   "contributors": [
-    "Sara Ahmadian"
+    {
+      "name": "Sara Ahmadian"
+    },
+    {
+      "name": "rok.guide",
+      "url": "https://rok.guide"
+    }
   ],
   "repository": {
     "type": "git",

diff --git a/public/images/guide-icon.png b/public/images/guide-icon.png
diff --git a/src/App.js b/src/App.js
@@ -62,6 +62,10 @@ class App extends Component {
         this.state = this.getEmptyState();
         treeData = loadTreeData(dataVersion);
         this.updateURL('clear');
+        ReactGA.event({
+          category: 'Load',
+          action: 'New'
+        });
         break;
       case 5: // complete url
         let [urlDataVersion, comID, red, yellow, blue] = urlParams;
@@ -155,8 +159,18 @@ class App extends Component {
           this.state = this.getEmptyState();
           treeData = loadTreeData(dataVersion);
           this.updateURL('clear');
+          ReactGA.event({
+            category: 'Load',
+            action: 'Error',
+            label: this.props.url
+          });
         } else {
           this.updateURL('update');
+          ReactGA.event({
+            category: 'Load',
+            action: 'Existing',
+            label: this.props.url
+          });
         }
         break;
       default:
@@ -166,6 +180,11 @@ class App extends Component {
         this.state = this.getEmptyState();
         treeData = loadTreeData(dataVersion);
         this.updateURL('clear');
+        ReactGA.event({
+          category: 'Load',
+          action: 'Error',
+          label: this.props.url
+        });
     }
   }
 

diff --git a/src/Modals.js b/src/Modals.js
@@ -121,6 +121,17 @@ export class AboutModal extends Component {
     }));
   }
 
+  getContributors() {
+    let contributorsList = contributors.map((c, i) => [
+      i > 0 && ', ',
+      <a href={c.url} target="_blank" rel="noopener noreferrer">
+        {c.name}
+      </a>
+    ]);
+
+    return contributorsList;
+  }
+
   showDonate() {
     ReactGA.event({
       category: 'App',
@@ -161,7 +172,7 @@ export class AboutModal extends Component {
               </div>
               <div>
                 <span className="about-label">Contributors:</span>{' '}
-                {contributors.join(', ')}
+                {this.getContributors()}
               </div>
               {/* <div>
             <span className="about-label">Code:</span>{' '}

diff --git a/src/NavBar.js b/src/NavBar.js
@@ -90,7 +90,7 @@ class NavBar extends Component {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         <AboutModal
           ref={component => (this.aboutModalRef = component)}
           toggleTour={this.props.toggleTour}
@@ -158,7 +158,7 @@ class NavBar extends Component {
             />
           </Nav>
         </Navbar>
-      </React.Fragment>
+      </>
     );
   }
 }

diff --git a/src/NavBarSettings.js b/src/NavBarSettings.js
@@ -127,7 +127,7 @@ class NavBarSettings extends Component {
               </div>
 
               {process.env.NODE_ENV === 'development' && (
-                <React.Fragment>
+                <>
                   <Dropdown.Divider />
                   <Dropdown.Header>Dev Mode</Dropdown.Header>
                   <Form.Check
@@ -145,7 +145,7 @@ class NavBarSettings extends Component {
                     checked={this.props.isShownTalentID}
                     onChange={e => this.props.toggleTalentID()}
                   />
-                </React.Fragment>
+                </>
               )}
             </Form.Group>
           </Form>

diff --git a/src/SummaryPanel.js b/src/SummaryPanel.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-
+import { GeneralTooltip } from './Tooltips';
 import Commanders from './data/commanders.json';
 import './styles/SummaryPanel.css';
 
@@ -10,17 +10,21 @@ import './styles/SummaryPanel.css';
  * @extends {Component}
  */
 class SummaryPanel extends Component {
-  render() {
+  getHeader() {
     return (
-      <div id="summary-panel" className="info-box">
-        {this.props.commander && (
-          <img
-            src={`${process.env.PUBLIC_URL}/images/commanders/${this.props.commander}.png`}
-            alt={this.props.commander}
-          ></img>
+      <>
+        <span>{this.props.commander}</span>
+        {Commanders[this.props.commander].guide && (
+          <GuideIcon commander={this.props.commander} />
         )}
+      </>
+    );
+  }
 
-        <h1>{this.props.commander ? this.props.commander : 'Summary'}</h1>
+  render() {
+    return (
+      <div id="summary-panel" className="info-box">
+        <h1>{this.props.commander ? this.getHeader() : 'Summary'}</h1>
         <h3>
           {this.props.commander && Commanders[this.props.commander].title}
         </h3>
@@ -34,4 +38,27 @@ class SummaryPanel extends Component {
   }
 }
 
+/**
+ * Icon for commander guides
+ *
+ * @returns {DOMElement} Icon linking to the external commander guide
+ */
+function GuideIcon(props) {
+  return (
+    <GeneralTooltip tooltip="Commander guide">
+      <a
+        href={Commanders[props.commander].guide}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          className="summary-panel-guide-icon"
+          src={`${process.env.PUBLIC_URL}/images/guide-icon.png`}
+          alt={`${props.commander} guide`}
+        ></img>
+      </a>
+    </GeneralTooltip>
+  );
+}
+
 export default SummaryPanel;
diff --git a/src/Tooltips.js b/src/Tooltips.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
@@ -9,22 +9,37 @@ import './styles/Tooltips.css';
 /**
  * Tooltip showing a hoverable 'help' tooltip
  *
- * @class HelpTooltip
- * @extends {Component}
+ * @returns {Tooltip} Tooltip
  */
-export class HelpTooltip extends Component {
-  render() {
-    return (
-      <OverlayTrigger
-        placement="top"
-        flip={true}
-        trigger={['hover', 'click']}
-        overlay={<Tooltip className="help-text">{this.props.tooltip}</Tooltip>}
-      >
-        <FontAwesomeIcon icon={faQuestionCircle} className="help-icon" />
-      </OverlayTrigger>
-    );
-  }
+export function HelpTooltip(props) {
+  return (
+    <OverlayTrigger
+      placement="top"
+      flip={true}
+      trigger={['hover', 'click']}
+      overlay={<Tooltip className="help-text">{props.tooltip}</Tooltip>}
+    >
+      <FontAwesomeIcon icon={faQuestionCircle} className="help-icon" />
+    </OverlayTrigger>
+  );
 }
 
-export default { HelpTooltip };
+/**
+ * General tooltip component
+ *
+ * @returns {Tooltip} Tooltip
+ */
+export function GeneralTooltip(props) {
+  return (
+    <OverlayTrigger
+      placement="top"
+      flip={true}
+      trigger={['hover', 'click']}
+      overlay={<Tooltip className="help-text">{props.tooltip}</Tooltip>}
+    >
+      {props.children}
+    </OverlayTrigger>
+  );
+}
+
+export default { HelpTooltip, GeneralTooltip };
diff --git a/src/data/commanders.json b/src/data/commanders.json
@@ -5,15 +5,17 @@
     "tier": "Legendary",
     "red": "Leadership",
     "yellow": "Peacekeeping",
-    "blue": "Support"
+    "blue": "Support",
+    "guide": "https://rok.guide/aethelflaed/"
   },
   "Richard I": {
     "id": "2",
     "title": "The Lion Heart",
     "tier": "Legendary",
     "red": "Infantry",
     "yellow": "Garrison",
-    "blue": "Defense"
+    "blue": "Defense",
+    "guide": "https://rok.guide/commanders/richard-i/"
   },
   "Yi Seong-Gye": {
     "id": "3",

diff --git a/src/styles/SummaryPanel.css b/src/styles/SummaryPanel.css
@@ -11,14 +11,11 @@
   flex-grow: 2;
 }
 
-#summary-panel img {
-  position: absolute;
-  height: auto;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 0.2;
-  filter: blur(8px);
+.summary-panel-guide-icon {
+  height: 0.4em;
+  width: auto;
+  margin-left: 0.4em;
+  vertical-align: baseline;
 }
 
 #summary-panel-summary p {

diff --git a/src/styles/fonts.css b/src/styles/fonts.css
@@ -93,10 +93,6 @@ h3 {
   .node-tooltip-increase {
     font-size: 0.8em;
   }
-
-  #summary-panel img {
-    width: 180%;
-  }
 }
 
 @media (max-height: 599px) and (orientation: landscape) {
@@ -168,10 +164,6 @@ h3 {
   .node-tooltip-increase {
     font-size: 0.6em;
   }
-
-  #summary-panel img {
-    width: 300%;
-  }
 }
 
 /* Tablet */
@@ -215,10 +207,6 @@ h3 {
   .node-tooltip-increase {
     font-size: 1.6em;
   }
-
-  #summary-panel img {
-    width: 150%;
-  }
 }
 
 @media (min-width: 900px) and (orientation: landscape) {
@@ -277,10 +265,6 @@ h3 {
   .node-tooltip-increase {
     font-size: 1.2em;
   }
-
-  #summary-panel img {
-    width: 200%;
-  }
 }
 
 /* Desktop */
@@ -324,10 +308,6 @@ h3 {
   .node-tooltip-increase {
     font-size: 2em;
   }
-
-  #summary-panel img {
-    width: 190%;
-  }
 }
 
 @media (min-width: 1280px) and (orientation: landscape) {
@@ -386,8 +366,4 @@ h3 {
   .node-tooltip-increase {
     font-size: 1.6em;
   }
-
-  #summary-panel img {
-    width: 190%;
-  }
 }