closes #9

src/components/portal/Category/Attacks.js

@@ -10,10 +10,49 @@ import UnderConstruction from '../../UnderConstruction';
 @inject((stores, props, context) => props) @observer
 export default class Attacks extends React.Component {
 
-	render() {
-        if (this.props.children) {
-          return (<div>{this.props.children}</div>);
-        }
-		return (<UnderConstruction location={this.props.location}/>);
-	}
+  render() {
+    if (this.props.children) {
+      return (<div>{this.props.children}</div>);
+    }
+
+    const store = API;
+
+    let path = this.props.location.pathname.split("/");
+    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
+
+    if (store.urls === null ||
+      store.portal === null ||
+      store.cards === null) {
+      return (<span>Loading...</span>);
+    }
+
+    if (!store.cards.built.includes("attacks_cards")) {
+      store.cards.setupAttacks("cards");
+      return (<span>Loading...</span>);
+    }
+
+    if (!store.portal.built.includes("attacks_portal")) {
+      store.portal.setupAttacks("portal");
+      return (<span>Loading...</span>);
+    }
+
+    const attacks = store.portal.attacks.data;
+
+    const output = attacks.map((attack, i) => {
+      const card_data = store.cards.attacks.findOne({'gsx$name': attack.gsx$name});
+      console.log(attack, card_data);
+      return (
+        <div key={i}>
+          <Interactive as={Link} {...s.link}
+            to={'/portal/Attacks/'+attack.gsx$name}
+          >
+            <span>{attack.gsx$name}</span><br />
+            <img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
+          </Interactive>
+        </div>
+      );
+    });
+
+    return (<div>{output}</div>);
+  }
 }

src/components/portal/Single/Attack.js

@@ -10,7 +10,82 @@ import UnderConstruction from '../../UnderConstruction';
 @inject((stores, props, context) => props) @observer
 export default class SingleAttack extends React.Component {
 
-	render() {
-		return (<UnderConstruction location={this.props.location}/>);
-	}
+  render() {
+    const store = API;
+
+    let path = this.props.location.pathname.split("/");
+    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
+
+    // Path too long
+    if ( path.length !== 4 ) {
+      return(<PageNotFound location={this.props.location}/>);
+    }
+
+    let name = decodeURIComponent(path[3]);
+
+    if (store.urls === null ||
+      store.portal === null ||
+      store.cards === null) {
+      return (<span>Loading...</span>);
+    }
+
+    if (!store.cards.built.includes("attacks_cards")) {
+      store.cards.setupAttacks("cards");
+      return (<span>Loading...</span>);
+    }
+
+    if (!store.portal.built.includes("attacks_portal")) {
+      store.portal.setupAttacks("portal");
+      return (<span>Loading...</span>);
+    }
+
+    const attack = store.portal.attacks.findOne({'gsx$name': name});
+    if (!attack) {
+      return(<PageNotFound location={this.props.location}/>);
+    }
+
+    const card_data = store.cards.attacks.findOne({'gsx$name': name});
+
+    return (
+      <div className={"attack"}>
+        <h1>{attack.gsx$name}</h1>
+        <img className="splash" src={store.base_image + card_data.gsx$splash}></img>
+        <hr />
+        <div>
+          <strong>Attributes:</strong><br />
+          {attack.gsx$attributes}
+        </div>
+        <hr />
+        <div>
+          <strong>Background:</strong><br />
+          {attack.gsx$background}
+        </div>
+        <hr />
+        <div>
+          <strong>Card Flavor:</strong><br />
+          {card_data.gsx$flavortext}
+        </div>
+        <hr />
+        <div>
+          <strong>Details:</strong><br />
+          {attack.gsx$details}
+        </div>
+        <hr />
+        <div>
+          <strong>Card ID: </strong>
+          {card_data.gsx$id}
+        </div>
+        <hr />
+        <div>
+          <strong>Set: </strong>
+          {card_data.gsx$set}
+        </div>
+        <hr />
+        <div>
+          <strong>Rarity: </strong>
+          {card_data.gsx$rarity}
+        </div>
+      </div>
+    );
+  }
 }