change thumbnail to use imgur

src/components/collection/collection.scss

@@ -267,12 +267,9 @@
     vertical-align: middle;
   }
 
-  .thumb {
+  .card .thumb {
     width: 100px;
     height: 98px;
-  }
-
-  .card .thumb {
     float: left;
   }
 

src/components/collection/index.js

@@ -247,15 +247,15 @@ const CardList = ({ cards, ...props }) => {
   return cards.map((card, i) => {
     switch (card.gsx$type) {
       case "Attacks":
-        return (<Attack card={card} key={i} {...props}/>);
+        return (<Attack card={card} key={card.gsx$name+card.gsx$set} {...props}/>);
       case "Battlegear":
-        return (<Battlegear card={card} key={i} {...props}/>);
+        return (<Battlegear card={card} key={card.gsx$name+card.gsx$set} {...props}/>);
       case "Creatures":
-        return (<Creature card={card} key={i} {...props}/>);
+        return (<Creature card={card} key={card.gsx$name+card.gsx$set} {...props}/>);
       case "Locations":
-        return (<Location card={card} key={i} {...props}/>);
+        return (<Location card={card} key={card.gsx$name+card.gsx$set} {...props}/>);
       case "Mugic":
-        return (<Mugic card={card} key={i} {...props}/>);
+        return (<Mugic card={card} key={card.gsx$name+card.gsx$set} {...props}/>);
       default:
         return (<div key={i}>Invalid Card Type</div>);
     }

src/components/collection/types/Attack.js

@@ -1,7 +1,9 @@
-import React from 'react';
-import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
+import React from 'react';
+
 import { FlavorText, Rarity, Unique, Name, ElementIcon, Ability, AttackIcon } from '../../Snippets';
+import API from '../../SpreadsheetData';
+import { Thumbnail } from './helpers';
 
 @inject((stores, props, context) => props) @observer
 export default class Attack extends React.Component {
@@ -11,7 +13,7 @@ export default class Attack extends React.Component {
 
     if (this.props.ext == false) return (
       <div className="card attack">
-        <img className="thumb" src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
+        <Thumbnail {...this.props} />
         <div className="left">
           <Name name={card.gsx$name} />
           <Rarity set={card.gsx$set} rarity={card.gsx$rarity} />

src/components/collection/types/Battlegear.js

@@ -1,7 +1,9 @@
-import React from 'react';
-import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
+import React from 'react';
+
 import { FlavorText, Rarity, Unique, Name, Ability, BattlegearIcon } from '../../Snippets';
+import API from '../../SpreadsheetData';
+import { Thumbnail } from './helpers';
 
 @inject((stores, props, context) => props) @observer
 export default class Battlegear extends React.Component {
@@ -11,7 +13,7 @@ export default class Battlegear extends React.Component {
 
     if (this.props.ext == false) return (
       <div className="card battlegear">
-        <img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
+        <Thumbnail {...this.props} />
         <div className="left">
           <Name name={card.gsx$name} />
           <Rarity set={card.gsx$set} rarity={card.gsx$rarity} />

src/components/collection/types/Creature.js

@@ -1,7 +1,9 @@
-import React from 'react';
-import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
+import React from 'react';
+
 import { FlavorText, Rarity, Unique, Name, ElementIcon, MugicIcon, DisciplineIcon, Ability, TribeIcon } from '../../Snippets';
+import API from '../../SpreadsheetData';
+import { Thumbnail } from './helpers';
 
 @inject((stores, props, context) => props) @observer
 export default class Creature extends React.Component {
@@ -44,7 +46,7 @@ export default class Creature extends React.Component {
 
     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))} />
+        <Thumbnail {...this.props} />
         <div className="left">
           <Name name={card.gsx$name} />
           <Rarity set={card.gsx$set} rarity={card.gsx$rarity} />

src/components/collection/types/Location.js

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { Ability, FlavorText, Initiative, LocationIcon, Name, Rarity, Unique } from '../../Snippets';
 import API from '../../SpreadsheetData';
+import { Thumbnail } from './helpers';
 
 @inject((stores, props, context) => props) @observer
 export default class Location extends React.Component {
@@ -12,7 +13,7 @@ export default class Location extends React.Component {
 
     if (this.props.ext == false) return (
       <div className="card location">
-        <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))} />
+        <Thumbnail {...this.props} />
         <div className="left">
           <Name name={card.gsx$name} />
           <Rarity set={card.gsx$set} rarity={card.gsx$rarity} />

src/components/collection/types/Mugic.js

@@ -1,8 +1,10 @@
-import React from 'react';
-import API from '../../SpreadsheetData';
 import { observer, inject } from 'mobx-react';
-import { FlavorText, Rarity, Unique, Name, MugicIcon as MugicCounter, Ability, TribeIcon } from '../../Snippets';
+import React from 'react';
+
 import MugicPlay from '../../mugicplayer/playbutton.tsx';
+import { FlavorText, Rarity, Unique, Name, MugicIcon as MugicCounter, Ability, TribeIcon } from '../../Snippets';
+import API from '../../SpreadsheetData';
+import { Thumbnail } from './helpers';
 
 @inject((stores, props, context) => props) @observer
 export default class Mugic extends React.Component {
@@ -30,7 +32,7 @@ export default class Mugic extends React.Component {
   
     if (this.props.ext == false) return (
       <div className="card mugic">
-        <img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(API.cardImage(card))} />
+        <Thumbnail {...this.props} />
         <div className="left">
           <Name name={card.gsx$name} />
           <Rarity set={card.gsx$set} rarity={card.gsx$rarity} />

src/components/collection/types/helpers.js

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import API from '../../SpreadsheetData';
+
+export function Thumbnail ({ card, setImage }) {
+
+  // If imgur image exists, crop from it instead
+  if (card.gsx$ic && card.gsx$ic !== '') {
+    const innerStyle = (() => {
+      switch (card.gsx$type) {
+        case 'Attacks': 
+          return {
+            height: "206px",
+            width: "112px",
+            margin: "-22px 0px 0px -6px",
+          };
+        case 'Battlegear': 
+          return {
+            height: "204px",
+            width: "112px",
+            margin: "-22px 0px 0px -6px",
+          };
+        case 'Creatures': 
+          return {
+            height: "192px",
+            width: "109px",
+            margin: "-18px 0px -0px -4px",
+          };
+        case 'Locations':
+          return {
+            height: "194px",
+            width: "200px",
+            margin: "-28px 0px 0px -50px",
+          };
+        case 'Mugic': 
+          return {
+            height: "188px",
+            width: "100px",
+            margin: "-18px 0px 0px 0px",
+          };
+      }
+    })();
+
+    return (<div className='thumb' style={{ overflow: "hidden" }}>
+      <img
+        src={card.gsx$ic}
+        onClick={() => setImage(card.gsx$ic)}
+        style={{ ...innerStyle }}
+      />
+    </div>);
+  }
+
+  return <img 
+    className="thumb" 
+    src={API.base_image + (card.gsx$thumb||API.thumb_missing)} 
+    onClick={() => setImage(API.cardImage(card))} 
+  />;
+}