* Updated player property in PlayerIcon component to be computed to f…

…ix icon shape not updating when the player was changed to one with a different shape.

* Updated gameStarBulkUpgraded() method in store.js to fix newScience calculation incorrectly calculating the amount of new science.
* Updated SvgWrapper component:
    - Replaced use of object element with render() function, reducing the level of hackery that was being utilised.  This also helps to mitigate the SVG pop-in slightly on slow browsers.
    - Now caches SVG element text (fixes SVG pop-in on slow browsers for all but the very first load of the SVG data)
* Updated StarIcon component:
    - Corrected typo in SvgWrapper component import.
    - Fixed wormhole and nebula icons not being displaying inline (which would result in text being pushed out of the way).
* Updated tabs in Galaxy component to always show four tabs per row.
* Added new global styles.css file.
* Adjusted styling for blue info boxes to improve readability:
    - Font colour is now fully white instead of slighty translucent white.
    - Small font size is now increased from .875em to .925em.
* Updated getFriendlyColour() method in gameHelper to also convert the returned colour to lower case (in case it needs to be matched against a colour in colours.json).
* Updated ensureExists() in ColourOverrideDialog to fix colour value lookup check (fixes Use Default button not working for older games).
* Updated getColourForPlayer() method in store.js to run the colour through GameHelper.getFriendlyColour() before returning it (fixes colour bars appearing black in older games).
* Updated gamePlayerJoined() method in BroadcastService to set the avatar value to the avatar file name.  This fixes player avatars not loading correctly when players joined games.
* Fixed compare() method in gridHelper not actually sorting null values after everything else.

client/src/assets/styles.css

@@ -0,0 +1,8 @@
+.bg-info {
+    color: white;
+    /*font-weight: 400;*/
+}
+
+.bg-info .small, .bg-info small {
+    font-size: .925em;
+}

client/src/main.js

@@ -9,6 +9,7 @@ import $ from 'jquery'
 import 'pixi.js-legacy'
 import 'pixi-viewport'
 import '@pixi/graphics-extras';
+import "@/assets/styles.css";
 
 // Note: This was done to get around an issue where the Steam client
 // had bootstrap as undefined. This also affects the UI template we're using,

client/src/services/gameHelper.js

