Ratstail91/kingdombattles
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

List styling

Browse Source
This commit is contained in:
Kayne Ruse
2019-06-03 11:42:33 +10:00
parent 96d482317c
commit f456113467
8 changed files with 143 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/panels/paged_combat_log.jsx
+5 -41
View File
@@ -3,13 +3,15 @@ import { withRouter, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import CombatLogRecord from './combat_log_record.jsx';
class PagedCombatLog extends React.Component {
constructor(props) {
super(props);
this.state = {
//
}
};
if (props.getFetch) {
props.getFetch(() => this.sendRequest('/combatlogrequest', {username: props.username, start: props.start, length: props.length}));
@@ -17,40 +19,9 @@ class PagedCombatLog extends React.Component {
}
render() {
//make the enemy name a link
const PrettyName = (props) => {
if (props.name === this.props.username) {
return (<p {...props}>{props.name}</p>);
} else {
return (<p {...props}><Link to={`/profile?username=${props.name}`}>{props.name}</Link></p>);
}
};
return (
<div className='table'>
<div className='row'>
<p className='col centered badwrap'>When</p>
<p className='col centered badwrap'>Attacker</p>
<p className='col centered badwrap'>Defender</p>
<p className='col centered badwrap'>Attacking Force</p>
<p className='col centered badwrap'>Defending Force</p>
<p className='col centered badwrap'>Undefended?</p>
<p className='col centered badwrap'>Victor</p>
<p className='col centered badwrap'>Gold Stolen</p>
<p className='col centered badwrap'>Attacker Deaths</p>
</div>
{Object.keys(this.state).map((key) => <div key={key} className={'row'}>
<p className='col centered truncate'>{ this.parseDate(this.state[key].eventTime) }</p>
<PrettyName className='col centered truncate' name={this.state[key].attacker} />
<PrettyName className='col centered truncate' name={this.state[key].defender} />
<p className='col centered truncate'>{this.state[key].attackingUnits}</p>
<p className='col centered truncate'>{this.state[key].defendingUnits}</p>
<p className='col centered truncate'>{this.state[key].undefended ? 'yes' : 'no'}</p>
<p className='col centered truncate'>{this.state[key].victor}</p>
<p className='col centered truncate'>{this.state[key].spoilsGold}</p>
<p className='col centered truncate'>{this.state[key].attackerCasualties}</p>
</div>)}
<div>
{Object.keys(this.state).map((key) => <CombatLogRecord key={key} username={this.props.username} {...this.state[key]} />)}
</div>
);
}
@@ -86,13 +57,6 @@ class PagedCombatLog extends React.Component {
...args
}));
}
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 = {