big npm update (*)

`webpack` v4 => v5: - `script-ext-html-webpack-plugin` is deprecated and unnecessary now, the feature I use is now in `html-webpack-plugin` - `preload-webpack-plugin` is deprecated, use fork `@vue/preload-webpack-plugin` instead - `optimize-css-assets-webpack-plugin` wont adjust to `webpack` v5, use `css-minimizer-webpack-plugin` instead `leaflet` 1.6.0 => 1.7.1: - contains my fix for Leaflet/Leaflet#6764 now, so I can remove my workaround. `sass`: - `node-sass` is deprecated, use `sass` (`dart-sass`) instead. - `sass-loader`: the `~` import no longer works. Therefore prefix spritesmith filenames with `img-`, to fix the ambiguity between `src/css/icons.scss` and `build/img/icons.scss` Can't upgrade `wtf_wikipedia` to 8.0.0 or higher right now, because of issues with: - https://github.com/substack/https-browserify/issues/9 - jhiesey/stream-http#116
Istador · Feb 13, 2021 · 050439b · 050439b
1 parent 6342787
commit 050439b
Show file tree

Hide file tree

Showing 7 changed files with 2,159 additions and 4,608 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pine-interactive-map",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Interactive Map for the video game Pine, that is currently in development.",
   "main": "src/app.js",
   "scripts": {
@@ -32,29 +32,28 @@
   },
   "homepage": "https://github.com/Istador/pine-interactive-map",
   "dependencies": {
-    "@babel/core": "^7.10.5",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/runtime": "^7.10.5",
-    "@istador/leaflet-panel-layers": "^1.2.7",
+    "@babel/core": "^7.12.16",
+    "@babel/preset-env": "^7.12.16",
+    "@babel/runtime": "^7.12.13",
+    "@istador/leaflet-panel-layers": "^1.2.8",
+    "@vue/preload-webpack-plugin": "^2.0.0",
     "axios": "^0.21.1",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-transform-unicode-regexp-runtime": "^1.0.0",
     "core-js": "3.5.0",
-    "css-loader": "^3.6.0",
+    "css-loader": "^5.0.2",
+    "css-minimizer-webpack-plugin": "^1.2.0",
     "dotenv": "^8.2.0",
-    "file-loader": "^4.3.0",
-    "html-webpack-plugin": "^3.2.0",
-    "leaflet": "^1.6.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.1.0",
+    "leaflet": "^1.7.1",
     "leaflet-fullscreen": "^1.0.2",
     "leaflet-languageselector": "github:buche/leaflet-languageselector#30f6bdcf7e2f5fe9a283f3dfc5bd6e64c94ac511",
-    "mini-css-extract-plugin": "^0.8.2",
-    "node-sass": "^4.14.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "preload-webpack-plugin": "^3.0.0-beta.4",
-    "sass-loader": "^7.3.1",
-    "script-ext-html-webpack-plugin": "^2.1.4",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12",
+    "mini-css-extract-plugin": "^1.3.6",
+    "sass": "^1.32.7",
+    "sass-loader": "^11.0.1",
+    "webpack": "^5.21.2",
+    "webpack-cli": "^4.5.0",
     "webpack-spritesmith": "^1.1.0",
     "wtf_wikipedia": "^7.8.1"
   }

diff --git a/src/css/controls.scss b/src/css/controls.scss
@@ -1,5 +1,5 @@
-@import '~langs.scss';
-@import '~styles.scss';
+@import 'img-langs.scss';
+@import 'img-styles.scss';
 
 #map {
   // popup
@@ -43,8 +43,8 @@
       .leaflet-languageselector-langdiv {
         font-size: 0;
       }
-      @each $lang in $pine-langs-sprites {
-        $key: str-slice(nth($lang, 10), 11);
+      @each $lang in $pine-img-langs-sprites {
+        $key: str-slice(nth($lang, 10), 15);
         #languageselector_#{$key} {
           @include scaled($lang, 0.8);
         }
@@ -117,8 +117,8 @@
 }
 
 // style
