Update webworker, add character specialized stat

- Added work-loader to load webworkers - Added specialized character stat to character Editor - Modified artifact substat data
frzyc · Dec 12, 2020 · a555077 · a555077
1 parent b99e876
commit a555077
Show file tree

Hide file tree

Showing 12 changed files with 244 additions and 165 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "testserver": "set PUBLIC_URL= && npm run build && node ./test-server.js",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
@@ -45,6 +46,7 @@
   },
   "devDependencies": {
     "express": "^4.17.1",
-    "gh-pages": "^3.1.0"
+    "gh-pages": "^3.1.0",
+    "worker-loader": "^3.0.6"
   }
 }
diff --git a/src/App.js b/src/App.js
@@ -5,7 +5,6 @@ import { Col, Row } from 'react-bootstrap';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import {
-  BrowserRouter as Router,
   Link, Route, Switch
 } from "react-router-dom";
 import './App.scss';
@@ -17,29 +16,28 @@ function App() {
   return (
     <div className="h-100 d-flex flex-column">
       <div id="content" className="flex-grow-1">
-        <Router basename="/genshin-optimizer">
-          <Navbar bg="dark" variant="dark" expand="md">
-            <Navbar.Brand as={Link} to="/">Genshin Optimizer</Navbar.Brand>
-            <Nav className="mr-auto">
-              <Nav.Link as={Link} to="/artifact">
-                Artifacts</Nav.Link>
-              <Nav.Link as={Link} to="/character">Characters</Nav.Link>
-              {process.env.NODE_ENV === "development" && <Nav.Link as={Link} to="/build">Builds</Nav.Link>}
-            </Nav>
-            <Nav>
-              {process.env.NODE_ENV === "development" && <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>
-            </Nav>
-          </Navbar>
+        <Navbar bg="dark" variant="dark" expand="md">
+          <Navbar.Brand as={Link} to="/">Genshin Optimizer</Navbar.Brand>
+          <Nav className="mr-auto">
+            <Nav.Link as={Link} to="/artifact">
+              Artifacts</Nav.Link>
+            <Nav.Link as={Link} to="/character">Characters</Nav.Link>
+            <Nav.Link as={Link} to="/build">Builds</Nav.Link>
+          </Nav>
+          <Nav>
+            {process.env.NODE_ENV === "development" && <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>
+          </Nav>
+        </Navbar>
 
-          <Switch>
-            <Route path="/artifact" component={ArtifactDisplay} />
-            <Route path="/character" component={CharacterDisplay} />
-            <Route path="/build" component={BuildDisplay} />
-            <Route path="/" component={ArtifactDisplay} />
-          </Switch>
+        <Switch>
+          <Route path="/artifact" component={ArtifactDisplay} />
+          <Route path="/character" component={CharacterDisplay} />
+          <Route path="/build" component={BuildDisplay} />
+          <Route path="/" component={ArtifactDisplay} />
+          {/* <Route exact path="/" component={Home} /> */}
+        </Switch>
 
-        </Router>
       </div>
       <Nav id="footer" className="bg-dark">
         <Row className="w-100 ml-0 mr-0 mb-2">

diff --git a/src/Artifact/Artifact.js b/src/Artifact/Artifact.js
@@ -28,7 +28,7 @@ export default class Artifact {
   static getStatUnit = (key, defVal = "") => {
     if (key && ArtifactStatsData[key] && ArtifactStatsData[key].unit)
       return ArtifactStatsData[key].unit
-    else if (key.includes("_ele_dmg"))
+    else if (key && key.includes("_ele_dmg"))
       return this.getStatUnit("ele_dmg")
     else
       return defVal

diff --git a/src/Artifact/ArtifactData.js b/src/Artifact/ArtifactData.js
@@ -16,16 +16,16 @@ const ArtifactStatsData = {
 };
 
 const ArtifactSubStatsData = {
-  hp: { 3: { low: 100, high: 143 }, 4: { low: 167, high: 239 }, 5: { low: 209, high: 299 } },
-  hp_: { 3: { low: 2.5, high: 3.5 }, 4: { low: 3.3, high: 4.7 }, 5: { low: 4.1, high: 5.8 } },
-  atk: { 3: { low: 7, high: 9 }, 4: { low: 11, high: 16 }, 5: { low: 14, high: 19 } },
-  atk_: { 3: { low: 2.5, high: 3.5 }, 4: { low: 3.3, high: 4.7 }, 5: { low: 4.1, high: 5.8 } },
-  def: { 3: { low: 8, high: 11 }, 4: { low: 13, high: 19 }, 5: { low: 16, high: 23 } },
-  def_: { 3: { low: 3.1, high: 4.4 }, 4: { low: 4.1, high: 5.8 }, 5: { low: 5.1, high: 7.3 } },
-  ele_mas: { 3: { low: 10, high: 14 }, 4: { low: 13, high: 19 }, 5: { low: 16, high: 23 } },
-  ener_rech: { 3: { low: 2.7, high: 3.5 }, 4: { low: 4.1, high: 5.8 }, 5: { low: 4.5, high: 6.5 } },
-  crit_rate: { 3: { low: 1.6, high: 2.3 }, 4: { low: 2.2, high: 3.1 }, 5: { low: 2.7, high: 3.9 } },
-  crit_dmg: { 3: { low: 3.3, high: 4.7 }, 4: { low: 4.4, high: 6.2 }, 5: { low: 5.4, high: 7.8 } },
+  hp: { 2: { low: 50, high: 72 }, 3: { low: 100, high: 143 }, 4: { low: 167, high: 239 }, 5: { low: 209, high: 299 } },
+  hp_: { 2: { low: 1.6, high: 2.3 }, 3: { low: 2.5, high: 3.5 }, 4: { low: 3.3, high: 4.7 }, 5: { low: 4.1, high: 5.8 } },
+  atk: { 2: { low: 3, high: 4 }, 3: { low: 7, high: 9 }, 4: { low: 11, high: 16 }, 5: { low: 14, high: 19 } },
+  atk_: { 2: { low: 1.6, high: 2.3 }, 3: { low: 2.5, high: 3.5 }, 4: { low: 3.3, high: 4.7 }, 5: { low: 4.1, high: 5.8 } },
+  def: { 2: { low: 4, high: 6 }, 3: { low: 8, high: 11 }, 4: { low: 13, high: 19 }, 5: { low: 16, high: 23 } },
+  def_: { 2: { low: 2, high: 2.9 }, 3: { low: 3.1, high: 4.4 }, 4: { low: 4.1, high: 5.8 }, 5: { low: 5.1, high: 7.3 } },
+  ele_mas: { 2: { low: 7, high: 9 }, 3: { low: 10, high: 14 }, 4: { low: 13, high: 19 }, 5: { low: 16, high: 23 } },
+  ener_rech: { 2: { low: 1.8, high: 2.6 }, 3: { low: 2.7, high: 3.9 }, 4: { low: 3.6, high: 5.2 }, 5: { low: 4.5, high: 6.5 } },
+  crit_rate: { 2: { low: 1.1, high: 1.6 }, 3: { low: 1.6, high: 2.3 }, 4: { low: 2.2, high: 3.1 }, 5: { low: 2.7, high: 3.9 } },
+  crit_dmg: { 2: { low: 2.2, high: 3.1 }, 3: { low: 3.3, high: 4.7 }, 4: { low: 4.4, high: 6.2 }, 5: { low: 5.4, high: 7.8 } },
 }
 
 const ArtifactSlotSData = {
@@ -35,6 +35,7 @@ const ArtifactSlotSData = {
   goblet: { name: "Goblet of Eonothem", stats: ["hp_", "def_", "atk_", "ele_mas", "phy_dmg", "anemo_ele_dmg", "geo_ele_dmg", "electro_ele_dmg", "hydro_ele_dmg", "pyro_ele_dmg", "cryo_ele_dmg",] },
   circlet: { name: "Circlet of Logos", stats: ["hp_", "def_", "atk_", "ele_mas", "crit_rate", "crit_dmg", "heal_bonu"] },
 };
+const CharacterSpecializedStatKey = ["hp_", "atk_", "def_", "ele_mas", "ener_rech", "heal_bonu", "crit_rate", "crit_dmg", "phy_dmg", "anemo_ele_dmg", "geo_ele_dmg", "electro_ele_dmg", "hydro_ele_dmg", "pyro_ele_dmg", "cryo_ele_dmg"]
 const ArtifactSetsData = {
   "Wanderer's Troupe": {
     name: "Wanderer's Troupe", rarity: [4, 5], pieces: {
@@ -634,5 +635,6 @@ export {
   ArtifactSubStatsData,
   ArtifactStarsData,
   ArtifactMainStatsData,
-  ElementalData
+  ElementalData,
+  CharacterSpecializedStatKey
 }
diff --git a/src/Artifact/ArtifactEditor.js b/src/Artifact/ArtifactEditor.js
@@ -1,16 +1,7 @@
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
-import { OverlayTrigger, Popover } from 'react-bootstrap';
-import Alert from 'react-bootstrap/Alert';
-import Button from 'react-bootstrap/Button';
-import Card from 'react-bootstrap/Card';
-import Col from 'react-bootstrap/Col';
-import Dropdown from 'react-bootstrap/Dropdown';
-import DropdownButton from 'react-bootstrap/DropdownButton';
-import FormControl from 'react-bootstrap/FormControl';
-import InputGroup from 'react-bootstrap/InputGroup';
-import Row from 'react-bootstrap/Row';
+import { Alert, Button, Card, Col, Dropdown, DropdownButton, FormControl, InputGroup, OverlayTrigger, Popover, Row } from 'react-bootstrap';
 import { FloatFormControl, IntFormControl } from '../Components/CustomFormControl';
 import SlotIcon from '../Components/SlotIcon';
 import { getRandomArbitrary, getRandomElementFromArray, getRandomIntInclusive } from '../Util';
@@ -40,19 +31,20 @@ export default class ArtifactEditor extends React.Component {
     this.setState({ level: newlevel })
   }
 
-  ArtifactDropDown = () => {
+  ArtifactDropDown = (props) => {
     let dropdownitemsForStar = (star) =>
       Artifact.getArtifactSetsByMaxStarEntries(star).map(([key, setobj]) =>
-        <Dropdown.Item key={key}
+        (<Dropdown.Item key={key}
           onClick={() => this.setState(state => {
             let ret = { setKey: key, numStars: setobj.rarity[setobj.rarity.length - 1] }
             if (state.level > ret.numStars * 4) ret.level = ret.numStars * 4
             return ret
           })}
         >
           {setobj.name}
-        </Dropdown.Item >)
-    return <DropdownButton as={InputGroup.Prepend} title={Artifact.getArtifactSetName(this.state.setKey, "Artifact Set")}>
+        </Dropdown.Item >))
+
+    return (<DropdownButton as={InputGroup.Prepend} title={Artifact.getArtifactSetName(this.state.setKey, "Artifact Set")}>
       <Dropdown.ItemText>Max Rarity 🟊🟊🟊🟊🟊</Dropdown.ItemText>
       {dropdownitemsForStar(5)}
       <Dropdown.Divider />
@@ -61,11 +53,14 @@ export default class ArtifactEditor extends React.Component {
       <Dropdown.Divider />
       <Dropdown.ItemText>Max Rarity 🟊🟊🟊</Dropdown.ItemText>
       {dropdownitemsForStar(3)}
-    </DropdownButton>
+    </DropdownButton>)
   }
-  MainSelection = (props) =>
-    <InputGroup>
-      <this.ArtifactDropDown />
+  Test = () => <div>WTFFFFFF</div>
+  MainSelection = (props) => {
+
+    return (<InputGroup>
+      {/* Don't know why I can't do <this.ArtifactDropDown />, it has error in production: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. */}
+      {this.ArtifactDropDown()}
       <DropdownButton as={InputGroup.Prepend} title={this.state.numStars > 0 ? "🟊".repeat(this.state.numStars) : "Rarity"} disabled={!this.state.setKey}>
         {Object.keys(ArtifactStarsData).map((star, index) => {
           star = parseInt(star);
@@ -91,7 +86,8 @@ export default class ArtifactEditor extends React.Component {
         <Button onClick={() => this.setLevel(this.state.level + 1)} disabled={!this.state.setKey || this.state.level === (this.state.numStars * 4)}>+</Button>
         <Button onClick={() => this.setLevel(this.state.numStars * 4)} disabled={!this.state.setKey || this.state.level === (this.state.numStars * 4)}>{this.state.numStars * 4}</Button>
       </InputGroup.Append>
-    </InputGroup>
+    </InputGroup>)
+  }
   MainStatInputRow = () =>
     <InputGroup>
       <DropdownButton