Initial framework ready

src/app.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { BrowserRouter, Switch, Route } from "react-router-dom";
+import { Header, Container } from "semantic-ui-react";
+
+//include styles
+import "./styles/shared.css";
+
+//include other pages
+import Landing from "./pages/landing.jsx";
+import Rules from "./pages/rules.jsx";
+import CardList from "./pages/card_list.jsx";
+import Concepts from "./pages/concepts.jsx";
+import About from "./pages/about.jsx";
+import NotFound from "./pages/not_found.jsx";
+
+//include panels
+import LinkButton from "./panels/link_button.jsx";
+import Footer from "./panels/footer.jsx";
+
+class App extends React.Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<div className="central">
+				<Header as="h1" textAlign="center">Mecha: Immense Warfare</Header>
+				<BrowserRouter>
+					<Container className="panel">
+						<LinkButton.Group widths="5">
+							<LinkButton to="/rules">Rules</LinkButton>
+							<LinkButton to="/cardlist">Card List</LinkButton>
+							<LinkButton to="/concepts">Concepts</LinkButton>
+							<LinkButton to="/about">About</LinkButton>
+						</LinkButton.Group>
+						<Switch>
+							<Route exact path="/" component={ Landing } />
+							<Route exact path="/rules" component={ Rules } />
+							<Route exact path="/cardlist" component={ CardList } />
+							<Route exact path="/concepts" component={ Concepts } />
+							<Route exact path="/about" component={ About } />
+							<Route path="*" component={ NotFound } />
+						</Switch>
+					</Container>
+				</BrowserRouter>
+				<Footer />
+			</div>
+		);
+	}
+}
+
+export default App;

src/index.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./app.jsx";
+
+//simple no-persistence static website
+ReactDOM.render(
+	<App />,
+	document.querySelector("#root")
+);

src/pages/about.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+class About extends React.Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<div>
+				<p>About</p>
+			</div>
+		);
+	}
+}
+
+export default About;

src/pages/card_list.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+class CardList extends React.Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<div>
+				<p>CardList</p>
+			</div>
+		);
+	}
+}
+
+export default CardList;

src/pages/concepts.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+class Concepts extends React.Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<div>
+				<p>Concepts</p>
+			</div>
+		);
+	}
+}
+
+export default Concepts;

src/pages/landing.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+class Landing extends React.Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<div>
+				<p>Landing</p>
+			</div>
+		);
+	}
+}
+
+export default Landing;

src/pages/not_found.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+class NotFound extends React.Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<div>
+				<p>NotFound</p>
+			</div>
+		);
+	}
+}
+
+export default NotFound;

src/pages/rules.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+class Rules extends React.Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<div>
+				<p>Rules</p>
+			</div>
+		);
+	}
+}
+
+export default Rules;

src/panels/footer.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+class Footer extends React.Component {
+	constructor(props) {
+		super(props);
+	}
+
+	render() {
+		return (
+			<footer>
+				<p>Copyright <a href="http://krgamestudios.com">KR Game Studios</a> 2016-2018</p>
+			</footer>
+		);
+	};
+}
+
+export default Footer;

src/panels/link_button.jsx

@@ -0,0 +1,39 @@
+//SOURCE: https://stackoverflow.com/questions/42463263/wrapping-a-react-router-link-in-an-html-button
+//NOTE: this is a bonkers trick.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
+import { Button } from "semantic-ui-react";
+
+const LinkButton = (props) => {
+	const {
+		history,
+		location,
+		match,
+		staticContext,
+		to,
+		onClick,
+		// ⬆ filtering out props that `button` doesn’t know what to do with.
+		...rest
+	} = props;
+
+	return (
+		<Button
+			{...rest} // `children` is just another prop!
+			onClick={(event) => {
+				onClick && onClick(event)
+				history.push(to)
+			}}
+		/>
+	)
+}
+
+LinkButton.Group = Button.Group;
+
+LinkButton.propTypes = {
+	to: PropTypes.string.isRequired,
+	children: PropTypes.node.isRequired
+};
+
+export default withRouter(LinkButton);

src/styles/shared.css

@@ -0,0 +1,49 @@
+/* global defaults */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	font: 13pt Helvetica, Arial;
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+/* footer */
+footer {
+	flex: 0 1 auto;
+	justify-self: flex-end;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+/* central display */
+.central {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	padding: 0 10px;
+	min-height: 100vh;
+}
+
+@media screen and (min-width: 480px) {
+	.central {
+		margin: 0 15%;
+	}
+}
+
+/* panels */
+.panel {
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+}