Clarified the rules

public/content/rules.md

@@ -0,0 +1 @@
+* No usernames that are outright hurtful, attack any group or individual, or deliberately cross the line.

public/news/2019-06-05-01.md

@@ -2,7 +2,7 @@ Moderation Of Usernames
 ---
 _5 June 2019_
 
-Let's talk about something serious: user [butthole69](/profile?username=butthole69). More importantly, their cheeky (pun intended) username.
+Let's talk about something serious: user \[removed for their privacy\]. More importantly, their cheeky (pun intended) username.
 
 Now, I don't mind this name in particular, although some websites might outright ban him, and other users with similarly creative names.
 
@@ -12,5 +12,5 @@ One of the items on my wishlist is a request from a fan - in game chat. This req
 
 If you feel something breeches these rules, I can most easily be reached via my discord server here: [KR Game Studios](https://discord.gg/FQmz8TN). My username is Ratstail91.
 
-Thanks to butthole69 for bringing this topic to my attention, even if inadvertantly.
+Thanks to \[removed for their privacy\] for bringing this topic to my attention, even if inadvertantly.
 

src/components/app.jsx

@@ -74,6 +74,7 @@ export default class App extends React.Component {
 						<LazyRoute path='/tasklist' component={() => import('./pages/task_list.jsx')} />
 						<LazyRoute path='/patronlist' component={() => import('./pages/patron_list.jsx')} />
 						<LazyRoute path='/news/:postId' component={() => import('./pages/news.jsx')} />
+						<LazyRoute path='/rules' component={() => import('./pages/rules.jsx')} />
 
 						<LazyRoute path='*' component={() => import('./pages/page_not_found.jsx')} />
 					</Switch>

src/components/pages/rules.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+//panels
+import CommonLinks from '../panels/common_links.jsx';
+import Markdown from '../panels/markdown.jsx';
+
+class Rules extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			warning: '', //TODO: unified warning?
+			fetch: null
+		};
+	}
+
+	render() {
+		let warningStyle = {
+			display: this.state.warning.length > 0 ? 'flex' : 'none'
+		};
+
+		return (
+			<div className='page'>
+				<div className='sidePanelPage'>
+					<div className='sidePanel'>
+						<CommonLinks />
+					</div>
+
+					<div className='mainPanel'>
+						<div className='warning' style={warningStyle}>
+							<p>{this.state.warning}</p>
+						</div>
+
+						<Markdown url='/content/rules.md' setWarning={this.setWarning.bind(this)} />
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	setWarning(s) {
+		this.setState({ warning: s });
+	}
+};
+
+export default Rules;

src/components/pages/signup.jsx

@@ -34,7 +34,7 @@ class Signup extends React.Component {
 				<div className='break' />
 				<p className='centered'>Remember to verify your email!</p>
 				<div className='break' />
-				<p className='centered'>See the recent news post on<br /><Link to='/news/2019-06-05-01.md'>Moderation Of Usernames</Link>.</p>
+				<p className='centered'>Check our rules concerning<br /><Link to='/rules'>conduct in this game</Link>.</p>
 			</div>
 		);
 	}

src/components/panels/common_links.jsx

@@ -29,12 +29,13 @@ class CommonLinks extends React.Component {
 			return (
 				<div className='panel'>
 					<p className='mobile centered'><Link to='/profile' onClick={this.props.onClickProfile}>Your Kingdom</Link></p>
-					<p className='mobile centered'><Link to='/equipment' onClick={this.props.onClickCombatLog}>Your Equipment</Link></p>
+					<p className='mobile centered'><Link to='/equipment' onClick={this.props.onClickEquipment}>Your Equipment</Link></p>
 					<p className='mobile centered'><Link to='/ladder' onClick={this.props.onClickLadder}>Attack (Game Ladder)</Link></p>
 					<p className='mobile centered'><Link to='/combatlog' onClick={this.props.onClickCombatLog}>Combat Log</Link></p>
 					<p className='mobile centered'><Link to='/passwordchange' onClick={this.props.onClickPasswordChange}>Change Password</Link></p>
 					<p className='mobile centered'><Link to='/tasklist' onClick={this.props.onClickTaskList}>Task List</Link></p>
-					<p className='mobile centered'><Link to='/patronlist' onClick={this.props.onClickTaskList}>Patron List</Link></p>
+					<p className='mobile centered'><Link to='/patronlist' onClick={this.props.onClickPatronList}>Patron List</Link></p>
+					<p className='mobile centered'><Link to='/rules' onClick={this.props.onClickRules}>Rules</Link></p>
 
 					<Extra />
 
@@ -49,7 +50,8 @@ class CommonLinks extends React.Component {
 					<p className='mobile centered'><Link to='/passwordrecover' onClick={this.props.onClickPasswordRecover}>Recover Password</Link></p>
 					<p className='mobile centered'><Link to='/ladder' onClick={this.props.onClickLadder}>Game Ladder</Link></p>
 					<p className='mobile centered'><Link to='/tasklist' onClick={this.props.onClickTaskList}>Task List</Link></p>
-					<p className='mobile centered'><Link to='/patronlist' onClick={this.props.onClickTaskList}>Patron List</Link></p>
+					<p className='mobile centered'><Link to='/patronlist' onClick={this.props.onClickPatronList}>Patron List</Link></p>
+					<p className='mobile centered'><Link to='/rules' onClick={this.props.onClickRules}>Rules</Link></p>
 
 					<Extra />
 				</div>
@@ -63,12 +65,15 @@ CommonLinks.propTypes = {
 
 	onClickSignup: PropTypes.func,
 	onClickLogin: PropTypes.func,
-	onClickPasswordRecover: PropTypes.func,
-	onClickHome: PropTypes.func,
-	onClickProfile: PropTypes.func,
-	onClickLadder: PropTypes.func,
 	onClickPasswordChange: PropTypes.func,
-	onClickTaskList: PropTypes.func
+	onClickPasswordRecover: PropTypes.func,
+	onClickProfile: PropTypes.func,
+	onClickEquipment: PropTypes.func,
+	onClickLadder: PropTypes.func,
+	onClickCombatLog: PropTypes.func,
+	onClickTaskList: PropTypes.func,
+	onClickPatronList: PropTypes.func,
+	onClickRules: PropTypes.func
 };
 
 function mapStoreToProps(store) {