refactor; minimal collection + extended Attack

2026-04-13 20:35:51 -05:00 · 2021-11-05 18:28:09 -04:00 · 2021-11-05 18:28:09 -04:00 · 70eb62ef1c
commit 70eb62ef1c
parent a9853a0eba
31 changed files with 714 additions and 373 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -75,6 +75,7 @@
    "react/jsx-indent-props": ["warn", 2], 
    "react/no-unescaped-entities": "off",
    "react/prop-types": "off",
+    "react-hooks/exhaustive-deps": "warn",
    "semi": ["warn", "always", { "omitLastInOneLineBlock": true }]
  },
  "overrides": [
@ -90,7 +91,7 @@
        "ecmaFeatures": { "jsx": true },
        "ecmaVersion": 2019,
        "sourceType": "module",
-        "project": "./tsconfig.json"
+        "project": ["./tsconfig.json"]
      },
      "plugins": [
        "@typescript-eslint"
--- a/src/components/BaseStylesWrapper.js
+++ b/src/components/BaseStylesWrapper.js
@ -0,0 +1,128 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import API from './SpreadsheetData';
+import { Donate } from './Snippets';
+
+export default function Base({ children }) {
+  // Configuration for the language and background
+  // Images managed in css file
+  const language = "ENG";
+  const bkgrnd = "05";
+      
+  return (
+    <>
+      <div className="fix-pgBkgrnd-repeat-x">
+        <div className={"fix-img-bkgrnd fix-img-bkgrnd_"+bkgrnd}></div>
+      </div>
+      <div className="pgBkgrnd-repeat-x">
+        <div className="img-bkgrnd">
+          <div className="content-wrap">
+            <div className="legacy legacy-header">
+              <div className="header">
+                <div id="nav">
+                  <div className="zero-clear-line headerSpriteNav-wrap">
+                    <ul id="unity-sprite" className={language}>
+                      <li id="unity-nav1" className={language}></li>
+                      <li id="unity-nav2" className={language}><Link to={`/collection/`}><span>Collect</span></Link></li>
+                      <li id="unity-nav3" className={language}><a href="https://chaoticbackup.forumotion.com/f11-deck-building"><span>Build</span></a></li>
+                      <li id="unity-nav4" className={language}><a href="https://chaoticbackup.forumotion.com/f16-trading-buying-and-selling"><span>Trade</span></a></li>
+                      <li id="unity-nav5" className={language}><Link to={`/`}><span>Home</span></Link></li>
+                      <li id="unity-nav6" className={language}><a href="https://chaoticbackup.forumotion.com"><span>Forums</span></a></li>
+                      <li id="unity-nav7" className={language}><Link to={`/portal/`}><span>Portal</span></Link></li>
+                      <li id="unity-nav8" className={language}><a href="https://chaoticrecode.com"><span>Play</span></a></li>
+                      <li id="unity-nav9" className={language}></li>
+                    </ul>
+                    <ul id="unityETC-sprite" className={language}>
+                      <li id="unity-nav10" className={language}><Link to={`/EnterTheCode`}><span>Enter the Code</span></Link></li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="banner-ad-top">
+            </div>
+            <div className="legacy content">
+              <div className="left-column">
+                <div className="full-width clear-line" style={{ marginBottom: "5px" }}>
+                </div>
+              </div>
+              <div className="full-column">
+                <div className="pods-wrap pad5px-btm">
+                  <div className="clear-line full-width">
+                    <div className="adPod-top-wrap">
+                      <div className="videoAdPod-topleft">
+                        <div className="videoAdPod-topLeft-repeat-x"></div>
+                      </div>
+                      <div className="videoAdPod-topright">
+                        <div className="videoAdPod-topRight-repeat-x"></div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="content-area-repeat-xy">
+                    <div className="content-area-top-repeat-x">
+                      <div className="content-area-left-repeat-y">
+                        <div className="content-area-right-repeat-y">
+                          <div className="content-area-inner-space">
+                            <div id="player">
+                              {children}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="content-btm-wrap">
+                    <div className="content-area-btm-left">
+                      <div className="content-left-btm-repeat-x">
+                      </div>
+                    </div>
+                    <div className="content-area-btm-right">
+                      <div className="content-right-btm-repeat-x">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="right-column">
+                <div className="full-width clear-line" style={{ marginBottom: "5px" }}>
+                </div>
+              </div>
+            </div>
+            <div className="banner-ad-bottom">
+            </div>
+            <div className="legacy legacy-footer">
+              <div className="footer-wrap">
+                <div className="footer-repeat-x">
+                  <div className="footer-left">
+                    <div className="footer-right">
+                      <div className="footer-text">
+                        <div className="footer-search">
+                          <br /><br />
+                          <Donate />
+                        </div>
+                        <div className="footer-nav">
+                          <div className="copyright">
+                            ©2008 Chaotic USA Entertainment Group, Inc.
+                            <br />
+                            U.S. Pat 5810666 and 5954332 and other pending patent applications. All Rights Reserved.
+                          </div>
+                        </div>
+                        <div className="footer-language">
+                          <a href='#' onClick={(e) => {e.stopPropagation(); e.preventDefault(); API.purgeDB()}} className="page-options" title="Change Language">
+                            <img src="/public/img/flag_usa_.gif" alt="English (Change Language)" width="40" height="27"/>
+                            <br />English (Change Language)
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+  
--- a/src/components/Snippets/Ability.js
+++ b/src/components/Snippets/Ability.js
@ -1,40 +0,0 @@
-import React from 'react';
-import processString from 'react-process-string';
-import { Mugic, Element, Discipline, Tribe } from "./_text";
-
-export function Ability(props) {
-  const mugic_counters = {
-    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} 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>);
-    }
-  };
-  
-  const disciplines = {
-    regex: /(courage)|(power)|(wisdom)|(speed)/i,
-    fn: (key, result) => {
-      return (<span key={key}><Discipline discipline={result[0]} size="icon14" />{result[0]}</span>);
-    }
-  };
-  
-  const tribes = {
-    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>);
-    }
-  };
-  
-  const filters = [mugic_counters, elements, disciplines, tribes];
-  
-  return <div className={props.type || "ability"}>{processString(filters)(props.ability)}</div>;
-}
--- a/src/components/Snippets/Initiative.js
+++ b/src/components/Snippets/Initiative.js
@ -1,19 +0,0 @@
-import React from 'react';
-
-export function Initiative(props) {
-  const { initiative } = props;
-  let image = null;
-  if (["Danian", "Generic", "Mipedian", "OverWorld", "UnderWorld", "M'arrillian"].indexOf(initiative) > -1) {
-    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/public/img/icons/tribes/" + initiative + ".png").toLowerCase()} />;
-  }
-  else if (["courage", "power", "speed", "wisdom"].indexOf(initiative.toLowerCase()) > -1) {
-    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/public/img/icons/disciplines/" + initiative + ".png").toLowerCase()} />;
-  }
-  else if (["fire", "air", "earth", "water"].indexOf(initiative.toLowerCase()) > -1) {
-    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/public/img/icons/elements/" + initiative + ".png").toLowerCase()} />;
-  }
-  else if (initiative.toLowerCase() == "mugic counter") {
-    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/public/img/icons/mugic/generic.png").toLowerCase()} />;
-  }
-  return (<span>{!props.notitle && ("Initiative: ")}{image}&nbsp;{initiative}</span>);
-}
--- a/src/components/Snippets/_icons.js
+++ b/src/components/Snippets/_icons.js
@ -14,7 +14,7 @@ export function LocationIcon(props) {
  return <img className={props.size || "icon16"} src="/public/img/icons/location.png" />;
 }
  
