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

Created the combat log

Browse Source
This commit is contained in:
Kayne Ruse
2019-05-29 08:24:37 +10:00
parent bbf0f170d7
commit 6e0aaa7b9e
11 changed files with 318 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
common/utilities.js
+3 -1
View File
@@ -15,7 +15,9 @@ let excluded = [ //messages that should not be logged
'Profile sent', 'Profile sent',
'Ladder sent', 'Ladder sent',
'attacking', 'attacking',
'idle' 'idle',
'Combat log sent'
]; ];
const log = (msg, ...args) => { const log = (msg, ...args) => {
server/combat.js
+11
View File
@@ -85,6 +85,16 @@ const attackStatusRequest = (connection) => (req, res) => {
}); });
} }
const combatLogRequest = (connection) => (req, res) => {
let query = 'SELECT pastCombat.*, atk.username AS attackerUsername, def.username AS defenderUsername FROM pastCombat JOIN accounts AS atk ON pastCombat.attackerId = atk.id JOIN accounts AS def ON pastCombat.defenderId = def.id WHERE def.username = ? ORDER BY eventTime DESC LIMIT ?, ?;';
connection.query(query, [req.body.username, req.body.start, req.body.length], (err, results) => {
if (err) throw err;
res.status(200).json(results);
log('Combat log sent', req.body.username, req.body.start, req.body.length, JSON.stringify(results));
});
}
const runCombatTick = (connection) => { const runCombatTick = (connection) => {
let combatTick = new CronJob('* * * * * *', () => { let combatTick = new CronJob('* * * * * *', () => {
//find each pending combat //find each pending combat
@@ -178,6 +188,7 @@ const isAttacking = (connection, user, cb) => {
module.exports = { module.exports = {
attackRequest: attackRequest, attackRequest: attackRequest,
attackStatusRequest: attackStatusRequest, attackStatusRequest: attackStatusRequest,
combatLogRequest: combatLogRequest,
runCombatTick: runCombatTick runCombatTick: runCombatTick
} }
server/index.js
+1
View File
@@ -43,6 +43,7 @@ profiles.runGoldTick(connection);
let combat = require('./combat.js'); let combat = require('./combat.js');
app.post('/attackrequest', combat.attackRequest(connection)); app.post('/attackrequest', combat.attackRequest(connection));
app.post('/attackstatusrequest', combat.attackStatusRequest(connection)); app.post('/attackstatusrequest', combat.attackStatusRequest(connection));
app.post('/combatlogrequest', combat.combatLogRequest(connection));
combat.runCombatTick(connection); combat.runCombatTick(connection);
//static directories //static directories
src/components/pages/home.jsx
+1
View File
@@ -26,6 +26,7 @@ class Home extends React.Component {
</div> </div>
<div className='mainPanel'> <div className='mainPanel'>
<h1 className='centered'>About</h1>
<Blurb /> <Blurb />
<h1 className='centered'>News</h1> <h1 className='centered'>News</h1>
<NewsPanel /> <NewsPanel />
src/components/pages/ladder.jsx
+1
View File
@@ -28,6 +28,7 @@ class Ladder extends React.Component {
</div> </div>
<div className='mainPanel'> <div className='mainPanel'>
<h1 className='centered'>Game Ladder</h1>
<ButtonHeader /> <ButtonHeader />
<PagedLadder start={this.state.start} length={this.state.length} getFetch={this.getFetch.bind(this)} onReceived={this.onReceived.bind(this)} /> <PagedLadder start={this.state.start} length={this.state.length} getFetch={this.getFetch.bind(this)} onReceived={this.onReceived.bind(this)} />
<ButtonHeader /> <ButtonHeader />
src/components/pages/profile.jsx
+124 -109
View File
@@ -7,6 +7,7 @@ import queryString from 'query-string';
//panels //panels
import CommonLinks from '../panels/common_links.jsx'; import CommonLinks from '../panels/common_links.jsx';
import AttackButton from '../panels/attack_button.jsx'; import AttackButton from '../panels/attack_button.jsx';
import CombatLog from '../panels/combat_log.jsx';
class Profile extends React.Component { class Profile extends React.Component {
constructor(props) { constructor(props) {
@@ -19,6 +20,7 @@ class Profile extends React.Component {
soldiers: 0, soldiers: 0,
spies: 0, spies: 0,
scientists: 0, scientists: 0,
warning: '' warning: ''
}; };
@@ -145,46 +147,53 @@ class Profile extends React.Component {
MyProfileMainPanel() { MyProfileMainPanel() {
return ( return (
<div className='table'> <div className='panel'>
<div className='row'> <h1 className='centered'>Profile</h1>
<p className='col'>Username:</p> <div className='table'>
<p className='col'>{this.state.username}</p> <div className='row'>
<div className='col'></div> <p className='col'>Username:</p>
<div className='col'></div> <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>
<div className='row'> <br />
<p className='col'>Gold:</p> <h1 className='centered'>Combat Log</h1>
<p className='col'>{this.state.gold}</p> <CombatLog username={this.props.username} />
<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>
); );
} }
@@ -200,46 +209,49 @@ class Profile extends React.Component {
NotMyProfileMainPanel() { NotMyProfileMainPanel() {
return ( return (
<div className='table'> <div className='panel'>
<div className='row'> <h1 className='centered'>Profile</h1>
<p className='col'>Username:</p> <div className='table'>
<p className='col'>{this.state.username}</p> <div className='row'>
<div className='col'></div> <p className='col'>Username:</p>
<div className='col'></div> <p className='col'>{this.state.username}</p>
</div> <div className='col'></div>
<div className='col'></div>
</div>
<div className='row'> <div className='row'>
<p className='col'>Gold:</p> <p className='col'>Gold:</p>
<p className='col'>{this.state.gold}</p> <p className='col'>{this.state.gold}</p>
<div className='col'></div> <div className='col'></div>
<div className='col'></div> <div className='col'></div>
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Recruits:</p> <p className='col'>Recruits:</p>
<p className='col'>{this.state.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} /> <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>
<div className='row'> <div className='row'>
<p className='col'>Soldiers:</p> <p className='col'>Soldiers:</p>
<p className='col'>{this.state.soldiers}</p> <p className='col'>{this.state.soldiers}</p>
<div className='col'></div> <div className='col'></div>
<div className='col'></div> <div className='col'></div>
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Spies:</p> <p className='col'>Spies:</p>
<p className='col'>{this.state.spies}</p> <p className='col'>{this.state.spies}</p>
<div className='col'></div> <div className='col'></div>
<div className='col'></div> <div className='col'></div>
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Scientists:</p> <p className='col'>Scientists:</p>
<p className='col'>{this.state.scientists}</p> <p className='col'>{this.state.scientists}</p>
<div className='col'></div> <div className='col'></div>
<div className='col'></div> <div className='col'></div>
</div>
</div> </div>
</div> </div>
); );
@@ -255,47 +267,50 @@ class Profile extends React.Component {
LoggedOutMainPanel() { LoggedOutMainPanel() {
return ( return (
<div className='table'> <div className='panel'>
<div className='row'> <h1 className='centered'>Profile</h1>
<p className='col'>Username:</p> <div className='table'>
<p className='col'>{this.state.username}</p> <div className='row'>
<div className='col'></div> <p className='col'>Username:</p>
<div className='col'></div> <p className='col'>{this.state.username}</p>
</div> <div className='col'></div>
<div className='col'></div>
</div>
<div className='row'> <div className='row'>
<p className='col'>Gold:</p> <p className='col'>Gold:</p>
<p className='col'>{this.state.gold}</p> <p className='col'>{this.state.gold}</p>
<div className='col'></div> <div className='col'></div>
<div className='col'></div> <div className='col'></div>
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Recruits:</p> <p className='col'>Recruits:</p>
<p className='col'>{this.state.recruits}</p> <p className='col'>{this.state.recruits}</p>
<div className='col'></div> <div className='col'></div>
<div className='col'></div> <div className='col'></div>
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Soldiers:</p> <p className='col'>Soldiers:</p>
<p className='col'>{this.state.soldiers}</p> <p className='col'>{this.state.soldiers}</p>
<div className='col'></div> <div className='col'></div>
<div className='col'></div> <div className='col'></div>
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Spies:</p> <p className='col'>Spies:</p>
<p className='col'>{this.state.spies}</p> <p className='col'>{this.state.spies}</p>
<div className='col'></div> <div className='col'></div>
<div className='col'></div> <div className='col'></div>
</div> </div>
<div className='row'> <div className='row'>
<p className='col'>Scientists:</p> <p className='col'>Scientists:</p>
<p className='col'>{this.state.scientists}</p> <p className='col'>{this.state.scientists}</p>
<div className='col'></div> <div className='col'></div>
<div className='col'></div> <div className='col'></div>
</div>
</div> </div>
</div> </div>
); );
src/components/panels/combat_log.jsx
+74
View File
@@ -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
+4 -1
View File
@@ -15,7 +15,10 @@ class NewsPanel extends React.Component {
render() { render() {
return ( return (
<div> <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> </div>
); );
} }
src/components/panels/paged_combat_log.jsx
+88
View File
@@ -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
+10 -5
View File
@@ -20,12 +20,17 @@ class PagedLadder extends React.Component {
return ( return (
<div className='table'> <div className='table'>
<div className='row'> <div className='row'>
<p className='col'>Username</p> <p className='col centered'>Username</p>
<p className='col'>Soldiers</p> <p className='col centered'>Soldiers</p>
<p className='col'>Recruits</p> <p className='col centered'>Recruits</p>
<p className='col'>Gold</p> <p className='col centered'>Gold</p>
</div> </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> </div>
); );
} }
webpack.config.js
+1 -1
View File
@@ -24,7 +24,7 @@ module.exports = {
] ]
}, },
optimization: { optimization: {
minimize: true, minimize: false,
minimizer: [ minimizer: [
new TerserPlugin({ new TerserPlugin({
terserOptions: { terserOptions: {