Finished spying system

src/components/panels/common_links.jsx

@@ -32,6 +32,7 @@ class CommonLinks extends React.Component {
 					<p className='mobile centered'><Link to='/equipment' onClick={this.props.onClickEquipment}>Your Equipment</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='/spyinglog' onClick={this.props.onClickSpyingLog}>Espionage 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>
 					<p className='mobile centered'><Link to='/patronlist' onClick={this.props.onClickPatronList}>Patron List</Link></p>
@@ -71,6 +72,7 @@ CommonLinks.propTypes = {
 	onClickEquipment: PropTypes.func,
 	onClickLadder: PropTypes.func,
 	onClickCombatLog: PropTypes.func,
+	onClickSpyingLog: PropTypes.func,
 	onClickTaskList: PropTypes.func,
 	onClickPatronList: PropTypes.func,
 	onClickRules: PropTypes.func

src/components/panels/paged_spying_log.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import SpyingLogRecord from './spying_log_record.jsx';
+
+class PagedSpyingLog extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			//
+		};
+
+		if (props.getFetch) {
+			props.getFetch(() => this.sendRequest('/spylogrequest', {start: props.start, length: props.length}));
+		}
+	}
+
+	render() {
+		return (
+			<div>
+				{Object.keys(this.state).map((key) => <SpyingLogRecord key={key} username={this.props.username} {...this.state[key]} />)}
+			</div>
+		);
+	}
+
+	//gameplay functions
+	sendRequest(url, args = {}) { //send a unified request, using my credentials
+		//build the XHR
+		let xhr = new XMLHttpRequest();
+		xhr.open('POST', url, true);
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					let json = JSON.parse(xhr.responseText);
+
+					//on success
+					this.setState(json);
+
+					if (this.props.onReceived) {
+						this.props.onReceived(json);
+					}
+				}
+				else if (xhr.status === 400 && this.props.setWarning) {
+					this.props.setWarning(xhr.responseText);
+				}
+			}
+		};
+
+		xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+		xhr.send(JSON.stringify({
+			id: this.props.id,
+			token: this.props.token,
+			...args
+		}));
+	}
+};
+
+PagedSpyingLog.propTypes = {
+	id: PropTypes.number.isRequired,
+	token: PropTypes.number.isRequired,
+
+	username: PropTypes.string.isRequired,
+	start: PropTypes.number.isRequired,
+	length: PropTypes.number.isRequired,
+
+	setWarning: PropTypes.func,
+	getFetch: PropTypes.func,
+	onReceived: PropTypes.func
+};
+
+const mapStoreToProps = (store) => {
+	return {
+		id: store.account.id,
+		token: store.account.token
+	};
+};
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		//
+	};
+};
+
+PagedSpyingLog = connect(mapStoreToProps, mapDispatchToProps)(PagedSpyingLog);
+
+export default withRouter(PagedSpyingLog);

src/components/panels/spying_log_record.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+class SpyingLogRecord extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			//
+		};
+	}
+
+	render() {
+		return (
+			<div className='table noCollapse'>
+				<hr />
+				<div className='break' />
+				<div className='row'>
+					<p className='col truncate'>{this.parseDate(this.props.eventTime)}</p>
+					<p className='col truncate'>Atk: {this.prettyName(this.props.attacker)} ({this.props.attackingUnits ? this.props.attackingUnits : '???'} units)</p>
+					<p className='col truncate'>Def: {this.prettyName(this.props.defender)}</p>
+				</div>
+
+				<div className='row'>
+					<p className='col truncate'><span className='mobile hide'>Result: </span>{this.capitalizeFirstLetter(this.props.success)}</p>
+					<p className='col truncate'>Gold Stolen: {this.props.spoilsGold}</p>
+					<div className='col' />
+				</div>
+
+				{Object.keys(this.props.equipmentStolen).map((key) => {
+					return (
+						<div key={key} className='row'>
+							<p className='col truncate'><span className='mobile hide' style={{color:'red'}}>Stolen: </span>{this.props.equipmentStolen[key].name}</p>
+							<p className='col truncate'>{this.props.equipmentStolen[key].type}</p>
+							<p className='col truncate'><span className='mobile hide'>Total: </span>{this.props.equipmentStolen[key].quantity}</p>
+						</div>
+					);
+				})}
+			</div>
+		);
+	}
+
+	prettyName(name) {
+		//make the enemy name a link
+		if (name === this.props.username) {
+			return name;
+		} else if (name) {
+			return (<Link to={`/profile?username=${name}`}>{name}</Link>);
+		} else {
+			return (<span style={{color:'red'}}>???</span>);
+		}
+	}
+
+	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()]}`;
+	}
+
+	capitalizeFirstLetter(str) {
+		return str.charAt(0).toUpperCase() + str.slice(1);
+	}
+};
+
+SpyingLogRecord.propTypes = {
+	username: PropTypes.string.isRequired,
+	eventTime: PropTypes.string.isRequired,
+	attacker: PropTypes.string,
+	defender: PropTypes.string.isRequired,
+	attackingUnits: PropTypes.number,
+	success: PropTypes.string.isRequired,
+	spoilsGold: PropTypes.number.isRequired,
+	equipmentStolen: PropTypes.array.isRequired
+};
+
+export default withRouter(SpyingLogRecord);