Got the BadgeText working

src/components/panels/badge.jsx

@@ -10,6 +10,10 @@ class Badge extends React.Component {
 	}
 
 	render() {
+		if (!this.props.filename) {
+			return null;
+		}
+
 		let realSize = typeof(this.props.size) === 'number' ? this.props.number : this.parseSize(this.props.size);
 
 		return (
@@ -18,8 +22,8 @@ class Badge extends React.Component {
 	}
 
 	parseSize(sizeString) {
-		if (sizeString === 'small') return 12;
-		if (sizeString === 'medium') return 20;
+		if (sizeString === 'small') return 20;
+		if (sizeString === 'medium') return 50;
 		return 100;
 	}
 };

src/components/panels/badge_text.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Badge from './badge.jsx';
+
+class BadgeText extends React.Component {
+	render() {
+		if (!this.props.filename) {
+			return (
+				<p {...this.props}>{this.props.children}</p>
+			);
+		}
+
+		let centerStyle = {
+			display: 'flex',
+			justifyContent: 'center',
+			alignItems: 'center'
+		};
+
+		let leftStyle = {
+			display: 'flex'
+		};
+
+		let style = this.props.centered ? centerStyle : leftStyle;
+
+		return (
+			<div {...this.props} 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>
+			</div>
+		);
+	}
+};
+
+export default BadgeText;

src/components/panels/paged_ladder.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { withRouter, Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
+import BadgeText from './badge_text.jsx';
 import ProgressiveRainbowText from './progressive_rainbow_text.jsx';
 
 class PagedLadder extends React.Component {
@@ -28,12 +29,12 @@ class PagedLadder extends React.Component {
 				{Object.keys(this.state).map((key) =><div key={key}>
 					<hr />
 					<div className='break' />
-					<div className={'row'}>
-						{
-							this.state[key].username === 'Ratstail91' ?
-							<Link to={`/profile?username=${this.state[key].username}`} className={'col centered truncate'}><ProgressiveRainbowText>{this.state[key].username}</ProgressiveRainbowText></Link> :
-							<Link to={`/profile?username=${this.state[key].username}`} className={'col centered truncate'}><p>{this.state[key].username}</p></Link>
-						}
+
+					<div className={'row'} style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+						<Link className='col centered truncate' to={`/profile?username=${this.state[key].username}`}>
+							<BadgeText name={this.state[key].activeBadge} filename={this.state[key].activeBadgeUrl} size={'small'} centered={true}>{this.state[key].username}</BadgeText>
+						</Link>
+
 						<p className={'col centered truncate'}><span className='mobile show' style={{whiteSpace: 'pre'}}>Soldiers: </span>{this.state[key].soldiers}</p>
 						<p className={'col centered truncate'}><span className='mobile show' style={{whiteSpace: 'pre'}}>Recruits: </span>{this.state[key].recruits}</p>
 						<p className={'col centered truncate'}><span className='mobile show' style={{whiteSpace: 'pre'}}>Gold: </span>{this.state[key].gold}</p>