diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 09a972f..df407fc 100644 --- a/README.md +++ b/README.md @@ -17,8 +17,8 @@ $ npm start ... Starting up http-server, serving ./public Available on: - http://127.0.0.1:4321 - http://10.0.1.11:4321 + http://127.0.0.1:8080 + http://10.0.1.11:8080 ``` -Then open `http://localhost:4321/` in your browser of choice and play away! +Then open `http://localhost:8080/` in your browser of choice and play away! diff --git a/index.html b/index.html new file mode 100644 index 0000000..f82816e --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ + + + + + Bowser Games + + +
+ + + diff --git a/package.json b/package.json index be78d2e..3e59ce7 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "0.0.0", "description": "A collection of games to play in a web browser.", "scripts": { - "start": "http-server ./public -p 4321" + "build": "./node_modules/bin/webpack", + "start": "./node_modules/.bin/webpack-dev-server" }, "repository": { "type": "git", @@ -19,7 +20,25 @@ "url": "https://github.com/GuildCrafts/browser-games/issues" }, "homepage": "https://github.com/GuildCrafts/browser-games#readme", + "devDependencies": { + "babel-cli": "^6.18.0", + "babel-preset-env": "^1.1.4", + "babel-preset-es2015": "^6.22.0", + "babel-preset-react": "^6.22.0", + "babel-register": "^6.18.0", + "react-hot-loader": "^1.3.1", + "react-scripts": "0.8.5", + "url-loader": "^0.5.8", + "webpack": "^1.14.0", + "webpack-dev-server": "^1.16.2" + }, "dependencies": { - "http-server": "^0.9.0" + "http-server": "^0.9.0", + "react": "^15.4.2", + "react-dom": "^15.4.2", + "react-router": "^4.0.0", + "webpack": "^1.14.0", + "webpack-dev-server": "^1.16.2", + "react-history": "*" } } diff --git a/public/index.html b/public/index.html deleted file mode 100644 index 278d291..0000000 --- a/public/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - Browser Games - - -

Browser Games

- -

A collection of games to play in a web browser.

