Home Explore Help
Register Sign In
thallada
/
transport
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 22 Releases 0 Wiki
Browse Source

Initial commit: webpack building a blank canvas

Tyler Hallada 6 years ago
commit
391182251c
10 changed files with 12980 additions and 0 deletions
Split View Show Diff Stats
  1. 9 0
      .eslintrc.js
  2. 4 0
      .gitignore
  3. 20 0
      LICENSE.txt
  4. 32 0
      README.md
  5. 27 0
      index.html
  6. 12766 0
      package-lock.json
  7. 41 0
      package.json
  8. 20 0
      src/style.css
  9. 10 0
      src/transport.js
  10. 51 0
      webpack.config.js

+ 9 - 0
.eslintrc.js
View File 

@@ -0,0 +1,9 @@
1 
+module.exports = {
2 
+  "extends": "airbnb-base",
3 
+  "plugins": [
4 
+    "import"
5 
+  ],
6 
+  "env": {
7 
+    "browser": true,
8 
+  }
9 
+};

+ 4 - 0
.gitignore
View File 

@@ -0,0 +1,4 @@
1 
+node_modules/
2 
+dist/
3 
+tags
4 
+Session.vim

+ 20 - 0
LICENSE.txt
View File 

@@ -0,0 +1,20 @@
1 
+The MIT License (MIT)
2 
+
3 
+Copyright (c) 2017 Tyler Hallada
4 
+
5 
+Permission is hereby granted, free of charge, to any person obtaining a copy of
6 
+this software and associated documentation files (the "Software"), to deal in
7 
+the Software without restriction, including without limitation the rights to
8 
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 
+the Software, and to permit persons to whom the Software is furnished to do so,
10 
+subject to the following conditions:
11 
+
12 
+The above copyright notice and this permission notice shall be included in all
13 
+copies or substantial portions of the Software.
14 
+
15 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+ 32 - 0
README.md
View File 

@@ -0,0 +1,32 @@
1 
+# Transport
2 
+
3 
+A generative art project in progress.
4 
+
5 
+## Development
6 
+
7 
+Clone the repo and then run:
8 
+
9 
+```
10 
+npm install
11 
+npm start
12 
+```
13 
+
14 
+Then visit `http://localhost:8888` in your browser to view the development
15 
+build. Edit files in `/src` and see the changes reflected in the browser.
16 
+
17 
+## Test
18 
+
19 
+No tests right now. But, to run lint checks:
20 
+
21 
+```
22 
+npm run lint
23 
+```
24 
+
25 
+## Deploy
26 
+
27 
+Run:
28 
+
29 
+```
30 
+npm run build
31 
+npm run deploy
32 
+```

+ 27 - 0
index.html
View File 

@@ -0,0 +1,27 @@
1 
+<html lang="en">
2 
+  <head>
3 
+    <title>Transport</title>
4 
+    <meta charset="utf-8" />
5 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 
+    <!-- open graph tags -->
7 
+    <meta property="og:title" content="Transport" />
8 
+    <!-- <meta property="og:url" content="http://transport.hallada.net/" /> -->
9 
+    <!-- <meta property="og:image" content="http://proximity.hallada.net/img/proximity-300-zoomed.png" /> -->
10 
+    <!-- <meta property="og:image:type" content="image/png" /> -->
11 
+    <!-- <meta property="og:image:width" content="300" /> -->
12 
+    <!-- <meta property="og:image:height" content="300" /> -->
13 
+    <!-- <meta property="og:image:alt" content="Screenshot of the animation in action" /> -->
14 
+    <!-- <meta property="og:description" content="A procedurally generated and interactive animation created with PixiJS" /> -->
15 
+  </head>
16 
+  <body>
17 
+  </body>
18 
+
19 
+  <!-- Google Analytics -->
20 
+  <script>
21 
+    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
22 
+    ga('create', 'UA-39880341-1', 'auto');
23 
+    ga('send', 'pageview');
24 
+  </script>
25 
+  <script async src='https://www.google-analytics.com/analytics.js'></script>
26 
+  <!-- End Google Analytics -->
27 
+</html>

File diff suppressed because it is too large
+ 12766 - 0
package-lock.json


+ 41 - 0
package.json
View File 

