Minor fixes

client/src/services/gridHelper.js

@@ -35,17 +35,17 @@ class GridHelper {
   }
 
   compare(a, b) {
-    if (a === b) {
-      return 0;
-    }
-    // Sort null values after everything else
-    else if (a === null) {
-      return 1;
-    }
-    else if (b === null) {
-      return -1;
-    }
-    else {
+      if (a === b) {
+        return 0;
+      }
+      // Treat null values as smaller than anything else.
+      else if (a === null) {
+        return -1;
+      }
+      else if (b === null) {
+        return 1;
+      }
+      else {
 
       let result = a < b ? -1 : 1;
 

client/src/views/components/SvgWrapper.vue

@@ -1,24 +1,76 @@
-<template>
-  <Suspense>
-    <SvgWrapperInternal :href="href" v-bind="$attrs" />
-
-    <template #fallback>
-      <span>.</span>
-    </template>
-  </Suspense>
-</template>
 <script>
-import SvgWrapperInternal from './SvgWrapperInternal.vue';
+  import { defineAsyncComponent, h, normalizeClass, normalizeStyle, Suspense } from 'vue'
 
-export default {
-  components: {
-    SvgWrapperInternal
-  },
-  props: {
-    href: null
-  },
-}
+  let svgCacheMap = new Map();
 
+  export default {
+    inheritAttrs: false,
+    props: {
+      href: null
+    },
+    render() {
+      const svgInner = defineAsyncComponent(this.renderInternal);
+
+      return h(Suspense, null, {
+        default: h(svgInner)
+      });
+    },
+    methods: {
+      async renderInternal() {
+        console.log(normalizeClass);
+
+        let svgText = null;
+
+        if (svgCacheMap.has(this.href)) {
+          svgText = svgCacheMap.get(this.href);
+        }
+        else {
+          let svgResponse = await fetch(this.href);
+
+          if (svgResponse.ok) {
+            svgText = await svgResponse.text();
+            svgCacheMap.set(this.href, svgText);
+          }
+        }
+
+        if (svgText != null) {
+          let range = document.createRange();
+          let svgFragment = range.createContextualFragment(svgText);
+
+          // Trim the space around the actual icon!
+          let svgBoundingBox = this.horribleSvgGetBBox(svgFragment.firstChild);
+          svgFragment.firstChild.setAttribute('viewBox', `${svgBoundingBox.x} ${svgBoundingBox.y} ${svgBoundingBox.width} ${svgBoundingBox.height}`);
+
+          let attributes = this.$attrs;
+          let svgAttributes = Object.fromEntries(Array.from(svgFragment.firstChild.attributes).map(v => [v.name, v.value]))
+
+          let cssClass = normalizeClass([attributes.class, svgAttributes.class]);
+          let style = normalizeStyle([attributes.style, svgAttributes.style]);
+
+          return h('svg', {...attributes, ...svgAttributes, class: cssClass, style: style, innerHTML: svgFragment.firstChild.innerHTML });
+        }
+        else {
+          return h('span');
+        }
+      },
+      horribleSvgGetBBox(svg) {
+        // This abomination is needed because getBBox() returns all zeroes if the SVG isn't currently "visible".
+        // Based on the answers from here: https://stackoverflow.com/questions/28282295/getbbox-of-svg-when-hidden
+        let svgClone = svg.cloneNode(true);
+        let div = document.createElement('div', {});
+        div.setAttribute('style', 'position: absolute; visibility: hidden; width: 0; height: 0');
+        div.appendChild(svgClone);
+
+        document.body.appendChild(div);
+
+        let bbBox = svgClone.getBBox();
+
+        document.body.removeChild(div);
+
+        return bbBox;
+      }
+    }
+  }
 </script>
 
 <style scoped>

client/src/views/game/components/star/StarIcon.vue

@@ -39,7 +39,7 @@ export default {
         return new URL(`../../../../assets/map-objects/128x128_star_scannable_binary.svg`, import.meta.url).href;
       }
       else if (this.isNebula) {
-        return `mask-image: url(${new URL(`../../../../assets/nebula/neb0-starless-bright.png`, import.meta.url)});`;
+       return `mask-image: url(${new URL(`../../../../assets/nebula/neb0-starless-bright.png`, import.meta.url)}); -webkit-mask-image: url(${new URL(`../../../../assets/nebula/neb0-starless-bright.png`, import.meta.url)});`;
       }
       else if (this.isBlackHole) {
         return new URL(`../../../../assets/map-objects/128x128_star_black_hole.svg`, import.meta.url).href;
@@ -48,7 +48,7 @@ export default {
         return new URL(`../../../../assets/stars/128x128_star_pulsar.svg`, import.meta.url).href;
       }
       else if (this.isWormHole) {
-        return `mask-image: url(${new URL(`../../../../assets/stars/vortex.png`, import.meta.url).href});`;
+       return `mask-image: url(${new URL(`../../../../assets/stars/vortex.png`, import.meta.url).href}); -webkit-mask-image: url(${new URL(`../../../../assets/stars/vortex.png`, import.meta.url).href});`;
       }
       else {
         return new URL(`../../../../assets/map-objects/128x128_star_scannable.svg`, import.meta.url).href;
@@ -63,13 +63,13 @@ export default {
     width: 15px;
     height: 15px;
   }
-  .star-svg:deep(.star) {
+  .star-svg .star {
     fill: currentColor;
   }
-  .star-svg:deep(.pulsar) {
+  .star-svg .pulsar {
     stroke: currentColor;
   }
-  .star-svg:deep(.black-hole) {
+  .star-svg .black-hole {
     fill: transparent;
     stroke: currentColor;
   }
@@ -80,6 +80,9 @@ export default {
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: 100%;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: 100%;
   }
 
   .nebulaIcon, .wormHoleIcon {