Highlighting user's name in the game ladder

server/accounts.js

@@ -160,7 +160,7 @@ const verifyRequest = (connection) => (req, res) => {
 		}, 3000); //3 second delay on account creation
 
 		//TODO: prettier verification page
-		res.status(200).write(log('Verification succeeded!', req.query.email));
+		res.status(200).write(log('<p>Verification succeeded!</p><p><a href="/">Return Home</a></p>', req.query.email));
 		res.end();
 	});
 };

server/utilities.js

@@ -111,7 +111,7 @@ const isSpying = (connection, user, cb) => {
 
 const getLadderData = (connection, field, start, length, cb) => {
 	//moved here for reusability
-	let query = 'SELECT accounts.id AS id, username, soldiers, recruits, gold FROM accounts JOIN profiles ON accounts.id = profiles.accountId ORDER BY ladderRank ASC LIMIT ?, ?;';
+	let query = 'SELECT accounts.id AS id, username, soldiers, recruits, gold FROM accounts JOIN profiles ON accounts.id = profiles.accountId ORDER BY -ladderRank DESC LIMIT ?, ?;';
 	connection.query(query, [start, length], (err, results) => {
 		cb(err, results);
 	});

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