update pack simulator for correctness and fix location

build/605.css

@@ -0,0 +1 @@
+@media only screen and (min-width:975px){.pack{max-width:90%}.pack .card{width:20%}}@media only screen and (max-width:975px){.pack{max-width:90%}.pack .card{width:40%}}.packsim input[type=number]::-webkit-inner-spin-button,.packsim input[type=number]::-webkit-outer-spin-button{opacity:1}.enterthecode .card{width:250px;height:350px}.pack{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:auto}.pack .card{margin:5px}.pack .card:hover{width:250px;height:350px}.pack .card>div{width:150px;height:210px;background-size:cover;box-sizing:content-box;-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;-webkit-border-radius:5px;-o-transition-property:width,height,-o-transform,background,font-size,opacity,top,left;-o-transition-duration:1s,1s,1s,1s,1s,1s,1s,1s;-moz-transition-property:width,height,-o-transform,background,font-size,opacity,top,left;-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s,1s;transition-property:width,height,transform,background,font-size,opacity,top,left;transition-duration:1s,1s,1s,1s,1s,1s,1s,1s}.pack .card>div:hover{width:250px;height:350px}.pack .card.locations{width:150px;height:210px}.pack .card.locations:hover{width:250px;height:350px}.pack .card.locations div{width:210px;height:150px;transform-origin:50% 70%;transform:rotate(270deg)}.pack .card.locations div:hover{width:350px;height:250px}.pack .stats{height:100%;width:100%;text-align:left}.pack .stats span{position:relative;color:#000;display:block;left:10px;font-size:12px}.pack .stats span:first-of-type{top:130px}.pack .stats span:nth-of-type(2){top:128px}.pack .stats span:nth-of-type(3){top:126px}.pack .stats span:nth-of-type(4){top:124px}.pack .stats span:nth-of-type(5){text-align:right;top:125px;left:-11px;font-size:14px}.pack .card:hover .stats span{left:20px;font-size:14px;font-weight:700}.pack .card:hover .stats span:first-of-type{top:220px}.pack .card:hover .stats span:nth-of-type(2){top:229px}.pack .card:hover .stats span:nth-of-type(3){top:237px}.pack .card:hover .stats span:nth-of-type(4){top:245px}.pack .card:hover .stats span:nth-of-type(5){text-align:right;top:258px;left:-21px;font-size:20px}

package-lock.json

@@ -11898,6 +11898,11 @@
         "prop-types": "^15.5.0"
       }
     },
