Highlighting pieces

Pieces are hard to find once the map gets busy. With this commit, when a player hovers over the pieces on the stock dashboard (left sidebar) all the pieces of that type are highlighted on the board by a white background.

board.js
* New method (highlightTiles) was added to draw white background octagons behind pieces. The existing drawTiles method is called with an additional localPiece argument. This second method loops through the gameBoard array and draws a white octagon whenever the localPiece type is found.
* New method clearHighlightTiles clears the new board layer (and thus the highlighting) once the player mouses off the left sidebar. 

dashboard.js
* New method hoverPieceOn checks which icon is being hovered over on the left sidebar (using mouseover combined with id of target) and calls highlightTiles with the piece type. 

main.js,  movement.js, pirates.js
* New board layer is added in main.js
* New event listeners are added and removed within game logic.

board.css
* Adds CSS info for the new board layer.

board.css

@@ -24,6 +24,12 @@
     z-index: 2;
 }
 
+#highlightBoard {
+    position: absolute;
+    background-color: transparent;
+    z-index: 2;
+}
+
 .moonLayer {
     position: absolute;
     background-color: 'transparent';

board.js

@@ -1342,7 +1342,7 @@ let gameBoard = {
     // Method for looping through tiles and drawing
     // --------------------------------------------
 
-    drawTiles: function(octagonType, boardLayer, ocatagonGap, octagonWidth, octagonColour, octagonBackground) {
+    drawTiles: function(octagonType, boardLayer, ocatagonGap, octagonWidth, octagonColour, octagonBackground, localPiece) {
         // Start path for each array of octagons
         boardLayer.beginPath();
         for (var i = 0; i < row; i++) {
@@ -1363,6 +1363,10 @@ let gameBoard = {
                 } else if (octagonType=='pirateHarbour' && this.boardArray[i][j].subTerrain == 'pirateHarbour') {
                     // Draws safe harbours - on a separate canvas overlay
                     this.drawOctagon(boardLayer, ocatagonGap);
+                } else if (octagonType=='highlight' && this.boardArray[i][j].pieces.type == localPiece) {
+                    // Draws safe harbours - on a separate canvas overlay
+                    console.log('drawing ' + localPiece);
+                    this.drawOctagon(boardLayer, ocatagonGap);
 
                 } else if (octagonType=='land' && this.boardArray[i][j].terrain == 'land') {
                     // Islands
@@ -1394,6 +1398,25 @@ let gameBoard = {
         this.drawHarbours();
     },
 
+    // Method to draw to on canvas overlay layer for piece highlighting
+    // ----------------------------------------------------------------
+    highlightTiles: function (localPiece) {
+        if(workFlow == 1) {console.log('Highlight tiles: ' + (Date.now() - launchTime)); }
+        // Clears the canvas for redraw
+        canvasHighlight.clearRect(0, 0, canvasHighlight.canvas.width, canvasHighlight.canvas.height);
+
+        // drawTiles is used to colour tiles (in white) on highlight layer
+        gameBoard.drawTiles('highlight', canvasHighlight, 4*screenReduction, 2*screenReduction, 'white', 'white', localPiece);
+    },
+
+    // Method to clear canvas overlay layer after piece highlighting
+    // -----------------------------------------------------------
+    clearHighlightTiles: function () {
+        if(workFlow == 1) {console.log('Clear highlighted tiles: ' + (Date.now() - launchTime)); }
+        // Clears the canvas
+        canvasHighlight.clearRect(0, 0, canvasHighlight.canvas.width, canvasHighlight.canvas.height);
+    },
+
     // Method to add safe harbours to the map
     // --------------------------------------
     drawHarbours: function () {

dashboard.js

@@ -234,7 +234,7 @@ let stockDashboard = {
 
     // Method to add new goods each turn
     // ---------------------------------
-    newTurnGoods : function() {
+    newTurnGoods: function() {
         for (var i = 0; i < gameBoard.boardArray.length; i++) {
             for (var j = 0; j < gameBoard.boardArray[i].length; j++) {
                 if(gameBoard.boardArray[i][j].pieces.team == gameManagement.turn) {
@@ -248,5 +248,20 @@ let stockDashboard = {
         }
     },
 
+    // Method to highlight pieces on board
+    // -----------------------------------
+    hoverPieceOn: function(e) {
+        let chosenPiece = '';
+        // Determines piece type of icon on sidebar based on id
+        if(e.target.id != '') {
+            for (var i = 0; i < stockDashboard.pieceTypes.length; i+=1) {
+                if(e.target.id == 'dash_' + stockDashboard.pieceTypes[i].type) {
+                    chosenPiece = e.target.id.substring(5, e.target.id.length);
+                    gameBoard.highlightTiles(chosenPiece);
+                }
+            }
+        }
+    },
+
 // LAST BRACKET OF OBJECT
 }

main.js

@@ -97,6 +97,10 @@ boardMarkNode.appendChild(board);
 let [activeBoard, canvasActive] = gameBoard.createCanvasLayer('activeBoard');
 boardMarkNode.appendChild(activeBoard);
 
+// Canvas 'activeBoard' (for active tiles that can be moved to) is created and size is set dynamically
+let [highlightBoard, canvasHighlight] = gameBoard.createCanvasLayer('highlightBoard');
+boardMarkNode.appendChild(highlightBoard);
+
 // SVG layer for compass set up (same height and width as board)
 let compassLayer = gameBoard.createNewLayer('compass');
 boardMarkNode.appendChild(compassLayer);
@@ -255,7 +259,7 @@ endTurn.addEventListener('click', gameManagement.nextTurn);
 
 
 // Set up of building event listener
-// ------------------------------
+// ---------------------------------
 
 // building slider set up
 let building = document.querySelector('.building');
@@ -270,7 +274,12 @@ thirdBuildLine.style.left = '7%';
 // Event listener added to stock dashboard
 stockDashboardNode.addEventListener('click', buildItem.clickStock);
 
+// Set up of stock dashboard event listener
+// ----------------------------------------
 
+// Hover event listener added to stock dashboard
+stockDashboardNode.addEventListener('mouseover', stockDashboard.hoverPieceOn);
+stockDashboardNode.addEventListener('mouseleave', gameBoard.clearHighlightTiles);
 
 
 // ------------------------------------------------------------------------------------
@@ -596,6 +605,8 @@ function boardHandler(event) {
                     endTurn.removeEventListener('click', gameManagement.nextTurn);
                     boardMarkNode.removeEventListener('click', boardHandler);
                     stockDashboardNode.removeEventListener('click', buildItem.clickStock);
+                    stockDashboardNode.removeEventListener('mouseover', stockDashboard.hoverPieceOn);
+                    stockDashboardNode.removeEventListener('mouseleave', gameBoard.clearHighlightTiles);
                     pieceMovement.deactivateTiles(maxMove);
                     // Redraw active tile layer after deactivation to remove activated tiles
                     gameBoard.drawActiveTiles();

movement.js

@@ -414,6 +414,8 @@ let pieceMovement = {
             endTurn.addEventListener('click', gameManagement.nextTurn);
             boardMarkNode.addEventListener('click', boardHandler);
             stockDashboardNode.addEventListener('click', buildItem.clickStock);
+            stockDashboardNode.addEventListener('mouseover', stockDashboard.hoverPieceOn);
+            stockDashboardNode.addEventListener('mouseleave', gameBoard.clearHighlightTiles);
         } else if (gameManagement.turn == 'Pirate') {
 
             // Resetting movement array once second click has been made (if move valid)

pirates.js

@@ -146,6 +146,8 @@ let pirates = {
             endTurn.addEventListener('click', gameManagement.nextTurn);
             boardMarkNode.addEventListener('click', boardHandler);
             stockDashboardNode.addEventListener('click', buildItem.clickStock);
+            stockDashboardNode.addEventListener('mouseover', stockDashboard.hoverPieceOn);
+            stockDashboardNode.addEventListener('mouseleave', gameBoard.clearHighlightTiles);
         }
 
     },