Bringing dependencies UTD, slightly improved readme, move port to avo…

…id php-fpm listening on 9000.

README.md

@@ -1,8 +1,15 @@
 # Animation backdrop for glass
-(This art project needs a name.)
+I made this piece of stained glass:
+![Grid window](readme-src/IMG_20170315_211141.jpg)
 
+It is sized to fit a specific computer monitor approximately 24" diagonally, with the intention of running animation onscreen that is sized and shaped to the pieces of glass and the lead lines that make up the window.
+
+An example video:
+[Instagram video](https://www.instagram.com/p/BWbo6g5Dcv_/)
+
+# Installing & running
 Requires [yarn](https://yarnpkg.com/).
 
 * `yarn install` the first time.
 * Build with `yarn run build`. You should do this at least once.
-* Run server with `yarn run start` then load [http://localhost:9000/](http://localhost:9000/) (until I know any better).
+* Run server with `yarn run start` then load [http://localhost:9876/](http://localhost:9876/).

package.json

@@ -5,22 +5,23 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "svg-inline-loader": "^0.7.1",
-    "svg.js": "^2.6.2",
+    "svg-inline-loader": "^0.8.2",
+    "svg.js": "^2.7.1",
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
-    "css-loader": "^0.28.4",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb-base": "^11.2.0",
-    "eslint-import-resolver-webpack": "^0.8.3",
-    "eslint-loader": "^1.9.0",
-    "eslint-plugin-import": "^2.7.0",
-    "file-loader": "^0.11.2",
-    "html-webpack-plugin": "^2.29.0",
-    "style-loader": "^0.18.2",
-    "webpack": "^3.1.0",
-    "webpack-dev-server": "^2.5.1"
+    "css-loader": "^4.2.0",
+    "eslint": "^7.6.0",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-import-resolver-webpack": "^0.12.2",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-import": "^2.22.0",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "style-loader": "^1.2.1",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   },
   "scripts": {
     "build": "webpack",

src/js/index.js

@@ -7,7 +7,6 @@ import 'css/style.css';
 
 const gridSVG = require('images/grid.svg');
 
-
 // This just poops the SVG onto the page.
 function component() {
   const element = document.createElement('div');
@@ -17,9 +16,8 @@ function component() {
 document.body.appendChild(component());
 
 Shapes.initialize();
-// Seq.loop(function() {Seq.wave(Patterns.blueFade, null, Utils.getRandomInt(0,1))});
+Seq.loop(() => { Seq.wave(Patterns.blueFade, null, Utils.getRandomInt(0, 1)); });
 Seq.loop(() => { Seq.wave(Patterns.redFade, null, Utils.getRandomInt(0, 1)); });
 Seq.loop(() => { Seq.wave(Patterns.blueGreyFade, null, Utils.getRandomInt(0, 1), 'troughLong'); });
 // Seq.loop(function() {Seq.all(Patterns.blueFade)});
 // Seq.loop(function() {Seq.rowLine(Patterns.pinktileFade)});
-

src/js/lib/patterns.js

@@ -128,7 +128,6 @@ Patterns.blueFade = (function blueFade() {
   return pattern;
 }());
 
-
 Patterns.blueGreyFade = (function blueGreyFade() {
   // Time to fade from color to black.
   const transitionMS = 1000;

src/js/lib/seq.js

@@ -172,7 +172,6 @@ Seq.wave = function wave(
   lightSegment(backward ? whichWave.length - 1 : 0);
 };
 
-
 Seq.loop = function loop(seq) {
   seq.call();
   const interval = Math.floor(Math.random() * 5000);

src/js/lib/shape.js

@@ -87,4 +87,3 @@ Shape.prototype.setPattern = function setPattern(options) {
 };
 
 export default Shape;
-

webpack.config.js

@@ -17,10 +17,10 @@ module.exports = {
   devServer: {
     contentBase: path.join(__dirname, "dist"),
     compress: true,
-    port: 9000
+    port: 9876
   },
   plugins: [new HtmlWebpackPlugin({
-      title: 'OMG Glass',
+      title: 'Grid glass backdrop',
       filename: '../index.html'
     })],
   module: {