Add more fields to User model

- Change `away` flag to `status`
  - Now tracks online, offline, and away statuses
- Add color for username display color
- Add profile and isFetchingProfile fields for the user tooltip information
  - Cache the fetched profile data in user list store
- Add ability to parse previous NICK format for username and UID
- Add OnlineUser list component

Author: MarkH817

src/App.vue

@@ -1,7 +1,5 @@
 <template>
   <BApp>
-    <h1>Connection status: {{ irc.connectionStatus }}</h1>
-
     <ChatApp v-if="irc.isInitialized" />
     <LoginForm v-else @login="irc.signIn" />
   </BApp>
@@ -12,6 +10,11 @@
   import LoginForm from '#components/LoginForm.vue';
   import { useIrcStore } from '#stores';
   import { BApp } from 'bootstrap-vue-next';
+  import { onMounted } from 'vue';
 
   const irc = useIrcStore();
+
+  onMounted(() => {
+    irc.autoSignIn();
+  });
 </script>

src/components/ChatApp.vue

@@ -1,14 +1,34 @@
 <template>
   <DraggableWindow>
     <template v-slot:main>
+      <OnlineUsers />
       <Transition name="fade"> </Transition>
     </template>
   </DraggableWindow>
 </template>
 
 <script setup lang="ts">
   import DraggableWindow from './DraggableWindow.vue';
+  import OnlineUsers from './user/OnlineUsers.vue';
+  import { useChannelStore, useIrcStore } from '#stores';
+  import { DEFAULT_CHANNELS } from '#constants';
+  import { ref, watch } from 'vue';
   // TODO: Re-implement resizing tracking
+
+  const irc = useIrcStore();
+  const channels = useChannelStore();
+  const joined = ref(false);
+
+  watch([joined, () => irc.connectionStatus], ([hasJoined, connectionStatus]) => {
+    if (hasJoined || connectionStatus !== 'connected') {
+      return;
+    }
+
+    for (const channel of DEFAULT_CHANNELS) {
+      channels.joinChannel(channel);
+    }
+    channels.changeActiveChannel(DEFAULT_CHANNELS[0]);
+  });
 </script>
 
 <style scoped>

src/components/LoginForm.vue

@@ -66,7 +66,7 @@
   }
 
   function anonLogin() {
-    emit('login', { username: 'anonymous', uid: '0', remember: false });
+    emit('login', { username: 'Anonymous', uid: '0', remember: false });
   }
 </script>
 <style scoped>

src/components/channel/ChannelMessages.vue

@@ -0,0 +1,19 @@
+<template>
+  <ul>
+    <li v-for="user in connectedUsers" :key="user.username">
+      <UsernameDisplay :username="user.username" />
+    </li>
+  </ul>
+</template>
+<script setup lang="ts">
+  import { useUserListStore } from '#stores';
+  import { computed } from 'vue';
+  import UsernameDisplay from './UsernameDisplay.vue';
+
+  const userList = useUserListStore();
+  const connectedUsers = computed(() =>
+    userList.users
+      .filter((user) => user.status !== 'offline')
+      .sort((a, b) => a.username.localeCompare(b.username)),
+  );
+</script>

src/components/user/OnlineUsers.vue

@@ -0,0 +1,68 @@
+<template>
+  <BPopover click @show="onShow">
+    <template #target>
+      <div class="username" :style="{ color: usernameColor }">
+        <span
+          v-if="user.status !== 'online'"
+          class="indicator"
+          :class="{
+            'indicator--away': user.status === 'away',
+            'indicator--offline': user.status === 'offline',
+          }"
+          >●</span
+        >
+        {{ user.username }}
+      </div>
+    </template>
+
+    <template v-if="user.isFetchingProfile || !user.profile">Fetching player profile...</template>
+    <template v-else>
+      <img :src="user.profile.avatar ?? defaultAvatar" alt="" />
+
+      <a v-if="user.profile.link" :href="user.profile.link" target="_blank">{{ user.username }}</a>
+      <span v-else>{{ user.username }}</span>
+
+      <dl>
+        <dt>Rank</dt>
+        <dd v-if="user.profile.rank">#{{ user.profile.rank }}</dd>
+        <dd v-else>Unranked</dd>
+
+        <dt>Roles</dt>
+        <dd>{{ user.profile.roles.join(', ') }}</dd>
+      </dl>
+
+      <section v-if="user.profile.description" v-html="user.profile.description" />
+      <p v-else>User has not added a description to their profile.</p>
+    </template>
+  </BPopover>
+</template>
+
+<script setup lang="ts">
+  import defaultAvatar from '#assets/default-avatar.svg';
+  import { useUserListStore } from '#stores';
+  import { BPopover } from 'bootstrap-vue-next';
+  import { computed } from 'vue';
+
+  const props = defineProps<{
+    username: string;
+  }>();
+  const userList = useUserListStore();
+  const user = computed(() => userList.getUser(props.username));
+  const usernameColor = computed(() => user.value.color);
+
+  function onShow() {
+    userList.loadProfile(props.username);
+  }
+</script>
+
+<style scoped>
+  .username {
+    display: inline-block;
+  }
+  .indicator--away {
+    color: yellow;
+  }
+  .indicator--offline {
+    color: gray;
+  }
+</style>

