BUGFIX: Equipment page data was being overwritten

public/content/task_list.md

@@ -5,6 +5,8 @@ Major
 * Write the instructions for badges.
 * Implement countdown timers for combat and training.
 * Implement referral links.
+* Implement admin panel / stats page.
+* Implement bug tracker.
 
 Minor
 ---
@@ -20,6 +22,7 @@ Patch
 
 * Game Balance.
 * Images to social media instead of links.
+* Occasional flickering when rendering Profile page.
 
 Potential And Confirmed Bugs
 ---

src/components/pages/spying_log.jsx

@@ -22,7 +22,6 @@ class SpyingLog extends React.Component {
 			length: parseInt(params.length) || 20,
 
 			fetch: null,
-			buttonsVisible: false,
 
 			warning: ''
 		};
@@ -84,10 +83,6 @@ class SpyingLog extends React.Component {
 	}
 
 	buttonHeader() {
-		if (!this.buttonsVisible && this.props.spies <= 0) {
-			return null;
-		}
-//TODO: prettier messages
 		return (
 			<div className='table noCollapse'>
 				<div className='row'>
@@ -151,8 +146,6 @@ class SpyingLog extends React.Component {
 	}
 
 	onReceived(data) {
-		this.setState({ buttonsVisible: data.length > 0 });
-
 		if (data.length === 0) {
 			let start = Math.max(0, this.state.start - this.state.length);
 

src/components/panels/equipment.jsx

@@ -32,17 +32,16 @@ class Equipment extends React.Component {
 		return (
 			<div className='panel'>
 				<div className='table'>
-					<div className='row'>
+					<div className='row mobile hide'>
 						<p className='col centered truncate'>Name</p>
 						<p className='col centered truncate'>Type</p>
 						<p className='col centered truncate'>Boost</p>
 						<p className='col centered truncate'>Owned</p>
-						<p className='col centered truncate mobile hide alwaysCentered'>Buy</p>
+						<p className='col centered truncate'>Buy</p>
-						<p className='col centered truncate mobile hide alwaysCentered'>Sell</p>
+						<p className='col centered truncate'>Sell</p>
 					</div>
 
 					<hr className='mobile show' />
-					<div className='break mobile show' />
 
 					{Object.keys(display).map((key) => <div key={key}>
 						<hr className='mobile hide'/>
@@ -50,12 +49,12 @@ class Equipment extends React.Component {
 						<div className='row'>
 							<p className='col centered truncate equipmentTextPadding'>{display[key].name}</p>
 							<p className='col centered truncate equipmentTextPadding'>{display[key].type}</p>
-							<p className='col centered truncate equipmentTextPadding'>{display[key].combatBoost * 100}%</p>
+							<p className='col centered truncate equipmentTextPadding'><span className='mobile show' style={{whiteSpace: 'pre'}}>+</span>{display[key].combatBoost * 100}%</p>
-							<p className='col centered truncate equipmentTextPadding'>{display[key].owned}</p>
+							<p className='col centered truncate equipmentTextPadding'><span className='mobile show' style={{whiteSpace: 'pre'}}>Owned: </span>{display[key].owned}</p>
 							<div className='break mobile show' />
 							<div className='col row noCollapse' style={{flex: '1 1 17.5%'}}>
-								{display[key].purchasable ? <button className='col centered truncate' onClick={() => this.sendRequest('/equipmentpurchaserequest', { name: display[key].name, type: display[key].type }) } disabled={display[key].cost > this.props.gold}>Buy ({display[key].cost} gold)</button> : <div className='col centered truncate' />}
+								{display[key].purchasable ? <button className='col centered truncate' onClick={() => this.sendRequest('/equipmentpurchaserequest', { name: display[key].name, type: display[key].type }) } disabled={display[key].cost > this.props.gold}>Buy <span className='mobile show' style={{whiteSpace:'pre'}}>{display[key].name} </span>({display[key].cost} gold)</button> : <div className='col' />}
-								{display[key].saleable ? <button className='col centered truncate' onClick={() => this.sendRequest('/equipmentsellrequest', { name: display[key].name, type: display[key].type }) } disabled={display[key].owned === 0}>Sell ({Math.floor(display[key].cost/2)} gold)</button> : <div className='col centered truncate' />}
+								{display[key].saleable ? <button className='col centered truncate' onClick={() => this.sendRequest('/equipmentsellrequest', { name: display[key].name, type: display[key].type }) } disabled={display[key].owned === 0}>Sell <span className='mobile show' style={{whiteSpace:'pre'}}>{display[key].name} </span>({Math.floor(display[key].cost/2)} gold)</button> : <div className='col' />}
 							</div>
 						</div>
 						<div className='break' />
@@ -77,7 +76,7 @@ class Equipment extends React.Component {
 					let json = JSON.parse(xhr.responseText);
 
 					//on success
-					this.setState({ data: json });
+					this.setState({ data: Object.assign({}, this.state.data, json) });
 
 					if (this.props.onSuccess) {
 						this.props.onSuccess(json);

src/components/panels/news.jsx

@@ -7,7 +7,7 @@ class News extends React.Component {
 		super(props);
 
 		this.state = {
-			//
+			//TODO: data?
 		};
 
 		if (props.getFetch) {

src/components/panels/paged_combat_log.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
@@ -18,8 +19,17 @@ class PagedCombatLog extends React.Component {
 	}
 
 	render() {
+		//nothing to report
+		if (this.state.data.length === 0) {
 			return (
-			<div>
+				<div className='panel'>
+					<p className='centered'>Go and <Link to='/ladder'>attack someone!</Link></p>
+				</div>
+			);
+		}
+
+		return (
+			<div className='panel'>
 				{Object.keys(this.state.data).map((key) => <CombatLogRecord key={key} username={this.props.username} {...this.state.data[key]} />)}
 			</div>
 		);
@@ -39,7 +49,7 @@ class PagedCombatLog extends React.Component {
 					json.sort((a, b) => new Date(b.eventTime) - new Date(a.eventTime));
 
 					//on success
-					this.setState({ data: json });
+					this.setState({ data: json }); //OVERRIDE existing data
 
 					if (this.props.onReceived) {
 						this.props.onReceived(json);
@@ -88,4 +98,4 @@ const mapDispatchToProps = (dispatch) => {
 
 PagedCombatLog = connect(mapStoreToProps, mapDispatchToProps)(PagedCombatLog);
 
-export default PagedCombatLog;
+export default withRouter(PagedCombatLog);

src/components/panels/paged_ladder.jsx

@@ -6,7 +6,7 @@ class PagedLadder extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			//
+			//TODO: data?
 		}
 
 		if (props.getFetch) {
@@ -16,7 +16,7 @@ class PagedLadder extends React.Component {
 
 	render() {
 		return (
-			<div className='table'>
+			<div className='panel table'>
 				<div className='row mobile hide'>
 					<p className='col centered'>Username</p>
 					<p className='col centered'>Soldiers</p>

src/components/panels/paged_spying_log.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { withRouter, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
@@ -20,17 +19,16 @@ class PagedSpyingLog extends React.Component {
 
 	render() {
 		//if there are no spies
-		if (this.props.spies <= 0 && this.state.data.length <= 0) {
+		if (this.state.data.length === 0) {
 			return (
 				<div className='panel'>
-					<p className='centered'>You have no spies!</p>
+					<p className='centered'>It's empty in here, isn't it?</p>
-					<p className='centered'>Go and <Link to='/profile'>train some!</Link></p>
 				</div>
 			);
 		}
 
 		return (
-			<div>
+			<div className='panel'>
 				{Object.keys(this.state.data).map((key) => <SpyingLogRecord key={key} username={this.props.username} {...this.state.data[key]} />)}
 			</div>
 		);
@@ -50,7 +48,7 @@ class PagedSpyingLog extends React.Component {
 					json.sort((a, b) => new Date(b.eventTime) - new Date(a.eventTime));
 
 					//on success
-					this.setState({ data: json });
+					this.setState({ data: json }); //OVERRIDE existing data
 
 					if (this.props.onReceived) {
 						this.props.onReceived(json);
@@ -99,4 +97,4 @@ const mapDispatchToProps = (dispatch) => {
 
 PagedSpyingLog = connect(mapStoreToProps, mapDispatchToProps)(PagedSpyingLog);
 
-export default withRouter(PagedSpyingLog);
+export default PagedSpyingLog;