+    "react-native-uuid-generator": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-uuid-generator/-/react-native-uuid-generator-6.1.1.tgz",
+      "integrity": "sha512-jWF0wiGTUTkCBTpspUZatC7wlhjN3GRbW9YblaxxpuMuhk0DEOQXOp1qgsDd2vLTL8GsM3i7Hnatvfj1kwf88w=="
+    },
     "react-onclickoutside": {
       "version": "6.9.0",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz",

package.json

@@ -30,6 +30,7 @@
     "react-dom": "^16.14.0",
     "react-interactive": "^0.9.2",
     "react-loadable": "^5.5.0",
+    "react-native-uuid-generator": "^6.1.1",
     "react-onclickoutside": "^6.9.0",
     "react-process-string": "^1.2.0",
     "react-router": "^5.2.0",

src/components/entercode/EnterTheCode.js

@@ -1,116 +0,0 @@
-import React from 'react';
-import { observable } from "mobx";
-import { observer, inject } from 'mobx-react';
-import { Link } from 'react-router-dom';
-import Interactive from 'react-interactive';
-import DigitInput from 'react-digit-input';
-import API from '../SpreadsheetData';
-import { Loading } from '../Snippets';
-import style from '../../styles/style';
-import './packs.scss';
-
-const s = Object.create(style);
-s.input = {
-  width: '1.2em',
-  height: '1.4em',
-  font: 'inherit',
-  textAlign: 'center',
-  margin: '0.05em',
-  backgroundColor: "rgba(0,0,0,0)",
-  color: "white",
-};
-
-s.inputGroup = {
-  // display: 'flex',
-  alignItems: 'center',
-};
-
-s.hyphen = {
-  background: 'white',
-  height: '0.1em',
-  width: '.5em',
-  display: 'inline-block',
-};
-
-@inject((stores, props, context) => props) @observer
-export default class EnterTheCode extends React.Component {
-  @observable code = "";
-  message = observable({ contents: null }, { contents: observable.ref });
-  @observable fan = null;
-
-  render() {
-    if (!this.fan) {
-      API.getSpreadsheet(API.path("1hzSojB76Me-P1qppxYR0oiHSU56jyK59x3DKm660ntc"), (data) => {
-        this.fan = data;
-      });
-      return (<Loading />);
-    }
-
-    const getRandomInt = (min, max) => {
-      min = Math.ceil(min);
-      max = Math.floor(max);
-      //The maximum is exclusive and the minimum is inclusive
-      return Math.floor(Math.random() * (max - min)) + min;
-    };
-
-    const validate = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (this.code.length < 12 || this.code.indexOf(" ") != -1) {
-        this.message.contents = (
-          <p style={{ 'color': 'red' }}>Please enter a 12 digit code</p>
-        );
-      }
-      else {
-        const card = this.fan[getRandomInt(0, this.fan.length)];
-        const rgx = /.*.png|.*.jpg/i;
-        const img = (rgx.test(card.gsx$image.$t) ? card.gsx$image.$t : API.base_image + card.gsx$image.$t);
-        this.message.contents = (
-          <div key={0}>
-            <p> Congrats on your scan! </p><br />
-            <p className="bigger"> {card.gsx$name.$t} </p><br />
-            <img className="card" src={img} />
-          </div>
-        );
-      }
-    };
-
-    return (
-      <div>
-        <Interactive as={Link} {...s.link}
-          to={`/EnterTheCode/PackSimulator/`}>Pack Simulator</Interactive>
-        <br /><br />
-        <DigitInput
-          acceptedCharacters={/^[0-9a-z]$/i}
-          length={12}
-          value={this.code}
-          onChange={(value) => this.code = value}
-        >
-          {props => (
-            <div style={s.inputGroup}>
-              <input type="text" style={s.input} {...props[0]} />
-              <input type="text" style={s.input} {...props[1]} />
-              <input type="text" style={s.input} {...props[2]} />
-              <input type="text" style={s.input} {...props[3]} />
-              <span style={s.hyphen} />
-              <input type="text" style={s.input} {...props[4]} />
-              <input type="text" style={s.input} {...props[5]} />
-              <input type="text" style={s.input} {...props[6]} />
-              <input type="text" style={s.input} {...props[7]} />
-              <span style={s.hyphen} />
-              <input type="text" style={s.input} {...props[8]} />
-              <input type="text" style={s.input} {...props[9]} />
-              <input type="text" style={s.input} {...props[10]} />
-              <input type="text" style={s.input} {...props[11]} />
-            </div>
-          )}
-        </DigitInput>
-        <br />
-        <button onClick={validate}>Validate Code</button>
-        <br /><br />
-        {this.message.contents}
-      </div>
-    );
-  }
-}