-export function Rarity(props) {
+export function RarityIcon(props) {
  const { set, rarity, iconOnly=false } = props;
  return (
    <span>
@ -23,3 +23,45 @@ export function Rarity(props) {
    </span>
  );
 }
+
+export function MugicIcon(props) {
+  const type = (props.tribe || "generic") + (props.amount != undefined ? `_${props.amount}` : "");
+  const src = ("/public/img/icons/mugic/" + type + ".png").toLowerCase();
+  return <img className={props.size || "icon20"} src={src} alt={"MC"} />;
+}
+  
+export function ElementIcon(props) {
+  if (props.value) {
+    return <img className={props.size || "icon20"} src={("/public/img/icons/elements/" + props.element + ".png").toLowerCase()} />;
+  }
+  else {
+    return <img className={props.size || "icon20"} src={("/public/img/icons/elements/" + props.element + "-inactive.png").toLowerCase()} />;
+  }
+}
+  
+export function TribeIcon(props) {
+  return <img className={props.size || "icon16"} src={("/public/img/icons/tribes/" + props.tribe + ".png").toLowerCase()} />;
+}
+  
+export function DisciplineIcon(props) {
+  return <img className={props.size || "icon16"} src={("/public/img/icons/disciplines/" + props.discipline + ".png").toLowerCase()} />;
+}
+
+export function InitiativeIcon(props) {
+  const { initiative } = props;
+  let image = <></>;
+  if (["Danian", "Generic", "Mipedian", "OverWorld", "UnderWorld", "M'arrillian"].indexOf(initiative) > -1) {
+    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/public/img/icons/tribes/" + initiative + ".png").toLowerCase()} />;
+  }
+  else if (["courage", "power", "speed", "wisdom"].indexOf(initiative.toLowerCase()) > -1) {
+    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/public/img/icons/disciplines/" + initiative + ".png").toLowerCase()} />;
+  }
+  else if (["fire", "air", "earth", "water"].indexOf(initiative.toLowerCase()) > -1) {
+    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/public/img/icons/elements/" + initiative + ".png").toLowerCase()} />;
+  }
+  else if (initiative.toLowerCase() == "mugic counter") {
+    image = <img className="icon16" style={{ verticalAlign: 'middle' }} src={("/public/img/icons/mugic/generic.png").toLowerCase()} />;
+  }
+
+  return image;
+}
--- a/src/components/Snippets/_text.js
+++ b/src/components/Snippets/_text.js
@ -1,4 +1,7 @@
 import React from 'react';
+import { abilityText } from './abilityText';
+import { uniqueText } from './uniqueText';
+import { InitiativeIcon } from './_icons';

 export function Name(props) {
  const name = props.name.split(",");
@ -15,29 +18,23 @@ export function Name(props) {
  </div>);
 }

-export function Mugic(props) {
-  const type = (props.tribe || "generic") + (props.amount != undefined ? `_${props.amount}` : "");
-  const src = ("/public/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={("/public/img/icons/elements/" + props.element + ".png").toLowerCase()} />;
-  }
-  else {
-    return <img className={props.size || "icon20"} src={("/public/img/icons/elements/" + props.element + "-inactive.png").toLowerCase()} />;
-  }
-}
-  
-export function Tribe(props) {
-  return <img className={props.size || "icon16"} src={("/public/img/icons/tribes/" + props.tribe + ".png").toLowerCase()} />;
-}
-  
-export function Discipline(props) {
-  return <img className={props.size || "icon16"} src={("/public/img/icons/disciplines/" + props.discipline + ".png").toLowerCase()} />;
-}
-
 export function FlavorText({ flavortext }) {
  return (flavortext) ? <div className="flavortext">{flavortext}</div> : <></>;
 }
+
+export function Ability(props) {
+  return <div className={props.type || "ability"}>{abilityText(props)}</div>;
+}
+
+export function Unique(props) {
+  const string = uniqueText(props);
+
+  if (string === "") return <></>;
+  else return (
+    <div style={{ fontWeight: "Bold" }}>{string}</div>
+  );
+}
+
+export function Initiative(props) {
+  return (<span>{!props.notitle && ("Initiative: ")}{InitiativeIcon(props)}&nbsp;{props.initiative}</span>);
+}
--- a/src/components/Snippets/abilityText.js
+++ b/src/components/Snippets/abilityText.js
@ -0,0 +1,40 @@
+import React from 'react';
+import processString from 'react-process-string';
+import { MugicIcon, ElementIcon, DisciplineIcon, TribeIcon } from "./_icons";
+
+export function abilityText(props) {
+  const mugic_counters = {
+    regex: /([0-9x]*){{mc}}/i,
+    fn: (key, result) => {
+      if (result.length > 1 && result[1] != "") {
+        return (<MugicIcon key={key} tribe={props.tribe} amount={result[1].toLowerCase()} size="icon14" />);
+      }
+      return (<MugicIcon 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}><ElementIcon element={result[0].replace(/\b/, '')} value="true" size="icon14" />{result[0]}</span>);
+    }
+  };
+  
+  const disciplines = {
+    regex: /(courage)|(power)|(wisdom)|(speed)/i,
+    fn: (key, result) => {
+      return (<span key={key}><DisciplineIcon discipline={result[0]} size="icon14" />{result[0]}</span>);
+    }
+  };
+  
+  const tribes = {
+    regex: /(danian)|(generic)|(mipedian)|(overworld)|(underworld)|(m'arrillian)/i,
+    fn: (key, result) => {
+      return (<span key={key}><TribeIcon tribe={result[0]} size="icon14" />{result[0]}</span>);
+    }
+  };
+  
+  const filters = [mugic_counters, elements, disciplines, tribes];
+
+  return processString(filters)(props.ability);
+}
--- a/src/components/Snippets/index.js
+++ b/src/components/Snippets/index.js
@ -1,9 +1,6 @@
 import React from 'react';
 import s from '../../styles/app.style';

-export { Unique } from './Unique';
-export { Initiative } from './Initiative';
-export { Ability } from './Ability';
 export * from './_icons';
 export * from './_text';

--- a/src/components/Snippets/uniqueText.js
+++ b/src/components/Snippets/uniqueText.js
@ -1,6 +1,4 @@
-import React from 'react';
-
-export function Unique(props) {
+export function uniqueText(props) {
  let string = "";
  if (props.data.unique) {
    string += "Unique, ";
@ -20,8 +18,5 @@ export function Unique(props) {
  }
  string = string.replace(/,\s+$/, "");

-  if (string === "") return <></>;
-  else return (
-    <div style={{ fontWeight: "Bold" }}>{string}</div>
-  );
+  return string;
 }
--- a/src/components/SpreadsheetData/API.ts
+++ b/src/components/SpreadsheetData/API.ts
@ -17,6 +17,27 @@ function retry (fn: () => any, retries=0, err=null) {
  });
 }

+// For the conversion of shorthand in database
+export const sets = {
+  "DOP": "Dawn of Perim",
+  "ZOTH": "Zenith of the Hive",
+  "SS": "Silent Sands",
+  "MI": "Beyond the Doors",
+  "ROTO": "Rise of the Oligarch",
+  "TOTT": "Turn of the Tide",
+  "FUN": "Forged Unity",
+  "AU": "Alliance Unraveled",
+  "FAS": "Fire and Stone",
+  "OP1": "Organized Play 1",
+  "PE1": "Premium Edition 1",
+  "SAS": "Storm and Sea",
+  "EE": "Elemental Emperors",
+  "BR": "Beyond Rare",
+  "LR": "League Rewards",
+  "PROMO": "Promotional",
+  "PROTO": "Prototype"
+};
+
 class API {
    @observable portal;
    @observable cards;
@ -173,27 +194,8 @@ class API {
      return ["Danian", "Generic", "Mipedian", "M'arrillian", "OverWorld", "UnderWorld"];
    }
  
-    // For the conversion of shorthand in database
    get sets() {
-      return {
-        "DOP": "Dawn of Perim",
-        "ZOTH": "Zenith of the Hive",
-        "SS": "Silent Sands",
-        "MI": "Beyond the Doors",
-        "ROTO": "Rise of the Oligarch",
-        "TOTT": "Turn of the Tide",
-        "FUN": "Forged Unity",
-        "AU": "Alliance Unraveled",
-        "FAS": "Fire and Stone",
-        "OP1": "Organized Play 1",
-        "PE1": "Premium Edition 1",
-        "SAS": "Storm and Sea",
-        "EE": "Elemental Emperors",
-        "BR": "Beyond Rare",
-        "LR": "League Rewards",
-        "PROMO": "Promotional",
-        "PROTO": "Prototype"
-      };
+      return sets;
    }
  
    purgeDB() {
@ -206,4 +208,4 @@ class API {
  
 }

-export default API;
+export default API.getInstance();
--- a/src/components/SpreadsheetData/index.js
+++ b/src/components/SpreadsheetData/index.js
@ -0,0 +1,3 @@
+import API from './API';
+
+export default API;
--- a/src/components/SpreadsheetData/index.ts
+++ b/src/components/SpreadsheetData/index.ts
@ -1,3 +0,0 @@
-import API from './API';
-
-export default API.getInstance();
--- a/src/components/_hooks/useCheckMobileScreen.js
+++ b/src/components/_hooks/useCheckMobileScreen.js
@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const useCheckMobileScreen = () => {
+  const [width, setWidth] = useState(window.innerWidth);
+  const handleWindowSizeChange = () => {
+    setWidth(window.innerWidth);
+  };
+  
+  useEffect(() => {
+    window.addEventListener('resize', handleWindowSizeChange);
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange);
+    };
+  }, []);
+  
+  return (width < 975);
+};
+
+export default useCheckMobileScreen;
--- a/src/components/_mobile/collection/Attack.tsx
+++ b/src/components/_mobile/collection/Attack.tsx
@ -0,0 +1,41 @@
+import { Card, CardContent, CardHeader, CardMedia, Typography, Box } from '@mui/material';
+import React from 'react';
+import { Attack } from "../../common/definitions";
+import { Ability, Name } from '../../Snippets';
+import { abilityText } from '../../Snippets/abilityText';
+import { uniqueText } from '../../Snippets/uniqueText';
+import API from '../../SpreadsheetData';
+
+interface props {
+    card: Attack
+    ext: boolean
+}
+
+export default function AttackCard ({ card, ext }: props) {
+
+  const ability = abilityText({ ability: card.gsx$ability });
+  const unique = uniqueText({ data: { unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }});
+  const flavor = card.gsx$flavortext;
+
+  return (
+    <Card>
+      <CardHeader 
+        title={<Name name={card.gsx$name} />}
+      />
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: "flex-start" }}>
+        <CardMedia
+          component="img"
+          sx={{ width: "250px" }}
+          height="350"
+          image={API.cardImage(card)}
+        />
+        <CardContent sx={{ flex: '1 0 auto', minWidth: "310px" }}>
+          <Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>
+          {unique && <Typography>{unique}</Typography>}
+          {flavor && <Typography>{flavor}</Typography>}
+          <Typography>Art By: {card.gsx$artist}</Typography>
+        </CardContent>
+      </Box>
+    </Card>
+  );
+}
--- a/src/components/_mobile/collection/Search.tsx
+++ b/src/components/_mobile/collection/Search.tsx
@ -0,0 +1,180 @@
+import React, { ChangeEventHandler, FormEvent, useEffect, useRef, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import API, { sets } from '../../SpreadsheetData/API';
+import search_api from '../../collection/search/search';
+import { Loading, UnderConstruction } from '../../Snippets';
+
+const initInput = () => {
+  /* @ts-ignore */
+  const cardSets: {[key in keyof typeof sets]: boolean} = {};
+  for (const key in sets) sets[key.toLowerCase()] = false;
+
+  return {
+    name: "",
+    text: "",
+    subtypes: "",
+    flavor: true,
+    sets: cardSets,
+    types: { attack: false, battlegear: false, creature: false, location: false, mugic: false },
+    rarity: { common: false, uncommon: false, rare: false, 'super rare': false, 'ultra rare': false, promo: false },
+    tribes: { danian: false, 'm\'arrillian': false, mipedian: false, overworld: false, underworld: false, generic: false },
+    elements: { fire: false, air: false, earth: false, water: false, none: false, and: false },
+    disciplines: { courage: '', power: '', wisdom: '', speed: '', max: false },
+    energy: { min: '', max: '' },
+    mcbp: { min: '', max: '' },
+    mull: { unique: false, loyal: false, legendary: false, mixed: false },
+    gender: { ambiguous: false, female: false, male: false }
+  };
+};
+
+const queryList = ["sets", "types", "rarity", "tribes", "elements", "mull", "gender"];
+
+const parseQuery = (input, location) => {
+  const queryString = location.search.toLowerCase();
+
+  const query = {} as any;
+  const pairs = (queryString[0] === '?' ? queryString.substr(1) : queryString).split('&');
+  for (let i = 0; i < pairs.length; i++) {
+    const pair = pairs[i].split('=');
+    query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
+  }
+
+  // query -> input
+  queryList.forEach((d) => {
+    if (query[d]) {
+      query[d].split(',').map(item => {
+        input[d][item] = true;
+      });
+    }
+  });
+
+  if (query.hasOwnProperty('name')) input.name = query.name;
+  if (query.hasOwnProperty('text')) input.text = query.text;
+  if (query.hasOwnProperty('subtypes')) input.subtypes = query.subtypes;
+  if (query.hasOwnProperty('courage')) input.disciplines.courage = query.courage;
+  if (query.hasOwnProperty('power')) input.disciplines.power = query.power;
+  if (query.hasOwnProperty('wisdom')) input.disciplines.wisdom = query.wisdom;
+  if (query.hasOwnProperty('speed')) input.disciplines.speed = query.speed;
+  if (query.hasOwnProperty('disc_max')) input.disciplines.max = !!query.disc_max;
+  if (query.hasOwnProperty('energy')) {
+    const q = query.energy.split(',');
+    if (q[0] >= 0) input.energy.min = q[0];
+    if (q[1] >= 0) input.energy.max = q[1];
+  }
+  if (query.hasOwnProperty('mcbp')) {
+    const q = query.mcbp.split(',');
+    if (q[0] >= 0) input.mcbp.min = q[0];
+    if (q[1] >= 0) input.mcbp.max = q[1];
+  }
+
+  return input;
+};
+
+const updateQuery = (input, history) => {
+  let queryString = "";
+
+
+  queryList.forEach(query => {
+    let temp = "";
+    Object.keys(input[query]).forEach((item) => {
+      if (input[query][item] == true) temp += `${item},`;
+    });
+    if (temp.length > 0) {
+      queryString += `${query}=${temp.replace(/\,$/, '&')}`;
+    }
+  });
+
+  if (input.name) queryString += `name=${encodeURIComponent(input.name)}&`;
+  if (input.text) queryString += `text=${encodeURIComponent(input.text)}&`;
+  if (input.subtypes) queryString += `subtypes=${encodeURIComponent(input.subtypes)}&`;
+  if (input.disciplines.courage > 0) queryString += `courage=${input.disciplines.courage}&`;
+  if (input.disciplines.power > 0) queryString += `power=${input.disciplines.power}&`;
+  if (input.disciplines.wisdom > 0) queryString += `wisdom=${input.disciplines.wisdom}&`;
+  if (input.disciplines.speed > 0) queryString += `speed=${input.disciplines.speed}&`;
+  if (input.disciplines.max) queryString += "disc_max=true&";
+  if (input.energy.min != "" || input.energy.max != "") {
+    queryString += "energy=";
+    if (input.energy.min != "" && input.energy.min >= 0) queryString += input.energy.min;
+    queryString += ",";
+    if (input.energy.max != "" && input.energy.max >= 0) queryString += input.energy.max;
+    queryString += "&";
+  }
+  if (input.mcbp.min != "" || input.mcbp.max != "") {
+    queryString += "mcbp=";
+    if (input.mcbp.min != "" && input.mcbp.min >= 0) queryString += input.mcbp.min;
+    queryString += ",";
+    if (input.mcbp.max != "" && input.mcbp.max >= 0) queryString += input.mcbp.max;
+    queryString += "&";
+  }
+
+  // Strip trailing &
+  queryString = queryString.replace(/\&$/, '');
+
+  // Push to URL
+  history.push(`/collection/?${queryString}`);
+};
+
+export default function Search ({ setContent, setInfo }) {
+  const history = useHistory();
+  const location = useLocation();
+  const prevLocation = useRef<any>(undefined);
+  const [input, setInput] = useState(initInput());
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    setInfo({ 'text': 'Loading..' });
+    API.LoadDB([{ 'cards': 'attacks' }, { 'cards': 'battlegear' }, { 'cards': 'creatures' }, { 'cards': 'locations' }, { 'cards': 'mugic' }])
+    .then(() => {
+      setLoaded(true);
+      handleSearch();
+    })
+    .catch(() => {});
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (location != prevLocation.current) {
+      prevLocation.current = location;
+      setInput(parseQuery(input, location));
+    }
+  }, [input, location]);
+
+
+  const cleanInput = () => {
+    setInput(initInput());
+  };
+
+  const handleSearch = (event?: FormEvent) => {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      updateQuery(input, history);
+    }
+
+    const results = search_api(input);
+
+    setContent(results);
+    if (results.length === 0) {
+      setInfo({ 'text': 'No Results Found' });
+    } else {
+      setInfo({});
+    }
+  };
+
+  const handleChange = (event: {target: HTMLInputElement}, obj?: string) => {
+    const { target } = event;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const { name } = target;
+
+    setInput({
+      ...input,
+      ...((!obj) ? { [input[name]]: value } : { [input[obj][name]]: value })
+    });
+  };
+
+  if (loaded == false) {
+    return (<Loading />);
+  }
+
+  return <UnderConstruction />;
+}
--- a/src/components/_mobile/collection/collection.scss
+++ b/src/components/_mobile/collection/collection.scss
@ -0,0 +1,16 @@
+.icon14 {
+    height: 16px;
+    vertical-align: middle;
+}
+
+.icon16 {
+    height: 16px;
+}
+
+.icon20 {
+    height: 20px;
+}
+
+.icon24 {
+    height: 24px;
+}
--- a/src/components/_mobile/collection/index.tsx
+++ b/src/components/_mobile/collection/index.tsx
@ -0,0 +1,63 @@
+import { Card, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import Attack from './Attack';
+import Search from './Search';
+import { Card as ChaoticCard, Attack as AttackCard } from '../../common/definitions';
+
+import './collection.scss';
+
+type statsType = "avg" | "min" | "max";
+
+export default function Collection (props) {
+  const [loaded, setLoaded] = useState(false);
+  const [p, sp] = useState(1);
+  const [n, sn] = useState(10);
+  const [ext, setExt] = useState(false);
+  const [stats, setStats] = useState<statsType>("avg");
+  const [hideStats, setHideStats] = useState(false);
+  const [content, setContent] = useState<ChaoticCard[]>([]);
+  const [info, setInfo] = useState<{text?: string}>({});
+  
+  return (<>
+    <Search {...({ setContent, setInfo })} />
+    {info.text ? (
+      <Typography style={{ textAlign: 'left' }}>{info.text}</Typography>
+    ) : (
+      <CardList
+        cards={content.slice(n * (p-1), n * p)}
+        {...({ ext, stats, hideStats })}
+      />
+    )}
+  </>);
+    
+}
+
+interface listProps {
+  cards: ChaoticCard[]
+  info?: string
+  ext: boolean
+  stats: statsType
+  hideStats: boolean
+}
+
+const CardList = ({ cards, info, ...props }: listProps) => {
+  const list = cards.map((card, i) => {
+    switch (card.gsx$type) {
+      case "Attacks":
+        return (<Attack card={card as AttackCard} key={card.gsx$name} {...props}/>);
+      // case "Battlegear":
+      //   return (<Battlegear card={card} key={i} {...props}/>);
+      // case "Creatures":
+      //   return (<Creature card={card} key={i} {...props}/>);
+      // case "Locations":
+      //   return (<Location card={card} key={i} {...props}/>);
+      // case "Mugic":
+      //   return (<Mugic card={card} key={i} {...props}/>);
+      default:
+        return (<Card key={i}><Typography>Invalid Card Type</Typography></Card>);
+    }
+  });
+
+  // Limitation of typescript - error TS2605
+  return <>{list}</>;
+};
--- a/src/components/app.js
+++ b/src/components/app.js
@ -0,0 +1,60 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
+import loadable from '@loadable/component';
+
+import useCheckMobileScreen from './_hooks/useCheckMobileScreen';
+import { PageNotFound, UnderConstruction, Loading } from './Snippets';
+import Create from './create';
+import Base from './BaseStylesWrapper';
+
+const EnterTheCode = loadable(
+  () => import('./entercode'), 
+  { fallback: <Loading /> }
+);
+  
+const Home = loadable(
+  () => import('./home'),
+  { fallback: <Loading /> }
+);
+  
+const Portal = loadable(
+  () => import('./portal'),
+  { fallback: <Loading /> }
+);
+  
+const Collection = loadable(
+  () => import('./collection'),
+  { fallback: <Loading /> }
+);
+
+const MobileCollection = loadable(
+  () => import('./_mobile/collection'),
+  { fallback: <Loading /> }
+);
+
+export default function App() {
+  const isMobile = useCheckMobileScreen();
+
+  return (
+    <Router>
+      <Switch>
+        <Route path="/beta/collection" component={Collection} />
+        <Route path="/beta">
+          {({ location }) => <Redirect to={location.pathname.replace("/beta", "")} /> }
+        </Route>
+        {isMobile && <Route path="/collection" component={MobileCollection} />}
+        {/* Normal Routes */}
+        <Base>
+          <Route exact path="/" component={Home} />
+          <Route path="/PageNotFound" component={PageNotFound} />
+          <Route path="/UnderConstruction" component={UnderConstruction} />
+          <Route path="/EnterTheCode" component={EnterTheCode} />
+          <Route path="/create" component={Create} />
+          <Route path="/collection" component={Collection} />
+          <Route path="/portal" component={Portal} />
+        </Base>
+      </Switch>
+    </Router>
+  );
+}
+
--- a/src/components/collection/types/Attack.js
+++ b/src/components/collection/types/Attack.js
@ -1,7 +1,7 @@
 import React from 'react';
 import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
-import { FlavorText, Rarity, Unique, Name, Element, Ability, AttackIcon } from '../../Snippets';
+import { FlavorText, RarityIcon, Unique, Name, ElementIcon, Ability, AttackIcon } from '../../Snippets';

@inject((stores, props, context) => props) @observer
 export default class Attack extends React.Component {
@ -14,14 +14,14 @@ export default class Attack extends React.Component {
        <img className="thumb" src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
        <div className="left">
          <Name name={card.gsx$name} />
-          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
+          <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} /><br />
          <span><AttackIcon bp={card.gsx$bp} /> Attack - {card.gsx$bp}</span><br />
          <div>
            <span className="bp bigger" >{card.gsx$base}</span> |&nbsp;
-            <Element element="fire" value={card.gsx$fire} />{card.gsx$fire}&nbsp;
-            <Element element="air" value={card.gsx$air} />{card.gsx$air}&nbsp;
-            <Element element="earth" value={card.gsx$earth} />{card.gsx$earth}&nbsp;
-            <Element element="water" value={card.gsx$water} />{card.gsx$water}
+            <ElementIcon element="fire" value={card.gsx$fire} />{card.gsx$fire}&nbsp;
+            <ElementIcon element="air" value={card.gsx$air} />{card.gsx$air}&nbsp;
+            <ElementIcon element="earth" value={card.gsx$earth} />{card.gsx$earth}&nbsp;
+            <ElementIcon element="water" value={card.gsx$water} />{card.gsx$water}
          </div>
        </div>
        <br />
--- a/src/components/collection/types/Battlegear.js
+++ b/src/components/collection/types/Battlegear.js
@ -1,7 +1,7 @@
 import React from 'react';
 import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
-import { FlavorText, Rarity, Unique, Name, Ability, BattlegearIcon } from '../../Snippets';
+import { FlavorText, RarityIcon, Unique, Name, Ability, BattlegearIcon } from '../../Snippets';

@inject((stores, props, context) => props) @observer
 export default class Battlegear extends React.Component {
@ -14,7 +14,7 @@ export default class Battlegear extends React.Component {
        <img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
        <div className="left">
          <Name name={card.gsx$name} />
-          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
+          <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} /><br />
          <span><BattlegearIcon /> Battlegear{card.gsx$types.length > 0 ? " - " + card.gsx$types : null}</span>
        </div>
        <div className="right" >
--- a/src/components/collection/types/Creature.js
+++ b/src/components/collection/types/Creature.js
@ -1,7 +1,7 @@
 import React from 'react';
 import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
-import { FlavorText, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe } from '../../Snippets';
+import { FlavorText, RarityIcon, Unique, Name, ElementIcon, MugicIcon, DisciplineIcon, Ability, TribeIcon } from '../../Snippets';

@inject((stores, props, context) => props) @observer
 export default class Creature extends React.Component {
@ -11,7 +11,7 @@ export default class Creature extends React.Component {

    const mugic = [];
    for (let i = 0; i < card.gsx$mugicability; i++) {
-      mugic.push(<Mugic key={i} tribe={card.gsx$tribe} />);
+      mugic.push(<MugicIcon key={i} tribe={card.gsx$tribe} />);
    }

    const TribeLine = () => {
@ -25,7 +25,7 @@ export default class Creature extends React.Component {
      }
      const line = " " + (past ? "Past " : "") + types;

-      return <span><Tribe tribe={card.gsx$tribe} />{line}</span>;
+      return <span><TribeIcon tribe={card.gsx$tribe} />{line}</span>;
    };

    const stat_range = (stat, name) => {
@ -42,20 +42,18 @@ export default class Creature extends React.Component {
      return Number(energy);
    };

-    console.log(this.props);
-
    if (this.props.ext == false) return (
      <div className="card creature">
        <img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
        <div className="left">
          <Name name={card.gsx$name} />
-          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
+          <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} /><br />
          <TribeLine /><br />
          <div>
-            <Element element="fire" value={card.gsx$elements.toLowerCase().indexOf("fire") >=0} />&nbsp;
-            <Element element="air" value={card.gsx$elements.toLowerCase().indexOf("air") >=0} />&nbsp;
-            <Element element="earth" value={card.gsx$elements.toLowerCase().indexOf("earth") >=0} />&nbsp;
-            <Element element="water" value={card.gsx$elements.toLowerCase().indexOf("water") >=0} />
+            <ElementIcon element="fire" value={card.gsx$elements.toLowerCase().indexOf("fire") >=0} />&nbsp;
+            <ElementIcon element="air" value={card.gsx$elements.toLowerCase().indexOf("air") >=0} />&nbsp;
+            <ElementIcon element="earth" value={card.gsx$elements.toLowerCase().indexOf("earth") >=0} />&nbsp;
+            <ElementIcon element="water" value={card.gsx$elements.toLowerCase().indexOf("water") >=0} />
          </div>
          <span>{mugic}</span>
        </div>
@ -78,16 +76,16 @@ export default class Creature extends React.Component {
        <br />
        <div className="stats">
          <div className="energy">
-            {stat_range(card.gsx$courage, card.gsx$name)}<Discipline discipline="courage" />
+            {stat_range(card.gsx$courage, card.gsx$name)}<DisciplineIcon discipline="courage" />
          </div>
          <div className="energy">
-            {stat_range(card.gsx$power, card.gsx$name)}<Discipline discipline="power" />
+            {stat_range(card.gsx$power, card.gsx$name)}<DisciplineIcon discipline="power" />
          </div>
          <div className="energy">
-            {stat_range(card.gsx$wisdom, card.gsx$name)}<Discipline discipline="wisdom" />
+            {stat_range(card.gsx$wisdom, card.gsx$name)}<DisciplineIcon discipline="wisdom" />
          </div>
          <div className="energy">
-            {stat_range(card.gsx$speed, card.gsx$name)}<Discipline discipline="speed" />
+            {stat_range(card.gsx$speed, card.gsx$name)}<DisciplineIcon discipline="speed" />
          </div>
          <div className="energy" style={{ fontWeight: 'bold' }}>{energy_range(card.gsx$energy, card.gsx$name)}
          </div>
@ -113,10 +111,10 @@ export default class Creature extends React.Component {
        </div>
        <div className="right" >
          <Name name={card.gsx$name} />
-          <span>{stat_range(card.gsx$courage, card.gsx$name)}&nbsp;<Discipline discipline="courage" /></span>&nbsp;
-          <span>{stat_range(card.gsx$power, card.gsx$name)}&nbsp;<Discipline discipline="power" /></span>&nbsp;
-          <span>{stat_range(card.gsx$wisdom, card.gsx$name)}&nbsp;<Discipline discipline="wisdom" /></span>&nbsp;
-          <span>{stat_range(card.gsx$speed, card.gsx$name)}&nbsp;<Discipline discipline="speed" /></span>&nbsp;
+          <span>{stat_range(card.gsx$courage, card.gsx$name)}&nbsp;<DisciplineIcon discipline="courage" /></span>&nbsp;
+          <span>{stat_range(card.gsx$power, card.gsx$name)}&nbsp;<DisciplineIcon discipline="power" /></span>&nbsp;
+          <span>{stat_range(card.gsx$wisdom, card.gsx$name)}&nbsp;<DisciplineIcon discipline="wisdom" /></span>&nbsp;
+          <span>{stat_range(card.gsx$speed, card.gsx$name)}&nbsp;<DisciplineIcon discipline="speed" /></span>&nbsp;
          <span style={{ fontWeight: 'bold' }}>{energy_range(card.gsx$energy, card.gsx$name)}</span>
          <br />
          <Ability ability={card.gsx$ability} tribe={card.gsx$tribe} />
--- a/src/components/collection/types/Location.js
+++ b/src/components/collection/types/Location.js
@ -1,7 +1,7 @@
 import { inject, observer } from 'mobx-react';
 import React from 'react';

-import { Ability, FlavorText, Initiative, LocationIcon, Name, Rarity, Unique } from '../../Snippets';
+import { Ability, FlavorText, InitiativeIcon, LocationIcon, Name, RarityIcon, Unique } from '../../Snippets';
 import API from '../../SpreadsheetData';

@inject((stores, props, context) => props) @observer
@ -15,9 +15,9 @@ export default class Location extends React.Component {
        <img className="thumb" style={{ float: 'left', width: '100px', height: '98px' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
        <div className="left">
          <Name name={card.gsx$name} />
-          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
+          <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} /><br />
          <span><LocationIcon /> Location{card.gsx$types.length > 0 ? " - " + card.gsx$types : null}</span><br />
-          <Initiative initiative={card.gsx$initiative} />
+          <InitiativeIcon initiative={card.gsx$initiative} />
        </div>
        <div className="right">
          <Ability ability={card.gsx$ability} />
@ -31,7 +31,7 @@ export default class Location extends React.Component {
        <div className="fullcard"><img src={API.cardImage(card)} /></div>
        <div className="right">
          <Name name={card.gsx$name} />
-          <Initiative initiative={card.gsx$initiative} />
+          <InitiativeIcon initiative={card.gsx$initiative} />
          <Ability ability={card.gsx$ability} />
          <Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />
          <FlavorText flavortext={card.gsx$flavortext} />
--- a/src/components/collection/types/Mugic.js
+++ b/src/components/collection/types/Mugic.js
@ -1,7 +1,7 @@
 import React from 'react';
 import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
-import { FlavorText, Rarity, Unique, Name, Mugic as MugicCounter, Ability, Tribe } from '../../Snippets';
+import { FlavorText, RarityIcon, Unique, Name, MugicIcon as MugicCounter, Ability, TribeIcon } from '../../Snippets';
 import MugicPlay from '../../mugicplayer/playbutton.tsx';

@inject((stores, props, context) => props) @observer
@ -33,8 +33,8 @@ export default class Mugic extends React.Component {
        <img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
        <div className="left">
          <Name name={card.gsx$name} />
-          <Rarity set={card.gsx$set} rarity={card.gsx$rarity} /> <br />
-          <Tribe size="icon16" tribe={card.gsx$tribe} /> Mugic - {card.gsx$tribe}<br />
+          <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} /> <br />
+          <TribeIcon size="icon16" tribe={card.gsx$tribe} /> Mugic - {card.gsx$tribe}<br />
          <span>{mugicCounters}</span><MugicPlay notes={card.gsx$shownotes?.length > 0 ? card.gsx$shownotes : card.gsx$notes}/><br />
        </div>
        <br />
--- a/src/components/common/definitions.ts
+++ b/src/components/common/definitions.ts
@ -19,6 +19,7 @@ export interface BaseCard {
  gsx$alt2?: string
  gsx$ic?: string // imgur card
  gsx$if?: string // imgur fullart
+  gsx$artist?: string
 }

 export interface Attack extends BaseCard {
--- a/src/components/entercode/PackSimulator.tsx
+++ b/src/components/entercode/PackSimulator.tsx
@ -21,13 +21,13 @@ export default function PackSimulator () {
    })
    .catch(() => {});

-    const cards = [];
+    const cards: JSX.Element[] = [];
    for (let i = 0; i < 9; i++) {
      cards.push(blankCard(i));
    }
    setCards(cards);

-    const setsInput = [];
+    const setsInput: JSX.Element[] = [];
    let i = 1;
    for (const set in API.sets) {
      setsInput.push(<option key={i++} value={set}>{API.sets[set]}</option>);
--- a/src/components/portal/Single/Creature.js
+++ b/src/components/portal/Single/Creature.js
@ -5,7 +5,7 @@ import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import { observer, inject } from 'mobx-react';
 import Single from './_base';
-import { PageNotFound, Element, Mugic, Discipline, Tribe } from '../../Snippets';
+import { PageNotFound, ElementIcon, MugicIcon, DisciplineIcon, TribeIcon } from '../../Snippets';

 function Artist(props) {
  const artists = [];
@ -40,7 +40,7 @@ export default class SingleCreature extends React.Component {

      const mugic = [];
      for (let i = 0; i < parseInt(card_data.gsx$mugicability || 0); i++) {
-        mugic.push(<Mugic key={i} tribe={tribe} />);
+        mugic.push(<MugicIcon key={i} tribe={tribe} />);
      }

      const col2 = [];
@ -78,16 +78,16 @@ export default class SingleCreature extends React.Component {
        col0={<>
          <div>
            <strong>Tribe: </strong>
-            <Tribe tribe={tribe} />&nbsp;
+            <TribeIcon tribe={tribe} />&nbsp;
            {tribe}
          </div>
          <hr />
          <div>
            <strong>Disciplines: </strong>
-            {card_data.gsx$courage}<Discipline discipline="courage" />&nbsp;
-            {card_data.gsx$power}<Discipline discipline="power" />&nbsp;
-            {card_data.gsx$wisdom}<Discipline discipline="wisdom" />&nbsp;
-            {card_data.gsx$speed}<Discipline discipline="speed" />
+            {card_data.gsx$courage}<DisciplineIcon discipline="courage" />&nbsp;
+            {card_data.gsx$power}<DisciplineIcon discipline="power" />&nbsp;
+            {card_data.gsx$wisdom}<DisciplineIcon discipline="wisdom" />&nbsp;
+            {card_data.gsx$speed}<DisciplineIcon discipline="speed" />
          </div>
          <hr />
          <div>
@ -97,10 +97,10 @@ export default class SingleCreature extends React.Component {
          <hr />
          <div>
            <strong>Elements: </strong>
-            <Element element="fire" value={card_data.gsx$elements.toLowerCase().indexOf("fire") >=0} />&nbsp;
-            <Element element="air" value={card_data.gsx$elements.toLowerCase().indexOf("air") >=0} />&nbsp;
-            <Element element="earth" value={card_data.gsx$elements.toLowerCase().indexOf("earth") >=0} />&nbsp;
-            <Element element="water" value={card_data.gsx$elements.toLowerCase().indexOf("water") >=0} />
+            <ElementIcon element="fire" value={card_data.gsx$elements.toLowerCase().indexOf("fire") >=0} />&nbsp;
+            <ElementIcon element="air" value={card_data.gsx$elements.toLowerCase().indexOf("air") >=0} />&nbsp;
+            <ElementIcon element="earth" value={card_data.gsx$elements.toLowerCase().indexOf("earth") >=0} />&nbsp;
+            <ElementIcon element="water" value={card_data.gsx$elements.toLowerCase().indexOf("water") >=0} />
          </div>
          <hr />
          <div>
@ -127,7 +127,7 @@ export default class SingleCreature extends React.Component {

        const mugic = [];
        for (let i = 0; i < parseInt(card_data.gsx$mugicability || 0); i++) {
-          mugic.push(<Mugic key={i} tribe={tribe} />);
+          mugic.push(<MugicIcon key={i} tribe={tribe} />);
        }

        return (<Single
@ -135,20 +135,20 @@ export default class SingleCreature extends React.Component {
          col0={<>
            <div>
              <strong>Tribe: </strong>
-              <Tribe tribe={tribe} />&nbsp;
+              <TribeIcon tribe={tribe} />&nbsp;
              {tribe}
            </div>
            <hr />
            <div>
              <strong>Disciplines: </strong>
              {card_data.gsx$courage}
-              <Discipline discipline="courage" />&nbsp;
+              <DisciplineIcon discipline="courage" />&nbsp;
              {card_data.gsx$power}
-              <Discipline discipline="power" />&nbsp;
+              <DisciplineIcon discipline="power" />&nbsp;
              {card_data.gsx$speed}
-              <Discipline discipline="speed" />&nbsp;
+              <DisciplineIcon discipline="speed" />&nbsp;
              {card_data.gsx$wisdom}
-              <Discipline discipline="wisdom" />
+              <DisciplineIcon discipline="wisdom" />
            </div>
            <hr />
            <div>
@ -158,10 +158,10 @@ export default class SingleCreature extends React.Component {
            <hr />
            <div>
              <strong>Elements: </strong>
-              <Element element="fire" value={card_data.gsx$elements.toLowerCase().indexOf("fire") >=0} />&nbsp;
-              <Element element="air" value={card_data.gsx$elements.toLowerCase().indexOf("air") >=0} />&nbsp;
-              <Element element="earth" value={card_data.gsx$elements.toLowerCase().indexOf("earth") >=0} />&nbsp;
-              <Element element="water" value={card_data.gsx$elements.toLowerCase().indexOf("water") >=0} />
+              <ElementIcon element="fire" value={card_data.gsx$elements.toLowerCase().indexOf("fire") >=0} />&nbsp;
+              <ElementIcon element="air" value={card_data.gsx$elements.toLowerCase().indexOf("air") >=0} />&nbsp;
+              <ElementIcon element="earth" value={card_data.gsx$elements.toLowerCase().indexOf("earth") >=0} />&nbsp;
+              <ElementIcon element="water" value={card_data.gsx$elements.toLowerCase().indexOf("water") >=0} />
            </div>
            <hr />
            <div>
--- a/src/components/portal/Single/Location.js
+++ b/src/components/portal/Single/Location.js
@ -2,7 +2,7 @@ import React from 'react';
 import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
 import Single from './_base';
-import { PageNotFound, Initiative } from '../../Snippets';
+import { PageNotFound, InitiativeIcon } from '../../Snippets';

@inject((stores, props, context) => props) @observer
 export default class SingleLocation extends React.Component {
@ -40,7 +40,7 @@ export default class SingleLocation extends React.Component {
          {card_data.gsx$initiative && (
            <div>
              <strong>Initiative: </strong>
-              <Initiative initiative={card_data.gsx$initiative} notitle="true"/>
+              <InitiativeIcon initiative={card_data.gsx$initiative} notitle="true"/>
            </div>
          )}
        </>}
@ -65,7 +65,7 @@ export default class SingleLocation extends React.Component {
            {card_data.gsx$initiative && (
              <div>
                <strong>Initiative: </strong>
-                <Initiative initiative={card_data.gsx$initiative} notitle="true"/>
+                <InitiativeIcon initiative={card_data.gsx$initiative} notitle="true"/>
              </div>
            )}
          </>}
--- a/src/components/portal/Single/Mugic.js
+++ b/src/components/portal/Single/Mugic.js
@ -3,7 +3,7 @@ import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import { observer, inject } from 'mobx-react';
 import Single from './_base';
-import { PageNotFound, Mugic, Tribe } from '../../Snippets';
+import { PageNotFound, MugicIcon, TribeIcon } from '../../Snippets';

@inject((stores, props, context) => props) @observer
 export default class SingleMugic extends React.Component {
@ -35,7 +35,7 @@ export default class SingleMugic extends React.Component {
      }
      else {
        for (let i = 0; i < parseInt(card_data.gsx$cost); i++) {
-          cost.push(<Mugic tribe={tribe} key={i} />);
+          cost.push(<MugicIcon tribe={tribe} key={i} />);
        }
      }
      return cost;
@ -49,7 +49,7 @@ export default class SingleMugic extends React.Component {
        col0={<>
          <div>
            <strong>Tribe: </strong>
-            <Tribe tribe={tribe} />&nbsp;
+            <TribeIcon tribe={tribe} />&nbsp;
            {tribe}
          </div>
          {card_data.gsx$cost !== "" && (<>
@ -86,7 +86,7 @@ export default class SingleMugic extends React.Component {
          col0={<>
            <div>
              <strong>Tribe: </strong>
-              <Tribe tribe={tribe} />&nbsp;
+              <TribeIcon tribe={tribe} />&nbsp;
              {tribe}
            </div>
            {card_data.gsx$cost !== "" && (<>
--- a/src/components/portal/Single/_base.js
+++ b/src/components/portal/Single/_base.js
@ -3,7 +3,7 @@ import { observable } from "mobx";
 import { observer, inject } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import API from '../../SpreadsheetData';
-import { Rarity, Ability } from '../../Snippets';
+import { RarityIcon, Ability } from '../../Snippets';
 import s from '../../../styles/app.style';

 // own "name" display function
@ -74,7 +74,7 @@ export default class Single extends React.Component {
            {card.gsx$rarity && (<>
              <div>
                <strong>Rarity: </strong>
-                <Rarity set={card.gsx$set} rarity={card.gsx$rarity} iconOnly />&nbsp;
+                <RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} iconOnly />&nbsp;
                {card.gsx$rarity}
              </div>
              <hr />
--- a/src/index.js
+++ b/src/index.js
@ -1,190 +1,10 @@
 import React from 'react';
-import { render } from 'react-dom';
-import { BrowserRouter as Router, Link, Route, Switch, Redirect } from 'react-router-dom';
-import loadable from '@loadable/component';
+import ReactDOM from 'react-dom';
+import App from './components/app';

-/* Components */
-import API from './components/SpreadsheetData';
-import { PageNotFound, UnderConstruction, Donate, Loading } from './components/Snippets';
-import Create from './components/create/index';
-
-const EnterTheCode = loadable(
-  () => import('./components/entercode'), 
-  { fallback: <Loading /> }
-);
-
-const Home = loadable(
-  () => import('./components/home'),
-  { fallback: <Loading /> }
-);
-
-const Portal = loadable(
-  () => import('./components/portal'),
-  { fallback: <Loading /> }
-);
-
-const Collection = loadable(
-  () => import('./components/collection'),
-  { fallback: <Loading /> }
-);
-
-/**
- * This function is to define beta routes
- */
-function BetaRoutingWrapper() {
-  return (
-    <Switch>
-      <Route path="/beta/collection" component={Collection} />
-      <Route path="/beta">
-        {({ location }) => <Redirect to={location.pathname.replace("/beta", "")} /> }
-      </Route>
-      <Route component={Routing} />
-    </Switch>
-  );
-}
-
-function Routing() {
-  return (
-    <Switch>
-      <Route exact path="/" component={Home} />
-      <Route path="/PageNotFound" component={PageNotFound} />
-      <Route path="/UnderConstruction" component={UnderConstruction} />
-      <Route path="/EnterTheCode" component={EnterTheCode} />
-      <Route path="/create" component={Create} />
-      <Route path="/collection" component={Collection} />
-      <Route path="/portal" component={Portal} />
-    </Switch>
-  );
-}
-
-function Base(props) {
-  // Configuration for the language and background
-  // Images managed in css file
-  const language = "ENG";
-  const bkgrnd = "05";
-
-  const children = <BetaRoutingWrapper />;
-
-  return (
-    <>
-      <div className="fix-pgBkgrnd-repeat-x">
-        <div className={"fix-img-bkgrnd fix-img-bkgrnd_"+bkgrnd}></div>
-      </div>
-      <div className="pgBkgrnd-repeat-x">
-        <div className="img-bkgrnd">
-          <div className="content-wrap">
-            <div className="legacy legacy-header">
-              <div className="header">
-                <div id="nav">
-                  <div className="zero-clear-line headerSpriteNav-wrap">
-                    <ul id="unity-sprite" className={language}>
-                      <li id="unity-nav1" className={language}></li>
-                      <li id="unity-nav2" className={language}><Link to={`/collection/`}><span>Collect</span></Link></li>
-                      <li id="unity-nav3" className={language}><a href="https://chaoticbackup.forumotion.com/f11-deck-building"><span>Build</span></a></li>
-                      <li id="unity-nav4" className={language}><a href="https://chaoticbackup.forumotion.com/f16-trading-buying-and-selling"><span>Trade</span></a></li>
-                      <li id="unity-nav5" className={language}><Link to={`/`}><span>Home</span></Link></li>
-                      <li id="unity-nav6" className={language}><a href="https://chaoticbackup.forumotion.com"><span>Forums</span></a></li>
-                      <li id="unity-nav7" className={language}><Link to={`/portal/`}><span>Portal</span></Link></li>
-                      <li id="unity-nav8" className={language}><a href="https://chaoticrecode.com"><span>Play</span></a></li>
-                      <li id="unity-nav9" className={language}></li>
-                    </ul>
-                    <ul id="unityETC-sprite" className={language}>
-                      <li id="unity-nav10" className={language}><Link to={`/EnterTheCode`}><span>Enter the Code</span></Link></li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="banner-ad-top">
-            </div>
-            <div className="legacy content">
-              <div className="left-column">
-                <div className="full-width clear-line" style={{ marginBottom: "5px" }}>
-                </div>
-              </div>
-              <div className="full-column">
-                <div className="pods-wrap pad5px-btm">
-                  <div className="clear-line full-width">
-                    <div className="adPod-top-wrap">
-                      <div className="videoAdPod-topleft">
-                        <div className="videoAdPod-topLeft-repeat-x"></div>
-                      </div>
-                      <div className="videoAdPod-topright">
-                        <div className="videoAdPod-topRight-repeat-x"></div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="content-area-repeat-xy">
-                    <div className="content-area-top-repeat-x">
-                      <div className="content-area-left-repeat-y">
-                        <div className="content-area-right-repeat-y">
-                          <div className="content-area-inner-space">
-                            <div id="player">
-                              {children}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="content-btm-wrap">
-                    <div className="content-area-btm-left">
-                      <div className="content-left-btm-repeat-x">
-                      </div>
-                    </div>
-                    <div className="content-area-btm-right">
-                      <div className="content-right-btm-repeat-x">
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="right-column">
-                <div className="full-width clear-line" style={{ marginBottom: "5px" }}>
-                </div>
-              </div>
-            </div>
-            <div className="banner-ad-bottom">
-            </div>
-            <div className="legacy legacy-footer">
-              <div className="footer-wrap">
-                <div className="footer-repeat-x">
-                  <div className="footer-left">
-                    <div className="footer-right">
-                      <div className="footer-text">
-                        <div className="footer-search">
-                          <br /><br />
-                          <Donate />
-                        </div>
-                        <div className="footer-nav">
-                          <div className="copyright">
-                            ©2008 Chaotic USA Entertainment Group, Inc.
-                            <br />
-                            U.S. Pat 5810666 and 5954332 and other pending patent applications. All Rights Reserved.
-                          </div>
-                        </div>
-                        <div className="footer-language">
-                          <a href='#' onClick={(e) => {e.stopPropagation(); e.preventDefault(); API.purgeDB()}} className="page-options" title="Change Language">
-                            <img src="/public/img/flag_usa_.gif" alt="English (Change Language)" width="40" height="27"/>
-                            <br />English (Change Language)
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
-render(
-  <Router>
-    <Base path="/*" href="/" />
-  </Router>
-  , document.getElementById('root'),
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>, 
+  document.getElementById('root')
 );
--- a/tsconfig.json
+++ b/tsconfig.json
@ -14,7 +14,7 @@
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    // "strict": true,
-    "noImplicitAny": true,
+    "noImplicitAny": false,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "alwaysStrict": false,
@ -47,11 +47,11 @@
    "inlineSourceMap": true
  },
  "include": [
-    "src/components"
+    "src/components",
+    ".eslintrc.js"
  ],
  "exclude": [
    "build",
-    "node_modules",
    "**/*.spec.ts"
  ]
 }