Implemented Markdown panel, wrote an update

This commit is contained in:
2019-06-03 13:12:29 +10:00
parent 6b272d06e4
commit bd95c6a240
10 changed files with 167 additions and 65 deletions
+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 });
}
+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' />
+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 });
}