From bad4f2a95407aff94ec10348c58ea1601fe6c275 Mon Sep 17 00:00:00 2001
From: Metritutus <324345+Metritutus@users.noreply.github.com>
Date: Fri, 11 Oct 2024 20:23:30 +0100
Subject: [PATCH] * Updated player property in PlayerIcon component to be
 computed to fix 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                  |  8 ++++
 client/src/main.js                            |  1 +
 client/src/services/gameHelper.js             |  2 +-
 client/src/services/gridHelper.js             |  4 +-
 client/src/store.js                           | 14 ++++--
 client/src/views/components/SvgWrapper.vue    | 45 +++++++++++--------
 .../views/game/components/galaxy/Galaxy.vue   |  6 ++-
 .../game/components/galaxy/StarTypesTable.vue |  2 +-
 .../player/ColourOverrideDialog.vue           |  2 +-
 .../game/components/player/PlayerIcon.vue     |  6 +--
 .../views/game/components/star/StarIcon.vue   |  6 ++-
 server/services/broadcast.ts                  | 15 +++++--
 server/services/index.ts                      |  2 +-
 13 files changed, 76 insertions(+), 37 deletions(-)
 create mode 100644 client/src/assets/styles.css

diff --git a/client/src/assets/styles.css b/client/src/assets/styles.css
new file mode 100644
index 000000000..3bf56291d
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/client/src/main.js b/client/src/main.js
index 3f6af087c..9bfb29272 100644
--- a/client/src/main.js
+++ b/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,
diff --git a/client/src/services/gameHelper.js b/client/src/services/gameHelper.js
index f40ebd531..aa1c95c83 100644
--- a/client/src/services/gameHelper.js
+++ b/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) {
diff --git a/client/src/services/gridHelper.js b/client/src/services/gridHelper.js
index 051c01615..01a6a437f 100644
--- a/client/src/services/gridHelper.js
+++ b/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 {
 
diff --git a/client/src/store.js b/client/src/store.js
index af099233a..391fb03b1 100644
--- a/client/src/store.js
+++ b/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]
diff --git a/client/src/views/components/SvgWrapper.vue b/client/src/views/components/SvgWrapper.vue
index 4cb6cd95d..c8096b189 100644
--- a/client/src/views/components/SvgWrapper.vue
+++ b/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".
diff --git a/client/src/views/game/components/galaxy/Galaxy.vue b/client/src/views/game/components/galaxy/Galaxy.vue
index b7d418acd..2bb83fa8b 100644
--- a/client/src/views/game/components/galaxy/Galaxy.vue
+++ b/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>
diff --git a/client/src/views/game/components/galaxy/StarTypesTable.vue b/client/src/views/game/components/galaxy/StarTypesTable.vue
index 5d1decb50..6937b66ba 100644
--- a/client/src/views/game/components/galaxy/StarTypesTable.vue
+++ b/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>
diff --git a/client/src/views/game/components/player/ColourOverrideDialog.vue b/client/src/views/game/components/player/ColourOverrideDialog.vue
index 6d18d602e..2fbbc2a56 100644
--- a/client/src/views/game/components/player/ColourOverrideDialog.vue
+++ b/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;
diff --git a/client/src/views/game/components/player/PlayerIcon.vue b/client/src/views/game/components/player/PlayerIcon.vue
index 20c4ade40..1f6bec4c6 100644
--- a/client/src/views/game/components/player/PlayerIcon.vue
+++ b/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
     }
diff --git a/client/src/views/game/components/star/StarIcon.vue b/client/src/views/game/components/star/StarIcon.vue
index 2a2aba966..b0cbbe393 100644
--- a/client/src/views/game/components/star/StarIcon.vue
+++ b/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 {
diff --git a/server/services/broadcast.ts b/server/services/broadcast.ts
index aab12a57f..e36617bf5 100644
--- a/server/services/broadcast.ts
+++ b/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
         });
     }
 
diff --git a/server/services/index.ts b/server/services/index.ts
index 11296cf73..5f13870dc 100644
--- a/server/services/index.ts
+++ b/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);