#255 Map icons are now fully functional

RaiderIO · Mar 7, 2020 · 9af865c · 9af865c
1 parent c9bf93c
commit 9af865c
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 107 deletions.
diff --git a/app/Models/MapIconType.php b/app/Models/MapIconType.php
@@ -8,6 +8,8 @@
  * @property int $id
  * @property string $name
  * @property string $key
+ * @property integer $width
+ * @property integer $height
  * @property boolean $admin_only
  *
  * @mixin \Eloquent

diff --git a/database/migrations/2020_03_04_224929_create_map_icon_types_table.php b/database/migrations/2020_03_04_224929_create_map_icon_types_table.php
@@ -17,6 +17,8 @@ public function up()
             $table->increments('id');
             $table->string('key');
             $table->string('name');
+            $table->integer('width');
+            $table->integer('height');
             $table->boolean('admin_only');
         });
     }

diff --git a/database/seeds/MapIconTypesSeeder.php b/database/seeds/MapIconTypesSeeder.php
@@ -39,13 +39,17 @@ public function run()
             $mapIconType = new MapIconType();
             $mapIconType->key = $key;
             $mapIconType->name = $mapIcon['name'];
+
+            $imageSize = getimagesize(resource_path(sprintf('/assets/images/mapicon/%s.png', $key)));
+            $mapIconType->width = $imageSize[0];
+            $mapIconType->height = $imageSize[1];
             $mapIconType->admin_only = isset($mapIcon['admin_only']) ? $mapIcon['admin_only'] : 0;
             $mapIconType->save();
         }
     }
 
     private function _rollback()
     {
-        DB::table('map_icons')->truncate();
+        DB::table('map_icon_types')->truncate();
     }
 }
diff --git a/resources/assets/css/map.css b/resources/assets/css/map.css
@@ -682,7 +682,7 @@ html, body, #map, #app, .wrapper {
     border-radius: 15px;
 }
 
