Ratstail91/mechaimmensewarfare.com
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Initial framework ready

Browse Source
This commit is contained in:
Kayne Ruse
2018-12-08 08:10:37 +11:00
parent e014056ad4
commit ba465dcb17
14 changed files with 334 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+28
View File
@@ -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"
}
}
public/index.html
+12
View File
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.0/dist/semantic.min.css"></link>
</head>
<body>
<div id = "root"></div>
<script src="/app.bundle.js"></script>
</body>
</html>
src/app.jsx
+53
View File
@@ -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
+10
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+17
View File
@@ -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
+39
View File
@@ -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
+49
View File
@@ -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;
}
webpack.config.js
+24
View File
@@ -0,0 +1,24 @@
module.exports = {
entry: "./src/index.jsx",
output: {
path: __dirname + "/public",
filename: "app.bundle.js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
},
{
test: /\.css$/,
exclude: /node_modules/,
loader: ["style-loader", "css-loader"]
}
]
}
};