Fix linter errors

.eslintrc.json

@@ -111,7 +111,7 @@
     ],
     "array-bracket-spacing": [
       2,
-      "always"
+      "never"
     ],
     "indent": [
       2,

assets/brunch-config.js

@@ -4,25 +4,25 @@ exports.config = {
     javascripts: {
       joinTo: {
         "js/app.js": /^js/,
-        "js/vendor.js": /^(?!js)/
+        "js/vendor.js": /^(?!js)/,
-      }
+      },
     },
     stylesheets: {
       joinTo: "css/app.css",
       order: {
-        after: ["web/static/css/app.css"] // concat app.css last
+        after: ["web/static/css/app.css"], // concat app.css last
-      }
+      },
     },
     templates: {
-      joinTo: "js/app.js"
+      joinTo: "js/app.js",
-    }
+    },
   },
 
   conventions: {
     // This option sets where we should place non-css and non-js assets in.
     // By default, we set this to "/assets/static". Files in this directory
     // will be copied to `paths.public`, which is "priv/static" by default.
-    assets: /^(static)/
+    assets: /^(static)/,
   },
 
   // Phoenix paths configuration
@@ -31,40 +31,40 @@ exports.config = {
     watched: ["static", "css", "js", "vendor"],
 
     // Where to compile files to
-    public: "../priv/static"
+    public: "../priv/static",
   },
 
   // Configure your plugins
   plugins: {
     sass: {
-      mode: 'native'
+      mode: "native",
     },
     babel: {
       plugins: [
-        'transform-object-rest-spread',
+        "transform-object-rest-spread",
-        'transform-class-properties',
+        "transform-class-properties",
       ],
       presets: [
         [
-          'env', {
+          "env", {
-            'browsers': [ '> 5% in US' ],
+            "browsers": ["> 5% in US"],
-            'useBuiltIns': true,
+            "useBuiltIns": true,
           },
         ],
-        'es2015',
+        "es2015",
-        'react',
+        "react",
       ],
-      ignore: [ /vendor/ ],
+      ignore: [/vendor/],
     },
   },
 
   modules: {
     autoRequire: {
-      "js/app.js": ["js/app"]
+      "js/app.js": ["js/app"],
-    }
+    },
   },
 
   npm: {
-    enabled: true
+    enabled: true,
-  }
+  },
 };

assets/js/app.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import "babel-polyfill";
-import "phoenix_html"
+import "phoenix_html";
 
 import React from "react";
 import ReactDOM from "react-dom";

assets/js/components/chess-board-square.js

@@ -15,20 +15,18 @@ class ChessBoardSquare extends React.Component {
   }
 
   selectSquare() {
-    var { piece, store } = this.props;
+    let { piece, store } = this.props;
-    var { gameId, selectedSquare, player } = store.getState();
+    let { gameId, selectedSquare, player } = store.getState();
 
     if (selectedSquare != null && this.moveIsValid()) {
       $.ajax({
         method: "PATCH",
         url: "/api/games/" + gameId,
-        data: { move: { from: selectedSquare, to: this.squareCoords() } }
+        data: { move: { from: selectedSquare, to: this.squareCoords() } },
       }).then((data) => store.dispatch(setGame(data)));
-    }
+    } else if (selectedSquare != null) {
-    else if (selectedSquare != null) {
       store.dispatch(selectPiece(null));
-    }
+    } else if (this.playerCanSelectPiece(player, piece)) {
-    else if (this.playerCanSelectPiece(player, piece)) {
       store.dispatch(selectPiece(this.squareCoords()));
     }
   }
