Update webpack, add eslint, lint js files

Time to revisit this thing! Updated to the newest webpack and dev
server, added eslint, and ran linter on all files to clean up code
before beginning the refactor.

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = { 
+  extends: "airbnb-base" 
+};

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "eslint.autoFixOnSave": true
+}

js/Car.js

@@ -1,39 +1,39 @@
-import { Rectangle } from './Rectangle'
-import G from './Globals'
+import { Rectangle } from './Rectangle';
+import G from './Globals';
 
 export function Car(xPos, yPos, w, h, direction, speed) {
   // basics
-  let car = new Rectangle(w, h)
-  car.xPos = xPos
-  car.yPos = yPos
-  car.type = 'car'
+  const car = new Rectangle(w, h);
+  car.xPos = xPos;
+  car.yPos = yPos;
+  car.type = 'car';
 
   // used for moving car on update
-  car.direction = direction
-  car.speed = speed
+  car.direction = direction;
+  car.speed = speed;
 
   // used for collision detecting
-  car.topEdge = car.yPos
-  car.rightEdge = car.xPos + car.w
-  car.bottomEdge = car.yPos + car.h
-  car.leftEdge = car.xPos
+  car.topEdge = car.yPos;
+  car.rightEdge = car.xPos + car.w;
+  car.bottomEdge = car.yPos + car.h;
+  car.leftEdge = car.xPos;
 
   // update for each frame
-  car.update = function(){
-    car.xPos += car.speed * car.direction
-    car.rightEdge = car.xPos + car.w
-    car.leftEdge = car.xPos
-  }
+  car.update = function () {
+    car.xPos += car.speed * car.direction;
+    car.rightEdge = car.xPos + car.w;
+    car.leftEdge = car.xPos;
+  };
 
   // collision detecting, returns true if frog comes into contact
-  car.hitsFrog = function(frog) {
+  car.hitsFrog = function (frog) {
     if (frog.topEdge === car.topEdge) {
       if (frog.rightEdge > car.leftEdge) {
         if (frog.leftEdge < car.rightEdge) {
-          return true
+          return true;
         }
       }
     }
-  }
-  return car
+  };
+  return car;
 }

js/Frog.js

@@ -1,57 +1,57 @@
-import { Rectangle } from './Rectangle'
+import { Rectangle } from './Rectangle';
 
 export function Frog(xPos, yPos, w, h) {
   // basics
-  let frog = new Rectangle(w, h)
-  frog.xPos = Math.floor(xPos)
-  frog.yPos = Math.floor(yPos)
+  const frog = new Rectangle(w, h);
+  frog.xPos = Math.floor(xPos);
+  frog.yPos = Math.floor(yPos);
 
   // used for collision detecting
-  frog.topEdge = frog.yPos
-  frog.rightEdge = frog.xPos + frog.w
-  frog.bottomEdge = frog.yPos + frog.h
-  frog.leftEdge = frog.xPos
+  frog.topEdge = frog.yPos;
+  frog.rightEdge = frog.xPos + frog.w;
+  frog.bottomEdge = frog.yPos + frog.h;
+  frog.leftEdge = frog.xPos;
 
   // moves the frog!
-  frog.move = function(direction){
-    let frogW = Math.floor(frog.w)
-    let frogH = Math.floor(frog.h)
+  frog.move = function (direction) {
+    const frogW = Math.floor(frog.w);
+    const frogH = Math.floor(frog.h);
     if (direction === 'UP') {
-      frog.yPos -= frogH
-      frog.topEdge -= frogH
-      frog.bottomEdge -= frogH
+      frog.yPos -= frogH;
+      frog.topEdge -= frogH;
+      frog.bottomEdge -= frogH;
     }
     if (direction === 'RIGHT') {
-      frog.xPos += frogW
-      frog.rightEdge += frogW
-      frog.leftEdge += frogW
+      frog.xPos += frogW;
+      frog.rightEdge += frogW;
+      frog.leftEdge += frogW;
     }
     if (direction === 'DOWN') {
-      frog.yPos += frogH
-      frog.topEdge += frogH
-      frog.bottomEdge += frogH
+      frog.yPos += frogH;
+      frog.topEdge += frogH;
+      frog.bottomEdge += frogH;
     }
     if (direction === 'LEFT') {
-      frog.xPos -= frogW
-      frog.leftEdge -= frogW
-      frog.rightEdge -= frogW
+      frog.xPos -= frogW;
+      frog.leftEdge -= frogW;
+      frog.rightEdge -= frogW;
     }
-  }
+  };
 
   // update method, for moving frog on key input and when it encounters a car or log
-  frog.update = function(direction, speed) {
+  frog.update = function (direction, speed) {
     console.log('updating?');
     // if direction isn't an integer and if no speed is given, it is user input
     if (!parseInt(direction) && speed === undefined) {
-      frog.move(direction)
+      frog.move(direction);
       console.log(frog.topEdge);
     // if direction IS an integer and there is a speed given, the frog is sitting on a log
     // and should move with the log
     } else {
-      frog.xPos += speed * direction
-      frog.rightEdge = frog.xPos + frog.w
-      frog.leftEdge = frog.xPos
+      frog.xPos += speed * direction;
+      frog.rightEdge = frog.xPos + frog.w;
+      frog.leftEdge = frog.xPos;
     }
-  }
-  return frog
+  };
+  return frog;
 }

