Implemented Capture The Flag

src/components/panels/badge_text.jsx

@@ -21,10 +21,16 @@ class BadgeText extends React.Component {
 
 		let style = this.props.centered ? centerStyle : leftStyle;
 
+		//Capture The Flag forces your name to be yellow
+		let colorOverride = {};
+		if (this.props.name === 'Capture The Flag') {
+			colorOverride.color = 'yellow';
+		}
+
 		return (
 			<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.style}}>{this.props.children}</p>
+				<p className='truncate' style={{paddingBottom: 0, ...this.props.style, ...colorOverride}}>{this.props.children}</p>
 			</div>
 		);
 	}

src/components/panels/combat_log_record.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { withRouter, Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
+import BadgeText from './badge_text.jsx';
+
 class CombatLogRecord extends React.Component {
 	constructor(props) {
 		super(props);
@@ -12,6 +14,10 @@ class CombatLogRecord extends React.Component {
 	}
 
 	render() {
+		//NOTE: the badgeText was never meant to be used this way
+		let badgeFilename = this.props.flagCaptured ? 'capture_the_flag.png' : undefined;
+		let badgeName = this.props.flagCaptured ? 'Capture The Flag' : undefined;
+
 		return (
 			<div className='panel table noCollapse'>
 				<hr />
@@ -23,7 +29,7 @@ class CombatLogRecord extends React.Component {
 				</div>
 
 				<div className='row'>
-					<p className='col truncate'><span className='mobile hide'>Victor: </span>{this.capitalizeFirstLetter(this.props.victor)} {this.props.undefended ? '(undefended)' : ''}</p>
+					<BadgeText name={badgeName} filename={badgeFilename} size='small' className='col truncate'><span className='mobile hide'>Victor: </span>{this.capitalizeFirstLetter(this.props.victor)} {this.props.undefended ? '(undefended)' : ''}</BadgeText>
 					<p className='col truncate'>Gold: {this.props.spoilsGold}</p>
 					<p className='col truncate'>Atk. Deaths: {this.props.attackerCasualties}</p>
 				</div>