src/components/entercode/EnterTheCode.tsx

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import Interactive from 'react-interactive';
+import API from '../SpreadsheetData';
+import { Loading } from '../Snippets';
+import style from '../../styles/style';
+import useDigitInput from 'react-digit-input';
+
+const s = Object.create(style);
+s.input = {
+  width: '1.2em',
+  height: '1.4em',
+  font: 'inherit',
+  textAlign: 'center',
+  margin: '0.05em',
+  backgroundColor: "rgba(0,0,0,0)",
+  color: "white",
+};
+
+s.inputGroup = {
+  // display: 'flex',
+  alignItems: 'center',
+};
+
+s.hyphen = {
+  background: 'white',
+  height: '0.1em',
+  width: '.5em',
+  display: 'inline-block',
+};
+
+const EnterTheCode = () => {
+  const [value, onChange] = useState("");
+  const [fanData, setFanData] = useState<any>(null);
+  const [message, setMessage] = useState<JSX.Element | null>(null);
+  const digits = useDigitInput({
+    acceptedCharacters: /^[0-9a-z]$/i,
+    length: 12,
+    value,
+    onChange
+  });
+
+  useEffect(() => {
+    API.getSpreadsheet(API.path("1hzSojB76Me-P1qppxYR0oiHSU56jyK59x3DKm660ntc"), (data: any) => {
+      setFanData(data);
+    });
+  }, []);
+
+  if (fanData === null) {
+    return (<Loading />);
+  }
+
+  const getRandomInt = (min: number, max: number) => {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    //The maximum is exclusive and the minimum is inclusive
+    return Math.floor(Math.random() * (max - min)) + min;
+  };
+
+  const validate = (e: any) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (value.length < 12 || value.indexOf(" ") != -1) {
+      setMessage(
+        <p style={{ 'color': 'red' }}>Please enter a 12 digit code</p>
+      );
+    }
+    else {
+      const card = fanData[getRandomInt(0, fanData.length)];
+      const rgx = /.*.png|.*.jpg/i;
+      const img = (rgx.test(card.gsx$image.$t) ? card.gsx$image.$t : API.base_image + card.gsx$image.$t);
+      setMessage(
+        <>
+          <p> Congrats on your scan! </p><br />
+          <p className="bigger"> {card.gsx$name.$t} </p><br />
+          <img className="card" src={img} />
+        </>
+      );
+    }
+  };
+
+  return (<div className="enterthecode">
+    <Interactive as={Link} {...s.link} to={`/EnterTheCode/PackSimulator/`}>Pack Simulator</Interactive>
+    <br /><br />
+    <div style={s.inputGroup}>
+      <input type="text" style={s.input} {...digits[0]} />
+      <input type="text" style={s.input} {...digits[1]} />
+      <input type="text" style={s.input} {...digits[2]} />
+      <input type="text" style={s.input} {...digits[3]} />
+      <span style={s.hyphen} />
+      <input type="text" style={s.input} {...digits[4]} />
+      <input type="text" style={s.input} {...digits[5]} />
+      <input type="text" style={s.input} {...digits[6]} />
+      <input type="text" style={s.input} {...digits[7]} />
+      <span style={s.hyphen} />
+      <input type="text" style={s.input} {...digits[8]} />
+      <input type="text" style={s.input} {...digits[9]} />
+      <input type="text" style={s.input} {...digits[10]} />
+      <input type="text" style={s.input} {...digits[11]} />
+    </div>
+    <br />
+    <button onClick={validate}>Validate Code</button>
+    <br /><br />
+    <div>
+      {message}
+    </div>
+  </div>);
+};
+
+export default EnterTheCode;

src/components/entercode/PackSimulator.tsx

@@ -1,17 +1,16 @@
 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';
+import { setupDB, generate, blankCard } from "./generate";
+import API from '../SpreadsheetData';
+import { Loading } from '../Snippets';
+import s from '../../styles/style';
 
