Wrote a badge list page

src/components/app.jsx

@@ -71,6 +71,7 @@ export default class App extends React.Component {
 						<LazyRoute path='/ladder' component={() => import('./pages/ladder.jsx')} />
 						<LazyRoute path='/combatlog' component={() => import('./pages/combat_log.jsx')} />
 						<LazyRoute path='/spyinglog' component={() => import('./pages/spying_log.jsx')} />
+						<LazyRoute path='/badges/list' component={() => import('./pages/badge_list.jsx')} />
 						<LazyRoute path='/badges' component={() => import('./pages/badge_select.jsx')} />
 
 						<LazyRoute path='/tasklist' component={() => import('./pages/task_list.jsx')} />

src/components/pages/badge_list.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+//panels
+import CommonLinks from '../panels/common_links.jsx';
+import BadgeListPanel from '../panels/badge_list.jsx';
+
+class BadgeList extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			warning: '', //TODO: unified warning?
+			fetch: null
+		};
+	}
+
+	componentDidUpdate(prevProps, prevState, snapshot) {
+		this.state.fetch();
+	}
+
+	render() {
+		let warningStyle = {
+			display: this.state.warning.length > 0 ? 'flex' : 'none'
+		};
+
+		return (
+			<div className='page'>
+				<div className='sidePanelPage'>
+					<div className='sidePanel'>
+						<CommonLinks />
+					</div>
+
+					<div className='mainPanel'>
+						<div className='warning' style={warningStyle}>
+							<p>{this.state.warning}</p>
+						</div>
+
+						<h1 className='centered'>Badges</h1>
+						<BadgeListPanel setWarning={this.setWarning.bind(this)} getFetch={ (fn) => this.setState({ fetch: fn }) } />
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	setWarning(s) {
+		this.setState({ warning: s });
+	}
+};
+
+export default BadgeList;

src/components/pages/badge_select.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { withRouter, Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 //panels
@@ -42,7 +43,7 @@ class BadgeSelect extends React.Component {
 						</div>
 
 						<h1 className='centered'>Badge Select</h1>
-						<p className='centered'>Click on your favourite badge!</p>
+						<p className='centered'>Click on your favourite badge! <Link to='/badges/list'>Full list here</Link>.</p>
 						<BadgeSelectPanel setWarning={this.setWarning.bind(this)} getFetch={ (fn) => this.setState({ fetch: fn }) } />
 					</div>
 				</div>
@@ -70,4 +71,4 @@ const mapDispatchToProps = (dispatch) => {
 BadgeSelect = connect(mapStoreToProps, mapDispatchToProps)(BadgeSelect);
 
 
-export default BadgeSelect;
+export default withRouter(BadgeSelect);

src/components/panels/badge.jsx

@@ -17,7 +17,7 @@ class Badge extends React.Component {
 		let realSize = typeof(this.props.size) === 'number' ? this.props.number : this.parseSize(this.props.size);
 
 		return (
-			<img {...this.props} src={`/img/badges/${this.props.filename}`} alt={this.props.name} width={realSize} height={realSize} />
+			<img {...this.props} src={`/img/badges/${this.props.filename}`} alt={this.props.name} width={realSize} height={realSize} style={{ minWidth: realSize, minHeight: realSize }} />
 		);
 	}
 

src/components/panels/badge_list.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Badge from './badge.jsx';
+
+class BadgeList extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			data: {}
+		};
+
+		if (props.getFetch) {
+			props.getFetch(() => this.sendRequest('/badgeslistrequest'));
+		}
+	}
+
+	render() {
+		if (!this.state.data.statistics) {
+			return (
+				<p className='panel'>Loading badges...</p>
+			);
+		}
+
+		return (
+			<div className='panel table'>
+				{Object.keys(this.state.data.statistics).map((name) =>
+					<div key={name}>
+						<div className={'panel row'} style={{padding: 10}}>
+							<div className={'col centered'} style={{ minWidth: 110 }}>
+								<Badge name={name} filename={this.state.data.statistics[name].filename} />
+							</div>
+							<div className={'col'} style={{flex: 4, display: 'flex', flexDirection: 'column', justifyContent: 'center'}}>
+								<h2>{name}</h2>
+								<p>{this.state.data.statistics[name].description}</p>
+								<p>Unlockable: {this.state.data.statistics[name].unlockable ? <span style={{color: 'lightgreen'}}>Yes</span> : this.state.data.statistics[name].unlockable === null ? <span style={{color: 'yellow'}}>Coding Incomplete</span> : <span style={{color: 'red'}}>No</span>}</p>
+							</div>
+						</div>
+						<div className='row'>
+							<hr className='col mobile show' />
+						</div>
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	//gameplay functions
+	sendRequest(url, args = {}) { //send a unified request, using my credentials
+		//build the XHR
+		let xhr = new XMLHttpRequest();
+		xhr.open('POST', url, true);
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					let json = JSON.parse(xhr.responseText);
+
+					//on success
+					this.setState({ data: Object.assign({}, this.state.data, json) });
+				}
+				else if (xhr.status === 400 && this.props.setWarning) {
+					this.props.setWarning(xhr.responseText);
+				}
+			}
+		};
+
+		xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+		xhr.send(JSON.stringify({
+			...args
+		}));
+	}
+};
+
+BadgeList.propTypes = {
+	setWarning: PropTypes.func,
+	getFetch: PropTypes.func
+};
+
+export default BadgeList;

src/components/panels/badge_select.jsx

@@ -50,7 +50,7 @@ class BadgeSelect extends React.Component {
 							<hr className='col mobile show' />
 						</div>
 					</div>
-				)}
+				).reverse()}
 			</div>
 		);
 	}

src/components/panels/badge_text.jsx

@@ -22,9 +22,9 @@ class BadgeText extends React.Component {
 		let style = this.props.centered ? centerStyle : leftStyle;
 
 		return (
-			<div {...this.props} style={{...style, paddingBottom: '0.5em'}}>
+			<div className={this.props.className} style={{...style, paddingBottom: '0.5em'}}>
 				<Badge name={this.props.name} filename={this.props.filename} size={this.props.size} />
-				<p style={{paddingBottom: 0}}>{this.props.children}</p>
+				<p style={{paddingBottom: 0, ...this.props.style}}>{this.props.children}</p>
 			</div>
 		);
 	}