-@each $sprite in $pine-styles-sprites {
-  $dynamic : str-slice(nth($sprite, 10), 12);
+@each $sprite in $pine-img-styles-sprites {
+  $dynamic : str-slice(nth($sprite, 10), 16);
   $pos     : str-index($dynamic, "-");
   $key     : str-slice($dynamic, 1, $pos - 1);
   $state   : str-slice($dynamic, $pos + 1);

diff --git a/src/css/icons.scss b/src/css/icons.scss
@@ -1,4 +1,4 @@
-@import '~icons.scss';
+@import 'img-icons.scss';
 
 div.leaflet-marker-pane > div.pine-marker
 , div.leaflet-areas-pane > svg.pine-marker
@@ -53,7 +53,7 @@ div.leaflet-marker-pane > div.pine-marker
 #map div.leaflet-marker-pane > div.pine-marker
 , #map i.leaflet-panel-layers-icon > i.pine-marker
 {
-  @include scaled($pine-icon-default);
+  @include scaled($pine-img-icon-default);
 
   // tint
   @mixin tint($n) {
@@ -66,7 +66,7 @@ div.leaflet-marker-pane > div.pine-marker
 
   // areas
   &.pine-marker-area {
-    @include scaled($pine-icon-keygraphite, 10/32);
+    @include scaled($pine-img-icon-keygraphite, 10/32);
     background-image: unset;
     &.pine-marker-area-1  { background-color: #d477f5; }
     &.pine-marker-area-2  { background-color: #99c561; }
@@ -95,101 +95,101 @@ div.leaflet-marker-pane > div.pine-marker
   &.pine-marker-entrance {
     // cave
     &.pine-marker-entrance-cave {
-      @include scaled($pine-icon-mohlenhill);
+      @include scaled($pine-img-icon-mohlenhill);
       filter: saturate(0) brightness(1.5);
     }
     // mohlenhill
     &.pine-marker-entrance-mohlenhill {
-      @include scaled($pine-icon-mohlenhill);
+      @include scaled($pine-img-icon-mohlenhill);
     }
   }
 
   // food
   &.pine-marker-food {
     // default
-    @include scaled($pine-icon-food);
+    @include scaled($pine-img-icon-food);
     @include tint(16);
   }
 
   // idea
   &.pine-marker-idea {
-    @include scaled($pine-icon-chest);
+    @include scaled($pine-img-icon-chest);
   }
 
   // item
   &.pine-marker-item {
-    @include scaled($pine-icon-equip, 0.6);
+    @include scaled($pine-img-icon-equip, 0.6);
   }
 
   // material
   &.pine-marker-material {
     // default
-    @include scaled($pine-icon-material);
+    @include scaled($pine-img-icon-material);
     @include tint(10);
 
     // beagalite
     &.pine-marker-material-beagalite {
-      @include scaled($pine-icon-beagalite, 0.5, 0.7);
+      @include scaled($pine-img-icon-beagalite, 0.5, 0.7);
       filter: hue-rotate(90deg) brightness(2);
     }
     // dullrock
     &.pine-marker-material-dullrock {
-      @include scaled($pine-icon-beagalite);
+      @include scaled($pine-img-icon-beagalite);
       filter: hue-rotate(-20deg) brightness(1.2) saturate(0.25);
     }
     // dryclay
     &.pine-marker-material-dryclay {
-      @include scaled($pine-icon-gravelmoss);
+      @include scaled($pine-img-icon-gravelmoss);
       filter: hue-rotate(80deg) brightness(2.0) saturate(0.10);
     }
     // gravelmoss
     &.pine-marker-material-gravelmoss {
-      @include scaled($pine-icon-gravelmoss);
+      @include scaled($pine-img-icon-gravelmoss);
     }
     // leaniron
     &.pine-marker-material-leaniron {
-      @include scaled($pine-icon-beagalite);
+      @include scaled($pine-img-icon-beagalite);
       filter: hue-rotate(-20deg) brightness(2.6) saturate(0.25);
     }
     // lunarodos
     &.pine-marker-material-lunarodos {
-      @include scaled($pine-icon-lunarodos);
+      @include scaled($pine-img-icon-lunarodos);
     }
     // sandstone
     &.pine-marker-material-sandstone {
-      @include scaled($pine-icon-beagalite);
+      @include scaled($pine-img-icon-beagalite);
       filter: hue-rotate(90deg) brightness(2.5) saturate(0.75);
     }
     // spystal
     &.pine-marker-material-spystal {
-      @include scaled($pine-icon-beagalite, 0.5, 0.7);
+      @include scaled($pine-img-icon-beagalite, 0.5, 0.7);
       filter: hue-rotate(-60deg) brightness(3);
     }
     // toothstone
     &.pine-marker-material-toothstone {
-      @include scaled($pine-icon-beagalite);
+      @include scaled($pine-img-icon-beagalite);
       filter: hue-rotate(-20deg) brightness(4.0) saturate(0.25);
     }
   }
 
   // mechanic
   &.pine-marker-mechanic {
     // default
-    @include scaled($pine-icon-mechanic);
+    @include scaled($pine-img-icon-mechanic);
     @include tint(5);
   }
 
   // npc
   &.pine-marker-npc-village
   {
-    @include scaled($pine-icon-village);
+    @include scaled($pine-img-icon-village);
   }
 
   // spawn
   &.pine-marker-spawn
   , &.pine-marker-nest {
     // default
-    @include scaled($pine-icon-nest);
+    @include scaled($pine-img-icon-nest);
     @include tint(4);
   }
 
@@ -200,22 +200,22 @@ div.leaflet-marker-pane > div.pine-marker
   , &.pine-marker-entrance-quest
   , &.pine-marker-entrance-vault
   {
-    @include scaled($pine-icon-npc);
+    @include scaled($pine-img-icon-npc);
   }
 
   // unique
   &.pine-marker-unique {
     // amphiscusorb
     &.pine-marker-unique-amphiscusorb {
-      @include scaled($pine-icon-emblem);
+      @include scaled($pine-img-icon-emblem);
     }
     // keygraphite
     &.pine-marker-unique-keygraphite {
-      @include scaled($pine-icon-keygraphite, 10/32);
+      @include scaled($pine-img-icon-keygraphite, 10/32);
     }
     // journal / book
     &.pine-marker-unique-journal {
-      @include scaled($pine-icon-book);
+      @include scaled($pine-img-icon-book);
     }
   }
 }
diff --git a/src/js/datasource.js b/src/js/datasource.js
@@ -14,8 +14,9 @@ const fetch = {
     'Interactive Map/' + version().replace('.', '_'),
     'pine',
     {
-      wikiUrl: __JSON__,
-      follow_redirects: true,
+      wiki             : __JSON__,
+      wikiUrl          : __JSON__,
+      follow_redirects : true,
     },
   ),
 }

diff --git a/src/js/markers.js b/src/js/markers.js
@@ -174,12 +174,6 @@ const obj2marker = (row) => {
       () => tooltip(row),
       {
         direction: 'top',
-        // workaround for https://github.com/Leaflet/Leaflet/issues/6764
-        offset: (
-          icon.tooltipAnchor[0]
-          ? [ icon.tooltipAnchor[0], 0 ]
-          : [0, 0]
-        )
       }
     )
   if (row.hasUniqueID) {