- -
- - - - diff --git a/src/.DS_Store b/src/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/src/.DS_Store differ diff --git a/src/components/.DS_Store b/src/components/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/src/components/.DS_Store differ diff --git a/src/components/App/App.js b/src/components/App/App.js new file mode 100644 index 0000000..22bd8c9 --- /dev/null +++ b/src/components/App/App.js @@ -0,0 +1,18 @@ +import React from 'react'; +import './app.css'; +import Nav from 'components/Nav/Nav'; +import Home from 'components/Home/Home'; +import Footer from 'components/Footer/Footer'; + +export default class App extends React.Component{ + + render(){ + return( +
+
+ ) + } +} diff --git a/public/css/.gitkeep b/src/components/App/app.css similarity index 100% rename from public/css/.gitkeep rename to src/components/App/app.css diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js new file mode 100644 index 0000000..cff508f --- /dev/null +++ b/src/components/Footer/Footer.js @@ -0,0 +1,13 @@ +import React from 'react'; +import './footer.css' + +export default class Footer extends React.Component{ + render(){ + return( +
+

Footer

+
+
+ ) + } +} diff --git a/src/components/Footer/footer.css b/src/components/Footer/footer.css new file mode 100644 index 0000000..1336e3c --- /dev/null +++ b/src/components/Footer/footer.css @@ -0,0 +1,45 @@ +.footer{ + position:relative; + /*background-color:red;*/ +} + +/*.footer_container{ + background-color:green; + margin-top:9px; + padding-top:3.52%; + position:absolute; + width:100%; +}*/ + +.footer_container:after{ + content:''; + border-top: solid 140px transparent; + border-left: solid 100vw yellowgreen; + /*background: repeating-linear-gradient( -45deg, #000 0px, #000 5px, #333 6px, #333 11px, #000 12px);*/ + background-color: rgb(137,216,230); + background-image: linear-gradient(transparent 50%, rgb(173,216,230) 50%); + background-size: 50px 15px; + position: absolute; + margin-top:-131px; +} + +/*.footer_top_section { + position:relative; + background-color:#ddd; + height:200px !important; + width:100% !important; + z-index: 1; +}*/ + +.footer_top_section:after{ + content:''; + border-top: solid 140px transparent; + border-right: solid 100vw orange; + position: absolute; + margin-top:-131px; + /*border-left: solid 50vw transparent;*/ + /*top: 100%; + left: 0; + width: 0; + height: 0;*/ +} diff --git a/src/components/Home/bowser_hero.png b/src/components/Home/bowser_hero.png new file mode 100644 index 0000000..0087e56 Binary files /dev/null and b/src/components/Home/bowser_hero.png differ diff --git a/src/components/Home/home.css b/src/components/Home/home.css new file mode 100644 index 0000000..d6a438b --- /dev/null +++ b/src/components/Home/home.css @@ -0,0 +1,70 @@ +.home_container{ + /*margin-left:25%*/ + height:420px; +} + +.home_bowser_hero{ + margin-top: -55px; + position: absolute; + width: 134%; + height: 190%; + max-width: 500px; + max-height: 500px; + padding-left:30%; + z-index:2; +} + +.home_princess_castle{ + position:absolute; + margin-left:10px; + margin-bottom:5px; + border-radius:5px; + z-index: -10; + margin-top:-30px; +} + +.home_link_container{ + margin-left:5%; + margin-top:7%; + position:absolute; + z-index:2; +} + +.home_links{ + padding:10px; + border:4px solid black; + border-radius:5px; + margin-bottom:10px; + cursor:pointer; + background-color:white; + min-width:90px; + width:35vw; + font-size:20px; +} + +.home_tictactoe_link{ + margin-top:8%; +} + +.home_tictactoe_link:hover{ + border:4px solid skyblue; +} + +.home_simon_link:hover{ + border:4px solid limegreen; +} + +.home_empty_link:hover{ + border:4px solid red; +} + +@media (min-width: 600px) and (max-width:1000px){ + .home_empty_link{ + background-color:gainsboro; + } + .home_bowser_hero{ + padding-left:43%; + width: 570px; + height: 545%; + } +} diff --git a/src/components/Home/home.js b/src/components/Home/home.js new file mode 100644 index 0000000..f92c176 --- /dev/null +++ b/src/components/Home/home.js @@ -0,0 +1,18 @@ +import React from 'react'; +import './home.css'; + +export default class Index extends React.Component{ + + render(){ + return( +
+ +
+
Tic Tac Toe
+
Simon
+
Empty
+
+
+ ) + } +} diff --git a/src/components/Home/princess_castle_background.jpg b/src/components/Home/princess_castle_background.jpg new file mode 100644 index 0000000..f98bdcf Binary files /dev/null and b/src/components/Home/princess_castle_background.jpg differ diff --git a/src/components/Nav/Nav.js b/src/components/Nav/Nav.js new file mode 100644 index 0000000..d0c1e29 --- /dev/null +++ b/src/components/Nav/Nav.js @@ -0,0 +1,29 @@ +import React from 'react'; +import './nav.css'; + +export default class Nav extends React.Component{ + + render(){ + return( +
+

Bowser Games

+
+
+ ) + } +} + + +{/*

Browser Games!

+ +

A collection of games to play in a web browser.

+ +
+ + */} diff --git a/src/components/Nav/nav.css b/src/components/Nav/nav.css new file mode 100644 index 0000000..871685e --- /dev/null +++ b/src/components/Nav/nav.css @@ -0,0 +1,22 @@ +.nav{ + position:relative; + /*z-index:5;*/ +} +.nav_container{ + background-color:#ddd; + margin-top:-16px; + padding-top:6%; +} + +#top_section:after { + content:''; + border-top: solid 51px #ddd; + border-right: solid 100vw transparent; + position:absolute; + margin-top:-30px; +} + +.nav_title{ + font-size:30px; + padding-left:15% +} diff --git a/src/components/index.css b/src/components/index.css new file mode 100644 index 0000000..c61b66a --- /dev/null +++ b/src/components/index.css @@ -0,0 +1,3 @@ +body{ + margin:0; +} diff --git a/public/img/.gitkeep b/src/css/.gitkeep similarity index 100% rename from public/img/.gitkeep rename to src/css/.gitkeep diff --git a/public/js/.gitkeep b/src/img/.gitkeep similarity index 100% rename from public/js/.gitkeep rename to src/img/.gitkeep diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..e9c1ee6 --- /dev/null +++ b/src/index.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from 'react-dom'; +import App from 'components/App/App'; +import './components/index.css'; + +render( + , + document.getElementById('root') +); diff --git a/src/js/.gitkeep b/src/js/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..59d8ec0 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,36 @@ +var webpack = require('webpack'); +var path = require('path'); + +module.exports = { + devtool: 'inline-source-map', + entry: [ + 'webpack-dev-server/client?http://127.0.0.1:8080/', + 'webpack/hot/only-dev-server', + './src' + ], + output: { + path: path.join(__dirname, 'public'), + filename: 'bundle.js' + }, + resolve: { + modulesDirectories: ['node_modules', 'src'], + extensions: ['', '.js'] + }, + module: { + loaders: [ + { + test: /\.jsx?$/, + exclude: /node_modules/, + loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'] + }, + { + test: /\.css$/, + loader: 'style!css' + }, + ] + }, + plugins: [ + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin() + ] +};