make leaderboard visible

src/chat_socket.ts

@@ -7,7 +7,7 @@ declare const CONFIG: Config|undefined;
 let ws: ReconnectingWebSocket|null = null;
 
 export function connectChatSocket() {
-  if (!CONFIG) return null;
+  if (!CONFIG) return;
   ws = new ReconnectingWebSocket(CONFIG.chat_url);
 }
 

src/components/App.vue

@@ -7,7 +7,7 @@ import Leaderboard from "components/Leaderboard.vue";
   <div id="vueMain">
     <div class="ng-extend"><ExtensionBar /></div>
     <div id="content">
-      <div id="neuroglancer-container"></div>
+      <div id="neuroglancer-container" style="width: 0;"></div>
       <Leaderboard class="ng-extend"></Leaderboard>
     </div>
   </div>

src/main.ts

@@ -4,7 +4,8 @@ import {createPinia} from 'pinia';
 import 'neuroglancer/ui/default_viewer.css';
 
 import App from 'components/App.vue';
-import {useLayersStore} from 'src/store';
+import {useLayersStore, useStatsStore, useChatStore} from 'src/store';
+import {connectChatSocket} from 'src/chat_socket';
 import {setupDefaultViewer} from 'third_party/neuroglancer/ui/default_viewer_setup';
 
 function mergeTopBars() {
@@ -25,4 +26,9 @@ window.addEventListener('DOMContentLoaded', () => {
   const viewer = setupDefaultViewer();
   initializeWithViewer(viewer);
   mergeTopBars();
+  const {loopUpdateLeaderboard} = useStatsStore();
+  loopUpdateLeaderboard();
+  connectChatSocket();
+  const {joinChat} = useChatStore();
+  joinChat();
 });

src/store.ts

@@ -278,7 +278,7 @@ export const useStatsStore = defineStore('stats', () => {
     */
   }
 
-  return {leaderboardLoaded, leaderboardEntries, setLeaderboardTimespan, resetLeaderboard};
+  return {leaderboardLoaded, leaderboardEntries, setLeaderboardTimespan, resetLeaderboard, loopUpdateLeaderboard};
 });
 
 interface ServerMessage {
@@ -439,5 +439,5 @@ export const useChatStore = defineStore('chat', () => {
     }
   }
 
-  return {chatMessages, unreadMessages, sendMessage, markLastMessageRead};
+  return {chatMessages, unreadMessages, sendMessage, markLastMessageRead, joinChat};
 });