Created the combat log

src/components/pages/home.jsx

@@ -26,6 +26,7 @@ class Home extends React.Component {
 					</div>
 
 					<div className='mainPanel'>
+						<h1 className='centered'>About</h1>
 						<Blurb />
 						<h1 className='centered'>News</h1>
 						<NewsPanel />

src/components/pages/ladder.jsx

@@ -28,6 +28,7 @@ class Ladder extends React.Component {
 					</div>
 
 					<div className='mainPanel'>
+						<h1 className='centered'>Game Ladder</h1>
 						<ButtonHeader />
 						<PagedLadder start={this.state.start} length={this.state.length} getFetch={this.getFetch.bind(this)} onReceived={this.onReceived.bind(this)} />
 						<ButtonHeader />

src/components/pages/profile.jsx

@@ -7,6 +7,7 @@ import queryString from 'query-string';
 //panels
 import CommonLinks from '../panels/common_links.jsx';
 import AttackButton from '../panels/attack_button.jsx';
+import CombatLog from '../panels/combat_log.jsx';
 
 class Profile extends React.Component {
 	constructor(props) {
@@ -19,6 +20,7 @@ class Profile extends React.Component {
 			soldiers: 0,
 			spies: 0,
 			scientists: 0,
+
 			warning: ''
 		};
 
@@ -145,46 +147,53 @@ class Profile extends React.Component {
 
 	MyProfileMainPanel() {
 		return (
-			<div className='table'>
-				<div className='row'>
-					<p className='col'>Username:</p>
-					<p className='col'>{this.state.username}</p>
-					<div className='col'></div>
-					<div className='col'></div>
+			<div className='panel'>
+				<h1 className='centered'>Profile</h1>
+				<div className='table'>
+					<div className='row'>
+						<p className='col'>Username:</p>
+						<p className='col'>{this.state.username}</p>
+						<div className='col'></div>
+						<div className='col'></div>
+					</div>
+
+					<div className='row'>
+						<p className='col'>Gold:</p>
+						<p className='col'>{this.state.gold}</p>
+						<div className='col' style={{flex: '2 1 1.5%'}}>(+1 gold for each recruit every half hour)</div>
+					</div>
+
+					<div className='row'>
+						<p className='col'>Recruits:</p>
+						<p className='col'>{this.state.recruits}</p>
+						<button className='col' style={{flex: '2 1 1.5%'}} onClick={() => this.sendRequest('/recruitrequest')}>Recruit More</button>
+					</div>
+
+					<div className='row'>
+						<p className='col'>Soldiers:</p>
+						<p className='col'>{this.state.soldiers}</p>
+						<button className='col' onClick={() => this.sendRequest('/trainrequest', this.props.username, 'soldier')}>Train (100 gold)</button>
+						<button className='col' onClick={() => this.sendRequest('/untrainrequest', this.props.username, 'soldier')}>Untrain</button>
+					</div>
+
+					<div className='row'>
+						<p className='col'>Spies:</p>
+						<p className='col'>{this.state.spies}</p>
+						<button className='col' onClick={() => this.sendRequest('/trainrequest', this.props.username, 'spy')}>Train (200 gold)</button>
+						<button className='col' onClick={() => this.sendRequest('/untrainrequest', this.props.username, 'spy')}>Untrain</button>
+					</div>
+
+					<div className='row'>
+						<p className='col'>Scientists:</p>
+						<p className='col'>{this.state.scientists}</p>
+						<button className='col' onClick={() => this.sendRequest('/trainrequest', this.props.username, 'scientist')}>Train (120 gold)</button>
+						<button className='col' onClick={() => this.sendRequest('/untrainrequest', this.props.username, 'scientist')}>Untrain</button>
+					</div>
 				</div>
 
-				<div className='row'>
-					<p className='col'>Gold:</p>
-					<p className='col'>{this.state.gold}</p>
-					<div className='col' style={{flex: '2 1 1.5%'}}>(+1 gold for each recruit every half hour)</div>
-				</div>
-
-				<div className='row'>
-					<p className='col'>Recruits:</p>
-					<p className='col'>{this.state.recruits}</p>
-					<button className='col' style={{flex: '2 1 1.5%'}} onClick={() => this.sendRequest('/recruitrequest')}>Recruit More</button>
-				</div>
-
-				<div className='row'>
-					<p className='col'>Soldiers:</p>
-					<p className='col'>{this.state.soldiers}</p>
-					<button className='col' onClick={() => this.sendRequest('/trainrequest', this.props.username, 'soldier')}>Train (100 gold)</button>
-					<button className='col' onClick={() => this.sendRequest('/untrainrequest', this.props.username, 'soldier')}>Untrain</button>
-				</div>
-
-				<div className='row'>
-					<p className='col'>Spies:</p>
-					<p className='col'>{this.state.spies}</p>
-					<button className='col' onClick={() => this.sendRequest('/trainrequest', this.props.username, 'spy')}>Train (200 gold)</button>
-					<button className='col' onClick={() => this.sendRequest('/untrainrequest', this.props.username, 'spy')}>Untrain</button>
-				</div>
-
-				<div className='row'>
-					<p className='col'>Scientists:</p>
-					<p className='col'>{this.state.scientists}</p>
-					<button className='col' onClick={() => this.sendRequest('/trainrequest', this.props.username, 'scientist')}>Train (120 gold)</button>
-					<button className='col' onClick={() => this.sendRequest('/untrainrequest', this.props.username, 'scientist')}>Untrain</button>
-				</div>
+				<br />
+				<h1 className='centered'>Combat Log</h1>
+				<CombatLog username={this.props.username} />
 			</div>
 		);
 	}
@@ -200,46 +209,49 @@ class Profile extends React.Component {
 
 	NotMyProfileMainPanel() {
 		return (
-			<div className='table'>
-				<div className='row'>
-					<p className='col'>Username:</p>
-					<p className='col'>{this.state.username}</p>
-					<div className='col'></div>
-					<div className='col'></div>
-				</div>
+			<div className='panel'>
+				<h1 className='centered'>Profile</h1>
+				<div className='table'>
+					<div className='row'>
+						<p className='col'>Username:</p>
+						<p className='col'>{this.state.username}</p>
+						<div className='col'></div>
+						<div className='col'></div>
+					</div>
 
-				<div className='row'>
-					<p className='col'>Gold:</p>
-					<p className='col'>{this.state.gold}</p>
-					<div className='col'></div>
-					<div className='col'></div>
-				</div>
+					<div className='row'>
+						<p className='col'>Gold:</p>
+						<p className='col'>{this.state.gold}</p>
+						<div className='col'></div>
+						<div className='col'></div>
+					</div>
 
-				<div className='row'>
-					<p className='col'>Recruits:</p>
-					<p className='col'>{this.state.recruits}</p>
-					<AttackButton className='col' style={{flex: '2 1 1.5%'}} setWarning={this.setWarning.bind(this)} attacker={this.props.username} defender={this.state.username} token={this.props.token} />
-				</div>
+					<div className='row'>
+						<p className='col'>Recruits:</p>
+						<p className='col'>{this.state.recruits}</p>
+						<AttackButton className='col' style={{flex: '2 1 1.5%'}} setWarning={this.setWarning.bind(this)} attacker={this.props.username} defender={this.state.username} token={this.props.token} />
+					</div>
 
-				<div className='row'>
-					<p className='col'>Soldiers:</p>
-					<p className='col'>{this.state.soldiers}</p>
-					<div className='col'></div>
-					<div className='col'></div>
-				</div>
+					<div className='row'>
+						<p className='col'>Soldiers:</p>
+						<p className='col'>{this.state.soldiers}</p>
+						<div className='col'></div>
+						<div className='col'></div>
+					</div>
 
-				<div className='row'>
-					<p className='col'>Spies:</p>
-					<p className='col'>{this.state.spies}</p>
-					<div className='col'></div>
-					<div className='col'></div>
-				</div>
+					<div className='row'>
+						<p className='col'>Spies:</p>
+						<p className='col'>{this.state.spies}</p>
+						<div className='col'></div>
+						<div className='col'></div>
+					</div>
 
-				<div className='row'>
-					<p className='col'>Scientists:</p>
-					<p className='col'>{this.state.scientists}</p>
-					<div className='col'></div>
-					<div className='col'></div>
+					<div className='row'>
+						<p className='col'>Scientists:</p>
+						<p className='col'>{this.state.scientists}</p>
+						<div className='col'></div>
+						<div className='col'></div>
+					</div>
 				</div>
 			</div>
 		);
@@ -255,47 +267,50 @@ class Profile extends React.Component {
 
 	LoggedOutMainPanel() {
 		return (
-			<div className='table'>
-				<div className='row'>
-					<p className='col'>Username:</p>
-					<p className='col'>{this.state.username}</p>
-					<div className='col'></div>
-					<div className='col'></div>
-				</div>
+			<div className='panel'>
+				<h1 className='centered'>Profile</h1>
+				<div className='table'>
+					<div className='row'>
+						<p className='col'>Username:</p>
+						<p className='col'>{this.state.username}</p>
+						<div className='col'></div>
+						<div className='col'></div>
+					</div>
 
-				<div className='row'>
-					<p className='col'>Gold:</p>
-					<p className='col'>{this.state.gold}</p>
-					<div className='col'></div>
-					<div className='col'></div>
-				</div>
+					<div className='row'>
+						<p className='col'>Gold:</p>
+						<p className='col'>{this.state.gold}</p>
+						<div className='col'></div>
+						<div className='col'></div>
+					</div>
 
-				<div className='row'>
-					<p className='col'>Recruits:</p>
-					<p className='col'>{this.state.recruits}</p>
-					<div className='col'></div>
-					<div className='col'></div>
-				</div>
+					<div className='row'>
+						<p className='col'>Recruits:</p>
+						<p className='col'>{this.state.recruits}</p>
+						<div className='col'></div>
+						<div className='col'></div>
+					</div>
 
-				<div className='row'>
-					<p className='col'>Soldiers:</p>
-					<p className='col'>{this.state.soldiers}</p>
-					<div className='col'></div>
-					<div className='col'></div>
-				</div>
+					<div className='row'>
+						<p className='col'>Soldiers:</p>
+						<p className='col'>{this.state.soldiers}</p>
+						<div className='col'></div>
+						<div className='col'></div>
+					</div>
 
-				<div className='row'>
-					<p className='col'>Spies:</p>
-					<p className='col'>{this.state.spies}</p>
-					<div className='col'></div>
-					<div className='col'></div>
-				</div>
+					<div className='row'>
+						<p className='col'>Spies:</p>
+						<p className='col'>{this.state.spies}</p>
+						<div className='col'></div>
+						<div className='col'></div>
+					</div>
 
-				<div className='row'>
-					<p className='col'>Scientists:</p>
-					<p className='col'>{this.state.scientists}</p>
-					<div className='col'></div>
-					<div className='col'></div>
+					<div className='row'>
+						<p className='col'>Scientists:</p>
+						<p className='col'>{this.state.scientists}</p>
+						<div className='col'></div>
+						<div className='col'></div>
+					</div>
 				</div>
 			</div>
 		);

src/components/panels/combat_log.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import PagedCombatLog from './paged_combat_log.jsx';
+
+class CombatLog extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			start: props.start || 0,
+			length: props.length || 20,
+			fetch: null
+		};
+	}
+
+	componentDidUpdate() {
+		this.state.fetch();
+	}
+
+	render() {
+		let ButtonHeader = this.buttonHeader.bind(this);
+
+		return (
+			<div className='panel'>
+				<ButtonHeader />
+				<PagedCombatLog username={this.props.username} start={this.state.start} length={this.state.length} getFetch={this.getFetch.bind(this)} onReceived={this.onReceived.bind(this)} />
+				<ButtonHeader />
+			</div>
+
+		);
+	}
+
+	buttonHeader() {
+		return (
+			<div className='table'>
+				<div className='row'>
+					<button className='col' onClick={this.decrement.bind(this)}>{'< Back'}</button>
+					<div className='col' />
+					<div className='col' />
+					<button className='col' onClick={this.increment.bind(this)}>{'Next >'}</button>
+				</div>
+			</div>
+		);
+	}
+
+	increment() {
+		this.setState({
+			start: this.state.start + this.state.length
+		});
+	}
+
+	decrement() {
+		this.setState({
+			start: Math.max(0, this.state.start - this.state.length)
+		});
+	}
+
+	//bound callbacks
+	getFetch(fn) {
+		this.setState({ fetch: fn });
+	}
+
+	onReceived(data) {
+		if (data.length === 0) {
+			this.decrement();
+		}
+	}
+}
+
+CombatLog.propTypes = {
+	username: PropTypes.string.isRequired
+};
+
+export default CombatLog;

src/components/panels/news_panel.jsx

@@ -15,7 +15,10 @@ class NewsPanel extends React.Component {
 	render() {
 		return (
 			<div>
-				{Object.keys(this.state.data).map((key) => <div key={key}><ReactMarkdown source={this.state.data[key]} escapeHTML={false} /><hr className='newsLine' /></div> )}
+				{Object.keys(this.state.data).map((key) => <div key={key}>
+					<ReactMarkdown source={this.state.data[key]} escapeHTML={false} />
+					<hr className='newsLine' />
+				</div> )}
 			</div>
 		);
 	}

src/components/panels/paged_combat_log.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+class PagedCombatLog extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			data: {}
+		}
+
+		if (props.getFetch) {
+			props.getFetch(this.fetchCombatLog.bind(this));
+		}
+
+		this.fetchCombatLog();
+	}
+
+	render() {
+		return (
+			<div className='table'>
+				<div className='row'>
+					<p className='col centered'>When</p>
+					<p className='col centered'>Attacker</p>
+					<p className='col centered'>Attacking Force</p>
+					<p className='col centered'>Defending Force</p>
+					<p className='col centered'>Undefended?</p>
+					<p className='col centered'>Victor</p>
+					<p className='col centered'>Gold Lost</p>
+					<p className='col centered'>Victor Casualties</p>
+				</div>
+				{Object.keys(this.state.data).map((key) => <div key={key} className={'row centered'}>
+					<p className='col centered'>{ this.parseDate(this.state.data[key].eventTime) }</p>
+					<p className='col centered'><Link to={`/profile?username=${this.state.data[key].attackerUsername}`} className={'col'}>{this.state.data[key].attackerUsername}</Link></p>
+					<p className='col centered'>{this.state.data[key].attackingUnits}</p>
+					<p className='col centered'>{this.state.data[key].defendingUnits}</p>
+					<p className='col centered'>{this.state.data[key].undefended ? 'yes' : 'no'}</p>
+					<p className='col centered'>{this.state.data[key].victor}</p>
+					<p className='col centered'>{this.state.data[key].spoilsGold}</p>
+					<p className='col centered'>{this.state.data[key].casualtiesVictor}</p>
+				</div>)}
+			</div>
+		);
+	}
+
+	fetchCombatLog(username = this.props.username, start = this.props.start, length = this.props.length) {
+		//build the XHR
+		let xhr = new XMLHttpRequest();
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					let data = JSON.parse(xhr.responseText);
+					this.setState({data: data});
+
+					if (this.props.onReceived) {
+						this.props.onReceived(data);
+					}
+				}
+			}
+		}
+
+		xhr.open('POST', '/combatlogrequest', true);
+		xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+		xhr.send(JSON.stringify({
+			username: username,
+			start: start,
+			length: length
+		}));
+	}
+
+	parseDate(eventTime) {
+		let month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+		let date = new Date(eventTime);
+		return `${date.getDate()} ${month[date.getMonth()]}`;
+	}
+}
+
+PagedCombatLog.propTypes = {
+	username: PropTypes.string.isRequired,
+	start: PropTypes.number.isRequired,
+	length: PropTypes.number.isRequired,
+	getFetch: PropTypes.func,
+	onReceived: PropTypes.func
+};
+
+export default withRouter(PagedCombatLog);

src/components/panels/paged_ladder.jsx

@@ -20,12 +20,17 @@ class PagedLadder extends React.Component {
 		return (
 			<div className='table'>
 				<div className='row'>
-					<p className='col'>Username</p>
-					<p className='col'>Soldiers</p>
-					<p className='col'>Recruits</p>
-					<p className='col'>Gold</p>
+					<p className='col centered'>Username</p>
+					<p className='col centered'>Soldiers</p>
+					<p className='col centered'>Recruits</p>
+					<p className='col centered'>Gold</p>
 				</div>
-				{Object.keys(this.state.data).map((key) => <div key={key} className={'row'}> <Link to={`/profile?username=${this.state.data[key].username}`} className={'col'}>{this.state.data[key].username}</Link><p className={'col'}>{this.state.data[key].soldiers}</p><p className={'col'}>{this.state.data[key].recruits}</p><p className={'col'}>{this.state.data[key].gold}</p></div> )}
+				{Object.keys(this.state.data).map((key) => <div key={key} className={'row centered'}>
+					<p className={'col centered'}><Link to={`/profile?username=${this.state.data[key].username}`}>{this.state.data[key].username}</Link></p>
+					<p className={'col centered'}>{this.state.data[key].soldiers}</p>
+					<p className={'col centered'}>{this.state.data[key].recruits}</p>
+					<p className={'col centered'}>{this.state.data[key].gold}</p>
+				</div> )}
 			</div>
 		);
 	}