Added markdown anchor support

2018-12-11 23:33:54 +11:00
parent 171fef13a2
commit 92a9736983
6 changed files with 25 additions and 5 deletions
@@ -5,7 +5,7 @@ Basic Rules

 The goal of the game is to attack your opponent directly five times. Each time a player is attacked directly, they place the top card of their deck face up in a separate pile called the **damage zone**. Once there are five cards in a player's damage zone, that player loses the game.

-The game takes place on a 5 by 7 grid (wider than it is long) called the **battlefield**. Players start the game with a face down **deck** of at least 40 cards, with no more than 3 copies of any one card, except for **Basics** (no limit) and **Singletons** (maximum of 1). Players draw 5 cards, decide to **mulligan** or not (see [Mulligans](#Mulligans)), then take turns by placing certain cards on the closest row of the battlefield, known as their **entry zone**. If there are no empty spaces in a player's entry zone, excluding movable **units** that player owns, then the player cannot play a new card and loses the game. A player also loses the game if they try to draw a card from their deck while it is empty.
+The game takes place on a 5 by 7 grid (wider than it is long) called the **battlefield**. Players start the game with a face down **deck** of at least 40 cards, with no more than 3 copies of any one card, except for **Basics** (no limit) and **Singletons** (maximum of 1). Players draw 5 cards, decide to **mulligan** or not (see [Mulligans](#mulligans)), then take turns by placing certain cards on the closest row of the battlefield, known as their **entry zone**. If there are no empty spaces in a player's entry zone, excluding movable **units** that player owns, then the player cannot play a new card and loses the game. A player also loses the game if they try to draw a card from their deck while it is empty.

 Each unit you control may **move and/or attack** once per turn. A unit cannot move or attack in the same turn it was played, unless it has **haste**. If a unit moves, it must attack immediately, or forfit the attack for the turn. Units cannot move after attacking.

@@ -11,6 +11,6 @@
 	</head>
 	<body>
 		<div id = "root"></div>
-		<script src="/app.bundle.js?v=4"></script>
+		<script src="/app.bundle.js?v=7"></script>
 	</body>
 </html>
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
+import MarkdownRenderers from "../utilities/markdown_renderers.js";

 class About extends React.Component {
 	constructor(props) {
@@ -29,7 +30,7 @@ class About extends React.Component {
 	render() {
 		return (
 			<div>
-				<ReactMarkdown source={this.state.body} />
+				<ReactMarkdown source={this.state.body} renderers={MarkdownRenderers} />
 			</div>
 		);
 	}
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
+import MarkdownRenderers from "../utilities/markdown_renderers.js";

 class Landing extends React.Component {
 	constructor(props) {
@@ -29,7 +30,7 @@ class Landing extends React.Component {
 	render() {
 		return (
 			<div>
-				<ReactMarkdown source={this.state.body} />
+				<ReactMarkdown source={this.state.body} renderers={MarkdownRenderers} />
 			</div>
 		);
 	}
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
+import MarkdownRenderers from "../utilities/markdown_renderers.js";

 class Rules extends React.Component {
 	constructor(props) {
@@ -29,7 +30,7 @@ class Rules extends React.Component {
 	render() {
 		return (
 			<div>
-				<ReactMarkdown source={this.state.body} />
+				<ReactMarkdown source={this.state.body} renderers={MarkdownRenderers} />
 			</div>
 		);
 	}
@@ -0,0 +1,17 @@
+import React from "react";
+
+//https://github.com/rexxars/react-markdown/issues/69
+function headingRenderer(props) {
+	function flatten(text, child) {
+		return typeof child === 'string' ? text + child : React.Children.toArray(child.props.children).reduce(flatten, text);
+	}
+
+	let children = React.Children.toArray(props.children);
+	let text = children.reduce(flatten, '');
+	let slug = text.toLowerCase().replace(/\W/g, '-');
+	return React.createElement('h' + props.level, {id: slug}, props.children);
+}
+
+export default {
+	heading: headingRenderer
+};