fix pack generation for op1

2026-03-21 17:24:14 -05:00 · 2020-03-01 21:51:59 -05:00 · 2020-03-01 21:51:59 -05:00 · f0422a3006
commit f0422a3006
parent 2e2aa2b617
15 changed files with 2569 additions and 2623 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -30,7 +30,7 @@ module.exports = {
    "no-unused-expressions": ["error", { "allowShortCircuit": true, "allowTernary": true }],
    "no-plusplus": "off",
    "no-prototype-builtins": "off",
-    "object-curly-spacing": ["warn", "never", {"objectsInObjects": false, "arraysInObjects": false}],
+    "object-curly-spacing": ["warn", "always", {"objectsInObjects": false, "arraysInObjects": false}],
    "object-curly-newline": "off",
    "linebreak-style": "off",
    "eqeqeq": "off",
--- a/.gitignore
+++ b/.gitignore
@ -9,3 +9,5 @@ node_modules
 *.sublime-workspace

 *.idea
+
+.vscode/
--- a/build/2.js
+++ b/build/2.js
--- a/build/3.js
+++ b/build/3.js
--- a/build/4.js
+++ b/build/4.js
@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{393:function(e,t,n){},396:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return y}));var a=n(122),r=n.n(a),l=n(62),o=n.n(l),i=n(53),c=n.n(i),s=n(119),u=n.n(s),m=n(120),d=n.n(m),h=n(121),f=n.n(h),b=n(0),E=n.n(b),p=n(54),v=n(34),k=(n(393),n(6),function(){return E.a.createElement("a",{href:"https://github.com/chaoticbackup",className:"name",rel:"noreferrer noopener",target:"_blank"},"Chaotic Backup Project")}),w=function(e){var t=e.block,n=e.text,a=e.sets;return E.a.createElement("div",{className:"lore"},E.a.createElement("div",{className:"block"},t),n.map((function(e,t){return E.a.createElement("div",{key:t,dangerouslySetInnerHTML:{__html:e}})})),a.map((function(e,t){if(e.text&&e.text.length>0)return E.a.createElement("div",{className:"set",key:t},E.a.createElement("div",{className:"title"},e.title),e.text.map((function(e,t){return E.a.createElement("div",{key:t},e)})))})))},y=function(e){function t(){var e,n;o()(this,t);for(var a=arguments.length,r=new Array(a),l=0;l<a;l++)r[l]=arguments[l];return(n=u()(this,(e=d()(t)).call.apply(e,[this].concat(r)))).state={lore:[]},n}return f()(t,e),c()(t,[{key:"componentDidMount",value:function(){var e=this;fetch("/src/json/starter_lore.json").then((function(e){return e.json()})).then((function(t){e.setState({lore:t})})).catch((function(){e.setState({lore:[{block:"Unable to load lore...",text:[]}]})}))}},{key:"render",value:function(){return E.a.createElement("div",null,E.a.createElement("br",null),E.a.createElement("div",{className:"with-love"},E.a.createElement("div",null,"Welcome to the ",E.a.createElement(k,null),"."),E.a.createElement("span",null,"Built by fans for fans."),E.a.createElement("br",null),E.a.createElement("br",null),E.a.createElement("div",null,"Made with ",E.a.createElement("span",{className:"heart"},"♥")," by",E.a.createElement("br",null),"Danude Sandstorm (Project Lead)",E.a.createElement("br",null),"Chiodosin1 (Database Contributions)",E.a.createElement("br",null),"Afjak and Blitser (Art and Knowledge)"),E.a.createElement("div",null,"Do you like the site? You can donate to support it!"),E.a.createElement("div",{className:"donate"},E.a.createElement(v.e,null)),E.a.createElement("div",{className:"lore"},"We were unsatisfied with the options on how to search for cards. I took the design of the old Chaotic website and added my own modernizations.  With an extensive lists of search options in the ",E.a.createElement(p.b,{to:"/collection"},"collection"),", you'll find deck building mores streamlined than ever before.  Chaotic is full of rich lore, but unfortunately the best database of official lore disapeared when the ",E.a.createElement(p.b,{to:"/portal"},"Portal to Perim")," disapeared along with the site. You can again explore the official lore and information of Creatures!"),E.a.createElement("br",null),this.state.lore.length>0?this.state.lore.map((function(e,t){return E.a.createElement(w,r()({key:t},e))})):"Loading lore entries..."))}}]),t}(E.a.Component)}}]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1041:function(e,t,n){},1044:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return y}));var a=n(169),r=n.n(a),l=n(82),o=n.n(l),i=n(63),c=n.n(i),s=n(166),u=n.n(s),m=n(167),d=n.n(m),h=n(168),f=n.n(h),b=n(0),E=n.n(b),p=n(83),v=n(55),k=(n(1041),n(3),function(){return E.a.createElement("a",{href:"https://github.com/chaoticbackup",className:"name",rel:"noreferrer noopener",target:"_blank"},"Chaotic Backup Project")}),w=function(e){var t=e.block,n=e.text,a=e.sets;return E.a.createElement("div",{className:"lore"},E.a.createElement("div",{className:"block"},t),n.map((function(e,t){return E.a.createElement("div",{key:t,dangerouslySetInnerHTML:{__html:e}})})),a.map((function(e,t){if(e.text&&e.text.length>0)return E.a.createElement("div",{className:"set",key:t},E.a.createElement("div",{className:"title"},e.title),e.text.map((function(e,t){return E.a.createElement("div",{key:t},e)})))})))},y=function(e){function t(){var e,n;o()(this,t);for(var a=arguments.length,r=new Array(a),l=0;l<a;l++)r[l]=arguments[l];return(n=u()(this,(e=d()(t)).call.apply(e,[this].concat(r)))).state={lore:[]},n}return f()(t,e),c()(t,[{key:"componentDidMount",value:function(){var e=this;fetch("/src/json/starter_lore.json").then((function(e){return e.json()})).then((function(t){e.setState({lore:t})})).catch((function(){e.setState({lore:[{block:"Unable to load lore...",text:[]}]})}))}},{key:"render",value:function(){return E.a.createElement("div",null,E.a.createElement("br",null),E.a.createElement("div",{className:"with-love"},E.a.createElement("div",null,"Welcome to the ",E.a.createElement(k,null),"."),E.a.createElement("span",null,"Built by fans for fans."),E.a.createElement("br",null),E.a.createElement("br",null),E.a.createElement("div",null,"Made with ",E.a.createElement("span",{className:"heart"},"♥")," by",E.a.createElement("br",null),"Danude Sandstorm (Project Lead)",E.a.createElement("br",null),"Chiodosin1 (Database Contributions)",E.a.createElement("br",null),"Afjak and Blitser (Art and Knowledge)"),E.a.createElement("div",null,"Do you like the site? You can donate to support it!"),E.a.createElement("div",{className:"donate"},E.a.createElement(v.e,null)),E.a.createElement("div",{className:"lore"},"We were unsatisfied with the options on how to search for cards. I took the design of the old Chaotic website and added my own modernizations.  With an extensive lists of search options in the ",E.a.createElement(p.b,{to:"/collection"},"collection"),", you'll find deck building mores streamlined than ever before.  Chaotic is full of rich lore, but unfortunately the best database of official lore disapeared when the ",E.a.createElement(p.b,{to:"/portal"},"Portal to Perim")," disapeared along with the site. You can again explore the official lore and information of Creatures!"),E.a.createElement("br",null),this.state.lore.length>0?this.state.lore.map((function(e,t){return E.a.createElement(w,r()({key:t},e))})):"Loading lore entries..."))}}]),t}(E.a.Component)}}]);
--- a/build/5.js
+++ b/build/5.js
--- a/build/main.js
+++ b/build/main.js
--- a/build/vendor.js
+++ b/build/vendor.js
--- a/build/vendor.js.LICENSE.txt
+++ b/build/vendor.js.LICENSE.txt
@ -0,0 +1,70 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+ * cookie
+ * Copyright(c) 2012-2014 Roman Shtylman
+ * Copyright(c) 2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/**
+ * Tone.js
+ * @author Yotam Mann
+ * @license http://opensource.org/licenses/MIT MIT License
+ * @copyright 2014-2019 Yotam Mann
+ */
+
+/** @license React v0.19.0
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.0
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.0
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.9.0
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -5,7 +5,9 @@
  "scripts": {
    "start": "webpack-dev-server -d --inline",
    "build": "npm run check-types && webpack -p",
-    "check-types": "tsc"
+    "check-types": "tsc",
+    "lint": "tsc --noEmit && eslint '*/**/*.{js,ts,tsx}'",
+    "lint:fix": "tsc --noEmit && eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
  },
  "repository": {
    "type": "git",
@ -14,67 +16,67 @@
  "author": "Danude Sandstorm",
  "license": "MIT",
  "dependencies": {
-    "@loadable/component": "^5.11.0",
-    "@material-ui/core": "^4.5.1",
-    "@material-ui/icons": "^4.5.1",
-    "@material-ui/styles": "^4.5.0",
+    "@loadable/component": "^5.12.0",
+    "@material-ui/core": "^4.9.5",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/styles": "^4.9.0",
    "lokijs": "^1.5.8",
-    "mobx": "^5.15.0",
-    "mobx-react": "^5.4.4",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.1.8",
    "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-collapsible": "^2.6.2",
+    "react": "^16.13.0",
+    "react-collapsible": "^2.7.0",
    "react-digit-input": "^1.0.0",
-    "react-dom": "^16.12.0",
+    "react-dom": "^16.13.0",
    "react-interactive": "^0.9.1",
    "react-loadable": "^5.5.0",
    "react-onclickoutside": "^6.9.0",
    "react-process-string": "^1.2.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
-    "tone": "^14.5.0",
-    "universal-cookie": "^4.0.2",
+    "tone": "^14.5.39",
+    "universal-cookie": "^4.0.3",
    "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
-    "@babel/cli": "^7.7.5",
-    "@babel/core": "^7.7.5",
-    "@babel/node": "^7.7.4",
-    "@babel/plugin-proposal-class-properties": "^7.7.4",
-    "@babel/plugin-proposal-decorators": "^7.7.4",
-    "@babel/plugin-proposal-dynamic-import": "^7.7.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
-    "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-    "@babel/plugin-transform-computed-properties": "^7.7.4",
-    "@babel/plugin-transform-runtime": "^7.7.5",
-    "@babel/polyfill": "^7.7.0",
-    "@babel/preset-env": "^7.7.5",
-    "@babel/preset-flow": "^7.7.4",
-    "@babel/preset-react": "^7.7.4",
-    "@babel/preset-typescript": "^7.7.4",
-    "@babel/register": "^7.7.4",
-    "@babel/runtime": "^7.7.1",
-    "@types/react": "^16.9.15",
-    "@types/react-dom": "^16.9.4",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.6",
+    "@babel/node": "^7.8.4",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-decorators": "^7.8.3",
+    "@babel/plugin-proposal-dynamic-import": "^7.8.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-computed-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/polyfill": "^7.8.3",
+    "@babel/preset-env": "^7.8.6",
+    "@babel/preset-flow": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@babel/register": "^7.8.6",
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16.9.23",
+    "@types/react-dom": "^16.9.5",
    "@types/react-router-dom": "^5.1.2",
-    "babel-eslint": "^10.0.3",
+    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.0.5",
-    "css-loader": "^3.2.1",
-    "eslint": "^6.7.2",
-    "eslint-plugin-flowtype": "^4.3.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "mini-css-extract-plugin": "^0.8.0",
-    "node-sass": "^4.13.0",
+    "css-loader": "^3.4.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-flowtype": "^4.6.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^2.5.0",
+    "mini-css-extract-plugin": "^0.8.2",
+    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "sass-loader": "^8.0.0",
-    "style-loader": "^1.0.1",
-    "terser-webpack-plugin": "^2.2.2",
-    "typescript": "^3.7.3",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0"
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.1.3",
+    "terser-webpack-plugin": "^2.3.5",
+    "typescript": "^3.8.3",
+    "webpack": "^4.41.6",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
  },
  "browserslist": {
    "production": [
--- a/src/components/Snippets.js
+++ b/src/components/Snippets.js
@ -24,9 +24,9 @@ export function Loading(props) {
 export function Rarity(props) {
  return (
    <span>
-      <img className={props.size||"icon16"} style={{verticalAlign: 'middle'}} src={("/src/img/icons/set/"+props.set+"/"+props.rarity+".png").toLowerCase()} />
+      <img className={props.size || "icon16"} style={{ verticalAlign: 'middle' }} src={("/src/img/icons/set/" + props.set + "/" + props.rarity + ".png").toLowerCase()} />
      {!props.notext &&
-      <React.Fragment>{API.sets[props.set]}&nbsp;|&nbsp;{props.rarity}</React.Fragment>
+        <React.Fragment>{API.sets[props.set]}&nbsp;|&nbsp;{props.rarity}</React.Fragment>
      }
    </span>
  );
@ -35,16 +35,16 @@ export function Rarity(props) {
 export function Unique(props) {
  let string = "";
  if (props.data.unique) {
-    string+="Unique, ";
+    string += "Unique, ";
  }
  if (props.data.loyal) {
-    string+="Loyal";
+    string += "Loyal";
    if (props.data.tribe == 'M\'arrillian') {
-      string +=" - M'arrillian or Minions";
+      string += " - M'arrillian or Minions";
    }
    // Battlegear loyality
    if (props.data.loyal != "1") {
-      string +=" - "+props.data.loyal;
+      string += " - " + props.data.loyal;
    }
  }
  if (props.data.legendary) {
@ -52,7 +52,7 @@ export function Unique(props) {
  }
  string = string.replace(/,\s+$/, "");
  return (
-    <span style={{fontWeight: "Bold"}}>{string}{string && <br />}</span>
+    <span style={{ fontWeight: "Bold" }}>{string}{string && <br />}</span>
  );
 }

@ -60,9 +60,9 @@ export function Name(props) {
  let name = props.name.split(",");
  return (<span className="name">
    <span className="bigger">{name[0]}</span>
-    { name.length > 1 &&
+    {name.length > 1 &&
      <React.Fragment>
-        <span style={{opacity: "0"}}>,</span>
+        <span style={{ opacity: "0" }}>,</span>
        <span className="subname">{name[1]}</span>
      </React.Fragment>
    }
@ -70,39 +70,39 @@ export function Name(props) {
 }

 export function Mugic(props) {
-  let type = (props.tribe||"generic") + (props.amount != undefined ? `_${props.amount}` : "");
-  let src = ("/src/img/icons/mugic/"+type+".png").toLowerCase();
-  return <img className={props.size||"icon20"} src={src} alt={"MC"} />
+  let type = (props.tribe || "generic") + (props.amount != undefined ? `_${props.amount}` : "");
+  let src = ("/src/img/icons/mugic/" + type + ".png").toLowerCase();
+  return <img className={props.size || "icon20"} src={src} alt={"MC"} />
 }

 export function Element(props) {
  if (props.value) {
-    return <img className={props.size||"icon20"} src={("/src/img/icons/elements/"+props.element+".png").toLowerCase()} />
+    return <img className={props.size || "icon20"} src={("/src/img/icons/elements/" + props.element + ".png").toLowerCase()} />
  }
  else {
-    return <img className={props.size||"icon20"} src={("/src/img/icons/elements/"+props.element+"-inactive.png").toLowerCase()} />
+    return <img className={props.size || "icon20"} src={("/src/img/icons/elements/" + props.element + "-inactive.png").toLowerCase()} />
  }
 }

 export function Tribe(props) {
-  return <img className={props.size||"icon16"} src={("/src/img/icons/tribes/"+props.tribe+".png").toLowerCase()} />
+  return <img className={props.size || "icon16"} src={("/src/img/icons/tribes/" + props.tribe + ".png").toLowerCase()} />
 }

 export function Discipline(props) {
-  return <img className={props.size||"icon16"} src={("/src/img/icons/disciplines/"+props.discipline+".png").toLowerCase()} />
+  return <img className={props.size || "icon16"} src={("/src/img/icons/disciplines/" + props.discipline + ".png").toLowerCase()} />
 }

 export function LocationIcon(props) {
-  return <img className={props.size||"icon16"} src="/src/img/icons/location.png" />
+  return <img className={props.size || "icon16"} src="/src/img/icons/location.png" />
 }

 export function BattlegearIcon(props) {
-  return <img className={props.size||"icon16"} src="/src/img/icons/battlegear.png" />
+  return <img className={props.size || "icon16"} src="/src/img/icons/battlegear.png" />
 }

 export function AttackIcon(props) {
  let attack = "attack" + ((props.bp && props.bp >= 0) ? "_" + props.bp : "");
-  return <img className={props.size||"icon16"} src={`/src/img/icons/attack/${attack}.png`} />
+  return <img className={props.size || "icon16"} src={`/src/img/icons/attack/${attack}.png`} />
 }

 export function Ability(props) {
@ -110,16 +110,16 @@ export function Ability(props) {
    regex: /([0-9x]*){{mc}}/i,
    fn: (key, result) => {
      if (result.length > 1 && result[1] != "") {
-        return (<Mugic key={key} tribe={props.tribe} amount={result[1].toLowerCase()} size="icon14"/>);
+        return (<Mugic key={key} tribe={props.tribe} amount={result[1].toLowerCase()} size="icon14" />);
      }
-      return (<Mugic key={key} tribe={props.tribe} size="icon14"/>);
+      return (<Mugic key={key} tribe={props.tribe} size="icon14" />);
    }
  }

  const elements = {
    regex: new RegExp(/(\b((fire)|(air)|(earth)|(water)))/i),
    fn: (key, result) => {
-      return (<span key={key}><Element element={result[0].replace(/\b/, '')} value="true" size="icon14"/>{result[0]}</span>);
+      return (<span key={key}><Element element={result[0].replace(/\b/, '')} value="true" size="icon14" />{result[0]}</span>);
    }
  }

@ -131,7 +131,7 @@ export function Ability(props) {
  }

  const tribes = {
-    regex: /(danian)|(generic)|(mipedian)|(overworld)|(underworld)/i,
+    regex: /(danian)|(generic)|(mipedian)|(overworld)|(underworld)|(m'arrillian)/i,
    fn: (key, result) => {
      return (<span key={key}><Tribe tribe={result[0]} size="icon14" />{result[0]}</span>);
    }
@ -139,23 +139,23 @@ export function Ability(props) {

  const filters = [mugic_counters, elements, disciplines, tribes];

-  return <div className={props.type||"ability"}>{processString(filters)(props.ability)}</div>
+  return <div className={props.type || "ability"}>{processString(filters)(props.ability)}</div>
 }

 export function Initiative(props) {
  let initiative = props.initiative;
  let image = null;
  if (["Danian", "Generic", "Mipedian", "OverWorld", "UnderWorld", "M'arrillian"].indexOf(initiative) > -1) {
-    image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/tribes/"+initiative+".png").toLowerCase()} />
+    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/src/img/icons/tribes/" + initiative + ".png").toLowerCase()} />
  }
-  else if (["courage", "power", "speed", "wisdom"].indexOf(initiative.toLowerCase()) > -1){
-    image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/disciplines/"+initiative+".png").toLowerCase()} />
+  else if (["courage", "power", "speed", "wisdom"].indexOf(initiative.toLowerCase()) > -1) {
+    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/src/img/icons/disciplines/" + initiative + ".png").toLowerCase()} />
  }
-  else if (["fire", "air", "earth", "water"].indexOf(initiative.toLowerCase()) > -1){
-    image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/elements/"+initiative+".png").toLowerCase()} />
+  else if (["fire", "air", "earth", "water"].indexOf(initiative.toLowerCase()) > -1) {
+    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/src/img/icons/elements/" + initiative + ".png").toLowerCase()} />
  }
  else if (initiative.toLowerCase() == "mugic counter") {
-    image = <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/mugic/generic.png").toLowerCase()} />
+    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/src/img/icons/mugic/generic.png").toLowerCase()} />
  }
  return (<span>{!props.notitle && ("Initiative: ")}{image}&nbsp;{initiative}</span>);
 }
@ -163,7 +163,7 @@ export function Initiative(props) {
 export function Splash(props) {
  let image = props.image;
  return (
-    <div style={{position: 'absolute', top: '0', left: '0', right: '0', bottom: '0', backgroundImage: 'url(\''+image+'\') no-repeat center', backgroundSize: 'cover'}} />
+    <div style={{ position: 'absolute', top: '0', left: '0', right: '0', bottom: '0', backgroundImage: 'url(\'' + image + '\') no-repeat center', backgroundSize: 'cover' }} />
  );
 }

@ -173,12 +173,12 @@ export function Donate(props) {
      <input type="hidden" name="cmd" value="_s-xclick" />
      <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----" />
      <a href="https://www.paypal.com/cgi-bin/webscr"><input type="image" src="/src/img/btn_donate_SM.gif" border="0" name="submit" alt="PayPal Donate" /></a>
-      { /* <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" /> */ }
+      { /* <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" /> */}
    </form>
  );
 }

 export function SearchButton(props) {
  return (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="magnifying-glass"><g fillRule="evenodd"><path d="M21.747 20.524l-4.872-4.871a.864.864 0 1 0-1.222 1.222l4.871 4.872a.864.864 0 1 0 1.223-1.223z"></path><path d="M3.848 10.763a6.915 6.915 0 0 1 6.915-6.915 6.915 6.915 0 0 1 6.915 6.915 6.915 6.915 0 0 1-6.915 6.915 6.915 6.915 0 0 1-6.915-6.915zm-1.729 0a8.643 8.643 0 0 0 8.644 8.644 8.643 8.643 0 0 0 8.644-8.644 8.643 8.643 0 0 0-8.644-8.644 8.643 8.643 0 0 0-8.644 8.644z"></path></g>
-    </svg>);
+  </svg>);
 }
