Implemented Markdown panel, wrote an update

public/content/instructions.md

@@ -0,0 +1,63 @@
+<div class="break" />
+
+---
+
+<div class="break" />
+
+Instructions
+---
+
+<div class="break" />
+
+This is a resource accumulation game, with some similarities to idle games. The idea is that you recruit new units once per day, train them as soldiers, and send them to attack other players. You can also train spies and scientists, which each grant their own benefits.
+
+The goal of the game is to be at the top of the game ladder for as long as possible.
+
+<div class="break" />
+
+---
+
+<div class="break" />
+
+### Recruits
+
+<div class="break" />
+
+Untrained recruits gain you 1 gold piece evey half hour - the only unit type that grants a passive income. They also act as a defense force when your soldiers are away, but they have lower combat skills. When recriuts are attacked, it is marked as "undefended" in the combat log. Recruits can still use equipment.
+
+<div class="break" />
+
+---
+
+<div class="break" />
+
+### Soldiers
+
+<div class="break" />
+
+Soldiers are your bread and butter unit in this game. They are experts at combat, and as such are much stronger than recruits. They are used to raid other player's kingdoms for gold, but larger attack forces tend to suffer casualties due to battle. Combat takes time - 1 minute for every soldier that you have. During combat, soldiers will not be available to defend your kingdom. They also use any equipment that you've purchased.
+
+<div class="break" />
+
+---
+
+<div class="break" />
+
+### Scientists
+
+<div class="break" />
+
+Scientists don't fight. Instead, they offer other means of gaining advantage over other players, such as granting access to equipment. Equipment such as weapons boost and attacking force's strength, while armour boosts the defending force. Consumables are also usable by both attackers and defenders.
+
+<div class="break" />
+
+---
+
+<div class="break" />
+
+### Spies
+
+<div class="break" />
+
+--Coming Soon--
+

public/content/task_list.md

@@ -2,6 +2,7 @@ Major
 ---
 
 * Implement spies.
+* Write the instructions for spies.
 * Write game instructions on profile page.
 * Implement countdown timers for combat and training.
 
@@ -18,6 +19,11 @@ Patch
 * Game Balance.
 * Images to social media instead of links.
 
+Potential And Confirmed Bugs
+---
+
+* What happens to consumables when recruits are attacked?
+
 Wishlist
 ---
 

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

@@ -0,0 +1,10 @@
+So Stylish, Darling!
+---
+_3 June 2019_
+
+I began today working on some styling - you'll notice it most in the [game ladder](/ladder), [combat logs](/combatlog) and [equipment page](/equipment). I've also removed these from the [task list](/tasklist). I'm paying special attention to the mobile (cell phone) layout, since at least 10% of players use mobiles to play.
+
+I've also written some basic instructions for using each of the existing unit types (spies will come soon). I'll eventually add more to it as I implement new features.
+
+I'm wondering what sort of events I could host using as minimal coding as possible. Badges could serve for capture the flag... what else? I'm open to feedback - tweet me or join my discord and let me know!
+

public/styles/shared.css

@@ -46,6 +46,12 @@ h2 {
 	color: lightblue;
 }
 
+h3 {
+	font-size: 12pt;
+	font-weight: bold;
+	color: pink;
+}
+
 br {
 	padding-bottom: .5em;
 }

server/combat.js

@@ -140,6 +140,7 @@ const runCombatTick = (connection) => {
 								defendingUnits = results[0].soldiers;
 							} else {
 								defendingUnits = results[0].recruits;
+								undefended = true; //recruits only
 							}
 
 							//get the attacker equipment

src/components/pages/patron_list.jsx

@@ -3,16 +3,14 @@ import ReactMarkdown from 'react-markdown/with-html';
 
 //panels
 import CommonLinks from '../panels/common_links.jsx';
+import Markdown from '../panels/markdown.jsx';
 
 class PatronList extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			data: '',
 			warning: ''
 		};
