huge icon upgrade/revision #11

src/components/collection/Attack.js

@@ -10,31 +10,37 @@ export default class Attack extends React.Component {
 
   render() {
   	let attack = this.props.attack;
-  	// const elements = attack.gsx$elements.split(/[ ,]+/).filter(Boolean).map((item, i) => {
-  	//   return <img className="icon" src={"/src/img/icons/elements/"+item.toLowerCase()+".png"} alt={item} key={i}></img>;
-  	// });
 
   	return(
   	  <div style={{textAlign: 'left', display: 'flex'}}>
-	      <img className="thumb" style={{float: 'left', width: '100px', height: '98px'}} src={API.base_image + (attack.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(attack.gsx$image)} />
+	      <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>Build Points: {attack.gsx$bp}</span><br />
-          <span>
-            Damage: {attack.gsx$base} |&nbsp;
-            {attack.gsx$fire}<img height="16" className="icon" src={"/src/img/icons/elements/fire.png"} /> |&nbsp;
-            {attack.gsx$air}<img height="16" className="icon" src={"/src/img/icons/elements/air.png"} /> |&nbsp;
-            {attack.gsx$earth}<img height="16" className="icon" src={"/src/img/icons/elements/earth.png"} /> |&nbsp;
-            {attack.gsx$water}<img height="16" className="icon" src={"/src/img/icons/elements/water.png"} />
-          </span>
+          <div>
+            {attack.gsx$base} |&nbsp;
+            {attack.gsx$fire}<Element element="fire" value={attack.gsx$fire} /> |&nbsp;
+            {attack.gsx$air}<Element element="air" value={attack.gsx$air} /> |&nbsp;
+            {attack.gsx$earth}<Element element="earth" value={attack.gsx$earth} /> |&nbsp;
+            {attack.gsx$water}<Element element="water" value={attack.gsx$water} />
+          </div>
 	      </div>
         <br />
         <div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
           <span>{attack.gsx$ability}</span><br />
-          <span><i>{attack.gsx$flavortext}</i></span>
+          <span className="flavortext">{attack.gsx$flavortext}</span>
         </div>
   	  </div>
   	);
   }
 }
+
+function Element(props) {
+  if (props.value) {
+    return <img className="icon20" src={"/src/img/icons/elements/"+props.element+".png"} />
+  }
+  else {
+    return <img className="icon20" src={"/src/img/icons/elements/"+props.element+"-inactive.png"} />
+  }
+}

src/components/collection/Battlegear.js

@@ -13,14 +13,14 @@ export default class Battlegear extends React.Component {
 
     return(
       <div style={{textAlign: 'left', display: 'flex'}}>
-        <img className="thumb" style={{float: 'left', width: '100px', height: '98px'}} src={API.base_image + (battlegear.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(battlegear.gsx$image)} />
+        <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 />
         </div>
         <div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
           <span>{battlegear.gsx$ability}</span><br />
-          <span><i>{battlegear.gsx$flavortext}</i></span>
+          <span className="flavortext">{battlegear.gsx$flavortext}</span>
         </div>
       </div>
     );

src/components/collection/Creature.js

@@ -11,52 +11,58 @@ export default class Creature extends React.Component {
 
   render() {
   	let creature = this.props.creature;
-  	const elements = creature.gsx$elements.split(/[ ,]+/).filter(Boolean).map((item, i) => {
-  	  return <img className="icon" src={"/src/img/icons/elements/"+item.toLowerCase()+".png"} alt={item} key={i}></img>;
-  	});
+
+    const elements = ['fire', 'air', 'earth', 'water'].map((element, i) => {
+       if (creature.gsx$elements.toLowerCase().indexOf(element) >=0) {
+        return <img className="icon20" src={"/src/img/icons/elements/"+element+".png"} alt={element} key={i}></img>;
+      }
+      else {
+        return <img className="icon20" src={"/src/img/icons/elements/"+element+"-inactive.png"} alt={element} key={i}></img>;
+      }
+    });
 
     let mugic = [];
     for (let i = 0; i < creature.gsx$mugicability; i++) {
-      mugic.push(<img className="icon" src={"/src/img/icons/mugic/"+(creature.gsx$tribe.toLowerCase()||"generic")+".png"} alt="MC" key={i} />);
+      mugic.push(<img className="icon20" src={"/src/img/icons/mugic/"+(creature.gsx$tribe.toLowerCase()||"generic")+".png"} alt="MC" key={i} />);
     }
 
     let mugic_counters = {
       regex: /{{mc}}/i,
       fn: (key, result) => {
-        return <img key={key} className="icon" style={{'height': '16px'}} src={"/src/img/icons/mugic/"+(creature.gsx$tribe.toLowerCase()||"generic")+".png"} alt="MC" />
+        return <img key={key} className="icon16" src={"/src/img/icons/mugic/"+(creature.gsx$tribe.toLowerCase()||"generic")+".png"} alt="MC" />
       }
     }
 
-    let brainwashed = () => {
+    const brainwashed = (() => {
       if (creature.gsx$brainwashed) {
-        return (<span className="brainwashed" style={{'whiteSpace': 'pre-line'}}>{processString([mugic_counters])(creature.gsx$brainwashed)}<br />
+        return (<span className="brainwashed">{processString([mugic_counters])(creature.gsx$brainwashed)}<br />
         </span>);
       }
-    }
+    })();
 
   	return(
   	  <div className="creature" style={{textAlign: 'left', display: 'flex'}}>
-  	    <img className="thumb" style={{float: 'left', width: '100px', height: '98px'}} src={API.base_image + (creature.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(creature.gsx$image)} />
+  	    <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'}}>
-  	      <span>{creature.gsx$name}</span><br />
+  	      <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 />
-          <img height="20" className="icon" src={"/src/img/icons/tribes/"+creature.gsx$tribe.toLowerCase()+".png"}></img>
           <span>{creature.gsx$tribe} {creature.gsx$types}</span><br />
 	        <span>{elements}</span><br />
           <span>{mugic}</span>
 	      </div>
         <br />
-        <div style={{float: 'left', width: 'calc(100% - (100px + 230px + 50px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
-          <span style={{'whiteSpace': 'pre-line'}}>{processString([mugic_counters])(creature.gsx$ability)}</span><br />
-          {brainwashed()}
-          <span><i>{creature.gsx$flavortext}</i></span>
+        <div style={{float: 'left', width: 'calc(100% - (100px + 230px + 50px))', borderLeft: '1px solid white', paddingLeft: '10px', 'whiteSpace': 'pre-line'}} >
+          <span className="ability">{processString([mugic_counters])(creature.gsx$ability)}</span><br />
+          {brainwashed}
+          <span className="flavortext">{creature.gsx$flavortext}</span>
         </div>
         <br />
 	      <div style={{verticalAlign: 'text-top', float: 'left', width: '50px', textAlign: 'right'}}>
-	     	  <span>{creature.gsx$courage}&nbsp;<img height="16" className="icon" src={"/src/img/icons/disciplines/courage.png"}></img></span><br />
-	     	  <span>{creature.gsx$power}&nbsp;<img height="16" className="icon" src={"/src/img/icons/disciplines/power.png"}></img></span><br />
-	     	  <span>{creature.gsx$wisdom}&nbsp;<img height="16" className="icon" src={"/src/img/icons/disciplines/wisdom.png"}></img></span><br />
-	     	  <span>{creature.gsx$speed}&nbsp;<img height="16" className="icon" src={"/src/img/icons/disciplines/speed.png"}></img></span><br />
+	     	  <span>{creature.gsx$courage}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/courage.png"}></img></span><br />
+	     	  <span>{creature.gsx$power}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/power.png"}></img></span><br />
+	     	  <span>{creature.gsx$wisdom}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/wisdom.png"}></img></span><br />
+	     	  <span>{creature.gsx$speed}&nbsp;<img className="icon16" src={"/src/img/icons/disciplines/speed.png"}></img></span><br />
           <span>{creature.gsx$energy}</span>
         </div>
   	  </div>

src/components/collection/Home.js

@@ -65,13 +65,13 @@ export default class CollectionHome extends React.Component {
     return (
       <div className="collection">
         <link rel="stylesheet" href="/src/css/collection.css" />
-        <div className="collection_left">
+        <div style={{float: 'left', width: '30%'}}>
           <div className="card_img">
-            <img style={{maxWidth: '250px', maxHeight: '350px'}} src={API.base_image + this.card_img} />
+            <img src={API.base_image + this.card_img} />
           </div>
           <SearchForm handleContent={this.handleContent.bind(this)} />
         </div>
-        <div className="collection_right">
+        <div style={{float: 'right', width: '70%'}}>
           {this.navigation()}<br />
           <CardList cards={this.content.slice(this.n * (this.p-1), this.n * this.p)} setImage={this.setImage.bind(this)}/>
           {this.navigation()}

src/components/collection/Location.js

@@ -22,7 +22,7 @@ export default class Location extends React.Component {
         <br />
         <div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
           <span>{location.gsx$ability}</span><br />
-          <span><i>{location.gsx$flavortext}</i></span>
+          <span className="flavortext">{location.gsx$flavortext}</span>
         </div>
       </div>
     );

src/components/collection/Mugic.js

@@ -13,14 +13,14 @@ export default class Attack extends React.Component {
 
     let mugicCounters = [];
     for (let i = 0; i < mugic.gsx$cost; i++) {
-      mugicCounters.push(<img className="icon" src={"/src/img/icons/mugic/"+(mugic.gsx$tribe.toLowerCase()||"generic")+".png"} alt={mugic.gsx$tribe.toLowerCase() + " Mugic counter"} key={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', width: '100px', height: '98px'}} src={API.base_image + (mugic.gsx$thumb||API.thumb_missing)} onClick={() => this.props.setImage(mugic.gsx$image)} />
+        <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="icon" src={"/src/img/icons/tribes/"+(mugic.gsx$tribe.toLowerCase()||"generic")+".png"}></img>
+          <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>Cost: {mugicCounters}</span><br />
@@ -28,7 +28,7 @@ export default class Attack extends React.Component {
         <br />
         <div style={{float: 'left', width: 'calc(100% - (100px + 230px))', borderLeft: '1px solid white', paddingLeft: '10px'}} >
           <span>{mugic.gsx$ability}</span><br />
-          <span><i>{mugic.gsx$flavortext}</i></span>
+          <span className="flavortext">{mugic.gsx$flavortext}</span>
         </div>
       </div>
     );

src/components/collection/Search.js

@@ -72,12 +72,12 @@ export default class SearchForm extends React.Component {
 
     const card_tribes = (
       <div>
-        <input type="checkbox" ref={(input) => this.tribes.danian = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/danian.png"} />&nbsp;
-        <input type="checkbox" ref={(input) => this.tribes.mipedian = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/mipedian.png"} />&nbsp;
-        <input type="checkbox" ref={(input) => this.tribes.overworld = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/overworld.png"} />&nbsp;
-        <input type="checkbox" ref={(input) => this.tribes.underworld = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/underworld.png"} />&nbsp;
-        <input type="checkbox" ref={(input) => this.tribes["m'arrillian"] = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/m'arrillian.png"} />&nbsp;
-        <input type="checkbox" ref={(input) => this.tribes.generic = input}/><img height="16" className="icon" src={"/src/img/icons/tribes/generic.png"} />
+        <input type="checkbox" ref={(input) => this.tribes.danian = input}/><img className="icon16" src={"/src/img/icons/tribes/danian.png"} />&nbsp;
+        <input type="checkbox" ref={(input) => this.tribes.mipedian = input}/><img className="icon16" src={"/src/img/icons/tribes/mipedian.png"} />&nbsp;
+        <input type="checkbox" ref={(input) => this.tribes.overworld = input}/><img className="icon16" src={"/src/img/icons/tribes/overworld.png"} />&nbsp;
+        <input type="checkbox" ref={(input) => this.tribes.underworld = input}/><img className="icon16" src={"/src/img/icons/tribes/underworld.png"} />&nbsp;
+        <input type="checkbox" ref={(input) => this.tribes["m'arrillian"] = input}/><img className="icon16" src={"/src/img/icons/tribes/m'arrillian.png"} />&nbsp;
+        <input type="checkbox" ref={(input) => this.tribes.generic = input}/><img className="icon16" src={"/src/img/icons/tribes/generic.png"} />
       </div>
     );
 
@@ -85,21 +85,21 @@ export default class SearchForm extends React.Component {
       <div>
         <input type="button" value="or" disabled={this.swamp=="or"} onClick={(e)=>this.swamp="or"}/>
         <input type="button" value="and" disabled={this.swamp=="and"} onClick={(e)=>this.swamp="and"} />
-        <input type="checkbox" ref={(input) => this.elements.fire = input}/><img height="16px"className="icon" src={"/src/img/icons/elements/fire.png"} />&nbsp;
-        <input type="checkbox" ref={(input) => this.elements.air = input}/><img height="16px"className="icon" src={"/src/img/icons/elements/air.png"} />&nbsp;
-        <input type="checkbox" ref={(input) => this.elements.earth = input}/><img height="16px"className="icon" src={"/src/img/icons/elements/earth.png"} />&nbsp;
-        <input type="checkbox" ref={(input) => this.elements.water = input}/><img height="16px"className="icon" src={"/src/img/icons/elements/water.png"} />
+        <input type="checkbox" ref={(input) => this.elements.fire = input}/><img className="icon16" src={"/src/img/icons/elements/fire.png"} />&nbsp;
+        <input type="checkbox" ref={(input) => this.elements.air = input}/><img className="icon16" src={"/src/img/icons/elements/air.png"} />&nbsp;
+        <input type="checkbox" ref={(input) => this.elements.earth = input}/><img className="icon16" src={"/src/img/icons/elements/earth.png"} />&nbsp;
+        <input type="checkbox" ref={(input) => this.elements.water = input}/><img className="icon16" src={"/src/img/icons/elements/water.png"} />
         <br />
         <input type="checkbox" ref={(input) => this.stones.noElements = input}/><span>No Elements</span>
       </div>
     );
 
     const card_disciplines = (
-      <div>
-        <input type="text" style={{width: '30px'}} ref={(input) => this.stones.courage = input} /><img className="icon" src={"/src/img/icons/disciplines/courage.png"} />&nbsp;
-        <input type="text" style={{width: '30px'}} ref={(input) => this.stones.power = input} /><img className="icon" src={"/src/img/icons/disciplines/power.png"} />&nbsp;
-        <input type="text" style={{width: '30px'}} ref={(input) => this.stones.wisdom = input} /><img className="icon" src={"/src/img/icons/disciplines/wisdom.png"} />&nbsp;
-        <input type="text" style={{width: '30px'}} ref={(input) => this.stones.speed = input} /><img className="icon" src={"/src/img/icons/disciplines/speed.png"} />
+      <div className="disciplines">
+        <input type="text" ref={(input) => this.stones.courage = input} /><img className="icon20" style={{verticalAlign: 'bottom'}} src={"/src/img/icons/disciplines/courage.png"} />&nbsp;
+        <input type="text" ref={(input) => this.stones.power = input} /><img className="icon20" style={{verticalAlign: 'bottom'}} src={"/src/img/icons/disciplines/power.png"} />&nbsp;
+        <input type="text" ref={(input) => this.stones.wisdom = input} /><img className="icon20" style={{verticalAlign: 'bottom'}} src={"/src/img/icons/disciplines/wisdom.png"} />&nbsp;
+        <input type="text" ref={(input) => this.stones.speed = input} /><img className="icon20" style={{verticalAlign: 'bottom'}} src={"/src/img/icons/disciplines/speed.png"} />
       </div>
     );
 

src/css/collection.css

@@ -1,11 +1,13 @@
-.collection_left {
-    width: 30%;
-    float: left;
+.icon16 {
+    height: 16px;
 }
 
-.collection_right {
-    width: 70%;
-    float: right;
+.icon20 {
+    height: 20px;
+}
+
+.icon24 {
+    height: 24px;
 }
 
 .card_img {
@@ -13,6 +15,16 @@
     height: 350px;
 }
 
+.card_img img {
+   max-width: 250px;
+   max-height: 350px;
+}
+
+.thumb {
+    width: 100px;
+    height: 98px;
+}
+
 .SearchForm {
     text-align: left;
 }
@@ -21,3 +33,12 @@
     background-color: #dcdddf;
     color: black !important;
 }
+
+.flavortext {
+    font-style: italic;
+}
+
+.disciplines input {
+    width: 30px;
+    height: 14px;
+}