From f27d2a3edf54f7da31083dbad4191b1bf727a2a4 Mon Sep 17 00:00:00 2001
From: Daniel <dds2130@rit.edu>
Date: Wed, 15 Jul 2020 17:44:09 -0400
Subject: [PATCH] rotated location card in extended

---
 src/components/collection/collection.scss     | 16 ++++++++++++----
 src/components/collection/types/Attack.js     | 10 +++++-----
 src/components/collection/types/Battlegear.js | 12 ++++++------
 src/components/collection/types/Creature.js   |  2 +-
 src/components/collection/types/Location.js   |  8 ++++----
 src/components/collection/types/Mugic.js      |  2 +-
 6 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/components/collection/collection.scss b/src/components/collection/collection.scss
index 9893cbb..759005f 100644
--- a/src/components/collection/collection.scss
+++ b/src/components/collection/collection.scss
@@ -346,10 +346,18 @@
     display: flex;
   }
 
-  .extended {
-    .fullcard {
-      max-width: 250px;
-      max-height: 350px;
+  .fullcard {
+    width: 250px;
+    height: 350px;
+  }
+
+  .location .fullcard {
+    width: 350px;
+    min-width: 350px;
+    height: 250px;
+    img {
+      transform-origin: 70% 50%;
+      transform: rotate(90deg);
     }
   }
 
diff --git a/src/components/collection/types/Attack.js b/src/components/collection/types/Attack.js
index 3463de7..0eac0c1 100644
--- 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 {Rarity, Unique, Name, Element, Ability, AttackIcon} from '../../Snippets';
+import { observer, inject } from 'mobx-react';
+import { Rarity, Unique, Name, Element, Ability, AttackIcon } from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Attack extends React.Component {
@@ -27,18 +27,18 @@ export default class Attack extends React.Component {
         <br />
         <div className="right" >
           <Ability ability={card.gsx$ability} />
-          <Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} />
+          <Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />
           <span className="flavortext">{card.gsx$flavortext}</span>
         </div>
       </div>
     )
     else return (
       <div className="card attack">
-        <img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
+        <div className="fullcard"><img src={API.base_image + (card.gsx$image || API.card_back)} /></div>
         <div className="right">
           <Name name={card.gsx$name} /><br />
           <Ability ability={card.gsx$ability} />
-          <Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} />
+          <Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />
           {card.gsx$flavortext && <React.Fragment>
             <span className="flavortext">{card.gsx$flavortext}</span><br />
           </React.Fragment>}
diff --git a/src/components/collection/types/Battlegear.js b/src/components/collection/types/Battlegear.js
index 0bb5b9b..fb3b7cf 100644
--- 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 {Rarity, Unique, Name, Ability, BattlegearIcon} from '../../Snippets';
+import { observer, inject } from 'mobx-react';
+import { Rarity, Unique, Name, Ability, BattlegearIcon } from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Battlegear extends React.Component {
@@ -11,7 +11,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(card.gsx$image)} />
+        <img className="thumb" style={{ float: 'left' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(card.gsx$image)} />
         <div className="left">
           <Name name={card.gsx$name} /><br />
           <Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
@@ -19,18 +19,18 @@ export default class Battlegear extends React.Component {
         </div>
         <div className="right" >
           <Ability ability={card.gsx$ability} />
-          <Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} />
+          <Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />
           <span className="flavortext">{card.gsx$flavortext}</span>
         </div>
       </div>
     );
     else return (
       <div className="card battlegear">
-        <img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
+        <div className="fullcard"><img src={API.base_image + (card.gsx$image || API.card_back)} /></div>
         <div className="right" >
           <Name name={card.gsx$name} /><br />
           <Ability ability={card.gsx$ability} />
-          <Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} />
+          <Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />
           {card.gsx$flavortext && <React.Fragment>
             <span className="flavortext">{card.gsx$flavortext}</span><br />
           </React.Fragment>}
diff --git a/src/components/collection/types/Creature.js b/src/components/collection/types/Creature.js
index c3dd23f..79a1ef1 100644
--- a/src/components/collection/types/Creature.js
+++ b/src/components/collection/types/Creature.js
@@ -81,7 +81,7 @@ export default class Creature extends React.Component {
     )
     else return (
       <div className="card creature">
-        <img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
+        <div className="fullcard"><img src={API.base_image + (card.gsx$image || API.card_back)} /></div>
         <div className="right" >
           <Name name={card.gsx$name} /><br />
           <span>{card.gsx$courage}&nbsp;<Discipline discipline="courage" /></span>&nbsp;
diff --git a/src/components/collection/types/Location.js b/src/components/collection/types/Location.js
index 860e04c..b8ac039 100644
--- a/src/components/collection/types/Location.js
+++ b/src/components/collection/types/Location.js
@@ -12,7 +12,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(card.gsx$image)} />
+        <img className="thumb" style={{ float: 'left', width: '100px', height: '98px' }} src={API.base_image + (card.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(card.gsx$image)} />
         <div className="left">
           <Name name={card.gsx$name} /><br />
           <Rarity set={card.gsx$set} rarity={card.gsx$rarity} /><br />
@@ -21,19 +21,19 @@ export default class Location extends React.Component {
         </div>
         <div className="right">
           <Ability ability={card.gsx$ability} />
-          <Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} />
+          <Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />
           <span className="flavortext">{card.gsx$flavortext}</span>
         </div>
       </div>
     )
     else return (
       <div className="card location">
-        <img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
+        <div className="fullcard"><img src={API.base_image + (card.gsx$image || API.card_back)} /></div>
         <div className="right">
           <Name name={card.gsx$name} /><br />
           <Initiative initiative={card.gsx$initiative} />
           <Ability ability={card.gsx$ability} />
-          <Unique data={{unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary}} />
+          <Unique data={{ unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }} />
           {card.gsx$flavortext && <React.Fragment>
             <span className="flavortext">{card.gsx$flavortext}</span><br />
           </React.Fragment>}
diff --git a/src/components/collection/types/Mugic.js b/src/components/collection/types/Mugic.js
index 02bcb21..f4e0c9b 100644
--- a/src/components/collection/types/Mugic.js
+++ b/src/components/collection/types/Mugic.js
@@ -48,7 +48,7 @@ class Attack extends React.Component {
     )
     else return (
       <div className="card mugic">
-        <img className="fullcard" src={API.base_image + (card.gsx$image || API.card_back)} />
+        <div className="fullcard"><img src={API.base_image + (card.gsx$image || API.card_back)} /></div>
         <div className="right" >
           <Name name={card.gsx$name} /><br />
           <Ability ability={card.gsx$ability} tribe={card.gsx$tribe} />