Initial commit: webpack building a blank canvas
This commit is contained in:
commit
391182251c
9
.eslintrc.js
Normal file
9
.eslintrc.js
Normal file
@ -0,0 +1,9 @@
|
||||
module.exports = {
|
||||
"extends": "airbnb-base",
|
||||
"plugins": [
|
||||
"import"
|
||||
],
|
||||
"env": {
|
||||
"browser": true,
|
||||
}
|
||||
};
|
||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
node_modules/
|
||||
dist/
|
||||
tags
|
||||
Session.vim
|
||||
20
LICENSE.txt
Normal file
20
LICENSE.txt
Normal file
@ -0,0 +1,20 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2017 Tyler Hallada
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
32
README.md
Normal file
32
README.md
Normal file
@ -0,0 +1,32 @@
|
||||
# Transport
|
||||
|
||||
A generative art project in progress.
|
||||
|
||||
## Development
|
||||
|
||||
Clone the repo and then run:
|
||||
|
||||
```
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
Then visit `http://localhost:8888` in your browser to view the development
|
||||
build. Edit files in `/src` and see the changes reflected in the browser.
|
||||
|
||||
## Test
|
||||
|
||||
No tests right now. But, to run lint checks:
|
||||
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
## Deploy
|
||||
|
||||
Run:
|
||||
|
||||
```
|
||||
npm run build
|
||||
npm run deploy
|
||||
```
|
||||
27
index.html
Normal file
27
index.html
Normal file
@ -0,0 +1,27 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Transport</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- open graph tags -->
|
||||
<meta property="og:title" content="Transport" />
|
||||
<!-- <meta property="og:url" content="http://transport.hallada.net/" /> -->
|
||||
<!-- <meta property="og:image" content="http://proximity.hallada.net/img/proximity-300-zoomed.png" /> -->
|
||||
<!-- <meta property="og:image:type" content="image/png" /> -->
|
||||
<!-- <meta property="og:image:width" content="300" /> -->
|
||||
<!-- <meta property="og:image:height" content="300" /> -->
|
||||
<!-- <meta property="og:image:alt" content="Screenshot of the animation in action" /> -->
|
||||
<!-- <meta property="og:description" content="A procedurally generated and interactive animation created with PixiJS" /> -->
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
||||
<!-- Google Analytics -->
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-39880341-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
<!-- End Google Analytics -->
|
||||
</html>
|
||||
12766
package-lock.json
generated
Normal file
12766
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
41
package.json
Normal file
41
package.json
Normal file
@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "transport",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "NODE_ENV=development ./node_modules/.bin/webpack-dev-server --mode development",
|
||||
"build": "NODE_ENV=production ./node_modules/.bin/webpack --mode production",
|
||||
"deploy": "./node_modules/.bin/gh-pages -d dist",
|
||||
"lint": "./node_modules/.bin/eslint src/",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@git.hallada.net:pixi.git"
|
||||
},
|
||||
"author": "Tyler Hallada",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.0.0-beta.42",
|
||||
"@babel/preset-env": "^7.0.0-beta.42",
|
||||
"babel-loader": "^8.0.0-beta.2",
|
||||
"css-loader": "^0.28.11",
|
||||
"eslint": "^3.17.0",
|
||||
"eslint-config-airbnb-base": "^11.1.1",
|
||||
"eslint-config-standard": "^7.0.0",
|
||||
"eslint-plugin-import": "^2.2.0",
|
||||
"eslint-plugin-promise": "^3.5.0",
|
||||
"eslint-plugin-standard": "^2.1.1",
|
||||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
||||
"gh-pages": "^1.1.0",
|
||||
"html-webpack-plugin": "^3.1.0",
|
||||
"style-loader": "^0.20.3",
|
||||
"webpack": "^4.4.1",
|
||||
"webpack-cli": "^2.0.13",
|
||||
"webpack-dev-server": "^3.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"pixi.js": "^4.7.1"
|
||||
}
|
||||
}
|
||||
20
src/style.css
Normal file
20
src/style.css
Normal file
@ -0,0 +1,20 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
html, body, canvas {
|
||||
overflow: none;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: fixed !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
10
src/transport.js
Normal file
10
src/transport.js
Normal file
@ -0,0 +1,10 @@
|
||||
import * as PIXI from 'pixi.js';
|
||||
import './style.css';
|
||||
|
||||
const app = new PIXI.Application(window.innerWidth, window.innerHeight);
|
||||
|
||||
document.body.appendChild(app.view);
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
app.renderer.resize(window.innerWidth, window.innerHeight);
|
||||
});
|
||||
51
webpack.config.js
Normal file
51
webpack.config.js
Normal file
@ -0,0 +1,51 @@
|
||||
const path = require('path');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
const env = process.env.NODE_ENV;
|
||||
|
||||
module.exports = {
|
||||
entry: './src/transport.js',
|
||||
output: {
|
||||
filename: 'transport.js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['@babel/preset-env'],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: env === 'production'
|
||||
? ExtractTextPlugin.extract({
|
||||
fallback: 'style-loader',
|
||||
use: ['css-loader'],
|
||||
})
|
||||
: ['style-loader', 'css-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, 'index.html'),
|
||||
}),
|
||||
new ExtractTextPlugin({
|
||||
disable: env === 'development',
|
||||
filename: '[name].css',
|
||||
}),
|
||||
],
|
||||
devServer: {
|
||||
contentBase: path.join(__dirname, 'dist'),
|
||||
host: '0.0.0.0',
|
||||
port: 8888,
|
||||
disableHostCheck: true,
|
||||
},
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user