diff --git a/app/Models/MapIconType.php b/app/Models/MapIconType.php index d549856fe..bdfa9482e 100644 --- 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 index d7282b0a4..d5202e7cf 100644 --- 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 index a1553513b..2c3f2acf6 100644 --- a/database/seeds/MapIconTypesSeeder.php +++ b/database/seeds/MapIconTypesSeeder.php @@ -39,6 +39,10 @@ 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(); } @@ -46,6 +50,6 @@ public function run() 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 index 39ffd19a3..1912bc51f 100644 --- 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 index 3992855c9..4d63ed01f 100644 --- 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 index 25e279ac4..f8a8627b2 100644 --- 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: '
', - 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: '
', + iconSize: [mapIconType.width, mapIconType.height], + popupAnchor: [0, -(mapIconType.height / 2)], + className: 'map_icon_' + mapIconType.key + }) + } + return icon; } -let LeafletMapIconComment = L.divIcon({ - html: '', - iconSize: [16, 16], - className: 'marker_div_icon_font_awesome marker_div_icon_mapcomment' -}); - -let LeafletMapIconUnknown = L.divIcon({ +let LeafletMapIcon = L.divIcon({ html: '', - iconSize: [16, 16], - className: 'marker_div_icon_font_awesome marker_div_icon_mapcomment' -}); - -let LeafletMapIconGreaseBot = L.divIcon({ - html: '', - iconSize: [16, 16], - className: 'marker_div_icon_font_awesome marker_div_icon_mapcomment' -}); - -let LeafletMapIconShockBot = L.divIcon({ - html: '', - iconSize: [16, 16], - className: 'marker_div_icon_font_awesome marker_div_icon_mapcomment' -}); - -let LeafletMapIconWeldingBot = L.divIcon({ - html: '', - 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('
', { - class: 'map_map_comment_tooltip' - }).text(this.comment)[0].outerHTML - ); + this.unbindTooltip(); + + if (this.comment.length > 0) { + this.layer.bindTooltip( + jQuery('
', { + 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 index 15d83fde4..38f61738f 100644 --- 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 index b1c052c36..6585fd4b0 100644 --- 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 @@ -
-
- -
-
- {{name}} -
+
+ {{name}}
\ No newline at end of file diff --git a/resources/views/misc/credits.blade.php b/resources/views/misc/credits.blade.php index d0ba0efd7..cea6504a6 100644 --- a/resources/views/misc/credits.blade.php +++ b/resources/views/misc/credits.blade.php @@ -24,101 +24,105 @@ {{ link_to('http://darkwolves.eu/', 'Dark Wolves') }} and Sark for helping me with mapping dungeons, from odd requests to "kill that mob" to "hold up for a second you - guys are going to fast" :). + guys are going too fast" :).

{{ __('Libraries') }}

-

General

+

  • {{ link_to('https://datatables.net/', 'Datatables') }}
  • {{ link_to('https://getbootstrap.com/', 'Bootstrap 4') }}
+

Map technology

+

  • {{ link_to('https://leafletjs.com', 'Leaflet') }}
    • -
  • {{ link_to('http://leaflet.github.io/Leaflet.draw/', 'Leaflet Draw') }}
    • +
  • {{ link_to('https://leaflet.github.io/Leaflet.draw/', 'Leaflet Draw') }}
  • {{ link_to('https://github.com/aratcliffe/Leaflet.contextmenu', 'Leaflet Context Menu') }}
  • {{ link_to('https://github.com/bbecquet/Leaflet.PolylineDecorator', 'Leaflet Polyline Decorator') }}
  • {{ link_to('https://github.com/maxogden/geojson-js-utils', 'Geojson Utils') }}
+

Server-side

+

  • {{ link_to('https://laravel.com/', 'Laravel') }}

{{ __('Images') }}

-

Alliance & Horde icons

+

{{ link_to('https://www.deviantart.com/atriace/art/Alliance-Horde-Faction-Logos-193328658', 'atriace on DeviantArt') }}

-

Crossed swords icon

+

{{ link_to('https://thenounproject.com/term/crossed-swords/152699/', 'The Noun Project') }}

-

Image upscaling

