Merge pull request #1234 from solaris-games/dev

Update 248

client/index.html

@@ -8,7 +8,8 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta http-equiv="Cache-control" content="no-cache">
     <meta name="description" content="Solaris: A space strategy game filled with conquest, betrayal and subterfuge.">
-    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/favicon.ico" media="(prefers-color-scheme: light)">
+    <link rel="icon" href="/favicon_dark.ico" media="(prefers-color-scheme: dark)">
     <link rel="apple-touch-icon" href="/solaris_icon-iphone.png">
     <link rel="apple-touch-icon" sizes="152x152" href="/solaris_icon-ipad.png">
     <link rel="apple-touch-icon" sizes="180x180" href="/solaris_icon-iphone.png">

client/package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "dev:network": "vite --host",
     "build": "vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "check": "tsc --noEmit"
   },
   "dependencies": {
     "@pixi/graphics-extras": "^7.4.0",
@@ -35,7 +36,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/tsconfig": "^0.5.1",
     "less": "^3.13.1",
+    "typescript": "^5.6.3",
     "vite": "^5.4.8"
   }
 }

client/src/App.vue

@@ -1,18 +1,12 @@
 <template>
   <main>
-    <confirmation-dialog :dialogSettings="$store.state.confirmationDialog" />
+    <ConfirmationDialog :dialogSettings="$store.state.confirmationDialog" />
     <router-view/>
   </main>
 </template>
 
-<script>
-import ConfirmationDialog from './views/components/modal/ConfirmationDialog.vue'
-
-export default {
-  components: {
-    'confirmation-dialog': ConfirmationDialog
-  }
-}
+<script setup lang="ts">
+import ConfirmationDialog from './views/components/modal/ConfirmationDialog.vue';
 </script>
 
 <style>

client/src/eventBus.js → client/src/eventBus.ts

@@ -5,9 +5,9 @@ import mitt from 'mitt'
 const emitter = mitt();
 
 const eventBus = {
-  $on: (...args) => emitter.on(...args),
-  $off: (...args) => emitter.off(...args),
-  $emit: (...args) => emitter.emit(...args)
+  $on: emitter.on,
+  $off: emitter.off,
+  $emit: emitter.emit
 };
 
 export default eventBus;

client/src/services/api/game.js

@@ -147,6 +147,12 @@ class GameService extends BaseApiService {
     return axios.post(this.BASE_URL + 'game/' + gameId + '/fastforward', {}, { withCredentials: true })
   }
 
+  kickPlayer(gameId, playerId) {
+    return axios.post(this.BASE_URL + 'game/' + gameId + '/kick', {
+      playerId
+    }, { withCredentials: true })
+  }
+
   confirmReady (gameId) {
     return axios.put(this.BASE_URL + 'game/' + gameId + '/ready', null,
       { withCredentials: true })

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/store.js

@@ -5,6 +5,8 @@ import GameContainer from './game/container'
 import SpecialistService from './services/api/specialist';
 import ColourService from './services/api/colour';
 import gameHelper from "./services/gameHelper";
+import ApiAuthService from "./services/api/auth.js";
+import router from "./router.js";
 
 export default createStore({
   state: {
@@ -524,6 +526,25 @@ export default createStore({
 
       GameContainer.reloadGame(state.game, state.settings);
     },
+    async verify({ commit }) {
+      try {
+        const response = await ApiAuthService.verify()
+
+        if (response.status === 200) {
+          if (response.data._id) {
+            commit('setUserId', response.data._id)
+            commit('setUsername', response.data.username)
+            commit('setRoles', response.data.roles)
+            commit('setUserCredits', response.data.credits)
+          }
+        }
+
+        return true;
+      } catch (err) {
+        console.error(err);
+        return false;
+      }
+    }
   },
   getters: {
     getConversationMessage: (state) => (conversationId) => {

client/src/views/Home.vue

@@ -59,21 +59,8 @@ export default {
   async mounted () {
     this.isAutoLoggingIn = true
 
-    try {
-      let response = await ApiAuthService.verify()
-
-      if (response.status === 200) {
-        if (response.data._id) {
-          this.$store.commit('setUserId', response.data._id)
-          this.$store.commit('setUsername', response.data.username)
-          this.$store.commit('setRoles', response.data.roles)
-          this.$store.commit('setUserCredits', response.data.credits)
-
-          router.push({ name: 'main-menu' })
-        }
-      }
-    } catch (err) {
-      console.error(err)
+    if (await this.$store.dispatch('verify')) {
+      await router.push({ name: 'main-menu' })
     }
 
     this.isAutoLoggingIn = false

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/components/ViewCollapsePanel.vue

@@ -34,6 +34,7 @@ export default {
   methods: {
     toggle () {
       this.isCollapsed = !this.isCollapsed;
+      this.$emit('onToggle', this.isCollapsed);
     }
   },
   computed: {

client/src/views/components/ViewContainer.vue

@@ -49,6 +49,11 @@ export default {
   components: {
     'logo': LogoVue,
     'view-container-top-bar': ViewContainerTopBarVue
+  },
+  async mounted() {
+    if (!this.$store.state.userId) {
+      await this.$store.dispatch('verify')
+    }
   }
 }
 </script>