[fix/add] card render issues, artists

src/components/portal/Category.js

@@ -30,11 +30,14 @@ export default class Category extends React.Component {
     }
 
     const create_link = (card, data, i, url) => {
+      // Prevent site from crashing due to misspelled/missing data
+      if (!data) return (<div key={i}></div>);
+
       return (<div key={i}>
           <Interactive as={Link} {...s.link}
             to={url || `/portal/${this.props.type}/${card.gsx$name}`}
           >
-            <span>{card.gsx$name}</span><br />
+            <span>{card.gsx$name.split(",")[0]}</span><br />
             <img className="thumb" src={API.base_image + data.gsx$thumb}></img>
           </Interactive>
       </div>);
@@ -58,7 +61,7 @@ export default class Category extends React.Component {
       })();
 
       bottom_nav = ((tribe) ?
-        API.portal[this.type].find({'gsx$tribe': tribe})
+        API.portal[this.type].chain().find({'gsx$tribe': tribe}).simplesort('gsx$name').data()
         :
         API.portal[this.type].chain().simplesort('gsx$name').data()
       ).map((card_portal, i) => {

src/components/portal/Single/Location.js

@@ -32,8 +32,10 @@ export default class SingleLocation extends React.Component {
     return (<Single
       card={card_data}
       col0={<React.Fragment>
-        <strong>Initiative: </strong>
-        <Initiative initiative={card_data.gsx$initiative} notitle="true"/>
+        <div>
+          <strong>Initiative: </strong>
+          <Initiative initiative={card_data.gsx$initiative} notitle="true"/>
+        </div>
       </React.Fragment>}
       col2={<React.Fragment>
         <div>

src/components/portal/Single/_base.js

@@ -2,7 +2,18 @@ import React from 'react';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
 import API from '../../SpreadsheetData';
-import {Rarity, Unique, Name, Ability} from '../../Snippets';
+import {Rarity, Unique, Ability} from '../../Snippets';
+
+// own "name" display function
+function Name(props) {
+	let name = props.name.split(",");
+	return (<React.Fragment>
+	  <span>{name[0]}</span>
+	  { name.length > 1 && 
+	    <span className="bigger"><br />{name[1].trim()}</span>
+	  }
+	</React.Fragment>);
+}
 
 @inject((stores, props, context) => props) @observer
 export default class Single extends React.Component {
@@ -39,6 +50,13 @@ export default class Single extends React.Component {
 				}
 				{!this.props.text &&
 					<div className="column">
+					{card.gsx$artist && <React.Fragment>
+						<div>
+						  <strong>Artist(s):</strong>
+						  <Ability ability={card.gsx$artist} />
+						</div>
+						<hr />
+					</React.Fragment>}
 						<div>
 						  <strong>Set: </strong>
 						  {`${API.sets[card.gsx$set]} (${card.gsx$set})`}

src/components/portal/Tribes.js

@@ -67,9 +67,12 @@ export default class Tribes extends React.Component {
         url = "/portal/" + tribe + "/Creatures/" + encodeURIComponent(card.gsx$name);
       }
 
+      // Prevent site from crashing due to misspelled/missing data
+      if (!card_data) return (<div key={i}></div>);
+
       return (<div key={i}>
         <Interactive as={Link} {...s.link} to={url}>
-          <span>{card.gsx$name}</span><br />
+          <span>{card.gsx$name.split(",")[0]}</span><br />
           <img className="thumb" src={API.base_image + card_data.gsx$thumb} />
         </Interactive>
       </div>);