@@ -0,0 +1,41 @@
1 
+{
2 
+  "name": "transport",
3 
+  "version": "1.0.0",
4 
+  "description": "",
5 
+  "private": true,
6 
+  "scripts": {
7 
+    "start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --mode development",
8 
+    "build": "NODE_ENV=production ./node_modules/.bin/webpack --mode production",
9 
+    "deploy": "./node_modules/.bin/gh-pages -d dist",
10 
+    "lint": "./node_modules/.bin/eslint src/",
11 
+    "test": "echo \"Error: no test specified\" && exit 1"
12 
+  },
13 
+  "repository": {
14 
+    "type": "git",
15 
+    "url": "git@git.hallada.net:pixi.git"
16 
+  },
17 
+  "author": "Tyler Hallada",
18 
+  "license": "ISC",
19 
+  "devDependencies": {
20 
+    "@babel/core": "^7.0.0-beta.42",
21 
+    "@babel/preset-env": "^7.0.0-beta.42",
22 
+    "babel-loader": "^8.0.0-beta.2",
23 
+    "css-loader": "^0.28.11",
24 
+    "eslint": "^3.17.0",
25 
+    "eslint-config-airbnb-base": "^11.1.1",
26 
+    "eslint-config-standard": "^7.0.0",
27 
+    "eslint-plugin-import": "^2.2.0",
28 
+    "eslint-plugin-promise": "^3.5.0",
29 
+    "eslint-plugin-standard": "^2.1.1",
30 
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
31 
+    "gh-pages": "^1.1.0",
32 
+    "html-webpack-plugin": "^3.1.0",
33 
+    "style-loader": "^0.20.3",
34 
+    "webpack": "^4.4.1",
35 
+    "webpack-cli": "^2.0.13",
36 
+    "webpack-dev-server": "^3.1.1"
37 
+  },
38 
+  "dependencies": {
39 
+    "pixi.js": "^4.7.1"
40 
+  }
41 
+}

+ 20 - 0
src/style.css
View File 

@@ -0,0 +1,20 @@
1 
+* {
2 
+    padding: 0;
3 
+    margin: 0;
4 
+}
5 
+
6 
+html {
7 
+  background-color: #1e1e1e;
8 
+}
9 
+
10 
+html, body, canvas {
11 
+  overflow: none;
12 
+}
13 
+
14 
+canvas {
15 
+  position: fixed !important;
16 
+  left: 0 !important;
17 
+  right: 0 !important;
18 
+  bottom: 0 !important;
19 
+  top: 0 !important;
20 
+}

+ 10 - 0
src/transport.js
View File 

@@ -0,0 +1,10 @@
1 
+import * as PIXI from 'pixi.js';
2 
+import './style.css';
3 
+
4 
+const app = new PIXI.Application(window.innerWidth, window.innerHeight);
5 
+
6 
+document.body.appendChild(app.view);
7 
+
8 
+window.addEventListener('resize', () => {
9 
+  app.renderer.resize(window.innerWidth, window.innerHeight);
10 
+});

+ 51 - 0
webpack.config.js
View File 

@@ -0,0 +1,51 @@
1 
+const path = require('path');
2 
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
3 
+const HtmlWebpackPlugin = require('html-webpack-plugin');
4 
+
5 
+const env = process.env.NODE_ENV;
6 
+
7 
+module.exports = {
8 
+  entry: './src/transport.js',
9 
+  output: {
10 
+    filename: 'transport.js',
11 
+    path: path.resolve(__dirname, 'dist'),
12 
+  },
13 
+  module: {
14 
+    rules: [
15 
+      {
16 
+        test: /\.js$/,
17 
+        exclude: /node_modules/,
18 
+        use: {
19 
+          loader: 'babel-loader',
20 
+          options: {
21 
+            presets: ['@babel/preset-env'],
22 
+          },
23 
+        },
24 
+      },
25 
+      {
26 
+        test: /\.css$/,
27 
+        use: env === 'production'
28 
+          ? ExtractTextPlugin.extract({
29 
+            fallback: 'style-loader',
30 
+            use: ['css-loader'],
31 
+          })
32 
+          : ['style-loader', 'css-loader'],
33 
+      },
34 
+    ],
35 
+  },
36 
+  plugins: [
37 
+    new HtmlWebpackPlugin({
38 
+      template: path.join(__dirname, 'index.html'),
39 
+    }),
40 
+    new ExtractTextPlugin({
41 
+      disable: env === 'development',
42 
+      filename: '[name].css',
43 
+    }),
44 
+  ],
45 
+  devServer: {
46 
+    contentBase: path.join(__dirname, 'dist'),
47 
+    host: '0.0.0.0',
48 
+    port: 8888,
49 
+    disableHostCheck: true,
50 
+  },
51 
+};