@@ -38,8 +36,8 @@ class ChessBoardSquare extends React.Component {
   }
 
   playerCanSelectPiece(player, piece) {
-    var { store } = this.props;
+    let { store } = this.props;
-    var { turn } = store.getState();
+    let { turn } = store.getState();
 
     return piece !== undefined &&
       piece.colour == player &&
@@ -47,12 +45,11 @@ class ChessBoardSquare extends React.Component {
   }
 
   isSelectedSquare() {
-    var { store } = this.props;
+    let { store } = this.props;
 
     if (store.getState().selectedSquare == null) {
       return false;
-    }
+    } else {
-    else {
       return _.isEqual(this.squareCoords(), store.getState().selectedSquare);
     }
   }
@@ -64,8 +61,7 @@ class ChessBoardSquare extends React.Component {
   squareClass() {
     if (this.props.piece == undefined) {
       return "board-square";
-    }
+    } else {
-    else {
       return classNames(
         "board-square",
         this.props.piece.type,
@@ -80,7 +76,7 @@ class ChessBoardSquare extends React.Component {
       id={this.squareId()}
       className={this.squareClass()}
       onClick={this.selectSquare.bind(this)}
-    />
+    />;
   }
 }
 

assets/js/components/chess-board.js

@@ -17,14 +17,16 @@ class ChessBoard extends React.Component {
     store.dispatch(setGameId(gameId));
 
     $.ajax({ method: "GET", url: `/api/games/${gameId}` })
-      .then((data) => {
+      .then(data => {
         store.dispatch(setPlayer(data.player));
         store.dispatch(setGame(data));
       });
 
     this.channel = socket.channel("game:" + gameId, {});
     this.channel.join()
-      .receive("error", resp => { console.log("Unable to join", resp); });
+      .receive("error", resp => {
+        console.log("Unable to join", resp);
+      });
 
     this.channel.on("game_update", data => {
       store.dispatch(setGame(data));
@@ -50,7 +52,7 @@ class ChessBoard extends React.Component {
     const { store } = this.props;
     const rank = this.getBoard()[rankId];
 
-    return _.map(this.files(rank), (fileId) => {
+    return _.map(this.files(rank), fileId => {
       return (
         <ChessBoardSquare
           file={fileId}
@@ -66,7 +68,7 @@ class ChessBoard extends React.Component {
   renderRanks() {
     const board = this.getBoard();
 
-    return _.map(this.ranks(), (rankId) => {
+    return _.map(this.ranks(), rankId => {
       return (
         <div className="board-rank" key={rankId}>
           {this.renderFiles(rankId)}
@@ -79,10 +81,12 @@ class ChessBoard extends React.Component {
     const player = this.getPlayer();
 
     switch (player) {
-      case 'white':
+      case "white":
         return Object.keys(rank).sort();
-      case 'black':
+      case "black":
-        return Object.keys(rank).sort().reverse();
+        return Object.keys(rank)
+          .sort()
+          .reverse();
     }
   }
 
@@ -91,9 +95,9 @@ class ChessBoard extends React.Component {
     const player = this.getPlayer();
 
     switch (player) {
-      case 'white':
+      case "white":
         return Object.keys(board).reverse();
-      case 'black':
+      case "black":
         return Object.keys(board);
     }
   }
@@ -102,26 +106,22 @@ class ChessBoard extends React.Component {
     const turn = this.getTurn();
     const player = this.getPlayer();
 
-    return classNames(
+    return classNames("board", turn + "-to-move", "player-is-" + player);
-      "board",
-      turn + "-to-move",
-      "player-is-" + player
-    );
   }
 
   render() {
     return (
       <div className={this.boardClass()}>
         <div className="board-header">
-          <div className="board-border-top"></div>
+          <div className="board-border-top" />
         </div>
         <div className="board-body">
-          <div className="board-border-left"></div>
+          <div className="board-border-left" />
           <div className="board-ranks">{this.renderRanks()}</div>
-          <div className="board-border-right"></div>
+          <div className="board-border-right" />
         </div>
         <div className="board-footer">
-          <div className="board-border-bottom"></div>
+          <div className="board-border-bottom" />
         </div>
       </div>
     );
@@ -131,8 +131,8 @@ class ChessBoard extends React.Component {
 function mapStateToProps(state) {
   return {
     board: state.board,
-    selectedSquare: state.selectedSquare
+    selectedSquare: state.selectedSquare,
-  }
+  };
 }
 
 export default connect(mapStateToProps)(ChessBoard);

assets/js/reducers/chess-board.js

@@ -29,6 +29,6 @@ const chessBoardReducer = (state = defaultState, action) => {
     default:
       return state;
   }
-}
+};
 
 export default chessBoardReducer;

assets/js/store/actions.js

@@ -6,7 +6,7 @@ const SELECT_PIECE = "SELECT_PIECE";
 export const setPlayer = (player) => {
   return {
     type: SET_PLAYER,
-    player: player,
+    player,
   };
 };
 
@@ -21,13 +21,13 @@ export const setGame = (data) => {
 export const setGameId = (gameId) => {
   return {
     type: SET_GAME_ID,
-    gameId: gameId,
+    gameId,
   };
 };
 
 export const selectPiece = (coords) => {
   return {
     type: SELECT_PIECE,
-    coords: coords,
+    coords,
   };
 };

assets/js/store/default-state.js

@@ -13,7 +13,7 @@ const defaultState = {
     3: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
     2: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
     1: { a: null, b: null, c: null, d: null, e: null, f: null, g: null, h: null },
-  }
+  },
 };
 
 export default defaultState;