Improved the instructions

src/components/panels/attack_button.jsx

@@ -6,10 +6,12 @@ class AttackButton extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
+			soldiers: 0, //NOTE: not stored in profile afterall
 			message: ''
 		};
 
-		this.sendRequest('/attackstatusrequest', {attacker: this.props.attacker});
+		this.sendRequest('/attackstatusrequest', {attacker: this.props.attacker}, this.attackStatus.bind(this));
+		this.sendRequest('/profilerequest', {username: this.props.attacker}, this.profileData.bind(this));
 	}
 
 	render() {
@@ -20,20 +22,20 @@ class AttackButton extends React.Component {
 		} else {
 			//inject something extra
 			let onClick = (e) => {
-				this.sendRequest('/attackrequest', {attacker: this.props.attacker, defender: this.props.defender});
+				this.sendRequest('/attackrequest', {attacker: this.props.attacker, defender: this.props.defender}, this.attackStatus.bind(this));
 				if (this.props.onClick) {
 					this.props.onClick(e);
 				}
 			};
 
 			return (
-				<button className={this.props.className} style={this.props.style} onClick={onClick}>Attack</button>
+				<button className={this.props.className} style={this.props.style} onClick={onClick} disabled={!this.state.soldiers}>Attack</button>
 			);
 		}
 	}
 
 	//gameplay functions
-	sendRequest(url, args = {}) { //send a unified request, using my credentials
+	sendRequest(url, args = {}, onSuccess) { //send a unified request, using my credentials
 		//build the XHR
 		let xhr = new XMLHttpRequest();
 		xhr.open('POST', url, true);
@@ -43,10 +45,7 @@ class AttackButton extends React.Component {
 				if (xhr.status === 200) {
 					let json = JSON.parse(xhr.responseText);
 
-					//on success
-					if (json.status === 'attacking') {
-						this.setState({ message: `Your soldiers are attacking ${json.defender}` });
-					}
+					onSuccess(json);
 				}
 				else if (xhr.status === 400 && this.props.setWarning) {
 					this.props.setWarning(xhr.responseText);
@@ -61,6 +60,16 @@ class AttackButton extends React.Component {
 			...args
 		}));
 	}
+
+	attackStatus(json) {
+		if (json.status === 'attacking') {
+			this.setState({ message: `Your soldiers are attacking ${json.defender}` });
+		}
+	}
+
+	profileData(json) {
+		this.setState({ soldiers: json.soldiers });
+	}
 };
 
 AttackButton.propTypes = {

src/components/panels/common_links.jsx

@@ -30,7 +30,7 @@ class CommonLinks extends React.Component {
 				<div className='panel'>
 					<p className='mobile centered'><Link to='/profile' onClick={this.props.onClickProfile}>Your Kingdom</Link></p>
 					<p className='mobile centered'><Link to='/equipment' onClick={this.props.onClickCombatLog}>Your Equipment</Link></p>
-					<p className='mobile centered'><Link to='/ladder' onClick={this.props.onClickLadder}>Game Ladder</Link></p>
+					<p className='mobile centered'><Link to='/ladder' onClick={this.props.onClickLadder}>Attack (Game Ladder)</Link></p>
 					<p className='mobile centered'><Link to='/combatlog' onClick={this.props.onClickCombatLog}>Combat Log</Link></p>
 					<p className='mobile centered'><Link to='/passwordchange' onClick={this.props.onClickPasswordChange}>Change Password</Link></p>
 					<p className='mobile centered'><Link to='/tasklist' onClick={this.props.onClickTaskList}>Task List</Link></p>

src/components/panels/markdown.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from 'react-markdown/with-html';
 
 class Markdown extends React.Component {
 	constructor(props) {
@@ -20,7 +20,7 @@ class Markdown extends React.Component {
 
 	render() {
 		if (this.state) {
-			return (<ReactMarkdown source={this.state.data} escapeHtml={false} />);
+			return (<ReactMarkdown source={this.state.data} escapeHtml={false} {...this.props} />);
 		} else {
 			return (<p className='centered'>Loading markdown...</p>);
 		}