2.1.1

- Refactoring
- Google analytics

.env

@@ -1,3 +1,4 @@
 REACT_APP_DISCORD_LINK=https://discord.com/
 REACT_APP_PATREON_LINK=https://www.patreon.com/
-REACT_APP_PAYPAL_LINK=https://www.paypal.com/
+REACT_APP_PAYPAL_LINK=https://www.paypal.com/
+REACT_APP_GA_TRACKINGID=UA-000000-01

package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "https://frzyc.github.io/genshin-optimizer/",
   "name": "genshin-optimizer",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
@@ -13,6 +13,7 @@
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",
+    "react-ga": "^3.3.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "tesseract.js": "^2.1.1",

public/index.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
-      name="description"
-      content="An artifiact optimizer for Genshin Impact"
+      name="Description"
+      content="An artifiact optimizer for the open-world role playing game, Genshin Impact"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

src/App.js

@@ -15,6 +15,7 @@ import CharacterDisplay from './Character/CharacterDisplay';
 import { version } from "../package.json"
 import HomeDisplay from './Home/HomeDisplay';
 import FAQ from './FAQ/FAQDisplay';
+import ReactGA from 'react-ga';
 
 function App() {
   return (
@@ -30,9 +31,21 @@ function App() {
             <Nav.Link as={Link} to="/faq">FAQ</Nav.Link>
           </Nav>
           <Nav>
-            <Nav.Link href={process.env.REACT_APP_PAYPAL_LINK} target="_blank" ><FontAwesomeIcon icon={faPaypal} className="fa-fw" /> PayPal</Nav.Link>
-            <Nav.Link href={process.env.REACT_APP_PATREON_LINK} target="_blank" ><FontAwesomeIcon icon={faPatreon} className="fa-fw" /> Patreon</Nav.Link>
-            <Nav.Link href={process.env.REACT_APP_DISCORD_LINK} target="_blank" ><FontAwesomeIcon icon={faDiscord} className="fa-fw" /> Discord</Nav.Link>
+            <ReactGA.OutboundLink eventLabel="paypal" target="_blank">
+              <Nav.Link href={process.env.REACT_APP_PAYPAL_LINK} target="_blank" >
+                <span><FontAwesomeIcon icon={faPaypal} className="fa-fw" /> PayPal</span>
+              </Nav.Link>
+            </ReactGA.OutboundLink>
+            <ReactGA.OutboundLink eventLabel="patreon" target="_blank">
+              <Nav.Link href={process.env.REACT_APP_PATREON_LINK} target="_blank" >
+                <span><FontAwesomeIcon icon={faPatreon} className="fa-fw" /> Patreon</span>
+              </Nav.Link>
+            </ReactGA.OutboundLink>
+            <ReactGA.OutboundLink eventLabel="discord" target="_blank">
+              <Nav.Link href={process.env.REACT_APP_DISCORD_LINK} target="_blank" >
+                <span><FontAwesomeIcon icon={faDiscord} className="fa-fw" /> Discord</span>
+              </Nav.Link>
+            </ReactGA.OutboundLink>
           </Nav>
         </Navbar>
 

src/Artifact/Artifact.js

@@ -1,10 +1,10 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ElementalData } from '../Character/CharacterData';
+import Character from '../Character/Character';
 import CharacterDatabase from '../Character/CharacterDatabase';
 import SlotIcon from '../Components/SlotIcon';
+import { ArtifactMainSlotKeys, ArtifactMainStatsData, ArtifactSetsData, ArtifactSlotsData, ArtifactStarsData, ArtifactSubStatsData } from '../Data/ArtifactData';
 import Stat from '../Stat';
 import { clampPercent, closeEnoughFloat, closeEnoughInt } from '../Util';
-import { ArtifactMainSlotKeys, ArtifactStarsData, ArtifactMainStatsData, ArtifactSetsData, ArtifactSubStatsData, ArtifactSlotsData } from './ArtifactData'
 import ArtifactDatabase from './ArtifactDatabase';
 
 export default class Artifact {
@@ -44,7 +44,7 @@ export default class Artifact {
   static getRarityArr = (setKey) => ArtifactSetsData[setKey] ? ArtifactSetsData[setKey].rarity : []
 
   //MAIN STATS
-  static getMainStatKeys = () => [...ArtifactMainSlotKeys, ...Object.keys(ElementalData).map((ele) => `${ele}_ele_dmg`)]
+  static getMainStatKeys = () => [...ArtifactMainSlotKeys, ...Character.getElementalKeys().map((ele) => `${ele}_ele_dmg`)]
   static getMainStatValue = (key, numStars, level, defVal = 0) => {
     if (key && numStars && ArtifactMainStatsData[numStars] && ArtifactMainStatsData[numStars][key] && ArtifactMainStatsData[numStars][key][level])
       return ArtifactMainStatsData[numStars][key][level]

src/Artifact/ArtifactDisplay.js

@@ -5,18 +5,19 @@ import { Card, Dropdown, InputGroup, ToggleButton, ToggleButtonGroup } from 'rea
 import Col from 'react-bootstrap/Col';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
-import { ElementalData } from '../Character/CharacterData';
+import Character from '../Character/Character';
 import CharacterDatabase from '../Character/CharacterDatabase';
 import { IntFormControl } from '../Components/CustomFormControl';
 import { Stars } from '../Components/StarDisplay';
+import { ArtifactStarsData, ArtifactSubStatsData } from '../Data/ArtifactData';
 import { DatabaseInitAndVerify } from '../DatabaseUtil';
 import Stat from '../Stat';
 import { deepClone } from '../Util';
 import Artifact from './Artifact';
 import ArtifactCard from './ArtifactCard';
-import { ArtifactStarsData, ArtifactSubStatsData } from './ArtifactData';
 import ArtifactDatabase from './ArtifactDatabase';
 import ArtifactEditor from './ArtifactEditor';
+import ReactGA from 'react-ga';
 
 export default class ArtifactDisplay extends React.Component {
   constructor(props) {
@@ -27,6 +28,7 @@ export default class ArtifactDisplay extends React.Component {
       artToEdit: null,
     }
     this.state = { ...this.state, ...ArtifactDisplay.initialFilter }
+    ReactGA.pageview('/artifact')
   }
   static initialFilter = {
     filterArtSetKey: "",
@@ -175,7 +177,7 @@ export default class ArtifactDisplay extends React.Component {
                       <Dropdown.Menu>
                         <Dropdown.Item onClick={() => this.setState({ filterMainStatKey: "" })}>Unselect</Dropdown.Item>
                         {Artifact.getMainStatKeys().filter(key => key !== "ele_dmg").map((statKey) => <MainStatDropDownItem key={statKey} statKey={statKey} />)}
-                        {Object.keys(ElementalData).map((ele) => <MainStatDropDownItem key={ele} statKey={`${ele}_ele_dmg`} />)}
+                        {Character.getElementalKeys().map((ele) => <MainStatDropDownItem key={ele} statKey={`${ele}_ele_dmg`} />)}
                       </Dropdown.Menu>
                     </Dropdown>
                   </Col>

src/Artifact/ArtifactEditor.js

@@ -4,10 +4,10 @@ import React from 'react';
 import { Alert, Button, Card, Col, Dropdown, DropdownButton, FormControl, InputGroup, OverlayTrigger, Popover, Row } from 'react-bootstrap';
 import { FloatFormControl, IntFormControl } from '../Components/CustomFormControl';
 import { Stars } from '../Components/StarDisplay';
+import { ArtifactSetsData, ArtifactSlotsData, ArtifactStarsData, ArtifactSubStatsData } from '../Data/ArtifactData';
 import Stat from '../Stat';
 import { deepClone, getArrLastElement, getRandomElementFromArray, getRandomIntInclusive } from '../Util';
 import Artifact from './Artifact';
-import { ArtifactSetsData, ArtifactSlotsData, ArtifactStarsData, ArtifactSubStatsData } from './ArtifactData';
 import ArtifactDatabase from './ArtifactDatabase';
 import PercentBadge from './PercentBadge';
 import UploadDisplay from './UploadDisplay';

src/Artifact/UploadDisplay.js

@@ -3,11 +3,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useEffect, useState } from 'react';
 import { Button, Card, Col, Container, Form, Modal, ProgressBar, Row } from 'react-bootstrap';
 import { createWorker } from 'tesseract.js';
+import { ArtifactSetsData, ArtifactSlotsData } from '../Data/ArtifactData';
 import scan_art_main from "../imgs/scan_art_main.png";
 import Snippet from "../imgs/snippet.png";
 import Stat from '../Stat';
 import Artifact from './Artifact';
-import { ArtifactSetsData, ArtifactSlotsData } from './ArtifactData';
+import ReactGA from 'react-ga';
 
 const whiteColor = { r: 250, g: 250, b: 250 } //#FFFFFF
 const subStatColor = { r: 80, g: 90, b: 105 } //#495366
@@ -210,7 +211,10 @@ function UploadDisplay(props) {
             <Col>
               <h5>Parse Substats by Uploading Image</h5>
             </Col>
-            <Col xs="auto"><Button variant="info" onClick={() => setModalShow(true)}>Show me How!</Button></Col>
+            <Col xs="auto"><Button variant="info" onClick={() => {
+              setModalShow(true)
+              ReactGA.modalview('/artifact/how-to-upload')
+            }}>Show me How!</Button></Col>
           </Row>
         </Col>
       </Row>

src/Build/Build.js

@@ -1,8 +1,7 @@
-import { ArtifactSetsData, ArtifactSlotsData } from "../Artifact/ArtifactData";
+import Artifact from "../Artifact/Artifact";
+import { ArtifactSetsData, ArtifactSlotsData } from "../Data/ArtifactData";
 
 export default class Build {
-  static test = (input) =>
-    input * 2
 
   //works with id indexed object for database.
   static splitArtifactsBySlot(databaseObj) {
@@ -24,7 +23,7 @@ export default class Build {
     if (useOther) sets.push("Other");
 
     let perm = [];
-    let slotKeys = Object.keys(ArtifactSlotsData);
+    let slotKeys = Artifact.getArtifactSlotKeys();
     //recursion function to loop through everything.
     let slotPerm = (index, accu) => {
       if (index >= slotKeys.length) {

src/Build/BuildDisplay.js

@@ -5,7 +5,7 @@ import { Alert, Badge, Button, ButtonGroup, Card, Col, Container, Dropdown, Drop
 // eslint-disable-next-line
 import Worker from "worker-loader!./BuildWorker.js";
 import Artifact from '../Artifact/Artifact';
-import { ArtifactSetsData, ArtifactSlotsData } from '../Artifact/ArtifactData';
+import { ArtifactSetsData, ArtifactSlotsData } from '../Data/ArtifactData';
 import ArtifactDatabase from '../Artifact/ArtifactDatabase';
 import Character from '../Character/Character';
 import CharacterDatabase from '../Character/CharacterDatabase';
@@ -14,6 +14,7 @@ import { DatabaseInitAndVerify } from '../DatabaseUtil';
 import Stat from '../Stat';
 import { deepClone, loadFromLocalStorage, saveToLocalStorage } from '../Util';
 import Build from './Build';
+import ReactGA from 'react-ga';
 
 export default class BuildDisplay extends React.Component {
   constructor(props) {
@@ -30,6 +31,7 @@ export default class BuildDisplay extends React.Component {
         if (savedState && character) this.state = savedState
       }
     }
+    ReactGA.pageview('/build')
   }
   static initialState = {
     builds: [],
@@ -118,8 +120,16 @@ export default class BuildDisplay extends React.Component {
     }
 
     let worker = new Worker();
-    worker.onmessage = (e) =>
-      this.setState({ builds: e.data, generatingBuilds: false })
+    worker.onmessage = (e) => {
+      ReactGA.timing({
+        category: "Build Generation",
+        variable: "timing",
+        value: e.data.timing,
+        label: Build.calculateTotalBuildNumber(split, artifactSetPerms, this.state.setFilters)
+      })
+      this.setState({ builds: e.data.builds, generatingBuilds: false })
+    }
+
     worker.postMessage(data)
   }
 

src/Build/BuildWorker.js

@@ -1,4 +1,5 @@
-import { ArtifactSlotsData } from "../Artifact/ArtifactData";
+
+import Artifact from "../Artifact/Artifact";
 import Character from "../Character/Character";
 
 onmessage = async (e) => {
@@ -7,11 +8,10 @@ onmessage = async (e) => {
   let artifactPerms = generateAllPossibleArtifactPerm(split, artifactSetPerms, setFilters)
   let builds = artifactPerms.map(artifacts => Character.calculateBuildWithObjs(character, artifacts));
   let t2 = performance.now()
-  console.log("generateBuilds took", t2 - t1, "ms")
   builds.sort((a, b) =>
     asending ? (a.finalStats[buildFilterKey] - b.finalStats[buildFilterKey]) : (b.finalStats[buildFilterKey] - a.finalStats[buildFilterKey]))
   builds.splice(maxBuildsToShow)
-  postMessage(builds)
+  postMessage({ builds, timing: t2 - t1 })
 };
 const generateAllPossibleArtifactPerm = (splitArtifacts, setPerms, setFilters) => {
   let perm = [];
@@ -33,7 +33,7 @@ const generateAllPossibleArtifactPerm = (splitArtifacts, setPerms, setFilters) =
     })
     splitArtsPerSet[key] = artsPerSet
   })
-  let slotKeys = Object.keys(ArtifactSlotsData);
+  let slotKeys = Artifact.getArtifactSlotKeys();
   //recursion function to loop through everything.
   let slotPerm = (index, setPerm, accu) => {
     if (index >= slotKeys.length) {

src/Character/Character.js

@@ -1,7 +1,7 @@
 import Artifact from "../Artifact/Artifact";
 import ArtifactDatabase from "../Artifact/ArtifactDatabase";
 import Assets from "../Assets/Assets";
-import { LevelsData, CharacterData, characterStatBase, ElementalData } from "./CharacterData";
+import { LevelsData, CharacterData, characterStatBase, ElementalData } from "../Data/CharacterData";
 import CharacterDatabase from "./CharacterDatabase";
 
 export default class Character {
@@ -27,6 +27,7 @@ export default class Character {
   static getName = (charKey, defVal = "") => (this.getCDataObj(charKey)?.name || defVal)
   static getStar = (charKey, defVal = 0) => (this.getCDataObj(charKey)?.star || defVal)
   static getElementalKey = (charKey, defVal = "") => (this.getCDataObj(charKey)?.elementKey || defVal)
+  static getElementalKeys = () => Object.keys(ElementalData)
   static getWeaponTypeKey = (charKey, defVal = "") => (this.getCDataObj(charKey)?.weaponTypeKey || defVal)
   static getConstellationName = (charKey, defVal = "") => (this.getCDataObj(charKey)?.constellationName || defVal)
   static getTitles = (charKey, defVal = []) => (this.getCDataObj(charKey)?.titles || defVal)

src/Character/CharacterDisplay.js

@@ -7,6 +7,7 @@ import Character from './Character';
 import CharacterCard from './CharacterCard';
 import CharacterDatabase from './CharacterDatabase';
 import CharacterDisplayCard from './CharacterDisplayCard';
+import ReactGA from 'react-ga';
 
 export default class CharacterDisplay extends React.Component {
   constructor(props) {
@@ -16,6 +17,7 @@ export default class CharacterDisplay extends React.Component {
       charToEdit: null,
       showEditor: false,
     }
+    ReactGA.pageview('/character')
   }
 
   deleteCharacter = (id) => {

src/Character/CharacterDisplay/CharacterArtifactPane.js

@@ -6,7 +6,6 @@ import ArtifactCard from '../../Artifact/ArtifactCard';
 import StatIcon from '../../Components/StatIcon';
 import Stat from "../../Stat";
 import Character from "../Character";
-import { ElementalData } from '../CharacterData';
 
 function CharacterArtifactPane(props) {
   let [showOther, setShowOther] = useState(false)
@@ -20,7 +19,7 @@ function CharacterArtifactPane(props) {
   statKeys.push(`${eleKey}_ele_atk`)
 
   const otherStatKeys = ["stam", "inc_heal", "pow_shield", "red_cd", "phy_dmg", "phy_res"]
-  Object.keys(ElementalData).forEach(ele => {
+  Character.getElementalKeys().forEach(ele => {
     otherStatKeys.push(`${ele}_ele_dmg`)
     otherStatKeys.push(`${ele}_ele_res`)
   })

src/Character/CharacterDisplay/CharacterOverviewPane.js

@@ -7,9 +7,9 @@ import Assets from "../../Assets/Assets"
 import { FloatFormControl, IntFormControl } from "../../Components/CustomFormControl"
 import { Stars } from "../../Components/StarDisplay"
 import StatIcon from "../../Components/StatIcon"
+import { CharacterSpecializedStatKey } from "../../Data/CharacterData"
 import Stat from "../../Stat"
 import Character from "../Character"
-import { CharacterSpecializedStatKey, ElementalData } from "../CharacterData"
 import StatInput from "../StatInput"
 export default function CharacterOverviewPane(props) {
   let { character: { characterKey, constellation }, editable, setOverridelevel, setConstellation } = props
@@ -140,7 +140,7 @@ function MainStatsCard(props) {
   const statKeys = ["hp", "atk", "def", "ele_mas", "crit_rate", "crit_dmg", "ener_rech", "heal_bonu"]
   const otherStatKeys = ["stam", "inc_heal", "pow_shield", "red_cd", "phy_dmg", "phy_res"]
 
-  Object.keys(ElementalData).forEach(ele => {
+  Character.getElementalKeys().forEach(ele => {
     otherStatKeys.push(`${ele}_ele_dmg`)
     otherStatKeys.push(`${ele}_ele_res`)
   })

src/FAQ/FAQDisplay.js

@@ -1,6 +1,8 @@
 import { Card, Col, Container, Row } from "react-bootstrap";
+import ReactGA from 'react-ga';
 
 export default function FAQ(props) {
+  ReactGA.pageview('/faq')
   return <Container>
     <Card bg="darkcontent" text="lightfont" className="mt-2">
       <Card.Header>Frequently Asked Questions</Card.Header>

src/Home/HomeDisplay.js

@@ -2,8 +2,10 @@ import art_editor from './art_editor.png'
 import character_editor from './character_editor.png'
 import build_generator from './build_generator.png'
 import { Badge, Card, Col, Container, Image, Row } from "react-bootstrap";
+import ReactGA from 'react-ga';
 
 export default function HomeDisplay(props) {
+  ReactGA.pageview('/home')
   return <Container className="mt-2">
     <Row><Col>
       <Card bg="darkcontent" text="lightfont">

src/Stat.js

@@ -1,4 +1,4 @@
-import { ElementalData } from "./Character/CharacterData";
+import { ElementalData } from "./Data/CharacterData";
 
 export default class Stat {
   //do not instantiate.

src/index.js

@@ -4,6 +4,10 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { HashRouter } from 'react-router-dom';
+import ReactGA from 'react-ga';
+ReactGA.initialize(process.env.REACT_APP_GA_TRACKINGID, {
+  debug: process.env.NODE_ENV === "development"
+});
 ReactDOM.render(
   <React.StrictMode>
     <HashRouter>