-
-		this.sendRequest('/content/patron_list.md');
 	}
 
 	render() {
@@ -34,33 +32,13 @@ class PatronList extends React.Component {
 
 						<h1 className='centered'>My Patrons On Patreon</h1>
 						<p className='centered'>You can become a patron <a href='https://www.patreon.com/krgamestudios'>here</a>.</p>
-						{this.state ? <ReactMarkdown source={this.state.data} escapeHtml={false} /> : <p>Loading patron list...</p>}
+						<Markdown url='/content/patron_list.md' setWarning={this.setWarning.bind(this)} />
 					</div>
 				</div>
 			</div>
 		);
 	}
 
-	sendRequest(url, args = {}) {
-		//build the XHR
-		let xhr = new XMLHttpRequest();
-		xhr.open('GET', url, true);
-
-		xhr.onreadystatechange = () => {
-			if (xhr.readyState === 4) {
-				if (xhr.status === 200) {
-					//on success
-					this.setState({ data: xhr.responseText });
-				}
-				else {
-					this.setWarning(xhr.responseText);
-				}
-			}
-		};
-
-		xhr.send();
-	}
-
 	setWarning(s) {
 		this.setState({ warning: s });
 	}

src/components/pages/profile.jsx

@@ -9,6 +9,7 @@ import { storeProfile, clearProfile } from '../../actions/profile.js';
 //panels
 import CommonLinks from '../panels/common_links.jsx';
 import AttackButton from '../panels/attack_button.jsx';
