From ba465dcb173b0111c2157395ac3b0c6566e6dafe Mon Sep 17 00:00:00 2001 From: Kayne Ruse Date: Sat, 8 Dec 2018 08:10:37 +1100 Subject: [PATCH] Initial framework ready --- package.json | 28 ++++++++++++++++++++ public/index.html | 12 +++++++++ src/app.jsx | 53 ++++++++++++++++++++++++++++++++++++++ src/index.jsx | 10 +++++++ src/pages/about.jsx | 17 ++++++++++++ src/pages/card_list.jsx | 17 ++++++++++++ src/pages/concepts.jsx | 17 ++++++++++++ src/pages/landing.jsx | 17 ++++++++++++ src/pages/not_found.jsx | 17 ++++++++++++ src/pages/rules.jsx | 17 ++++++++++++ src/panels/footer.jsx | 17 ++++++++++++ src/panels/link_button.jsx | 39 ++++++++++++++++++++++++++++ src/styles/shared.css | 49 +++++++++++++++++++++++++++++++++++ webpack.config.js | 24 +++++++++++++++++ 14 files changed, 334 insertions(+) create mode 100644 package.json create mode 100644 public/index.html create mode 100644 src/app.jsx create mode 100644 src/index.jsx create mode 100644 src/pages/about.jsx create mode 100644 src/pages/card_list.jsx create mode 100644 src/pages/concepts.jsx create mode 100644 src/pages/landing.jsx create mode 100644 src/pages/not_found.jsx create mode 100644 src/pages/rules.jsx create mode 100644 src/panels/footer.jsx create mode 100644 src/panels/link_button.jsx create mode 100644 src/styles/shared.css create mode 100644 webpack.config.js diff --git a/package.json b/package.json new file mode 100644 index 0000000..0e845b6 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "mecha-website", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "webpack --mode=production", + "webpack": "webpack --mode=development" + }, + "author": "", + "license": "ISC", + "dependencies": {}, + "devDependencies": { + "@babel/core": "^7.2.0", + "@babel/preset-env": "^7.2.0", + "@babel/preset-react": "^7.0.0", + "babel-loader": "^8.0.4", + "css-loader": "^2.0.0", + "prop-types": "^15.6.2", + "react": "^16.6.3", + "react-dom": "^16.6.3", + "react-router-dom": "^4.3.1", + "semantic-ui-react": "^0.83.0", + "style-loader": "^0.23.1", + "webpack": "^4.27.1", + "webpack-cli": "^3.1.2" + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..b7ae1ff --- /dev/null +++ b/public/index.html @@ -0,0 +1,12 @@ + + + + + + + + +
+ + + \ No newline at end of file diff --git a/src/app.jsx b/src/app.jsx new file mode 100644 index 0000000..3a13ca7 --- /dev/null +++ b/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 ( +
+
Mecha: Immense Warfare
+ + + + Rules + Card List + Concepts + About + + + + + + + + + + + +
+
+ ); + } +} + +export default App; \ No newline at end of file diff --git a/src/index.jsx b/src/index.jsx new file mode 100644 index 0000000..f294c9c --- /dev/null +++ b/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( + , + document.querySelector("#root") +); \ No newline at end of file diff --git a/src/pages/about.jsx b/src/pages/about.jsx new file mode 100644 index 0000000..9f5d402 --- /dev/null +++ b/src/pages/about.jsx @@ -0,0 +1,17 @@ +import React from "react"; + +class About extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+

About

+
+ ); + } +} + +export default About; \ No newline at end of file diff --git a/src/pages/card_list.jsx b/src/pages/card_list.jsx new file mode 100644 index 0000000..8f7c45b --- /dev/null +++ b/src/pages/card_list.jsx @@ -0,0 +1,17 @@ +import React from "react"; + +class CardList extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+

CardList

+
+ ); + } +} + +export default CardList; \ No newline at end of file diff --git a/src/pages/concepts.jsx b/src/pages/concepts.jsx new file mode 100644 index 0000000..3e2f55f --- /dev/null +++ b/src/pages/concepts.jsx @@ -0,0 +1,17 @@ +import React from "react"; + +class Concepts extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+

Concepts

+
+ ); + } +} + +export default Concepts; \ No newline at end of file diff --git a/src/pages/landing.jsx b/src/pages/landing.jsx new file mode 100644 index 0000000..92829b7 --- /dev/null +++ b/src/pages/landing.jsx @@ -0,0 +1,17 @@ +import React from "react"; + +class Landing extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+

Landing

+
+ ); + } +} + +export default Landing; \ No newline at end of file diff --git a/src/pages/not_found.jsx b/src/pages/not_found.jsx new file mode 100644 index 0000000..654af1a --- /dev/null +++ b/src/pages/not_found.jsx @@ -0,0 +1,17 @@ +import React from "react"; + +class NotFound extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+

NotFound

+
+ ); + } +} + +export default NotFound; \ No newline at end of file diff --git a/src/pages/rules.jsx b/src/pages/rules.jsx new file mode 100644 index 0000000..1dc4bdd --- /dev/null +++ b/src/pages/rules.jsx @@ -0,0 +1,17 @@ +import React from "react"; + +class Rules extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+

Rules

+
+ ); + } +} + +export default Rules; \ No newline at end of file diff --git a/src/panels/footer.jsx b/src/panels/footer.jsx new file mode 100644 index 0000000..3d85a05 --- /dev/null +++ b/src/panels/footer.jsx @@ -0,0 +1,17 @@ +import React from 'react'; + +class Footer extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( + + ); + }; +} + +export default Footer; \ No newline at end of file diff --git a/src/panels/link_button.jsx b/src/panels/link_button.jsx new file mode 100644 index 0000000..5f073a2 --- /dev/null +++ b/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 ( +