Initial framework ready
This commit is contained in:
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
+53
@@ -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;
|
||||
@@ -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")
|
||||
);
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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);
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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"]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user