more creature properties

src/components/SpreadsheetData.js

@@ -113,7 +113,7 @@ class CollectionDB {
   //   };
   // }
 
-  setup(spreadsheet, callback) {
+  setup(spreadsheet, type, callback) {
     this.api.getSpreadsheet(spreadsheet, (data) => {
       callback(data.map((item) => {
         let temp = {};
@@ -121,6 +121,7 @@ class CollectionDB {
         for (const key of Object.keys(item)) {
           temp[key] = item[key].$t;
         }
+        temp["gsx$type"] = type;
         return temp;
       }));
     });
@@ -135,7 +136,7 @@ class CollectionDB {
   }
 
   setupCreatures(tribe="Generic") {
-    this.setup(this.api.urls.Creatures[tribe], (data) => {
+    this.setup(this.api.urls.Creatures[tribe], "Creature", (data) => {
       this.creatures.insert(data);
       this.built.push("creatures_"+tribe);
     });
@@ -146,7 +147,7 @@ class CollectionDB {
   }
 
   setupMugic(tribe="Generic") {
-    this.setup(this.api.urls.Mugic[tribe], (data) => {
+    this.setup(this.api.urls.Mugic[tribe], "Mugic", (data) => {
       this.mugic.insert(data);
       this.built.push("mugic_"+tribe);
     });

src/components/collection/Creature.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Interactive from 'react-interactive';
+import API from '../SpreadsheetData';
+import s from '../../styles/app.style';
+import {observable} from "mobx";
+import {observer, inject} from 'mobx-react';
+
+@inject((stores, props, context) => props) @observer
+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>;
+  	});
+
+  	return(
+  	  <div style={{textAlign: 'left', display: 'flex'}}>
+  	      <img className="thumb" style={{float: 'left', width: '100px'}} src={API.base_image + creature.gsx$thumb}></img>
+  	      <div style={{verticalAlign: 'text-top', float: 'left', width: "50%"}}>
+  	        <img className="icon" src={"/src/img/icons/tribes/"+creature.gsx$tribe.toLowerCase()+".png"}></img>
+  	        <span>{creature.gsx$name}</span><br />
+  	        <span>{elements}</span><br />
+  	        <span>Energy: {creature.gsx$energy}</span><br />
+  	        <span>{creature.gsx$ability}</span>
+  	      </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 />
+  	     	 <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 />
+	     	 </div>
+  	  </div>
+  	);
+  }
+
+}

src/components/collection/Home.js

@@ -6,6 +6,7 @@ import API from '../SpreadsheetData';
 import s from '../../styles/app.style';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
+import Creature from './Creature';
 import UnderConstruction from '../UnderConstruction';
 
 
@@ -47,27 +48,6 @@ export default class SingleCreature extends React.Component {
     let numpages = Math.ceil(this.content.length / this.n);
     let elements = this.content.slice(this.n * (this.p-1), this.n * this.p); 
 
-    const output = () => {
-      if (elements.length == 1 && elements[0].text) {
-        return (
-          <div style={{textAlign: 'left'}}>{elements[0].text || 'No Results Found'}</div>
-        );
-      }
-      return elements.map((creature, i) => {
-        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>;
-        });
-
-        return(
-          <div key={i} style={{textAlign: 'left'}}>
-              <img className="thumb" src={store.base_image + creature.gsx$thumb}></img>
-              <span style={{verticalAlign: 'text-top'}}>{creature.gsx$name}{elements}</span>
-              <br />
-          </div>
-        );
-      });
-    }
-
     // TODO advanced filters
     let searchName = (e) => {
       e.preventDefault();
@@ -103,6 +83,18 @@ export default class SingleCreature extends React.Component {
       </div>
     );
 
+    const output = () => {
+      if (elements.length == 1 && elements[0].text) {
+        return (
+          <div style={{textAlign: 'left'}}>{elements[0].text}</div>
+        );
+      }
+      return elements.map((element, i) => {
+        if (element.gsx$type == "Creature") return (<Creature creature={element} key={i} />);
+        else return (<div>Empty</div>);
+      });
+    }
+
     return (
       <div>
         <p>