Finished spying system

2019-06-05 14:38:35 +10:00
parent e1c5d20289
commit c88162ef03
7 changed files with 381 additions and 5 deletions
@@ -67,9 +67,10 @@ export default class App extends React.Component {
 						<LazyRoute path='/passwordreset' component={() => import('./pages/password_reset.jsx')} />

 						<LazyRoute path='/profile' component={() => import('./pages/profile.jsx')} />
+						<LazyRoute path='/equipment' component={() => import('./pages/equipment.jsx')} />
 						<LazyRoute path='/ladder' component={() => import('./pages/ladder.jsx')} />
 						<LazyRoute path='/combatlog' component={() => import('./pages/combat_log.jsx')} />
-						<LazyRoute path='/equipment' component={() => import('./pages/equipment.jsx')} />
+						<LazyRoute path='/spyinglog' component={() => import('./pages/spying_log.jsx')} />

 						<LazyRoute path='/tasklist' component={() => import('./pages/task_list.jsx')} />
 						<LazyRoute path='/patronlist' component={() => import('./pages/patron_list.jsx')} />
@@ -0,0 +1,148 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import queryString from 'query-string';
+import PropTypes from 'prop-types';
+
+//panels
+import CommonLinks from '../panels/common_links.jsx';
+import PagedSpyingLog from '../panels/paged_spying_log.jsx';
+
+class SpyingLog extends React.Component {
+	constructor(props) {
+		super(props);
+
+		let params = queryString.parse(props.location.search);
+
+		this.state = {
+			params: params,
+			start: parseInt(params.log) || 0,
+			length: parseInt(params.length) || 20,
+
+			fetch: null,
+
+			warning: ''
+		};
+	}
+
+	componentDidMount() {
+		if (!this.props.loggedIn) {
+			this.props.history.replace('/login');
+		}
+	}
+
+	componentDidUpdate(prevProps, prevState, snapshot) {
+		if (JSON.stringify(this.state) !== JSON.stringify(prevState)) {
+			this.state.fetch();
+		}
+	}
+
+	render() {
+		let warningStyle = {
+			display: this.state.warning.length > 0 ? 'flex' : 'none'
+		};
+
+		let ButtonHeader = this.buttonHeader.bind(this);
+
+		return (
+			<div className='sidePanelPage'>
+				<div className='sidePanel'>
+					<CommonLinks />
+				</div>
+
+				<div className='mainPanel'>
+					<div className='warning' style={warningStyle}>
+						<p>{this.state.warning}</p>
+					</div>
+
+					<h1 className='centered'>Espionage Log</h1>
+
+					<ButtonHeader />
+					<PagedSpyingLog
+						setWarning={this.setWarning.bind(this)}
+						username={this.props.username}
+						start={this.state.start}
+						length={this.state.length}
+						getFetch={this.getFetch.bind(this)}
+						onReceived={this.onReceived.bind(this)}
+					/>
+					<ButtonHeader />
+				</div>
+			</div>
+
+		);
+	}
+
+	buttonHeader() {
+		return (
+			<div className='table noCollapse'>
+				<div className='row'>
+					<button className='col' onClick={ this.decrement.bind(this) }>{'< Back'}</button>
+					<div className='col hide mobile' />
+					<div className='col hide mobile' />
+					<button className='col' onClick={ this.increment.bind(this) }>{'Next >'}</button>
+				</div>
+			</div>
+		);
+	}
+
+	increment() {
+		let start = this.state.start + this.state.length;
+
+		this.props.history.push(`${this.props.location.pathname}?log=${start}`);
+	}
+
+	decrement() {
+		let start = Math.max(0, this.state.start - this.state.length);
+
+		//don't decrement too far
+		if (start === this.state.start) {
+			return;
+		}
+
+		this.props.history.push(`${this.props.location.pathname}?log=${start}`);
+	}
+
+	//bound callbacks
+	getFetch(fn) {
+		this.setState({ fetch: fn });
+	}
+
+	onReceived(data) {
+		if (data.length === 0) {
+			let start = Math.max(0, this.state.start - this.state.length);
+
+			//don't decrement too far
+			if (start === this.state.start) {
+				return;
+			}
+
+			this.props.history.replace(`${this.props.location.pathname}?log=${start}`);
+		}
+	}
+
+	setWarning(s) {
+		this.setState({ warning: s });
+	}
+};
+
+SpyingLog.propTypes = {
+	username: PropTypes.string.isRequired,
+	loggedIn: PropTypes.bool.isRequired
+};
+
+const mapStoreToProps = (store) => {
+	return {
+		username: store.account.username,
+		loggedIn: store.account.id !== 0
+	};
+};
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		//
+	};
+};
+
+SpyingLog = connect(mapStoreToProps, mapDispatchToProps)(SpyingLog);
+
+export default SpyingLog;
@@ -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
@@ -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);
@@ -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);