src/components/user/UsernameDisplay.vue

@@ -3,7 +3,27 @@ import type { User } from '#models';
 export const ANONYMOUS_USER: User = {
   username: 'anonymous',
   uid: '0',
-  nicks: ['anonymous^0'],
-  away: false,
+  nicks: new Set([]),
+  status: 'offline',
   awayReason: '',
+  color: '#ffffff',
+  profile: {
+    avatar: null,
+    rank: null,
+    description: null,
+    roles: ['Player'],
+    link: null,
+  },
+  isFetchingProfile: false,
+};
+
+/**
+ * These are currently taken from the Discord/Slack roles
+ * Eventually, this will be replaced with an API call
+ */
+export const USER_ROLES: Record<string, string[]> = {
+  Developer: ['LFP6', 'Ahalb', 'ElNando888', 'jnicol', 'MasterStormer'],
+  Scientist: ['rhiju', 'dosoonkim'],
+  Staff: ['LFP6', 'Omei', 'rhiju'],
+  Moderator: ['Hoglahoo', 'LFP6', 'Omei'],
 };

src/constants/users.ts

@@ -1,13 +1,11 @@
-import type { User } from './user';
-
 export type MessageType = 'message' | 'action' | 'system';
 
 export interface Message {
   time: Date;
   starred: boolean;
   message: string;
   target: string;
-  user: User;
+  nick: string;
   type: MessageType;
   tags: Record<string, string>;
 }

src/models/message.ts

@@ -1,9 +1,25 @@
+export type UserStatus = 'offline' | 'online' | 'away';
+
+export interface UserProfile {
+  avatar: string | null;
+  rank: number | null;
+  /** HTML formatted */
+  description: string | null;
+  roles: string[];
+  /** Profile page link */
+  link: string | null;
+}
+
 export interface User {
   username: string;
   /** User ID */
   uid: string;
   /** Tracks multiple opened clients for the same user */
   nicks: Set<string>;
-  away: boolean;
+  status: UserStatus;
   awayReason: string;
+  /** Hex color value */
+  color: string;
+  profile: UserProfile | null;
+  isFetchingProfile: boolean;
 }

src/models/user.ts

@@ -1,6 +1,40 @@
-export async function getUserInfo(uid: string | number) {
-  const response = await fetch(`https://eternagame.org/get/?type=user&uid=${uid}`, {
-    method: 'GET',
-  });
-  return response.json();
+import { USER_ROLES } from '#constants';
+import type { UserProfile } from '#models';
+import log from 'loglevel';
+
+export async function getUserProfile(uid: string): Promise<UserProfile> {
+  let user: Record<string, unknown> | null = null;
+
+  if (uid !== '0' && uid !== 'anon') {
+    const response = await fetch(`https://eternagame.org/get/?type=user&uid=${uid}`, {
+      method: 'GET',
+    });
+    const result = await response.json().catch((err) => {
+      log.error(err);
+      return null;
+    });
+    user = result?.data?.user ?? null;
+  }
+
+  const roles: string[] = [];
+  if (user && typeof user.name === 'string') {
+    Object.entries(USER_ROLES).forEach(([role, usernames]) => {
+      if (
+        usernames.some(
+          (username) => username.toLocaleLowerCase() === (user.name as string).toLocaleLowerCase(),
+        )
+      ) {
+        roles.push(role);
+      }
+    });
+  }
+  roles.push('Player');
+
+  return {
+    avatar: user?.picture ? `https://eternagame.org/${user.picture}` : null,
+    rank: (user?.rank ?? null) as number | null,
+    description: typeof user?.Profile === 'string' && user.Profile.length > 0 ? user.Profile : null,
+    roles,
+    link: user?.uid ? `https://eternagame.org/players/${user.uid}` : null,
+  };
 }