Improved the instructions

public/content/instructions.md

@@ -19,6 +19,18 @@ The goal of the game is to be at the top of the game ladder for as long as possi
 
 <div class="break" />
 
+### Attacking
+
+<div class="break" />
+
+The best way to gain gold in this game is to attack other players. You can do this via the [game ladder](/ladder). Click on someone's profile, and click the "attack" button as soon as you have a soldier. You'll earn gold from attacking, even if you lose the battle, so <span style="color:red">attacking high-ranked players is encouraged!</span>
+
+<div class="break" />
+
+---
+
+<div class="break" />
+
 ### Recruits
 
 <div class="break" />

public/content/task_list.md

@@ -11,7 +11,6 @@ Major
 Minor
 ---
 
-* Disable attack button with no soldiers.
 * Implement game ladder sorting.
 * Write unit tests (ensure that the game doesn't break from an update).
 
@@ -32,6 +31,7 @@ Wishlist
 * In-game events.
 * Hire a graphic designer.
 * Implement nations (player alliances).
+* In-game chat.
 
 Event Ideas
 ---

public/news/2019-06-04-01.md

@@ -0,0 +1,7 @@
+Today's Tasks Completed
+---
+_4 June 2019_
+
+* Improved the instructions.
+* Disable attack button with no soldiers.
+* More coming later today...

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>);
 		}

webpack.config.js

@@ -24,7 +24,7 @@ module.exports = {
     ]
   },
   optimization: {
-    minimize: true,
+    minimize: process.env.production,
     minimizer: [
       new TerserPlugin({
         terserOptions: {