Highlighting user's name in the game ladder

src/components/pages/ladder.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import queryString from 'query-string';
 
 import CommonLinks from '../panels/common_links.jsx';
@@ -43,6 +44,7 @@ class Ladder extends React.Component {
 						<PagedLadder
 							start={this.state.start}
 							length={this.state.length}
+							highlightedName={this.props.username}
 							getFetch={this.getFetch.bind(this)}
 							onReceived={this.onReceived.bind(this)}
 						/>
@@ -102,4 +104,18 @@ class Ladder extends React.Component {
 	}
 };
 
+const mapStoreToProps = (store) => {
+	return {
+		username: store.account.username
+	};
+};
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		//
+	};
+};
+
+Ladder = connect(mapStoreToProps, mapDispatchToProps)(Ladder);
+
 export default Ladder;

src/components/panels/paged_ladder.jsx

@@ -26,7 +26,7 @@ class PagedLadder extends React.Component {
 					<p className='col centered'>Recruits</p>
 					<p className='col centered'>Gold</p>
 				</div>
-				{Object.keys(this.state).map((key) =><div key={key}>
+				{Object.keys(this.state).map((key) =><div key={key} className={`${this.props.highlightedName === this.state[key].username ? ' highlight' : ''}`}>
 					<hr />
 					<div className='break' />
 
@@ -78,6 +78,7 @@ class PagedLadder extends React.Component {
 PagedLadder.propTypes = {
 	start: PropTypes.number,
 	length: PropTypes.number,
+	highlightedName: PropTypes.string,
 	setWarning: PropTypes.func,
 	getFetch: PropTypes.func,
 	onReceived: PropTypes.func