Change tile border color for clickable objects (#3)

src/game/app/client/shared/AssetPaths.js

@@ -10,7 +10,8 @@ AssetPaths = Object.freeze({
 
     // Tiles
     "tile_default": "../client/assets/tiles/tile.png",
-    "tile_selected": "../client/assets/tiles/tile_selected.png",
+    "tile_selected_default": "../client/assets/tiles/tile_selected_default.png",
+    "tile_selected_clickable": "../client/assets/tiles/tile_selected_clickable.png",
 
     // Walls
     "leftwall_default": "../client/assets/walls/wall1.png",

src/game/app/client/views/js/GameObjectView.js

@@ -47,6 +47,19 @@ class GameObjectView extends AbstractView {
         return this.objectImage;
     }
 
+    /**
+     * Updates game object image if passed image is not the same as current one
+     * 
+     * @param {Image} newObjectImage 
+     */
+    updateObjectImage(newObjectImage) {
+        TypeChecker.isInstanceOf(newObjectImage, Image);
+
+        if (this.objectImage !== newObjectImage) {
+            this.objectImage = newObjectImage;
+        }
+    }
+
     /**
      * Gets grid position
      * 

src/game/app/client/views/js/GameView.js

@@ -157,16 +157,9 @@ class GameView {
 
                 this.currentMapView.updateSelectedTile(selectedTileCords);
 
-                if (this.currentMapView.findClickableTileOrObject(selectedTileCords, false))
+                if (this.currentMapView.findClickableTileOrObjectOrNPC(selectedTileCords, false))
                     return canvas.style.cursor = 'pointer';
 
-                for (let i = 0, len = this.npcAvatarViews.length; i < len; i++)
-                {
-                    let npcView = this.npcAvatarViews[i];
-                    if (npcView.getGridPosition().getCordX() === selectedTileCords.x && npcView.getGridPosition().getCordY() === selectedTileCords.y - Settings.MAP_BLANK_TILES_LENGTH)
-                        return canvas.style.cursor = 'pointer';
-                }
-
                 for (let i = 0, len = this.anotherParticipantAvatarViews.length; i < len; i++)
                 {
                     let ppantView = this.anotherParticipantAvatarViews[i];
@@ -236,8 +229,8 @@ class GameView {
         //check if clicked tile is a valid walkable tile
         if (this.currentMapView.isCursorOnPlayGround(selectedTileCords.x, selectedTileCords.y)) {
 
-            //first check if click is on door or clickable object in room (not existing at this point)
-            this.currentMapView.findClickableTileOrObject(selectedTileCords, true);
+            //first, check if click is on door, clickable object or NPC in room
+            this.currentMapView.findClickableTileOrObjectOrNPC(selectedTileCords, true);
 
             //then, check if there is an avatar at this position
             this.getAnotherParticipantAvatarViews().forEach(ppantView => {
@@ -246,14 +239,6 @@ class GameView {
                     ppantView.onClick();
                 }
             });
-
-            //then, check if there is an NPC at this position
-            this.npcAvatarViews.forEach(npcView => {
-                if (npcView.getGridPosition().getCordX() === selectedTileCords.x
-                    && npcView.getGridPosition().getCordY() === selectedTileCords.y - Settings.MAP_BLANK_TILES_WIDTH) {
-                    npcView.onClick();
-                }
-            });
         }//check if clicked tile is outside the walkable area
         else if (this.currentMapView.isCursorOutsidePlayGround(selectedTileCords.x, selectedTileCords.y)) {
             this.currentMapView.findClickableElementOutsideMap(newPosition, true);
@@ -472,13 +457,12 @@ class GameView {
         if(this.currentMapView !== undefined)
             this.currentMapView.setVisibility(false);
 
-        this.currentMapView = new MapView(assetPaths, map, objectMap, this.eventManager);
-
         this.npcAvatarViews = [];
         listOfNPCs.forEach(npc => {
             this.npcAvatarViews.push(new NPCAvatarView(npc.getId(), npc.getName(), npc.getPosition(), npc.getDirection(), npc.getShirtColor(), this.gameEngine, this.eventManager));
         });
 
+        this.currentMapView = new MapView(assetPaths, map, objectMap, this.npcAvatarViews, this.eventManager);
         this.statusBar.updateLocation(roomName);
     }
 

src/game/app/client/views/js/MapView.js

@@ -7,13 +7,16 @@
 class MapView extends AbstractView {
     map;
     objectMap;
+    npcMap;
     clickableTiles;
     clickableObjects;
     tiles;
     gameObjects;
     xNumTiles;
     yNumTiles;
     tileIndicator;
+    tileSelectedDefaultImage;
+    tileSelectedClickableImage;
 
     gameObjectViewFactory;
     gameEngine;
@@ -27,13 +30,14 @@ class MapView extends AbstractView {
      * @param {Object[]} assetPaths asset paths
      * @param {number[][]} map map array
      * @param {number[][]} objectMap object map array
+     * @param {NPCAvatarView[]} npcAvatarViews list of NPC views
      * @param {IsometricEngine} gameEngine game engine
      * @param {eventManager} eventManager event manager
      */
-    constructor(assetPaths, map, objectMap, eventManager) {
+    constructor(assetPaths, map, objectMap, npcAvatarViews, eventManager) {
         super();
 
-        this.initProperties(assetPaths, map, objectMap, eventManager);
+        this.initProperties(assetPaths, map, objectMap, npcAvatarViews, eventManager);
     }
 
     /**
@@ -106,20 +110,34 @@ class MapView extends AbstractView {
      * @param {Object[]} assetPaths asset paths
      * @param {number[][]} map map array
      * @param {number[][]} objectMap object map array
+     * @param {NPCAvatarView[]} npcAvatarViews list of NPC views
      * @param {eventManager} eventManager event manager
      */
-    initProperties = async (assetPaths, map, objectMap, eventManager) => {
-        assetPaths.tileselected_default = "../client/assets/tiles/tile_selected.png";
+    initProperties = async (assetPaths, map, objectMap, npcAvatarViews, eventManager) => {
         this.gameEngine = new IsometricEngine();
 
         super.setVisibility(true);
         this.gameEngine.initGameEngine(ctx_map.canvas.width, ctx_map.canvas.height, map.length, map[0].length);
         var assetImages = await this.gameEngine.loadImages(assetPaths);
+        this.tileSelectedDefaultImage = assetImages["tile_selected_default"];
+        this.tileSelectedClickableImage = assetImages["tile_selected_clickable"];
         if(!super.isVisible())
             return;
 
         this.map = map;
         this.objectMap = objectMap;
+
+        this.npcMap = new Array(map.length);
+        for (let i = 0; i < this.npcMap.length; i++) {
+            this.npcMap[i] = new Array(map[0].length).fill(null);
+        }
+
+        npcAvatarViews.forEach(nav => {
+            let xPos = nav.getGridPosition().getCordX();
+            let yPos = nav.getGridPosition().getCordY() + Settings.MAP_BLANK_TILES_WIDTH;
+            this.npcMap[xPos][yPos] = nav;
+        });
+
         this.xNumTiles = map.length;
         this.yNumTiles = map[0].length;
 
@@ -145,7 +163,7 @@ class MapView extends AbstractView {
      */
     buildMap = function() {
 
-        this.tileIndicator = this.gameObjectViewFactory.createGameObjectView(GameObjectType.SELECTED_TILE, new PositionClient(0, 2), "tileselected_default", false, false);
+        this.tileIndicator = this.gameObjectViewFactory.createGameObjectView(GameObjectType.SELECTED_TILE, new PositionClient(0, 2), "tile_selected_default", false, false);
 
         var mapObject;
         var gameObject
@@ -225,7 +243,7 @@ class MapView extends AbstractView {
     }
 
     /**
-     * Checks if tile or object is clickable at the selected position.
+     * Checks if tile or object or NPC is clickable at the selected position.
      * In case a click was performed, finds the tile/object in the list of clickable tiles/objects
      * and calls it's onclick function.
      * 
@@ -234,9 +252,10 @@ class MapView extends AbstractView {
      * 
      * @return {boolean} true if the selected tile or object is clickable, false otherwise
      */
-    findClickableTileOrObject(selectedTileCords, isClicked) {
+    findClickableTileOrObjectOrNPC(selectedTileCords, isClicked) {
         let tile = this.map[selectedTileCords.x][selectedTileCords.y];
         let object = this.objectMap[selectedTileCords.x][selectedTileCords.y];
+        let npc = this.npcMap[selectedTileCords.x][selectedTileCords.y];
 
         if (tile instanceof Array)
         {
@@ -277,6 +296,12 @@ class MapView extends AbstractView {
                 this.findObjectAndClick(object);
             return true;
         }
+        else if (npc !== null) {
+            if (isClicked)
+                npc.onClick();
+            return true;
+        }
+
         return false;
     }
 
@@ -413,8 +438,13 @@ class MapView extends AbstractView {
 
         let position = new PositionClient(screenXY.x, screenXY.y);
 
-        if (this.tileIndicator !== undefined)
+        if (this.tileIndicator !== undefined) {
             this.tileIndicator.updateScreenPos(position);
+
+            // Check if selected tile is clickable and adjusts the image of selected tile border accordingly
+            const newObjectImage = this.findClickableTileOrObjectOrNPC(selectedTileCords, false) ? this.tileSelectedClickableImage : this.tileSelectedDefaultImage;
+            this.tileIndicator.updateObjectImage(newObjectImage);
+        }
     }
 
     /**