Got the BadgeText working

src/actions/profile.js

@@ -5,9 +5,11 @@ export const STORE_RECRUITS = 'STORE_RECRUITS';
 export const STORE_SOLDIERS = 'STORE_SOLDIERS';
 export const STORE_SPIES = 'STORE_SPIES';
 export const STORE_SCIENTISTS = 'STORE_SCIENTISTS';
+export const STORE_ACTIVE_BADGE = 'STORE_ACTIVE_BADGE';
+export const STORE_ACTIVE_BADGE_FILENAME = 'STORE_ACTIVE_BADGE_FILENAME';
 export const CLEAR_PROFILE = 'CLEAR_PROFILE';
 
-export const storeProfile = (username, gold, recruits, soldiers, spies, scientists) => {
+export const storeProfile = (username, gold, recruits, soldiers, spies, scientists, activeBadge, activeBadgeFilename) => {
 	return {
 		type: STORE_PROFILE,
 		username: username,
@@ -15,7 +17,9 @@ export const storeProfile = (username, gold, recruits, soldiers, spies, scientis
 		recruits: recruits,
 		soldiers: soldiers,
 		spies: spies,
-		scientists: scientists
+		scientists: scientists,
+		activeBadge: activeBadge,
+		activeBadgeFilename: activeBadgeFilename
 	};
 }
 
@@ -61,6 +65,20 @@ export const storeScientists = (scientists) => {
 	};
 }
 
+export const storeActiveBadge = (activeBadge) => {
+	return {
+		tpye: STORE_ACTIVE_BADGE,
+		activeBadge: activeBadge
+	};
+}
+
+export const storeActiveBadgeFilename = (activeBadgeFilename) => {
+	return {
+		tpye: STORE_ACTIVE_BADGE,
+		activeBadgeFilename: activeBadgeFilename
+	};
+}
+
 export const clearProfile = () => {
 	return {
 		type: CLEAR_PROFILE

src/components/pages/profile.jsx

@@ -10,6 +10,7 @@ import { storeProfile, clearProfile } from '../../actions/profile.js';
 import CommonLinks from '../panels/common_links.jsx';
 import AttackButton from '../panels/attack_button.jsx';
 import Markdown from '../panels/markdown.jsx';
+import BadgeText from '../panels/badge_text.jsx';
 
 class Profile extends React.Component {
 	constructor(props) {
@@ -103,7 +104,9 @@ class Profile extends React.Component {
 						json.recruits,
 						json.soldiers,
 						json.spies,
-						json.scientists
+						json.scientists,
+						json.activeBadge,
+						json.activeBadgeFilename
 					);
 				}
 				else if (xhr.status === 400) {
@@ -136,7 +139,7 @@ class Profile extends React.Component {
 				<div className='table noCollapse'>
 					<div className='row'>
 						<p className='col'>Username:</p>
-						<p className='col'>{this.props.profile.username}</p>
+						<BadgeText name={this.props.profile.activeBadge} filename={this.props.profile.activeBadgeFilename} size={'small'} className='col'>{this.props.profile.username}</BadgeText>
 
 						<div className='col'></div>
 						<div className='col'></div>
@@ -209,7 +212,7 @@ class Profile extends React.Component {
 				<div className='table noCollapse'>
 					<div className='row'>
 						<p className='col'>Username:</p>
-						<p className='col'>{this.props.profile.username}</p>
+						<BadgeText name={this.props.profile.activeBadge} filename={this.props.profile.activeBadgeFilename} size={'small'} className='col'>{this.props.profile.username}</BadgeText>
 
 						<div className='col' />
 						<div className='col' />
@@ -294,7 +297,7 @@ class Profile extends React.Component {
 				<div className='table noCollapse'>
 					<div className='row'>
 						<p className='col'>Username:</p>
-						<p className='col'>{this.props.profile.username}</p>
+						<BadgeText name={this.props.profile.activeBadge} filename={this.props.profile.activeBadgeFilename} size={'small'} className='col'>{this.props.profile.username}</BadgeText>
 
 						<div className='col' />
 						<div className='col' />
@@ -366,7 +369,7 @@ const mapStoreToProps = (store) => {
 
 const mapDispatchToProps = (dispatch) => {
 	return {
-		storeProfile: (username, gold, recruits, soldiers, spies, scientists) => dispatch(storeProfile(username, gold, recruits, soldiers, spies, scientists)),
+		storeProfile: (username, gold, recruits, soldiers, spies, scientists, activeBadge, activeBadgeFilename) => dispatch(storeProfile(username, gold, recruits, soldiers, spies, scientists, activeBadge, activeBadgeFilename)),
 		clearProfile: () => dispatch(clearProfile())
 	};
 };

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>

src/reducers/profile.js

@@ -6,6 +6,8 @@ import {
 	STORE_SOLDIERS,
 	STORE_SPIES,
 	STORE_SCIENTISTS,
+	STORE_ACTIVE_BADGE,
+	STORE_ACTIVE_BADGE_FILENAME,
 	CLEAR_PROFILE
 } from '../actions/profile.js';
 
@@ -15,7 +17,9 @@ const initialStore = {
 	recruits: 0,
 	soldiers: 0,
 	spies: 0,
-	scientists: 0
+	scientists: 0,
+	activeBadge: '',
+	activeBadgeFilename: ''
 };
 
 export const profileReducer = (store = initialStore, action) => {
@@ -29,6 +33,8 @@ export const profileReducer = (store = initialStore, action) => {
 			newStore.soldiers = action.soldiers;
 			newStore.spies = action.spies;
 			newStore.scientists = action.scientists;
+			newStore.activeBadge = action.activeBadge;
+			newStore.activeBadgeFilename = action.activeBadgeFilename;
 		break;
 
 		case STORE_USERNAME:
@@ -55,6 +61,14 @@ export const profileReducer = (store = initialStore, action) => {
 			newStore.scientists = action.scientists;
 		break;
 
+		case STORE_ACTIVE_BADGE:
+			newStore.activeBadge = action.activeBadge;
+		break;
+
+		case STORE_ACTIVE_BADGE_FILENAME:
+			newStore.activeBadgeFilename = action.activeBadgeFilename;
+		break;
+
 		case CLEAR_PROFILE:
 			newStore = JSON.parse(JSON.stringify(initialStore));
 		break;