search by mugic ability

package.json

@@ -23,6 +23,7 @@
     "react-interactive": "^0.8.1",
     "react-router": "^3.2.0",
     "react-router-dom": "^4.2.2",
+    "react-transition-group": "^1.2.1",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {

src/components/collection/Creature.js

@@ -14,6 +14,11 @@ export default class Creature extends React.Component {
   	  return <img className="icon" src={"/src/img/icons/elements/"+item.toLowerCase()+".png"} alt={item} 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={creature.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 + (creature.gsx$thumb||API.thumb_missing)}></img>
@@ -23,7 +28,7 @@ export default class Creature extends React.Component {
             <span>{API.sets[creature.gsx$set]} | {creature.gsx$rarity}</span><br />
             <span>Creature - {creature.gsx$tribe} {creature.gsx$types}</span><br />
   	        <span>{elements}</span><br />
-  	        <span>Energy: {creature.gsx$energy}</span><br />
+            <span>{mugic}</span><br />
   	      </div>
   	      <div style={{verticalAlign: 'text-top', float: 'left'}}>
   	     	 <span>{creature.gsx$courage}&nbsp;<img height="16" className="icon" src={"/src/img/icons/disciplines/courage.png"}></img></span><br />

src/components/collection/Home.js

@@ -94,6 +94,7 @@ export default class CollectionHome extends React.Component {
     let rarity = {};
     let sets = {};
     let gender = {};
+    let mc = {};
 
     // TODO advanced filters
     let search = (e) => {
@@ -226,6 +227,14 @@ export default class CollectionHome extends React.Component {
         creatureResults = creatureResults.find({'gsx$types': {'$or': subtypesList} });
       }
 
+      console.log(mc);
+      if (mc.min.value > 0) {
+        creatureResults = creatureResults.find({'gsx$mugicability': {'$gte': mc.min.value}});
+      }
+      if (mc.max.value > 0 && mc.max.value >= mc.min.value) {
+        creatureResults = creatureResults.find({'gsx$mugicability': {'$lte': mc.max.value}});
+      }
+
       // Merge data
       if (!this.type || this.type=="Creature") {
         let temp = creatureResults.data()
@@ -253,8 +262,7 @@ export default class CollectionHome extends React.Component {
     return (
       <div>
         <form onSubmit={search}>
-          <label>Name: <input type="text" ref={(input) => stones.name = input} /></label>
-          <br /><br />
+          <label>Name: <input type="text" ref={(input) => stones.name = input} /></label>&nbsp;&nbsp;
           <label>Text: <input type="text" ref={(input) => stones.text = input} /></label>
           <br /><br />
           <label>
@@ -264,8 +272,7 @@ export default class CollectionHome extends React.Component {
               <option value="Attack">Attack</option>
               <option value="Creature">Creature</option>
             </select>
-          </label>
-          <br /><br />
+          </label>&nbsp;&nbsp;
           <label>Subtypes: <input type="text" ref={(input) => stones.subtypes = input} /></label>
           <br /><br />
           <div>
@@ -297,6 +304,11 @@ export default class CollectionHome extends React.Component {
           <br />
           <div>{setsInput}</div>
           <br />
+          <div>
+            <label>Min Mugic Counters: <input type="text" style={{width: '20px'}} ref={(input) => mc.min = input} /></label>&nbsp;
+            <label>Max Mugic Counters: <input type="text" style={{width: '20px'}} ref={(input) => mc.max = input} /></label>
+          </div>
+          <br />
           <div>
             <label><input type="checkbox" ref={(input) => gender.Ambiguous = input}/>Ambiguous</label>&nbsp;
             <label><input type="checkbox" ref={(input) => gender.Female = input}/>Female</label>&nbsp;
@@ -329,12 +341,19 @@ export default class CollectionHome extends React.Component {
       else return(<button disabled>prev</button>);
     }
 
+    let entries = (event) => {
+      let x = event.target.value;
+      if (!isNaN(x)) {
+        this.n=x;
+      }
+    }
+
     return (
       <div style={{textAlign: 'left'}}>
         <p>Showing page {this.p} of {numpages} {prev()} {next()}</p>
         <p>
           Entries per page:&nbsp;
-          <input type="number" style={{width: '40px'}} value={this.n} onChange={(event)=>{this.n=event.target.value;}} />
+          <input type="text" style={{width: '40px'}} value={this.n} onChange={entries} />
         </p>
       </div>
     );

src/index.js

@@ -37,7 +37,7 @@ import Tribes from './components/portal/Category/Tribes';
 
 
 const routes = (
-  <Route path="/" component={App} mapMenuTitle="Home">
+  <Route path="/" component={App}>
     <IndexRoute component={Home} />
 
     {/* Test */}
@@ -52,7 +52,7 @@ const routes = (
     <Route path="EnterTheCode" component={EnterTheCode} />
 
     {/* Collection */}
-    <Route path="collection/" mapMenuTitle="Collection">
+    <Route path="collection/">
       <IndexRoute component={CollectionHome} />
 
       <Route path="*" component={PageNotFound} />