Discardable cards, combinations working, better dialog box

src/components/Card.js

@@ -23,15 +23,15 @@ export default class Card extends Component {
     return (
       <div
         onClick = {this.props.moveToPlay}
-        onDoubleClick = {this.props.attackPlayer}
+        onDoubleClick = {this.props.discard}
         className = {"card " + this.state.player + "-card noselect"}>
         <div className="unique">{this.state.name}</div>
         <div className="center">
           <div className="stat attack">{this.state.attack}</div>
           <div className="stat health">{this.state.health}</div>
           <br/><br/><br/>
-          <div className="stat stamina">{this.state.cost}</div>
-          <div className="stat agility">{this.state.xp}</div>
+          <div className="stat stamina">{this.state.xp}</div>
+          <div className="stat agility">{this.state.cost}</div>
         </div>
       </div>
     );

src/components/Dialog.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import '../css/Dialog.css';
+
+export default class Card extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      name  : this.props.name,
+      character : "mage",
+      stat1 : this.props.stat1,
+      stat2 : this.props.stat2,
+      stat3 : this.props.stat3,
+      stat4 : this.props.stat4
+    }
+  }
+
+  render() {
+    return (
+      <div className="dialog">
+        <div className="descriptor"> A {this.state.character} walks in and croaks </div>
+        I need a potion with <div className="stat dialog-stat attack">{this.state.stat1}</div> as well as 
+        <div className="stat dialog-stat health">{this.state.stat2}</div> but dont exceed <div className="stat dialog-stat attack">{this.state.stat1}</div>
+      </div>
+    );
+  }
+}