Working on the card tables

src/app.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { BrowserRouter, Switch, Route } from "react-router-dom";
+import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
 import { Header, Container } from "semantic-ui-react";
 
 //include styles
@@ -25,10 +25,10 @@ class App extends React.Component {
 	render() {
 		return (
 			<div className="central">
-				<Header as="h1" textAlign="center">Mecha: Immense Warfare</Header>
 				<BrowserRouter>
 					<Container className="panel">
-						<LinkButton.Group widths="5">
+						<Link to="/"><Header as="h1" textAlign="center">Mecha: Immense Warfare</Header></Link>
+						<LinkButton.Group widths="4">
 							<LinkButton to="/rules">Rules</LinkButton>
 							<LinkButton to="/cardlist">Card List</LinkButton>
 							<LinkButton to="/concepts">Concepts</LinkButton>

src/pages/about.jsx

@@ -1,14 +1,35 @@
 import React from "react";
+import ReactMarkdown from "react-markdown";
 
 class About extends React.Component {
 	constructor(props) {
 		super(props);
+
+		this.state = {
+			body: "Loading..."
+		};
+	}
+
+	componentDidMount() {
+		fetch("/content/about.md")
+			.then(result => result.text())
+			.then((result) => {
+				this.setState({
+					body: result
+				});
+			},
+			//handle errors here instead of a catch block because internet said so
+			(error) => {
+				this.setState({
+					body: error
+				});
+			});
 	}
 
 	render() {
 		return (
 			<div>
-				<p>About</p>
+				<ReactMarkdown source={this.state.body} escapeHtml={false} />
 			</div>
 		);
 	}

src/pages/card_list.jsx

@@ -1,14 +1,57 @@
 import React from "react";
+import { Table } from "semantic-ui-react";
+import Papa from "papaparse";
 
 class CardList extends React.Component {
 	constructor(props) {
 		super(props);
+
+		this.state = {
+			body: "loading..."
+		};
+	}
+
+	componentDidMount() {
+		fetch("/content/card_list.csv")
+			.then(result => result.text())
+			.then(result => Papa.parse(result, { delimiter: ";" }).data)
+			.then(result => {
+				let headers = result[0];
+				let content = result.slice(1);
+
+				return this.generateTableJSX(headers, content);
+			})
+			.then(result => this.setState({ body: result }))
+	}
+
+	generateTableJSX(headers, content) {
+		headers = headers.map((h, i) => <Table.HeaderCell key={i}>{h}</Table.HeaderCell>);
+
+		content = content.map((r, i) => {
+			r = r.map((c, j) => {
+				return <Table.Cell key={j}>{c}</Table.Cell>;
+			})
+			return <tr key={i}>{r}</tr>;
+		});
+
+		return (
+			<Table unstackable>
+				<Table.Header>
+					<Table.Row>
+						{headers}
+					</Table.Row>
+				</Table.Header>
+				<Table.Body>
+					{content}
+				</Table.Body>
+			</Table>
+		);
 	}
 
 	render() {
 		return (
 			<div>
-				<p>CardList</p>
+				{this.state.body}
 			</div>
 		);
 	}

src/pages/rules.jsx

@@ -1,14 +1,35 @@
 import React from "react";
+import ReactMarkdown from "react-markdown";
 
 class Rules extends React.Component {
 	constructor(props) {
 		super(props);
+
+		this.state = {
+			body: "Loading..."
+		};
+	}
+
+	componentDidMount() {
+		fetch("/content/rules.md")
+			.then(result => result.text())
+			.then((result) => {
+				this.setState({
+					body: result
+				});
+			},
+			//handle errors here instead of a catch block because internet said so
+			(error) => {
+				this.setState({
+					body: error
+				});
+			});
 	}
 
 	render() {
 		return (
 			<div>
-				<p>Rules</p>
+				<ReactMarkdown source={this.state.body} escapeHtml={false} />
 			</div>
 		);
 	}

src/styles/shared.css

@@ -6,7 +6,7 @@
 }
 
 body {
-	font: 13pt Helvetica, Arial;
+	font: 11pt Helvetica, Arial;
 	width: 100vw;
 	height: 100vh;
 	display: flex;