version for two clients

package.json

@@ -19,6 +19,7 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vueuse/head": "^2.0.0",
     "bot_client": "github:mcgoldric/compendium-client",
+    "bot_client2": "github:mentalisit/compendium-client-new",
     "jsoncrush": "^1.1.8",
     "lodash.debounce": "^4.0.8",
     "parse-markdown-table": "^0.0.6",

src/components/CompendiumPage.vue

@@ -3,6 +3,26 @@
 
     <div class="header">
       <div class="content">
+        <div>
+          <div
+            v-if="user?.alts?.length"
+            class="select alt-switch"
+          >
+            <select
+              :value="client.selectedAlt"
+              @change="selectUserAlt($event.target.value)"
+            >
+              <option value="default">{{ user?.username }}</option>
+              <option
+                v-for="(alt, index) in user?.alts"
+                :key="index"
+                :value="alt"
+              >
+                {{ alt }}
+              </option>
+            </select>
+          </div>
+        </div>
         <div
           v-if="isFetching && !user"
           class="logged fetching"
@@ -26,12 +46,12 @@
         >
           <div class="avatar">
             <img
-              :src="getDiscordIconUrl(guild!.id, guild!.icon).href"
+              :src="guild!.url"
               :alt="`${guild!.name} icon`"
               @error="(e) => e.target.src = memberImage"
             >
             <img
-              :src="getDiscordAvatarUrl(user.id, user.avatar).href"
+              :src="user.avatarUrl"
               :alt="`${user.username} avatar`"
               @error="(e) => e.target.src = memberImage"
             >
@@ -85,6 +105,17 @@
           target="_blank"
         >HS Compendium</a>
 
+        <div class="select switch-client">
+          <select
+            v-model="defaultSwitchClient"
+            @change="selectClient($event.target.value)"
+          >
+            <option :value="0">Default client</option>
+            <option :value="1">Client from Mentalisit</option>
+          </select>
+        </div>
+
+
         <div
           class="code-req-btn-wrap"
           :class="{'disable': isFetching}"