- {{ link_to('http://a-sharper-scaling.com/', 'Steffen Garlach - A Sharper Scaling') }} +

+ {{ link_to('https://topazlabs.com/gigapixel-ai/', 'Topaz Gigapixel AI') }}

-

In-game icon pack

+

{{ link_to('https://barrens.chat/viewtopic.php?f=5&t=63&p=1726#p1726', 'barrens.chat') }}

-

Radio icons

+

{{ link_to('https://loading.io/spinner/radio') }}

-

Enemy type icons

+

  • Aberration: - https://www.iconfinder.com/icons/3759345/events_eyes_halloween_horror_october_witches_zombie_icon + {{ link_to('https://www.iconfinder.com/icons/3759345/events_eyes_halloween_horror_october_witches_zombie_icon') }}
  • - Beast: https://www.iconfinder.com/icons/1604346/animal_footprint_paw_pet_print_track_icon + Beast: {{ link_to('https://www.iconfinder.com/icons/1604346/animal_footprint_paw_pet_print_track_icon') }}
  • - Critter: https://www.iconfinder.com/icons/586373/easter_easter_bunny_easter_hare_easter_rabbit_rabbit_icon + Critter: {{ link_to('https://www.iconfinder.com/icons/586373/easter_easter_bunny_easter_hare_easter_rabbit_rabbit_icon') }}
  • - Demon: https://www.iconfinder.com/icons/725403/alchemy_antichrist_halloween_hell_pentagram_wicca_witch_icon + Demon: {{ link_to('https://www.iconfinder.com/icons/725403/alchemy_antichrist_halloween_hell_pentagram_wicca_witch_icon') }}
  • - Dragonkin: https://www.iconfinder.com/icons/2580985/dragon_fairytale_fantasy_flying_head_magic_monster_icon + Dragonkin: {{ link_to('https://www.iconfinder.com/icons/2580985/dragon_fairytale_fantasy_flying_head_magic_monster_icon') }}
  • - Elemental: https://www.iconfinder.com/icons/1161512/earth_element_elemental_magic_rock_spell_stone_icon + Elemental: {{ link_to('https://www.iconfinder.com/icons/1161512/earth_element_elemental_magic_rock_spell_stone_icon') }}
  • - Giant: https://www.iconfinder.com/icons/2117581/fantasy_folklore_giant_monster_ogre_troll_icon + Giant: {{ link_to('https://www.iconfinder.com/icons/2117581/fantasy_folklore_giant_monster_ogre_troll_icon') }}
  • Humanoid: @@ -128,17 +132,17 @@ target="_blank">CC 3.0 BY
  • - Mechanical: https://www.iconfinder.com/icons/2376279/android_bot_droid_robot_icon + Mechanical: {{ link_to('https://www.iconfinder.com/icons/2376279/android_bot_droid_robot_icon') }}
  • - Undead: https://www.iconfinder.com/icons/1974373/halloween_hand_rise_zombie_icon + Undead: {{ link_to('https://www.iconfinder.com/icons/1974373/halloween_hand_rise_zombie_icon') }}
  • Void: - https://www.iconfinder.com/icons/3903825/frozen_theme_snowflake_swirl_snowflake_tornado_swirl_snowflake_winter_swirl_icon + {{ link_to('https://www.iconfinder.com/icons/3903825/frozen_theme_snowflake_swirl_snowflake_tornado_swirl_snowflake_winter_swirl_icon') }}
  • - Tide: https://www.iconfinder.com/icons/4605982/big_ocean_sea_tide_wave_icon + Tide: {{ link_to('https://www.iconfinder.com/icons/4605982/big_ocean_sea_tide_wave_icon') }}

    • @@ -149,17 +153,18 @@

    - Star icon + Comment icon

    +

    diff --git a/webpack.mix.js b/webpack.mix.js index 5992d4522..ba6c7b20b 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -7,7 +7,7 @@ let gitRevisionPlugin = null; // Init in the config below mix.webpackConfig({ watchOptions: { ignored: ['node_modules', 'vendor'], - poll: 1000 // Check for changes every second + poll: 2000 // Check for changes every second }, // Handlebars has a bug which requires this: https://github.com/wycats/handlebars.js/issues/1174 resolve: {