--- a/src/components/entercode/PackSimulator.js
+++ b/src/components/entercode/PackSimulator.js
@ -1,226 +0,0 @@
-import React from 'react';
-import {observable, observe} from "mobx";
-import {observer, inject} from 'mobx-react';
-import {Link} from 'react-router-dom';
-import loki from 'lokijs';
-import Interactive from 'react-interactive';
-import API from '../SpreadsheetData';
-import {Loading} from '../Snippets';
-import s from '../../styles/style';
-import './packs.scss';
-
-@inject((stores, props, context) => props) @observer
-export default class PackSimulator extends React.Component {
-  @observable loaded = false
-  @observable cards = []
-  @observable set = ""
-  @observable packs = 1
-
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-
-    for(let i = 0; i < 9; i++) {
-      this.cards.push(<div key={i} className="card" style={{backgroundImage: `url("${API.base_image+API.card_back}")`}}></div>);
-    }
-  }
-
-  render() {
-    if (this.loaded == false) {
-      API.LoadDB([{'cards': 'attacks'}, {'cards': 'battlegear'}, {'cards': 'creatures'}, {'cards': 'locations'}, {'cards': 'mugic'}])
-      .then(() => {
-        this.setupDB();
-        this.loaded = true;
-      });
-      return (<Loading />);
-    }
-
-    let setsInput = [];
-    let i = 1;
-    for (const set in API.sets) {
-      setsInput.push(<option key={i++} value={set}>{API.sets[set]}</option>);
-      if (i>11) break;
-    }
-
-    return (<div className="packsim">
-      <Interactive as={Link} {...s.link}
-       to={`/EnterTheCode/`}>Enter The Code</Interactive>
-      <br /><br />
-      <form onSubmit={this.handleSubmit}>
-        <label>Packs:
-          <input name="packs" type="number"
-            value={this.packs}
-            min="1" max="24"
-            style={{width: "32px", padding: '0px'}}
-            onChange={(e) => {if(e.target.value>24) e.target.value=24; this.handleChange(e)}} />
-        </label>
-        <select name="set" value={this.set} onChange={this.handleChange}>
-          <option defaultValue="selected" hidden style={{fontStyle: 'italic'}}>Select a Set</option>
-          {setsInput}
-        </select>
-        <br /><br />
-        <input disabled={!this.set} type="submit" value="Open Packs" />
-      </form>
-      <br /><br />
-      <div className="pack">{this.cards}</div>
-    </div>);
-  }
-
-  handleChange(event) {
-    const target = event.target;
-    const value = target.type === 'checkbox' ? target.checked : target.value;
-    const name = target.name;
-    this[name] = value;
-  }
-
-  handleSubmit(event) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    let cards = []; // Returned list of card divs
-    let card_names = []; // Prevent duplicates in pack
-    let key = 0; // React key iterator uniqueness
-
-    let pview = this.filter.addDynamicView('set');
-
-    const randomRare = () => {
-      let randomNumber = Math.floor(Math.random() * 24) + 1;
-      if (randomNumber == 24) return "Ultra Rare";
-      else if (randomNumber % 3 == 0) return "Super Rare";
-      else return "Rare";
-    };
-    
-    const randomWeird = () => {
-      let randomNumber = Math.floor(Math.random() * 75) + 1;
-      if (randomNumber == 75) return "Ultra Rare";
-      else if (randomNumber < 19) return "Super Rare";
-      else if (randomNumber < 44) return "Rare";
-      else return "Uncommon";
-    };
-
-    const gendisp = (avg) => {
-      let min = parseInt(avg) - 10;
-      if (min < 0) min = 0;
-      return (Math.floor(Math.random() * 5)) * 5 + min;
-    }
-    const geneng = (avg) => {
-      let min = parseInt(avg) - 5;
-      if (min < 0) min = 0;
-      return (Math.floor(Math.random() * 3)) * 5 + min;
-    }
-
-    const gencard = (results, i) => {
-      let id = Math.floor(Math.random() * results.length);
-      let card = results[id];
-
-      if (!card) {
-        cards.push(<div key={i} className="card" style={{backgroundImage: `url("${API.base_image+API.card_back}")`}}></div>);
-        return;
-      }
-
-      if (card_names.indexOf(card.gsx$name) > -1 && card.gsx$exclusive.includes("Starter")) {
-        return gencard(results, i);
-      }
-      card_names.push(card.gsx$name);
-
-      if (card.gsx$type != "Creatures") {
-        cards.push(<div key={key++} className="card" style={{backgroundImage: `url("${API.base_image + (card.gsx$image||API.card_back)}")`}}></div>);
-      }
-      else {
-        const courage = gendisp(card.gsx$courage);
-        const power = gendisp(card.gsx$power);
-        const wisdom = gendisp(card.gsx$wisdom);
-        const speed = gendisp(card.gsx$speed);
-        const energy = geneng(card.gsx$energy);
-        cards.push(<div key={key++} className="card" style={{backgroundImage: `url("${API.base_image + (card.gsx$image||API.card_back)}")`}}>
-          <div className="stats">
-            <span key="courage">{courage}</span>
-            <span key="power">{power}</span>
-            <span key="wisdom">{wisdom}</span>
-            <span key="speed">{speed}</span>
-            <span key="energy">{energy}</span>
-          </div>
-        </div>);
-      }
-
-    }
-
-    const genrarity = (rarity, num) => {
-      pview.applyFind({'gsx$set': this.set})
-        .applyFind({'gsx$rarity': rarity});
-      let results = pview.data();
-      for (let i=0; i<num; i++) gencard(results, i);
-      pview.removeFilters();
-    }
-
-    // AU sets have 6 common and 3 rare+
-    // DOP to FUN had 4 common, 3 uncommon, 2 rare+
-    // OP1 had 3 cards per pack, Premium Packs had 6 cards per pack.
-    let newSets = ["AU", "FAS"];
-    let weirdSets = ["OP1", "PE1"];
-    
-      for (let i = 0; i < this.packs; i++) {
-        // Before AU sets
-        if (newSets.indexOf(this.set) == -1 && weirdSets.indexOf(this.set) == -1) {
-          genrarity('Common', 4);
-          genrarity('Uncommon', 3);
-          genrarity('Rare', 1);
-          genrarity(randomRare(), 1);
-        }
-        // AU sets and after
-        else if (weirdSets.indexOf(this.set) == -1) {
-          genrarity('Common', 6);
-          genrarity('Rare', 2);
-          genrarity(randomRare(), 1);
-        }
-        else if (this.set === "OP1") {
-          genrarity("Common", 2);
-          
-          genrarity(randomWeird(), 1);
-        }
-        else if (this.set === "PE1") {
-          genrarity("Super Rare", 5);
-          genrarity("Ultra Rare", 1);
-        }
-        card_names = [];
-    }
-
-    this.filter.removeDynamicView('set');
-
-    this.cards = cards;
-  }
-
-  setupDB() {
-    let filter = (new loki("filter.db")).addCollection('filter');
-
-    // Sort data descending alphabetically
-    var pview = filter.addDynamicView('alphabetical');
-    pview.applySimpleSort('gsx$name');
-
-    let temp;
-
-    temp = API.cards.attacks.find();
-    temp.forEach((v) => delete v.$loki);
-    filter.insert(temp);
-
-    temp = API.cards.battlegear.find();
-    temp.forEach((v) => delete v.$loki);
-    filter.insert(temp);
-
-    temp = API.cards.creatures.find();
-    temp.forEach((v) => delete v.$loki);
-    filter.insert(temp);
-
-    temp = API.cards.locations.find();
-    temp.forEach((v) => delete v.$loki);
-    filter.insert(temp);
-
-    temp = API.cards.mugic.find();
-    temp.forEach((v) => delete v.$loki);
-    filter.insert(temp);
-
-    this.filter = filter;
-  }
-
-}
--- a/src/components/entercode/PackSimulator/generate.js
+++ b/src/components/entercode/PackSimulator/generate.js
@ -0,0 +1,157 @@
+import React from 'react';
+import loki from 'lokijs';
+import API from '../../SpreadsheetData';
+import { observable } from 'mobx';
+
+class GenerateCard {
+    @observable filter = null;
+
+    setupDB = () => {
+        let filter = (new loki("filter.db")).addCollection('filter');
+
+        // Sort data descending alphabetically
+        var pview = filter.addDynamicView('alphabetical');
+        pview.applySimpleSort('gsx$name');
+
+        let temp;
+
+        temp = API.cards.attacks.find();
+        temp.forEach((v) => delete v.$loki);
+        filter.insert(temp);
+
+        temp = API.cards.battlegear.find();
+        temp.forEach((v) => delete v.$loki);
+        filter.insert(temp);
+
+        temp = API.cards.creatures.find();
+        temp.forEach((v) => delete v.$loki);
+        filter.insert(temp);
+
+        temp = API.cards.locations.find();
+        temp.forEach((v) => delete v.$loki);
+        filter.insert(temp);
+
+        temp = API.cards.mugic.find();
+        temp.forEach((v) => delete v.$loki);
+        filter.insert(temp);
+
+        this.filter = filter;
+    }
+
+    generate = ({ packs, set }) => {
+        let cards = []; // Returned list of card divs
+        let card_names = []; // Prevent duplicates in pack
+        let key = 0; // React key iterator uniqueness
+
+        let pview = this.filter.addDynamicView('set');
+
+        const gendisp = (avg) => {
+            let min = parseInt(avg) - 10;
+            if (min < 0) min = 0;
+            return (Math.floor(Math.random() * 5)) * 5 + min;
+        }
+        const geneng = (avg) => {
+            let min = parseInt(avg) - 5;
+            if (min < 0) min = 0;
+            return (Math.floor(Math.random() * 3)) * 5 + min;
+        }
+
+        const gencard = (results) => {
+            let id = Math.floor(Math.random() * results.length);
+            let card = results[id];
+
+            if (!card) {
+                cards.push(<div key={key++} className="card" style={{ backgroundImage: `url("${API.base_image + API.card_back}")` }}></div>);
+                return;
+            }
+
+            if (card_names.indexOf(card.gsx$name) > -1 || card.gsx$exclusive.includes("Starter")) {
+                return gencard(results);
+            }
+            card_names.push(card.gsx$name);
+
+            if (card.gsx$type != "Creatures") {
+                cards.push(<div key={key++} className="card" style={{ backgroundImage: `url("${API.base_image + (card.gsx$image || API.card_back)}")` }}></div>);
+            }
+            else {
+                const courage = gendisp(card.gsx$courage);
+                const power = gendisp(card.gsx$power);
+                const wisdom = gendisp(card.gsx$wisdom);
+                const speed = gendisp(card.gsx$speed);
+                const energy = geneng(card.gsx$energy);
+                cards.push(<div key={key++} className="card" style={{ backgroundImage: `url("${API.base_image + (card.gsx$image || API.card_back)}")` }}>
+                    <div className="stats">
+                        <span key="courage">{courage}</span>
+                        <span key="power">{power}</span>
+                        <span key="wisdom">{wisdom}</span>
+                        <span key="speed">{speed}</span>
+                        <span key="energy">{energy}</span>
+                    </div>
+                </div>);
+            }
+
+        }
+
+        const genrarity = (rarity, num) => {
+            pview.applyFind({ 'gsx$set': set })
+                .applyFind({ 'gsx$rarity': rarity });
+            let results = pview.data();
+            for (let i = 0; i < num; i++) gencard(results);
+            pview.removeFilters();
+        }
+
+
+
+        // DOP to FUN had 9 cards: 4 Common, 3 Uncommon, 2 Rare+
+        // OP1 had 3 cards: 2 Common, 1 Uncommon+
+        // Premium Packs had 6 cards, 5 Super and 1 Ultra
+        // AU sets had 9 cards: 6 Common and 3 Rare+
+        const randomRare = () => {
+            let randomNumber = Math.floor(Math.random() * 24) + 1;
+            if (randomNumber == 24) return "Ultra Rare";
+            else if (randomNumber % 3 == 0) return "Super Rare";
+            else return "Rare";
+        };
+
+        const newSets = ["AU", "FAS"];
+
+        for (let i = 0; i < packs; i++) {
+            if (set === "OP1") {
+                genrarity("Common", 2);
+                genrarity((() => {
+                    const rnd = Math.floor(Math.random() * 75) + 1;
+                    if (rnd == 75) return "Ultra Rare";
+                    else if (rnd < 19) return "Super Rare";
+                    else if (rnd < 44) return "Rare";
+                    else return "Uncommon";
+                })(), 1);
+            }
+            else if (set === "PE1") {
+                genrarity("Super Rare", 5);
+                genrarity("Ultra Rare", 1);
+            }
+            // AU sets and after
+            else if (newSets.indexOf(set) > -1) {
+                genrarity('Common', 6);
+                genrarity('Rare', 2);
+                genrarity(randomRare(), 1);
+            }
+            else {
+                // Before AU sets
+                genrarity('Common', 4);
+                genrarity('Uncommon', 3);
+                genrarity('Rare', 1);
+                genrarity(randomRare(), 1);
+            }
+            card_names = [];
+        }
+
+        this.filter.removeDynamicView('set');
+
+        return cards;
+    }
+}
+
+const { generate, setupDB } = new GenerateCard();
+
+export { generate, setupDB };
--- a/src/components/entercode/PackSimulator/index.js
+++ b/src/components/entercode/PackSimulator/index.js
@ -0,0 +1,82 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import Interactive from 'react-interactive';
+import { setupDB, generate } from "./generate";
+import API from '../../SpreadsheetData';
+import { Loading } from '../../Snippets';
+import s from '../../../styles/style';
+import '../packs.scss';
+
+export default function (props) {
+    const [loaded, setLoaded] = useState(false);
+    const [set, setSet] = useState("");
+    const [setsInput, setSetsInput] = useState([]);
+    const [cards, setCards] = useState([]);
+    const [packs, setPacks] = useState(1);
+
+    useEffect(() => {
+        API.LoadDB([{ 'cards': 'attacks' }, { 'cards': 'battlegear' }, { 'cards': 'creatures' }, { 'cards': 'locations' }, { 'cards': 'mugic' }])
+            .then(() => {
+                setupDB();
+                setLoaded(true);
+            });
+
+        let cards = [];
+        for (let i = 0; i < 9; i++) {
+            cards.push(<div key={i} className="card" style={{ backgroundImage: `url("${API.base_image + API.card_back}")` }}></div>);
+        }
+        setCards(cards);
+
+        let setsInput = [];
+        let i = 1;
+        for (const set in API.sets) {
+            setsInput.push(<option key={i++} value={set}>{API.sets[set]}</option>);
+            if (set === "PE1") break;
+        }
+        setSetsInput(setsInput);
+    }, []);
+
+    if (loaded == false) {
+        return (<Loading />);
+    }
+
+    const onPacksChange = (e) => {
+        if (e.target.value > 24) e.target.value = 24;
+        setPacks(e.target.value);
+    }
+
+    const onSetChange = (e) => {
+        setSet(e.target.value);
+    }
+
+    const handleSubmit = (e) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        setCards(generate({ packs, set }));
+    }
+
+    return (
+        <div className="packsim">
+            <Interactive as={Link} {...s.link} to={`/EnterTheCode/`}>Enter The Code</Interactive>
+            <br /><br />
+            <form onSubmit={handleSubmit}>
+                <label>Packs:
+                <input name="packs" type="number"
+                        value={packs}
+                        min="1" max="24"
+                        style={{ width: "32px", padding: '0px' }}
+                        onChange={onPacksChange} />
+                </label>
+                <select name="set" value={set} onChange={onSetChange}>
+                    <option defaultValue="selected" hidden style={{ fontStyle: 'italic' }}>Select a Set</option>
+                    {setsInput}
+                </select>
+                <br /><br />
+                <input disabled={!set} type="submit" value="Open Packs" />
+            </form>
+            <br /><br />
+            <div className="pack">{cards}</div>
+        </div>
+    );
+}