From 7ef6da93936c66491f07f7231414fcd65ead853d Mon Sep 17 00:00:00 2001 From: miniature-tiger <35037641+miniature-tiger@users.noreply.github.com> Date: Thu, 19 Jul 2018 19:15:30 +0100 Subject: [PATCH] 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 | 6 ++++++ board.js | 25 ++++++++++++++++++++++++- dashboard.js | 17 ++++++++++++++++- main.js | 13 ++++++++++++- movement.js | 2 ++ pirates.js | 2 ++ 6 files changed, 62 insertions(+), 3 deletions(-) diff --git a/board.css b/board.css index 06c37bc..9ef1a74 100644 --- a/board.css +++ b/board.css @@ -24,6 +24,12 @@ z-index: 2; } +#highlightBoard { + position: absolute; + background-color: transparent; + z-index: 2; +} + .moonLayer { position: absolute; background-color: 'transparent'; diff --git a/board.js b/board.js index 29b15c9..b94919e 100644 --- a/board.js +++ b/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 () { diff --git a/dashboard.js b/dashboard.js index a0b5e91..17dabbe 100644 --- a/dashboard.js +++ b/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 } diff --git a/main.js b/main.js index 5114da3..e2ed022 100644 --- a/main.js +++ b/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(); diff --git a/movement.js b/movement.js index e1a2348..9d9030d 100644 --- a/movement.js +++ b/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) diff --git a/pirates.js b/pirates.js index 168de0d..6d0ede6 100644 --- a/pirates.js +++ b/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); } },