set icon/rarity #17

src/components/collection/Attack.js

@@ -4,6 +4,7 @@ import API from '../SpreadsheetData';
 import s from '../../styles/app.style';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
+import {Rarity} from './_Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Attack extends React.Component {
@@ -15,8 +16,8 @@ export default class Attack extends React.Component {
   	  <div style={{textAlign: 'left', display: 'flex'}}>
 	      <img className="thumb" style={{float: 'left'}} src={API.base_image + (attack.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(attack.gsx$image)} />
 	      <div style={{verticalAlign: 'text-top', float: 'left', width: "220px"}}>
-	        <span>{attack.gsx$name}</span><br />
-          <span>{API.sets[attack.gsx$set]} | {attack.gsx$rarity}</span><br />
+	        <span className="name">{attack.gsx$name}</span><br />
+          <Rarity set={attack.gsx$set} rarity={attack.gsx$rarity} /><br />
           <span>Build Points: {attack.gsx$bp}</span><br />
           <div>
             {attack.gsx$base} |&nbsp;

src/components/collection/Battlegear.js

@@ -4,6 +4,7 @@ import API from '../SpreadsheetData';
 import s from '../../styles/app.style';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
+import {Rarity} from './_Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Battlegear extends React.Component {
@@ -15,8 +16,8 @@ export default class Battlegear extends React.Component {
       <div style={{textAlign: 'left', display: 'flex'}}>
         <img className="thumb" style={{float: 'left'}} src={API.base_image + (battlegear.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(battlegear.gsx$image)} />
         <div style={{verticalAlign: 'text-top', float: 'left', width: "220px"}}>
-          <span>{battlegear.gsx$name}</span><br />
-          <span>{API.sets[battlegear.gsx$set]} | {battlegear.gsx$rarity}</span><br />
+          <span className="name">{battlegear.gsx$name}</span><br />
+          <Rarity set={battlegear.gsx$set} rarity={battlegear.gsx$rarity} /><br />
         </div>
         <div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
           <span>{battlegear.gsx$ability}</span><br />

src/components/collection/Creature.js

@@ -5,6 +5,7 @@ import s from '../../styles/app.style';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
 import processString from 'react-process-string';
+import {Rarity} from './_Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Creature extends React.Component {
@@ -44,10 +45,9 @@ export default class Creature extends React.Component {
   	  <div className="creature" style={{textAlign: 'left', display: 'flex'}}>
   	    <img className="thumb" style={{float: 'left'}} src={API.base_image + (creature.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(creature.gsx$image)} />
   	    <div style={{verticalAlign: 'text-top', float: 'left', width: '220px'}}>
-  	      <img className="icon20" src={"/src/img/icons/tribes/"+creature.gsx$tribe.toLowerCase()+".png"}></img>
-          <span>{creature.gsx$name}</span><br />
-          <span>{API.sets[creature.gsx$set]} | {creature.gsx$rarity}</span><br />
-          <span>{creature.gsx$tribe} {creature.gsx$types}</span><br />
+          <span className="name">{creature.gsx$name}</span><br />
+          <Rarity set={creature.gsx$set} rarity={creature.gsx$rarity} /><br />
+          <span><img className="icon16" style={{verticalAlign: 'middle'}} src={"/src/img/icons/tribes/"+creature.gsx$tribe.toLowerCase()+".png"} /> {creature.gsx$tribe} {creature.gsx$types}</span><br />
 	        <span>{elements}</span><br />
           <span>{mugic}</span>
 	      </div>

src/components/collection/Location.js

@@ -4,6 +4,7 @@ import API from '../SpreadsheetData';
 import s from '../../styles/app.style';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
+import {Rarity} from './_Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Location extends React.Component {
@@ -15,8 +16,8 @@ export default class Location extends React.Component {
       <div style={{textAlign: 'left', display: 'flex'}}>
         <img className="thumb" style={{float: 'left', width: '100px', height: '98px'}} src={API.base_image + (location.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(location.gsx$image)} />
         <div style={{verticalAlign: 'text-top', float: 'left', width: "220px"}}>
-          <span>{location.gsx$name}</span><br />
-          <span>{API.sets[location.gsx$set]} | {location.gsx$rarity}</span><br />
+          <span className="name">{location.gsx$name}</span><br />
+          <Rarity set={location.gsx$set} rarity={location.gsx$rarity} /><br />
           <span>{location.gsx$initiative}</span>
         </div>
         <br />

src/components/collection/Mugic.js

@@ -4,6 +4,7 @@ import API from '../SpreadsheetData';
 import s from '../../styles/app.style';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
+import {Rarity} from './_Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Attack extends React.Component {
@@ -12,17 +13,25 @@ export default class Attack extends React.Component {
     let mugic = this.props.mugic;
 
     let mugicCounters = [];
-    for (let i = 0; i < mugic.gsx$cost; i++) {
-      mugicCounters.push(<img className="icon16" src={"/src/img/icons/mugic/"+(mugic.gsx$tribe.toLowerCase()||"generic")+".png"} alt={mugic.gsx$tribe.toLowerCase() + " Mugic counter"} key={i} />);
+    if (mugic.gsx$cost == 0) {
+      mugicCounters.push(<span>0</span>);
+    }
+    else if (mugic.gsx$cost.toLowerCase() == 'x') {
+      mugicCounters.push(<span>X</span>);
+    }
+    else {
+      for (let i = 0; i < mugic.gsx$cost; i++) {
+        mugicCounters.push(<img className="icon16" src={"/src/img/icons/mugic/"+(mugic.gsx$tribe.toLowerCase()||"generic")+".png"} alt={mugic.gsx$tribe.toLowerCase() + " Mugic counter"} key={i} />);
+      }
     }
 
     return(
       <div style={{textAlign: 'left', display: 'flex'}}>
         <img className="thumb" style={{float: 'left'}} src={API.base_image + (mugic.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(mugic.gsx$image)} />
         <div style={{verticalAlign: 'text-top', float: 'left', width: "220px"}}>
-          <img height="20" className="icon16" src={"/src/img/icons/tribes/"+(mugic.gsx$tribe.toLowerCase()||"generic")+".png"}></img>
-          <span>{mugic.gsx$name}</span><br />
-          <span>{API.sets[mugic.gsx$set]} | {mugic.gsx$rarity}</span><br />
+          <span className="name">{mugic.gsx$name}</span><br />
+          <Rarity set={mugic.gsx$set} rarity={mugic.gsx$rarity} /> <br />
+          <img height="20" className="icon16" src={"/src/img/icons/tribes/"+(mugic.gsx$tribe.toLowerCase()||"generic")+".png"} /> {mugic.gsx$tribe}<br />
           <span>Cost: {mugicCounters}</span><br />
         </div>
         <br />
@@ -35,3 +44,7 @@ export default class Attack extends React.Component {
   }
 
 }
+
+function MugicCost(props) {
+
+}

src/components/collection/_Snippets.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {observable} from "mobx";
+import {observer, inject} from 'mobx-react';
+import API from '../SpreadsheetData';
+
+export function Rarity(props) {
+  return (
+    <span>
+      <img className="icon16" style={{verticalAlign: 'middle'}} src={("/src/img/icons/set/"+props.set+"/"+props.rarity+".png").toLowerCase()} />
+      {API.sets[props.set]}&nbsp;|&nbsp;{props.rarity}
+    </span>
+  );
+}

src/css/collection.css

@@ -20,6 +20,14 @@
    max-height: 350px;
 }
 
+.name {
+    font-size: 14px;
+    /* margin-bottom: 2px; */
+    padding-bottom: 4px;
+    display: inline-block;
+}
+
+
 .thumb {
     width: 100px;
     height: 98px;