@@ -32,7 +32,7 @@ class GameHelper {
   }
 
   getFriendlyColour (colour) {
-    return colour.replace('0x', '#')
+    return colour.replace('0x', '#').toLowerCase();
   }
 
   getStarByName (game, starName) {

client/src/services/gridHelper.js

@@ -39,10 +39,10 @@ class GridHelper {
       }
       // Sort null values after everything else
       else if (a === null) {
-        return 1;
+        return -1;
       }
       else if (b === null) {
-        return -1;
+        return 1;
       }
       else {
 

client/src/store.js

@@ -275,7 +275,7 @@ export default new Vuex.Store({
         let star = GameHelper.getStarById(state.game, s.starId);
 
         if (data.infrastructureType === 'science') {
-          newScience += s.infrastructure * (star.specialistId === 11 ? 2 : 1); // Research Station
+          newScience += (s.infrastructure - s.infrastructureCurrent) * (star.specialistId === 11 ? 2 : 1); // Research Station
         }
 
         star.infrastructure[data.infrastructureType] = s.infrastructure
@@ -532,11 +532,19 @@ export default new Vuex.Store({
       return state.cachedConversationComposeMessages[conversationId] || ''
     },
     getColourForPlayer: (state) => (playerId) => {
+      let colour = null;
+
       if (state.colourOverride) {
-        return state.colourMapping?.[playerId] || GameHelper.getPlayerById(state.game, playerId).colour;
+        colour = state.colourMapping?.[playerId] || GameHelper.getPlayerById(state.game, playerId).colour;
       } else {
-        return GameHelper.getPlayerById(state.game, playerId).colour
+        colour = GameHelper.getPlayerById(state.game, playerId).colour
+      }
+
+      if (colour != null) {
+        colour.value = GameHelper.getFriendlyColour(colour.value);
       }
+
+      return colour;
     }
   },
   plugins: [vuexPersist.plugin]

client/src/views/components/SvgWrapper.vue

@@ -1,33 +1,42 @@
-<template>
-  <object type="image/svg+xml" :data="href" v-on:load="onload($event)" />
-</template>
-
 <script>
+let svgCacheMap = new Map();
+
 export default {
   props: {
     href: null
   },
+  render(createElement) {
+    return createElement(this.renderInternal);
+  },
   methods: {
-    onload: function (e) {
-      // Based on information from here: https://stackoverflow.com/questions/22252409/manipulating-external-svg-file-style-properties-with-css/72804140#72804140
-      // Basically we elevate our SVG out of the shadow DOM to the DOM, so that it can then be affected by our CSS classes!
+    async renderInternal() {
+      let svgText = null;
 
-      // Carry over our existing CSS classes to the SVG.
-      e.target.contentDocument.documentElement.classList.add(...e.target.classList);
+      if (svgCacheMap.has(this.href)) {
+        svgText = svgCacheMap.get(this.href);
+      }
+      else {
+        let svgResponse = await fetch(this.href);
 
-      // Copy the data- attributes so the CSS classes will work, etc.
-      for (let attribute of e.target.attributes) {
-        if (attribute.name.startsWith('data-')) {
-          e.target.contentDocument.documentElement.setAttribute(attribute.name, attribute.value);
+        if (svgResponse.ok) {
+          svgText = await svgResponse.text();
+          svgCacheMap.set(this.href, svgText);
         }
       }
 
-      // Trim the space around the actual icon!
-      let svgBoundingBox = this.horribleSvgGetBBox(e.target.contentDocument.documentElement);
-      e.target.contentDocument.documentElement.setAttribute('viewBox', `${svgBoundingBox.x} ${svgBoundingBox.y} ${svgBoundingBox.width} ${svgBoundingBox.height}`);
+      if (svgText != null) {
+        let range = document.createRange();
+        let svgFragment = range.createContextualFragment(svgText);
 
-      // Elevate the SVG element at last!
-      e.target.parentNode.replaceChild(e.target.contentDocument.documentElement, e.target);
+        // 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}`);
+
+        return { render: (h) => h('svg', { attrs: Object.fromEntries(Array.from(svgFragment.firstChild.attributes).map(v => [v.name, v.value])), domProps: { innerHTML: svgFragment.firstChild.innerHTML } }) };
+      }
+      else {
+        return { render: (h) => h('span') };
+      }
     },
     horribleSvgGetBBox(svg) {
       // This abomination is needed because getBBox() returns all zeroes if the SVG isn't currently "visible".

client/src/views/game/components/galaxy/Galaxy.vue

@@ -121,7 +121,11 @@ export default {
 </script>
 
 <style scoped>
+.nav-item {
+    flex-basis: 25%;
+}
 .nav-link {
-  padding: 0.5rem 1.5rem;
+  padding: 0.5rem 0.2rem;
+  text-align: center;
 }
 </style>

client/src/views/game/components/galaxy/StarTypesTable.vue

@@ -41,7 +41,7 @@
                   <td title="Pulsar">
                     <a href="javascript:;" @click="sort(['isPulsar'], ['name'])"><star-icon :isPulsar="true"></star-icon></a>
                   </td>
-                  <td title="Wormhole">
+                  <td title="Wormhole" style="text-align: center;">
                     <a href="javascript:;" @click="sort(['isWormHole'], ['wormHolePairStar', 'name'])"><star-icon :isWormHole="true"></star-icon></a>
                   </td>
                   <td></td>

client/src/views/game/components/player/ColourOverrideDialog.vue

@@ -64,7 +64,7 @@ export default {
         return alias;
       }
 
-      const existsV = this.$store.state.coloursConfig.find(colour => colour.value === this.player.colour.value)?.alias;
+      const existsV = this.$store.state.coloursConfig.find(colour => colour.value === gameHelper.getFriendlyColour(this.player.colour.value))?.alias;
 
       if (existsV) {
         return existsV;

client/src/views/game/components/player/PlayerIcon.vue

@@ -17,15 +17,12 @@ export default {
   },
   data () {
     return {
-      player: null,
       onlineStatus: '',
       isOnline: false,
       intervalFunction: null
     }
   },
     mounted() {
-      this.player = GameHelper.getPlayerById(this.$store.state.game, this.playerId)
-
       let isHiddenPlayerOnlineStatus = GameHelper.isHiddenPlayerOnlineStatus(this.$store.state.game)
 
       if (!this.hideOnlineStatus && !isHiddenPlayerOnlineStatus) {
@@ -50,6 +47,9 @@ export default {
       const unknownStatus = this.player.isOnline == null;
       return unknownStatus || this.isOnline || this.solidGlyphOnly;
     },
+    player() {
+      return GameHelper.getPlayerById(this.$store.state.game, this.playerId)
+    },
     playerColour() {
       return this.$store.getters.getColourForPlayer(this.playerId).value
     }

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

@@ -19,10 +19,10 @@
 </template>
 
 <script>
-import SvgWrapperVlue from '../../../components/SvgWrapper'
+import SvgWrapperVue from '../../../components/SvgWrapper'
 export default {
   components: {
-    'svg-wrapper': SvgWrapperVlue
+    'svg-wrapper': SvgWrapperVue
   },
   props: {
     isAsteroidField: false,
@@ -91,6 +91,8 @@ export default {
   .nebulaIcon, .wormHoleIcon {
     width: 18px;
     height: 18px;
+    display: inline-block;
+    vertical-align: bottom;
   }
 
   .nebulaIcon {

server/services/broadcast.ts

@@ -1,16 +1,20 @@
-import { DBObjectId } from "./types/DBObjectId";
+import AvatarService from "./avatar";
+import { LedgerType } from "./ledger";
 import { Conversation } from "./types/Conversation";
 import { ConversationMessageSentResult } from "./types/ConversationMessage";
+import { DBObjectId } from "./types/DBObjectId";
+import { DiplomaticStatus } from "./types/Diplomacy";
 import { Game } from "./types/Game";
 import { Player } from "./types/Player";
-import { DiplomaticStatus } from "./types/Diplomacy";
 import { TradeEventTechnology } from "./types/Trade";
-import { LedgerType } from "./ledger";
 
 
 export default class BroadcastService {
     io: any;
 
+    constructor(private avatarService: AvatarService) {
+    }
+
     setIOController(io) {
         this.io = io;
     }
@@ -34,10 +38,13 @@ export default class BroadcastService {
     }
 
     gamePlayerJoined(game: Game, playerId: DBObjectId, alias: string, avatar: number) {
+
+        const avatars = this.avatarService.listAllAvatars();
+
         this.io.to(game._id).emit('gamePlayerJoined', {
             playerId,
             alias,
-            avatar
+            avatar: avatars.find(a => a.id.toString() === avatar.toString())!.file
         });
     }
 

server/services/index.ts

@@ -142,7 +142,6 @@ export default (config): DependencyContainer => {
     const announcementService = new AnnouncementService(AnnouncementModel, announcementRepository, userService);
 
     const gameLockService = new GameLockService(gameRepository);
-    const broadcastService = new BroadcastService();
     const distanceService = new DistanceService();
     const randomService = new RandomService();
     const cacheService = new CacheService(config);
@@ -154,6 +153,7 @@ export default (config): DependencyContainer => {
     const gameFluxService = new GameFluxService();
     const playerCreditsService = new PlayerCreditsService(gameRepository);
     const avatarService = new AvatarService(userRepository, userService);
+    const broadcastService = new BroadcastService(avatarService);
     const achievementService = new AchievementService(userRepository, guildService, userLevelService);
     const ratingService = new RatingService(userRepository, gameRepository, userService);
     const nameService = new NameService(gameNames, starNames, randomService);