Draw ship shape while placing one

web/static/css/modules/_game.styl

@@ -120,8 +120,10 @@
       padding: $small-spacing
 
       .grid.pointer
-        .cell:not(.header):hover
+        .cell.cell.ship-shape
           background: $light-green
+        .cell.ship-shape-invalid
+          background: $light-red
 
       header
         text-align: center

web/static/js/components/game/board.js

@@ -34,7 +34,8 @@ export default class Board extends React.Component {
         key={key}
         onClick={::this._handleCellClick(y, x, value)}
         onDoubleClick={(e) => e.preventDefault()}
-        onMouseOver={::this._handleCellMouseOver(y, x)}>{::this._cellValue(value)}</div>
+        onMouseOver={::this._handleCellMouseOver(y, x)}
+        onMouseOut={::this._handleCellMouseOut(y, x)}>{::this._cellValue(value)}</div>
     );
   }
 

web/static/js/components/game/my_board.js

@@ -28,12 +28,29 @@ export default class MyBoard extends Board {
   }
 
   _handleCellMouseOver(y, x) {
+    return this._toggleCellClasses(y, x);
+  }
+
+  _handleCellMouseOut(y, x) {
+    return this._toggleCellClasses(y, x);
+  }
+
+  _toggleCellClasses(y, x) {
     const { selectedShip } = this.props;
 
     if (selectedShip.size === 0) return false;
 
-    return (e) => {
+    const { size, orientation } = selectedShip;
 
+    const className = this._outOfBounds(y, x, orientation, size) ? 'ship-shape-invalid' : 'ship-shape';
+
+    return (e) => {
+      for (var i = 0; i < size; i++) {
+        const coords = orientation === 'horizontal' ? `${y}${x + i}` : `${y + i}${x}`;
+        let cell = document.getElementById(coords);
+        if (!cell) break;
+        cell.classList.toggle(className);
+      }
     };
   }
 
@@ -62,4 +79,12 @@ export default class MyBoard extends Board {
   _cellId(ref) {
     return ref;
   }
+
+  _outOfBounds(y, x, orientation, size) {
+    if (orientation === 'horizontal') {
+      return (x + size) > 10;
+    } else {
+      return (y + size) > 10;
+    }
+  }
 }

web/static/js/components/game/opponent_board.js

@@ -51,4 +51,8 @@ export default class OpponentBoard extends Board {
   _cellId(ref) {
     return false;
   }
+
+  _handleCellMouseOut(e) {
+    return false;
+  }
 }