js/Globals.js

@@ -18,6 +18,6 @@ module.exports = {
   Frog: undefined,
 
   playerScore: 0,
-  playerLives: 3
+  playerLives: 3,
 
-}
+};

js/Keys.js

@@ -6,13 +6,13 @@ export default {
   DOWN: 40,
   LEFT: 37,
 
-  isDown: function(keyCode) {
+  isDown(keyCode) {
     return this._pressed[keyCode]
   },
-  onKeyDown: function(e) {
+  onKeyDown(e) {
     this._pressed[e.keyCode] = true
   },
-  onKeyUp: function(e) {
+  onKeyUp(e) {
     delete this._pressed[e.keyCode]
-  }
-}
+  },
+};

js/Log.js

@@ -1,38 +1,38 @@
-import { Rectangle } from './Rectangle'
+import { Rectangle } from './Rectangle';
 
 export function Log(xPos, yPos, w, h, direction, speed, name) {
   // basics
-  let log = new Rectangle(w, h)
-  log.xPos = xPos
-  log.yPos = yPos
-  log.name = name
+  const log = new Rectangle(w, h);
+  log.xPos = xPos;
+  log.yPos = yPos;
+  log.name = name;
 
   // used for moving log on update
-  log.direction = direction
-  log.speed = speed
+  log.direction = direction;
+  log.speed = speed;
 
   // used for collision detecting
-  log.topEdge = log.yPos
-  log.rightEdge = log.xPos + log.w
-  log.bottomEdge = log.yPos + log.h
-  log.leftEdge = log.xPos
+  log.topEdge = log.yPos;
+  log.rightEdge = log.xPos + log.w;
+  log.bottomEdge = log.yPos + log.h;
+  log.leftEdge = log.xPos;
 
   // update for each frame
-  log.update = function(){
-    log.xPos += log.speed * log.direction
-    log.rightEdge = log.xPos + log.w
-    log.leftEdge = log.xPos
-  }
+  log.update = function () {
+    log.xPos += log.speed * log.direction;
+    log.rightEdge = log.xPos + log.w;
+    log.leftEdge = log.xPos;
+  };
 
   // collision detecting, returns true if frog comes into contact
-  log.hitsFrog = function(frog){
+  log.hitsFrog = function (frog) {
     if (frog.topEdge === log.topEdge) {
       if (frog.rightEdge > log.leftEdge) {
         if (frog.leftEdge < log.rightEdge) {
-          return true
+          return true;
         }
       }
     }
-  }
-  return log
+  };
+  return log;
 }

js/Random.js

@@ -1,28 +1,28 @@
 module.exports = {
-  direction: function(){
+  direction(){
     // returns 1 or -1, corresponding to right and left
     return Math.floor(Math.random() * 100 + 1)
   },
-  speed: function(maxRowSpeed, minRowSpeed){
+  speed(maxRowSpeed, minRowSpeed){
     // returns random speed between the max and min xpeeds
     return Math.floor(Math.random() * (maxRowSpeed - minRowSpeed) + minRowSpeed)
   },
-  itemCount: function(maxItems, minItems){
+  itemCount(maxItems, minItems){
     // returns random item count to populate rows with items (cars or logs)
     return Math.floor(Math.random() * (maxItems - minItems) + minItems)
   },
-  xPos: function(canvasWidth){
+  xPos(canvasWidth){
     // returns random starting x position so cars/logs are staggered and rows aren't identical
     return Math.floor(Math.random() * (canvasWidth - 0) + 0)
   },
-  itemWidth: function(maxItemWidth, minItemWidth){
+  itemWidth(maxItemWidth, minItemWidth){
     // returns random item width for car/log or spacing between cars/logs
     return Math.floor(Math.random() * (maxItemWidth - minItemWidth) + minItemWidth)
   },
-  itemSpacing: function(minSpacing, maxSpacing, gridUnit) {
+  itemSpacing(minSpacing, maxSpacing, gridUnit) {
     let minUnits =  minSpacing * gridUnit
     let maxUnits = maxSpacing * gridUnit
     // gets random spacing based off of min and max item spacing values, and rounds it down to the nearest 10
     return Math.floor((Math.floor(Math.random() * maxUnits) + minUnits) / 10) * 10
-  }
-}
+  },
+};

js/Rectangle.js

@@ -1,5 +1,5 @@
 export function Rectangle(w, h) {
-  this.name = "rectangle"
-  this.w = w
-  this.h = h
+  this.name = 'rectangle';
+  this.w = w;
+  this.h = h;
 }

js/Row.js

@@ -1,15 +1,15 @@
-import { Rectangle } from './Rectangle'
+import { Rectangle } from './Rectangle';
 
 export function Row(xPos, yPos, w, h, direction, speed) {
-  let row = new Rectangle(w, h)
-  row.xPos = xPos
-  row.yPos = yPos
+  const row = new Rectangle(w, h);
+  row.xPos = xPos;
+  row.yPos = yPos;
   if (direction <= 50) {
-    row.direction = -1
+    row.direction = -1;
   } else {
-    row.direction = 1
+    row.direction = 1;
   }
-  row.speed = speed
-  row.items = []
-  return row
+  row.speed = speed;
+  row.items = [];
+  return row;
 }

js/Sprites.js

@@ -1,28 +1,30 @@
 export default class SpriteSheet {
   constructor(image, width, height) {
-    this.image = image
-    this.width = width
-    this.height = height
-    this.tiles = new Map()
+    this.image = image;
+    this.width = width;
+    this.height = height;
+    this.tiles = new Map();
   }
+
   define(name, x, y) {
-    const buffer = document.creatElement('canvas')
-    buffer.width = this.width
-    buffer.height = this.height
-    buffer.getContext('2d')
-    buffer.drawImage( this.image,
-                      x * this.width,
-                      y * thix.height,
-                      this.width,
-                      this.height,
-                      0,
-                      0,
-                      this.width,
-                      this.height)
-    this.tiles.set(name, buffer)
+    const buffer = document.creatElement('canvas');
+    buffer.width = this.width;
+    buffer.height = this.height;
+    buffer.getContext('2d');
+    buffer.drawImage(this.image,
+      x * this.width,
+      y * thix.height,
+      this.width,
+      this.height,
+      0,
+      0,
+      this.width,
+      this.height);
+    this.tiles.set(name, buffer);
   }
+
   draw(name, context, x, y) {
-    const buffer = this.tiles.get(name)
-    context.drawImage(buffer, x, y)
+    const buffer = this.tiles.get(name);
+    context.drawImage(buffer, x, y);
   }
 }