-.map_map_comment_tooltip {
+.map_map_icon_comment_tooltip {
     width: 240px;
     white-space: normal;
 }

diff --git a/resources/assets/js/custom/admin/adminmapicon.js b/resources/assets/js/custom/admin/adminmapicon.js
@@ -50,6 +50,7 @@ class AdminMapIcon extends MapIcon {
             data: {
                 id: this.id,
                 floor_id: getState().getCurrentFloor().id,
+                map_icon_type_id: this.map_icon_type_id,
                 comment: this.comment,
                 lat: this.layer.getLatLng().lat,
                 lng: this.layer.getLatLng().lng,

diff --git a/resources/assets/js/custom/mapicon.js b/resources/assets/js/custom/mapicon.js
@@ -4,7 +4,7 @@ $(function () {
             TYPE: 'mapicon'
         },
         options: {
-            icon: LeafletMapIconUnknown
+            icon: LeafletMapIcon
         },
         initialize: function (map, options) {
             // Save the type so super can fire, need to do this as cannot do this.TYPE :(
@@ -14,58 +14,36 @@ $(function () {
     });
 });
 
-function getLeafletMapIconMarker(mapIconType){
-    let generatedMarker = L.Marker.extend({
-        options: {
-            icon: L.divIcon({
-                html: '<div class="' + mapIconType.key + '"><img src="/images/mapicon/' + mapIconType.key + '.png" /></div>',
-                iconSize: [16, 16],
-                className: 'enemy_icon ' + 'map_icon_' + mapIconType.key
-            })
-        }
-    });
-    return new generatedMarker();
+/**
+ * Get the Leaflet Marker that represents said mapIconType
+ * @param mapIconType null|obj When null, default unknown marker type is returned
+ * @returns {*}
+ */
+function getMapIconLeafletIcon(mapIconType) {
+    let icon;
+    if (mapIconType === null) {
+        console.warn('Unable to find mapIconType for null');
+        icon = LeafletMapIcon;
+    } else {
+        icon = L.divIcon({
+            html: '<div class="' + mapIconType.key + '"><img src="/images/mapicon/' + mapIconType.key + '.png" /></div>',
+            iconSize: [mapIconType.width, mapIconType.height],
+            popupAnchor: [0, -(mapIconType.height / 2)],
+            className: 'map_icon_' + mapIconType.key
+        })
+    }
+    return icon;
 }
 
-let LeafletMapIconComment = L.divIcon({
-    html: '<i class="fas fa-comment"></i>',
-    iconSize: [16, 16],
-    className: 'marker_div_icon_font_awesome marker_div_icon_mapcomment'
-});
-
-let LeafletMapIconUnknown = L.divIcon({
+let LeafletMapIcon = L.divIcon({
     html: '<i class="fas fa-question"></i>',
-    iconSize: [16, 16],
-    className: 'marker_div_icon_font_awesome marker_div_icon_mapcomment'
-});
-
-let LeafletMapIconGreaseBot = L.divIcon({
-    html: '<i class="fas fa-comment"></i>',
-    iconSize: [16, 16],
-    className: 'marker_div_icon_font_awesome marker_div_icon_mapcomment'
-});
-
-let LeafletMapIconShockBot = L.divIcon({
-    html: '<i class="fas fa-shock"></i>',
-    iconSize: [16, 16],
-    className: 'marker_div_icon_font_awesome marker_div_icon_mapcomment'
-});
-
-let LeafletMapIconWeldingBot = L.divIcon({
-    html: '<i class="fas fa-plus"></i>',
-    iconSize: [16, 16],
+    iconSize: [32, 32],
     className: 'marker_div_icon_font_awesome marker_div_icon_mapcomment'
 });
 
-let LeafletMapIconCommentMarker = L.Marker.extend({
+let LeafletMapIconMarker = L.Marker.extend({
     options: {
-        icon: LeafletMapIconComment
-    }
-});
-
-let LeafletMapIconUnknownMarker = L.Marker.extend({
-    options: {
-        icon: LeafletMapIconUnknown
+        icon: LeafletMapIcon
     }
 });
 
@@ -75,32 +53,60 @@ class MapIcon extends MapObject {
 
         this.id = 0;
         this.map_icon_type_id = 0;
+        this.map_icon_type = null;
+        this.comment = '';
         this.label = 'MapIcon';
 
         this.setSynced(false);
+        this.register('synced', this, this._synced.bind(this));
+    }
+
+    _synced(event) {
+        console.assert(this instanceof MapIcon, 'this is not a MapIcon', this);
+
+        // Recreate the tooltip
+        this.bindTooltip();
     }
 
     _popupSubmitClicked() {
         console.assert(this instanceof MapIcon, 'this was not a MapIcon', this);
         this.comment = $('#map_map_icon_edit_popup_comment_' + this.id).val();
-        this.map_icon_type_id = $('#map_map_icon_edit_popup_icon_type_id_' + this.id).val();
+        this.map_icon_type_id = parseInt($('#map_map_icon_edit_popup_map_icon_type_id_' + this.id).val());
+        this.setMapIconType(getMapIconType(this.map_icon_type_id));
 
         this.edit();
     }
 
+    setMapIconType(mapIconType) {
+        console.assert(this instanceof MapIcon, 'this is not a MapIcon', this);
+
+        console.log(mapIconType);
+
+        this.map_icon_type = mapIconType;
+        this.layer.setIcon(getMapIconLeafletIcon(mapIconType));
+
+        // Rebuild the visual
+        this.setSynced(true);
+    }
+
     isEditable() {
         console.assert(this instanceof MapIcon, 'this is not a MapIcon', this);
-        return !this.always_visible;
+        // @TODO change this
+        return true; // !this.map_icon_type.admin_only;
     }
 
     bindTooltip() {
         console.assert(this instanceof MapIcon, 'this is not a MapIcon', this);
 
-        this.layer.bindTooltip(
-            jQuery('<div/>', {
-                class: 'map_map_comment_tooltip'
-            }).text(this.comment)[0].outerHTML
-        );
+        this.unbindTooltip();
+
+        if (this.comment.length > 0) {
+            this.layer.bindTooltip(
+                jQuery('<div/>', {
+                    class: 'map_map_icon_comment_tooltip'
+                }).text(this.comment)[0].outerHTML
+            );
+        }
     }
 
     edit() {
@@ -195,15 +201,19 @@ class MapIcon extends MapObject {
                 let template = Handlebars.templates['map_map_icon_edit_popup_template'];
 
                 // Construct the html for each option and insert it into the handlebars template
-                for( let i in MAP_ICON_TYPES ){
-                    if( MAP_ICON_TYPES.hasOwnProperty(i) ){
+                for (let i in MAP_ICON_TYPES) {
+                    if (MAP_ICON_TYPES.hasOwnProperty(i)) {
                         let template = Handlebars.templates['map_map_icon_select_option_template'];
 
                         MAP_ICON_TYPES[i].html = template(MAP_ICON_TYPES[i]);
                     }
                 }
 
-                let data = $.extend({id: self.id, map_icon_type_id: self.map_icon_type_id, mapicontypes: MAP_ICON_TYPES}, getHandlebarsDefaultVariables());
+                let data = $.extend({
+                    id: self.id,
+                    map_icon_type_id: self.map_icon_type_id,
+                    mapicontypes: MAP_ICON_TYPES
+                }, getHandlebarsDefaultVariables());
 
                 self.layer.unbindPopup();
                 self.layer.bindPopup(template(data), {

diff --git a/resources/assets/js/custom/mapobjectgroups/mapiconmapobjectgroup.js b/resources/assets/js/custom/mapobjectgroups/mapiconmapobjectgroup.js
@@ -1,6 +1,22 @@
 // Filled from the _fetchSuccess() function of this class
 let MAP_ICON_TYPES = [];
 
+/**
+ * Get the Map Icon Type for an ID in the MAP_ICON_TYPES array.
+ * @param mapIconTypeId
+ * @returns {null}
+ */
+function getMapIconType(mapIconTypeId) {
+    let mapIconType = null;
+    for (let i = 0; i < MAP_ICON_TYPES.length; i++) {
+        if (MAP_ICON_TYPES[i].id === mapIconTypeId) {
+            mapIconType = MAP_ICON_TYPES[i];
+            break;
+        }
+    }
+    return mapIconType;
+}
+
 class MapIconMapObjectGroup extends MapObjectGroup {
     constructor(manager, name, editable) {
         super(manager, name, editable);
@@ -41,24 +57,10 @@ class MapIconMapObjectGroup extends MapObjectGroup {
         let mapIcon = this.findMapObjectById(remoteMapObject.id);
 
         // Only create a new one if it's new for us
+        let mapIconType = getMapIconType(remoteMapObject.map_icon_type_id);
         if (mapIcon === null) {
-            let mapIconType = null;
-            for(let i = 0; i < MAP_ICON_TYPES.length; i++ ){
-                if( MAP_ICON_TYPES[i].id === remoteMapObject.map_icon_type_id ){
-                    mapIconType = MAP_ICON_TYPES[i];
-                    break;
-                }
-            }
-
             // Find the layer we should display on the map
-            let layer;
-            if( mapIconType === null ) {
-                console.error('Unable to find mapIconType for id = ' + remoteMapObject.map_icon_type_id);
-                layer = new LeafletMapIconUnknownMarker();
-            } else {
-                layer = getLeafletMapIconMarker(mapIconType);
-            }
-
+            let layer = new LeafletMapIconMarker();
             layer.setLatLng(L.latLng(remoteMapObject.lat, remoteMapObject.lng));
 
             mapIcon = this.createNew(layer);
@@ -68,8 +70,9 @@ class MapIconMapObjectGroup extends MapObjectGroup {
         mapIcon.floor_id = remoteMapObject.floor_id;
         mapIcon.map_icon_type_id = remoteMapObject.map_icon_type_id;
         mapIcon.comment = remoteMapObject.comment;
+        mapIcon.setMapIconType(mapIconType);
 
-        // We just downloaded the kill zone, it's synced alright!
+        // We just downloaded the map icon, it's synced alright!
         mapIcon.setSynced(true);
 
         // Show echo notification or not

diff --git a/resources/assets/js/handlebars/map_map_icon_select_option_template.handlebars b/resources/assets/js/handlebars/map_map_icon_select_option_template.handlebars
@@ -1,8 +1,3 @@
-<div class="row no-gutters">
-    <div class="col-3">
-        <img src="/images/mapicon/{{key}}.png"/>
-    </div>
-    <div class="col-9">
-        {{name}}
-    </div>
+<div class="">
+    <img src="/images/mapicon/{{key}}.png"/> {{name}}
 </div>