@@ -106,10 +137,10 @@ import { onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { Identity, User, Guild } from 'bot_client';
+import { Guild, Identity, User } from 'bot_client';
+import { Guild as Guild2, Identity as Identity2, User as User2, Compendium as Client2 } from 'bot_client2';
 
-import client, { init as clientInit } from '@Utils/compendium';
-import { getDiscordAvatarUrl, getDiscordIconUrl } from '@Utils/getDiscordUrl';
+import client, { init as clientInit, switchInstance } from '@Utils/compendium';
 import memberImage from '@Img/icons/member.png';
 import types from '@/store/types';
 
@@ -125,31 +156,35 @@ const openCodeReqModal = ref(false);
 const reqCode = ref('');
 const error = ref('');
 const isFetching = ref(false);
-const user = ref<User|null>();
-const guild = ref<Guild>();
+const user = ref<User|User2|null>();
+const guild = ref<Guild|Guild2>();
+const defaultSwitchClient = ref(0);
 
 onMounted(async () => {
     isFetching.value = true;
     await clientInit();
-    const u = client.getUser();
+    const u = client.value.getUser();
     isFetching.value = false;
 
+    console.log(client.value, u);
+
     if (!u) {
         openCodeReqModal.value = true;
 
         if ('c' in router.currentRoute.value.query) {
             reqCode.value = router.currentRoute.value.query.c as string;
-            // noinspection ES6MissingAwait
-            applyReqCode();
+        }
+        if ('client' in router.currentRoute.value.query) {
+            defaultSwitchclient.value.value = parseInt(router.currentRoute.value.query.client as string, 10);
         }
     } else {
         user.value = u;
-        guild.value = client.getGuild();
+        guild.value = client.value.getGuild();
     }
 });
 
 async function applyReqCode() {
-    let ident: Identity;
+    let ident: Identity|Identity2;
 
     if (!reqCode.value) {
         error.value = t('CANNOT_BE_EMPTY');
@@ -162,7 +197,7 @@ async function applyReqCode() {
     isFetching.value = true;
 
     try {
-        ident = await client.checkConnectCode(reqCode.value);
+        ident = await client.value.checkConnectCode(reqCode.value);
     } catch (e: unknown) {
         error.value = (e as Error).toString();
         console.error(e);
@@ -181,16 +216,26 @@ async function applyReqCode() {
 
     if (!drop) {
         isFetching.value = true;
-        await client.connect(ident);
-        user.value = client.getUser();
-        guild.value = client.getGuild();
+        await client.value.connect(ident);
+        user.value = client.value.getUser();
+        guild.value = client.value.getGuild();
         isFetching.value = false;
     }
 }
+function selectUserAlt(value: string) {
+    (client.value as Client2).switchAlt(value);
+}
+
+function selectClient(value: number) {
+    isFetching.value = true;
+    switchInstance(value).then(() => {
+        isFetching.value = false;
+    });
+}
 function userProfileClick() {
     store.dispatch(types.OPEN_CONFIRM, t('TID_SETTINGS_DLG_SIGN_OUT'))
         .then(() => {
-            client.logout();
+            client.value.logout();
             user.value = undefined;
             guild.value = undefined;
         })
@@ -212,7 +257,13 @@ function userProfileClick() {
   .content {
     margin: 0 5%;
     display: flex;
-    justify-content: end;
+    justify-content: space-between;
+    align-items: center;
+
+    .alt-switch {
+      width: 110%;
+    }
+
 
     @media screen and (max-width: 1000px){
       margin: 0 1%;
@@ -319,6 +370,10 @@ function userProfileClick() {
   margin-left: 10px;
   font-style: italic;
 }
+.switch-client {
+  padding-top: 4%;
+  font-size: 80%;
+}
 
 @keyframes bg-pos-move {
   to { background-position: 1000% 0; }

src/composables/compendiumTechList.ts

@@ -13,13 +13,13 @@ export default function compendiumTechList() {
     const levelMap = ref<Record<string, number>>({});
 
     const setTechLevel = debounce(
-        (tId: number, l: number) => client.setTechLevel(tId, l),
+        (tId: number, l: number) => client.value.setTechLevel(tId, l),
         500,
     ) as SetTechLevel;
 
     onMounted(() => {
-        if (client.getUser()) {
-            data.value = client.getTechLevels();
+        if (client.value.getUser()) {
+            data.value = client.value.getTechLevels();
         }
     });
     watch(data, (value) => {
@@ -30,9 +30,9 @@ export default function compendiumTechList() {
         }
     }, { deep: true });
 
-    client.on('sync', (tl: TechLevels) => data.value = tl);
-    client.on('connected', () => data.value = client.getTechLevels());
-    client.on('disconnected', () => {
+    client.value.on('sync', (tl: TechLevels) => data.value = tl);
+    client.value.on('connected', () => data.value = client.value.getTechLevels());
+    client.value.on('disconnected', () => {
         data.value = undefined;
         levelMap.value = undefined;
     });

src/pages/CompendiumCorp.vue

@@ -42,7 +42,7 @@
             <div class="meta">
               <div class="avatar">
                 <img
-                  :src="getDiscordAvatarUrl(mem.userId, mem.avatar)"
+                  :src="mem.avatarUrl"
                   :alt="`${mem.name} avatar`"
                   @error="(e) => e.target.src = memberImage"
                 ></div>
@@ -143,7 +143,6 @@ import { onMounted, reactive, Ref, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 
-import { getDiscordAvatarUrl } from '@Utils/getDiscordUrl';
 import client from '../utils/compendium';
 import types from '@/store/modules/userSettings/types';
 
@@ -221,24 +220,24 @@ let filteredByRoleCache: CorpMember[] = [];
 
 filteredMembers.value = Array.from({ length: 10 }, (i) => ({ userId: i, name: '', avatarUrl: '' }) as CorpMember);
 
-client.on('connected', () => fetchCorp());
-client.on('disconnected', () => {
+client.value.on('connected', () => fetchCorp());
+client.value.on('disconnected', () => {
     filteredByRoleCache = [];
     filteredMembers.value = Array.from({ length: 10 }, (i) => ({ userId: i, name: '', avatarUrl: '' }) as CorpMember);
     filterRoleId.value = '';
     filterTech.splice(0);
     store.commit(types.SET_COMPENDIUM_CORP_LAST_ROLE_ID);
 });
 onMounted(() => {
-    if (client.getUser()) {
+    if (client.value.getUser()) {
         fetchCorp();
     }
 });
 
 watch(filterRoleId, async (value) => {
     isFetching.value = true;
     store.commit(types.SET_COMPENDIUM_CORP_LAST_ROLE_ID, value);
-    filteredByRoleCache = await client.corpdata(value).then((r) => r.members);
+    filteredByRoleCache = await client.value.corpdata(value).then((r) => r.members);
     filteredMembers.value = filteredByRoleCache;
     isFetching.value = false;
     filterByTech(filterTech);
@@ -248,7 +247,7 @@ watch(() => filterTech, filterByTech, { deep: true });
 
 async function fetchCorp() {
     isFetching.value = true;
-    const resp = await client.corpdata(store.state.userSettings.compendiumCorpLastRoleId);
+    const resp = await client.value.corpdata(store.state.userSettings.compendiumCorpLastRoleId);
 
     data.value = resp;
     filteredByRoleCache = resp.members;

src/utils/compendium.ts

@@ -1,17 +1,34 @@
-import { Compendium } from 'bot_client';
+import { Compendium as Client1 } from 'bot_client';
+import { Compendium as Client2 } from 'bot_client2';
+import { ref } from 'vue';
+
+const clients = [Client1, Client2];
 
-const client = new Compendium();
 let initialized = false;
+const client = ref<Client1|Client2>(new Client1());
+
+const compendiumClient = localStorage.getItem('compendium_client');
+if (compendiumClient) {
+    switchInstance(parseInt(compendiumClient));
+}
 
 export default client;
 
 export async function init() {
     if (!initialized) {
-        await client.initialize();
+        await client.value.initialize();
         initialized = true;
     }
 }
 
 export function stop() {
-    client.shutdown();
+    client.value.shutdown();
+    initialized = false;
+}
+
+export async function switchInstance(clientNum: number) {
+    stop();
+    client.value = new clients[clientNum]();
+    localStorage.setItem('compendium_client', String(clientNum));
+    await init();
 }