Having some fun

public/styles/shared.css

@@ -332,4 +332,17 @@ pre {
 
 .alwaysCentered {
 	text-align: center !important;
-}
+}
+
+.rainbowText {
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	background-image: -webkit-gradient(linear,  left top,  left bottom,
+		color-stop(0.00, red),
+		color-stop(16%, orange),
+		color-stop(32%, yellow),
+		color-stop(48%, green),
+		color-stop(60%, blue),
+		color-stop(76%, indigo),
+		color-stop(1.00, violet));
+  }

src/components/panels/paged_ladder.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { withRouter, Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
+import ProgressiveRainbowText from './progressive_rainbow_text.jsx';
+
 class PagedLadder extends React.Component {
 	constructor(props) {
 		super(props);
@@ -27,7 +29,11 @@ class PagedLadder extends React.Component {
 					<hr />
 					<div className='break' />
 					<div className={'row'}>
-						<p className={'col centered truncate'}><Link to={`/profile?username=${this.state[key].username}`}>{this.state[key].username}</Link></p>
+						{
+							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>
+						}
 						<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/components/panels/progressive_rainbow_text.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+class ProgressiveRainbowText extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			colors: props.colors || ['red', 'orange', 'yellow', 'green', 'blue', 'violet', 'indigo'],
+			counter: 0,
+			unsubscribeKey: setInterval(() => this.setState({ counter: this.state.counter + 1}), 1000)
+		}
+	}
+
+	componentWillUnmount() {
+		clearInterval(this.state.unsubscribeKey);
+	}
+
+	render() {
+		return (
+			<p {...this.props}>
+				{Object.keys(this.props.children).map((key) => <span key={key} style={{ color: this.state.colors[(key + this.state.counter) % this.state.colors.length] }}>{this.props.children[key]}</span>)}
+			</p>
+		);
+	}
+};
+
+export default ProgressiveRainbowText;