+import Markdown from '../panels/markdown.jsx';
 
 class Profile extends React.Component {
 	constructor(props) {
@@ -163,14 +164,6 @@ class Profile extends React.Component {
 						<button className='col' onClick={ () => this.sendRequest('/untrainrequest', {role: 'soldier'}) }>Untrain Soldier</button>
 					</div>
 
-					<div className='row'>
-						<p className='col'>Spies:</p>
-						<p className='col'>{this.props.profile.spies}</p>
-
-						<button className='col' onClick={ () => this.sendRequest('/trainrequest', {role: 'spy'}) }>Train Spy (200 gold)</button>
-						<button className='col' onClick={ () => this.sendRequest('/untrainrequest', {role: 'spy'}) }>Untrain Spy</button>
-					</div>
-
 					<div className='row'>
 						<p className='col'>Scientists:</p>
 						<p className='col'>{this.props.profile.scientists}</p>
@@ -178,7 +171,19 @@ class Profile extends React.Component {
 						<button className='col' onClick={ () => this.sendRequest('/trainrequest', {role: 'scientist'}) }>Train Scientist (120 gold)</button>
 						<button className='col' onClick={ () => this.sendRequest('/untrainrequest', {role: 'scientist'}) }>Untrain Scientist</button>
 					</div>
+
+					<div className='row'>
+						<p className='col'>Spies:</p>
+						<p className='col'>{this.props.profile.spies}</p>
+
+						<button className='col' onClick={ () => this.sendRequest('/trainrequest', {role: 'spy'}) }>Train Spy (200 gold)</button>
+						<button className='col' onClick={ () => this.sendRequest('/untrainrequest', {role: 'spy'}) }>Untrain Spy</button>
+					</div>
 				</div>
+
+				<div className='break' />
+
+				<Markdown url='/content/instructions.md' setWarning={this.setWarning.bind(this)} />
 			</div>
 		);
 	}
@@ -241,16 +246,16 @@ class Profile extends React.Component {
 					</div>
 
 					<div className='row'>
-						<p className='col'>Spies:</p>
+						<p className='col'>Scientists:</p>
-						<p className='col'>{this.props.profile.spies}</p>
+						<p className='col'>{this.props.profile.scientists}</p>
 
 						<div className='col' />
 						<div className='col' />
 					</div>
 
 					<div className='row'>
-						<p className='col'>Scientists:</p>
+						<p className='col'>Spies:</p>
-						<p className='col'>{this.props.profile.scientists}</p>
+						<p className='col'>{this.props.profile.spies}</p>
 
 						<div className='col' />
 						<div className='col' />
@@ -306,16 +311,16 @@ class Profile extends React.Component {
 					</div>
 
 					<div className='row'>
-						<p className='col'>Spies:</p>
+						<p className='col'>Scientists:</p>
-						<p className='col'>{this.props.profile.spies}</p>
+						<p className='col'>{this.props.profile.scientists}</p>
 
 						<div className='col' />
 						<div className='col' />
 					</div>
 
 					<div className='row'>
-						<p className='col'>Scientists:</p>
+						<p className='col'>Spies:</p>
-						<p className='col'>{this.props.profile.scientists}</p>
+						<p className='col'>{this.props.profile.spies}</p>
 
 						<div className='col' />
 						<div className='col' />

src/components/pages/task_list.jsx

@@ -3,16 +3,14 @@ import ReactMarkdown from 'react-markdown/with-html';
 
 //panels
 import CommonLinks from '../panels/common_links.jsx';
+import Markdown from '../panels/markdown.jsx';
 
 class TaskList extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			data: '',
 			warning: ''
 		};
-
-		this.sendRequest('/content/task_list.md');
 	}
 
 	render() {
@@ -33,33 +31,13 @@ class TaskList extends React.Component {
 						</div>
 
 						<h1 className='centered'>Kingdom Battles Developer Task List</h1>
-						{this.state ? <ReactMarkdown source={this.state.data} escapeHtml={false} /> : <p>Loading task list...</p>}
+						<Markdown url='/content/task_list.md' setWarning={this.setWarning.bind(this)} />
 					</div>
 				</div>
 			</div>
 		);
 	}
 
-	sendRequest(url, args = {}) {
-		//build the XHR
-		let xhr = new XMLHttpRequest();
-		xhr.open('GET', url, true);
-
-		xhr.onreadystatechange = () => {
-			if (xhr.readyState === 4) {
-				if (xhr.status === 200) {
-					//on success
-					this.setState({ data: xhr.responseText });
-				}
-				else {
-					this.setWarning(xhr.responseText);
-				}
-			}
-		};
-
-		xhr.send();
-	}
-
 	setWarning(s) {
 		this.setState({ warning: s });
 	}

src/components/panels/blurb.jsx

@@ -9,7 +9,6 @@ export default class Blurb extends React.Component {
 				<p className='centered'><em>A game in early development.</em></p>
 				<br />
 				<p>This is a resource accumulation game, with some similarities to idle games. The idea is that you recruit new units once per day, train them as soldiers, and send them to attack other players. You can also train spies and scientists, which each grant their own benefits.</p>
-				<p>Untrained recruits gain you 1 gold piece evey half hour - the only unit type that grants a passive income.</p>
 				<p>You can follow the developer KR Game Studios here:</p>
 				<ul>
 					<li><Link to='https://facebook.com/KRGameStudios' /></li>

src/components/panels/markdown.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactMarkdown from 'react-markdown';
+
+class Markdown extends React.Component {
+	constructor(props) {
+		super(props);
+
+		if (this.props.source) {
+			this.state = {
+				data: this.props.source
+			};
+		} else {
+			this.state = {
+				data: ''
+			};
+			this.sendRequest(props.url);
+		}
+	}
+
+	render() {
+		if (this.state) {
+			return (<ReactMarkdown source={this.state.data} escapeHtml={false} />);
+		} else {
+			return (<p className='centered'>Loading markdown...</p>);
+		}
+	}
+
+	sendRequest(url, args = {}) {
+		//build the XHR
+		let xhr = new XMLHttpRequest();
+		xhr.open('GET', url, true);
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					//on success
+					this.setState({ data: xhr.responseText });
+				}
+				else if (this.props.setWarning) {
+					this.props.setWarning(xhr.responseText);
+				}
+			}
+		};
+
+		xhr.send();
+	}
+};
+
+Markdown.propTypes = {
+	source: PropTypes.string,
+	url: PropTypes.string,
+	setWarning: PropTypes.func
+};
+
+export default Markdown;