version for two clients (#108)

* version for two clients

* change client

* change client upd

* client select

* clear debug

* fix client context

* remove discord url

* revert

* selected alt

* update import

* update client

* reactive client

* fix selectAlt

---------

Co-authored-by: Xinos <userxinos@gmail.com>

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();
 }