-export default function (props) {
+export default function PackSimulator () {
   const [loaded, setLoaded] = useState(false);
   const [set, setSet] = useState("");
-  const [setsInput, setSetsInput] = useState([]);
-  const [cards, setCards] = useState([]);
+  const [setsInput, setSetsInput] = useState<JSX.Element[]>([]);
+  const [cards, setCards] = useState<JSX.Element[]>([]);
   const [packs, setPacks] = useState(1);
 
   useEffect(() => {
@@ -24,7 +23,7 @@ export default function (props) {
 
     const cards = [];
     for (let i = 0; i < 9; i++) {
-      cards.push(<div key={i} className="card" style={{ backgroundImage: `url("${API.card_back}")` }}></div>);
+      cards.push(blankCard(i));
     }
     setCards(cards);
 
@@ -41,16 +40,16 @@ export default function (props) {
     return (<Loading />);
   }
 
-  const onPacksChange = (e) => {
-    if (e.target.value > 24) e.target.value = 24;
-    setPacks(e.target.value);
+  const onPacksChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (parseInt(e.target.value) > 24) e.target.value = "24";
+    setPacks(parseInt(e.target.value));
   };
 
-  const onSetChange = (e) => {
+  const onSetChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setSet(e.target.value);
   };
 
-  const handleSubmit = (e) => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     event.stopPropagation();
 

src/components/entercode/PackSimulator/generate.js

@@ -1,156 +0,0 @@
-import React from 'react';
-import loki from 'lokijs';
-import API from '../../SpreadsheetData';
-import { observable } from 'mobx';
-
-class GenerateCard {
-    @observable filter = null;
-
-    setupDB = () => {
-      const 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 }) => {
-      const cards = []; // Returned list of card divs
-      let card_names = []; // Prevent duplicates in pack
-      let key = 0; // React key iterator uniqueness
-
-      const 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) => {
-        const id = Math.floor(Math.random() * results.length);
-        const card = results[id];
-
-        if (!card) {
-          cards.push(<div key={key++} className="card" style={{ backgroundImage: `url("${API.card_back}")` }}></div>);
-          return;
-        }
-
-        if (card_names.indexOf(card.gsx$name) > -1 || card.gsx$exclusive.toLowerCase().includes("starter")) {
-          gencard(results);
-          return;
-        }
-            
-        card_names.push(card.gsx$name);
-
-        if (card.gsx$type != "Creatures") {
-          cards.push(<div key={key++} className="card" style={{ backgroundImage: `url("${API.cardImage(card)}")` }}></div>);
-        }
-        else {
-          cards.push(
-            <div key={key++} className="card" style={{ backgroundImage: `url("${API.cardImage(card)}")` }}>
-              <div className="stats">
-                <span key="courage">{gendisp(card.gsx$courage)}</span>
-                <span key="power">{gendisp(card.gsx$power)}</span>
-                <span key="wisdom">{gendisp(card.gsx$wisdom)}</span>
-                <span key="speed">{gendisp(card.gsx$speed)}</span>
-                <span key="energy">{geneng(card.gsx$energy)}</span>
-              </div>
-            </div>
-          );
-        }
-
-      };
-
-      const genrarity = (rarity, num) => {
-        pview.applyFind({ 'gsx$set': set })
-                .applyFind({ 'gsx$rarity': rarity });
-        const 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 = () => {
-        const 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 };

src/components/entercode/generate.js

@@ -0,0 +1,177 @@
+import React from 'react';
+import loki from 'lokijs';
+import API from '../SpreadsheetData';
+import { observable } from 'mobx';
+
+class GenerateCard {
+    @observable filter = null;
+
+    setupDB = () => {
+      const 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;
+    }
+
+    blankCard = (key) => {
+      return (<div key={key} className="card"><div style={{ backgroundImage: `url("${API.card_back}")` }} /></div>);
+    }
+
+    generate = ({ packs, set }) => {
+      const cards = []; // Returned list of card divs
+      let card_names = []; // Prevent duplicates in pack
+      let key = 0; // React key iterator uniqueness
+
+      const 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) => {
+        const id = Math.floor(Math.random() * results.length);
+        const card = results[id];
+
+        if (!card) {
+          cards.push(this.blankCard(key++));
+          return;
+        }
+
+        if (card_names.indexOf(card.gsx$name) > -1 || card.gsx$exclusive.toLowerCase().includes("starter")) {
+          gencard(results);
+          return;
+        }
+            
+        card_names.push(card.gsx$name);
+
+        if (card.gsx$type === "Creatures") {
+          cards.push(
+            <div key={key++} className="card creatures"> 
+              <div style={{ backgroundImage: `url("${API.cardImage(card)}")` }}>
+                <div className="stats">
+                  <span key="courage">{gendisp(card.gsx$courage)}</span>
+                  <span key="power">{gendisp(card.gsx$power)}</span>
+                  <span key="wisdom">{gendisp(card.gsx$wisdom)}</span>
+                  <span key="speed">{gendisp(card.gsx$speed)}</span>
+                  <span key="energy">{geneng(card.gsx$energy)}</span>
+                </div>
+              </div>
+            </div>
+          );        
+        }
+        else {
+          console.log(API.cardImage(card));
+          cards.push(<div key={key++} className={`card ${card.gsx$type.toLowerCase()}`}><div style={{ backgroundImage: `url("${API.cardImage(card)}")` }} /></div>);
+        }
+
+      };
+
+      const genrarity = (rarity, num) => {
+        pview
+          .applyFind({ 'gsx$set': set })
+          .applyFind({ 'gsx$rarity': rarity });
+        const results = pview.data();
+        for (let i = 0; i < num; i++) gencard(results);
+        pview.removeFilters();
+      };
+
+      // DOP to ROTO had 9 cards: 4 Common, 3 Uncommon, 2 Rare(+)
+      // TOTT and FUn had 9 cards: 4 Common(+), 3 Uncommon, 2 Rare
+      // AU sets had 9 cards: 6 Common and 3 Rare(+)
+      // OP1 had 3 cards: 2 Common, 1 Uncommon(+)
+      // Premium Packs had 6 cards, 5 Super and 1 Ultra
+      const randomChaser = (rarity="Rare") => {
+        const randomNumber = Math.floor(Math.random() * 24) + 1;
+        if (randomNumber == 24) return "Ultra Rare";
+        else if (randomNumber % 3 == 0) return "Super Rare";
+        else return rarity;
+      };
+
+      for (let i = 0; i < packs; i++) {
+        switch (set) {
+          case "OP1": {
+            genrarity("Common", 2);
+            const chaser = (() => {
+              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";
+            })();
+
+            genrarity(chaser, 1);
+            break;
+          }
+          case "PE1": {
+            genrarity("Super Rare", 5);
+            genrarity("Ultra Rare", 1);
+            break;
+          }
+          case "AU":
+          case "FAS": {
+            genrarity('Common', 6);
+            genrarity('Rare', 2);
+            genrarity(randomChaser(), 1);
+            break;
+          }
+          case "TOTT":
+          case "FUN": {
+            genrarity('Common', 3);
+            genrarity('Uncommon', 3);
+            genrarity('Rare', 2);
+            genrarity(randomChaser('Common'), 1);
+            break;
+          }
+          default: {
+            genrarity('Common', 4);
+            genrarity('Uncommon', 3);
+            genrarity('Rare', 1);
+            genrarity(randomChaser(), 1);
+          }
+        }
+
+        // reset pack contents for next one
+        card_names = [];
+      }
+
+      this.filter.removeDynamicView('set');
+
+      return cards;
+    }
+}
+
+const { generate, setupDB, blankCard } = new GenerateCard();
+
+export { generate, setupDB, blankCard };

src/components/entercode/index.js

@@ -1,24 +1,24 @@
 import React from 'react';
 import { observer, inject } from 'mobx-react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import EnterTheCode from './EnterTheCode';
 import PackSimulator from './PackSimulator';
+import './packs.scss';
 
 @inject((stores, props, context) => props) @observer
 export default class Base extends React.Component {
 
   render() {
-    return (<Routing {...this.props} />);
+    const { match } = this.props;
+
+    return (    
+      <div>
+        <Switch>
+          <Route exact path={match.url} component={EnterTheCode} />
+          <Route path={`${match.url}/PackSimulator`} component={PackSimulator} />
+        </Switch>
+      </div>
+    );
   }
 
 }
-
-function Routing(props) {
-  const { match } = props;
-  return (
-    <div className="pack">
-      <Route exact path={match.url} component={EnterTheCode} />
-      <Route path={`${match.url}/PackSimulator`} component={PackSimulator} />
-    </div>
-  );
-}

src/components/entercode/packs.scss

@@ -1,15 +1,35 @@
 @media only screen and (min-width: 975px) {
 .pack {
     max-width: 90%;
+
+    .card {
+        width: 20%;
+    }
 }
 } /* Desktop */
 
+@media only screen and (max-width: 975px) {
+    .pack {
+        max-width: 90%;
+    
+        .card {
+            width: 40%;
+        }
+    }
+    } /* Desktop */
+
 .packsim {
     input[type=number]::-webkit-inner-spin-button,
     input[type=number]::-webkit-outer-spin-button {
        opacity: 1;
     }
 }
+.enterthecode {
+    .card {
+        width: 250px;
+        height: 350px;
+    }
+}
 
 .pack {
     display: flex;
@@ -19,11 +39,19 @@
     margin: auto;
 
     .card {
+        margin: 5px;
+    }
+    
+    .card:hover {
+        width: 250px;
+        height: 350px;
+    }
+
+    .card > div {
         width: 150px;
         height: 210px;
         background-size: cover;
         box-sizing: content-box;
-        margin: 5px;
         -webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;
         -webkit-border-radius: 5px;
         -o-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
@@ -34,11 +62,34 @@
         transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
     }
 
-    .card:hover {
+    .card > div:hover {
         width: 250px;
         height: 350px;
     }
 
+    .card.locations {
+        width: 150px;
+        height: 210px;
+    }
+
+    .card.locations:hover {
+        width: 250px;
+        height: 350px;
+    }
+
+    .card.locations div {
+        width: 210px;
+        height: 150px;
+        
+        transform-origin: 50% 70%;
+        transform: rotate(270deg);
+    }
+
+    .card.locations div:hover {
+        width: 350px;
+        height: 250px;
+    }
+
     .stats {
         height: 100%;
         width: 100%;

src/components/portal/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observable } from "mobx";
 import { observer, inject } from 'mobx-react';
-import { Route } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 
 import API from '../SpreadsheetData';
 
@@ -33,10 +33,12 @@ export default class Base extends React.Component {
   render() {
     const { url } = this.props.match;
 
+    const tribes = API.tribes.map((tribe, i) => (<Route key={i} path={`${url}/${tribe}`} component={Tribes} />));
+
     return (
       <div className="portal">
         <Header />
-        <>
+        <Switch>
           <Route exact path={url} component={Home} />
           <Route path={`${url}/Search`} component={Search} />
           <Route path={`${url}/Attacks`} render={(props) => <Category {...props} type="Attacks" component={Attack} />} />
@@ -44,8 +46,8 @@ export default class Base extends React.Component {
           <Route path={`${url}/Creatures`} render={(props) => <Category {...props} type="Creatures" component={Creature} />} />
           <Route path={`${url}/Locations`} render={(props) => <Category {...props} type="Locations" component={Location} />} />
           <Route path={`${url}/Mugic`} render={(props) => <Category {...props} type="Mugic" component={Mugic} />} />
-          {API.tribes.map((tribe, i) => (<Route key={i} path={`${url}/${tribe}`} component={Tribes} />))}
-        </> 
+          {tribes}
+        </Switch> 
       </div>
     );
   }

webpack.config.babel.js

@@ -37,7 +37,7 @@ module.exports = (env, argv) => {
     },
 
     optimization: {
-      minimize: true,
+      minimize: (devMode) ? false : true,
       minimizer: [
         new TerserWebpackPlugin({
           parallel: true,