updated webp-images, lazyloaded map images, added fontawesome icons

src/utils/Display.js

@@ -21,4 +21,20 @@ export const DisplayRank = (rankNr = 0) => {
         [18, 'Global Elite'],
     ])
     return [require(`../images/rank_icons/skillgroup${rankNr}.svg`), rankMap.get(rankNr)]
-}
+}
+
+export const LoadImage = (mapName) => {
+    let img = new Image()
+    let background = document.querySelector('.bg-img')
+
+    img.onload = function() {
+        background.src = img.src
+    }
+
+    img.onerror = function () {
+        img.src = require(`../images/map_screenshots/${mapName}.jpg`)
+        img.onerror = null
+    }
+
+    img.src = require(`../images/map_screenshots/${mapName}.webp`)
+}