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

Implemented Markdown panel, wrote an update

Browse Source
This commit is contained in:
Kayne Ruse
2019-06-03 13:12:29 +10:00
parent 6b272d06e4
commit bd95c6a240
10 changed files with 167 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/patron_list.jsx
+2 -24
View File
@@ -3,16 +3,14 @@ import ReactMarkdown from 'react-markdown/with-html';
//panels
import CommonLinks from '../panels/common_links.jsx';
import Markdown from '../panels/markdown.jsx';
class PatronList extends React.Component {
constructor(props) {
super(props);
this.state = {
data: '',
warning: ''
};
this.sendRequest('/content/patron_list.md');
}
render() {
@@ -34,33 +32,13 @@ class PatronList extends React.Component {
<h1 className='centered'>My Patrons On Patreon</h1>
<p className='centered'>You can become a patron <a href='https://www.patreon.com/krgamestudios'>here</a>.</p>
{this.state ? <ReactMarkdown source={this.state.data} escapeHtml={false} /> : <p>Loading patron list...</p>}
<Markdown url='/content/patron_list.md' setWarning={this.setWarning.bind(this)} />
</div>
</div>
</div>
);
}
sendRequest(url, args = {}) {
//build the XHR
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
//on success
this.setState({ data: xhr.responseText });
}
else {
this.setWarning(xhr.responseText);
}
}
};
xhr.send();
}
setWarning(s) {
this.setState({ warning: s });
}
src/components/pages/profile.jsx
+21 -16
View File
@@ -9,6 +9,7 @@ import { storeProfile, clearProfile } from '../../actions/profile.js';
//panels
import CommonLinks from '../panels/common_links.jsx';
import AttackButton from '../panels/attack_button.jsx';
import Markdown from '../panels/markdown.jsx';
class Profile extends React.Component {
constructor(props) {
@@ -163,14 +164,6 @@ class Profile extends React.Component {
<button className='col' onClick={ () => this.sendRequest('/untrainrequest', {role: 'soldier'}) }>Untrain Soldier</button>
</div>
<div className='row'>
<p className='col'>Spies:</p>
<p className='col'>{this.props.profile.spies}</p>
<button className='col' onClick={ () => this.sendRequest('/trainrequest', {role: 'spy'}) }>Train Spy (200 gold)</button>
<button className='col' onClick={ () => this.sendRequest('/untrainrequest', {role: 'spy'}) }>Untrain Spy</button>
</div>
<div className='row'>
<p className='col'>Scientists:</p>
<p className='col'>{this.props.profile.scientists}</p>
@@ -178,7 +171,19 @@ class Profile extends React.Component {
<button className='col' onClick={ () => this.sendRequest('/trainrequest', {role: 'scientist'}) }>Train Scientist (120 gold)</button>
<button className='col' onClick={ () => this.sendRequest('/untrainrequest', {role: 'scientist'}) }>Untrain Scientist</button>
</div>
<div className='row'>
<p className='col'>Spies:</p>
<p className='col'>{this.props.profile.spies}</p>
<button className='col' onClick={ () => this.sendRequest('/trainrequest', {role: 'spy'}) }>Train Spy (200 gold)</button>
<button className='col' onClick={ () => this.sendRequest('/untrainrequest', {role: 'spy'}) }>Untrain Spy</button>
</div>
</div>
<div className='break' />
<Markdown url='/content/instructions.md' setWarning={this.setWarning.bind(this)} />
</div>
);
}
@@ -241,16 +246,16 @@ class Profile extends React.Component {
</div>
<div className='row'>
<p className='col'>Spies:</p>
<p className='col'>{this.props.profile.spies}</p>
<p className='col'>Scientists:</p>
<p className='col'>{this.props.profile.scientists}</p>
<div className='col' />
<div className='col' />
</div>
<div className='row'>
<p className='col'>Scientists:</p>
<p className='col'>{this.props.profile.scientists}</p>
<p className='col'>Spies:</p>
<p className='col'>{this.props.profile.spies}</p>
<div className='col' />
<div className='col' />
@@ -306,16 +311,16 @@ class Profile extends React.Component {
</div>
<div className='row'>
<p className='col'>Spies:</p>
<p className='col'>{this.props.profile.spies}</p>
<p className='col'>Scientists:</p>
<p className='col'>{this.props.profile.scientists}</p>
<div className='col' />
<div className='col' />
</div>
<div className='row'>
<p className='col'>Scientists:</p>
<p className='col'>{this.props.profile.scientists}</p>
<p className='col'>Spies:</p>
<p className='col'>{this.props.profile.spies}</p>
<div className='col' />
<div className='col' />
src/components/pages/task_list.jsx
+2 -24
View File
@@ -3,16 +3,14 @@ import ReactMarkdown from 'react-markdown/with-html';
//panels
import CommonLinks from '../panels/common_links.jsx';
import Markdown from '../panels/markdown.jsx';
class TaskList extends React.Component {
constructor(props) {
super(props);
this.state = {
data: '',
warning: ''
};
this.sendRequest('/content/task_list.md');
}
render() {
@@ -33,33 +31,13 @@ class TaskList extends React.Component {
</div>
<h1 className='centered'>Kingdom Battles Developer Task List</h1>
{this.state ? <ReactMarkdown source={this.state.data} escapeHtml={false} /> : <p>Loading task list...</p>}
<Markdown url='/content/task_list.md' setWarning={this.setWarning.bind(this)} />
</div>
</div>
</div>
);
}
sendRequest(url, args = {}) {
//build the XHR
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
//on success
this.setState({ data: xhr.responseText });
}
else {
this.setWarning(xhr.responseText);
}
}
};
xhr.send();
}
setWarning(s) {
this.setState({ warning: s });
}
src/components/panels/blurb.jsx
-1
View File
@@ -9,7 +9,6 @@ export default class Blurb extends React.Component {
<p className='centered'><em>A game in early development.</em></p>
<br />
<p>This is a resource accumulation game, with some similarities to idle games. The idea is that you recruit new units once per day, train them as soldiers, and send them to attack other players. You can also train spies and scientists, which each grant their own benefits.</p>
<p>Untrained recruits gain you 1 gold piece evey half hour - the only unit type that grants a passive income.</p>
<p>You can follow the developer KR Game Studios here:</p>
<ul>
<li><Link to='https://facebook.com/KRGameStudios' /></li>
src/components/panels/markdown.jsx
+56
View File
@@ -0,0 +1,56 @@
import React from 'react';
import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown';
class Markdown extends React.Component {
constructor(props) {
super(props);
if (this.props.source) {
this.state = {
data: this.props.source
};
} else {
this.state = {
data: ''
};
this.sendRequest(props.url);
}
}
render() {
if (this.state) {
return (<ReactMarkdown source={this.state.data} escapeHtml={false} />);
} else {
return (<p className='centered'>Loading markdown...</p>);
}
}
sendRequest(url, args = {}) {
//build the XHR
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
//on success
this.setState({ data: xhr.responseText });
}
else if (this.props.setWarning) {
this.props.setWarning(xhr.responseText);
}
}
};
xhr.send();
}
};
Markdown.propTypes = {
source: PropTypes.string,
url: PropTypes.string,
setWarning: PropTypes.func
};
export default Markdown;