fix leaderboard css, start user profile

src/components/Chatbox.vue

@@ -12,7 +12,7 @@ const {sendMessage, markLastMessageRead} = store;
 const {leaderboardEntries} = storeToRefs(useStatsStore());
 
 function encodeSVG(svg: string) {
-  return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
+    return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
 }
 
 onMounted(() => {
@@ -66,9 +66,9 @@ function handleScroll() {
 
 <template>
     <div class="nge-chatbox" tabindex="1">
-      <div class="nge-chatbox-title">
+      <!--<div class="nge-chatbox-title">
         <div>Chat</div>
-        <!--<button class="nge-chatbox-title-button" @click="toggleMinimized()">
+        <button class="nge-chatbox-title-button" @click="toggleMinimized()">
           <img v-show="!minimized" src="images/minimize.svg" width="15" title="Minimize" />
           <img v-show="minimized" src="images/chevron.svg" width="15" title="Restore" />
         </button>
@@ -81,8 +81,8 @@ function handleScroll() {
             style="transform: rotate(180deg);"
             title="Restore"
           />
-        </button>-->
-      </div>
+        </button>
+      </div>-->
       <div class="nge-chatbox-content">
         <div class="nge-chatbox-filler"></div>
         <simplebar class="nge-chatbox-scroll" data-simplebar-auto-hide="false">
@@ -154,11 +154,11 @@ function handleScroll() {
     bottom: 10px;
     left: 10px;
     border-radius: 25px;
-    box-shadow: inset 0 0 20px 3px #a46fe2;
+    box-shadow: inset 0 0 20px 3px #a46fe2, 0 0 4px #a46fe2;
     background-color: #00000099;
     z-index: 80; /* over top of leaderboard simplebar */
-    display: grid;
-    grid-template-rows: min-content auto;
+    /*display: grid;
+    grid-template-rows: min-content auto;*/
 }
 .nge-chatbox-title {
     /*background-color: #000;*/
@@ -177,7 +177,7 @@ function handleScroll() {
 .nge-chatbox-content {
     display: grid;
     grid-template-rows: auto minmax(auto, min-content) min-content;
-    /*background-color: #111;*/
+    height: inherit;
 }
 .nge-chatbox-messages {
     font-size: 0.75em;

src/components/ExtensionBar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {computed, onMounted, ref} from "vue";
 import VolumesOverlay from "components/VolumesOverlay.vue";
+import UserProfile from "components/UserProfile.vue";
 import DropdownList from "components/DropdownList.vue";
 
 import {loginSession, useLoginStore, useVolumesStore} from '../store';
@@ -22,7 +23,8 @@ onMounted(() => {
   (document.querySelector('.ng-extend-logo > a > img')! as HTMLImageElement).src = logoImage;
 });
 
-const showModal = ref(false);
+const showVolumes = ref(false);
+const showUserProfile = ref(false);
 
 function logout(session: loginSession) {
   login.logout(session);
@@ -31,15 +33,17 @@ function logout(session: loginSession) {
 </script>
 
 <template>
-  <volumes-overlay v-visible="showModal" @hide="showModal = false" />
+  <volumes-overlay v-visible="showVolumes" @hide="showVolumes = false" />
+  <user-profile v-visible="showUserProfile" @hide="showUserProfile = false" />
   <div id="extensionBar">
     <div class="ng-extend-logo">
       <a href="https://flywire.ai/" target="_blank">
         <img src="insert-logo" title="Cave Explorer">
       </a>
     </div>
     <div id="insertNGTopBar" class="flex-fill"></div>
-    <button v-if="volumes.length" @click="showModal = true">Volumes ({{ volumes.length }})</button>
+    <button v-if="volumes.length" @click="showVolumes = true">Volumes ({{ volumes.length }})</button>
+    <button @click="showUserProfile = true">User</button>
     <template v-if="login.sessions.length > 0">
       <dropdown-list dropdown-group="extension-bar-right" id="loginsDropdown" class="rightMost">
           <template #buttonTitle>Logins ({{ login.sessions.length }})</template>

src/components/Leaderboard.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import simplebar from "simplebar-vue";
+import "simplebar-core/dist/simplebar.css";
 import {onMounted} from "vue";
 import {storeToRefs} from "pinia";
 import {useStatsStore, LeaderboardTimespan} from '../store';
@@ -90,6 +92,7 @@ function setButtonHighlighted(timespan: string|null, highlighted: boolean) {
   background-color: #111;
   display: grid;
   grid-template-rows: min-content auto;
+  font-family: sans-serif;
 }
 
 .nge-leaderboard-content {
@@ -163,4 +166,33 @@ function setButtonHighlighted(timespan: string|null, highlighted: boolean) {
 .nge-leaderboard-loading {
   text-align: center;
 }
+
+.nge-sidebar-button {
+  background-color: #222;
+  padding: 5px;
+}
+
+.nge-sidebar-section-title {
+  background-color: #111;
+  font-size: 1.15em;
+  padding-top: 0.75em;
+  padding-bottom: 0.75em;
+  text-align: center;
+}
+
+.firstplace {
+  color: gold;
+}
+
+.secondplace {
+  color: silver;
+}
+
+.thirdplace {
+  color: #cd7f32;
+}
+
+.simplebar-scrollbar.simplebar-visible:before {
+  background-color: #999;
+}
 </style>

src/components/UserProfile.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import ModalOverlay from "components/ModalOverlay.vue";
+  /*
+  import {useStatsStore} from '../store';
+  const statsStore = useStatsStore();
+
+  const {activeLayers, selectLayers} = statsStore;
+  */
+  const emit = defineEmits({
+    hide: null,
+  });
+</script>
+
+<template>
+  <modal-overlay class="userProfile" @hide="emit('hide')">
+      <button class="exit" @click="emit('hide')">×</button>
+        <div class="content">
+            <div class="header"><div class="title">User Profile</div></div>
+      </div>
+    </modal-overlay>
+</template>
+
+<style scoped>
+
+
+</style>

src/config.ts

@@ -1,6 +1,7 @@
 export type Config = {
   volumes_url?: string,
   leaderboard_url: string,
+  user_stats_url: string,
   chat_url: string,
   /*brainMeshURL: string,
   brainMeshOpacityDark: number,

src/store.ts

@@ -220,8 +220,8 @@ export const useStatsStore = defineStore('stats', () => {
   let leaderboardLoaded: Ref<boolean> = ref(false);
   let leaderboardEntries: LeaderboardEntry[] = reactive([]);
   let leaderboardTimespan: LeaderboardTimespan = LeaderboardTimespan.Weekly;
-  //let userInfo: UserInfo = {editsToday: 0, editsThisWeek: 0, editsAllTime: 0};
-  //let cellsSubmitted: number = 0;
+  let userInfo: UserInfo = reactive({editsToday: 0, editsThisWeek: 0, editsAllTime: 0});
+  let cellsSubmitted: Ref<number> = ref(0);
 
   function setLeaderboardTimespan(ts: LeaderboardTimespan) {
     leaderboardTimespan = ts;
@@ -256,29 +256,16 @@ export const useStatsStore = defineStore('stats', () => {
   }
 
   async function updateUserInfo() {
-    //TODO restore
-    /*
-    if (!this.loggedInUser) return;
-    const url = config.leaderboardURL + '/userInfo?userID=' + this.loggedInUser!.id;
-    fetch(url).then(result => result.json()).then(async(json) => { this.userInfo = json; });
-    const statsURL = config.userStatsURL + '&user_id=' + this.loggedInUser!.id;
-    authFetch(statsURL).then(result => result.json()).then(async(json) => { this.cellsSubmitted = json["cells_submitted_all_time"]; });
-    */
-
-    /*
-    const url = config.userStatsURL + "&user_id=" + this.loggedInUser!.id;
-    authFetch(url).then(result => result.json()).then(async(json) => {
-      this.userInfo = {
-        editsToday: json["edits_today"],
-        editsThisWeek: json["edits_past_week"],
-        editsAllTime: json["edits_all_time"]
-      };
-      this.cellsSubmitted = json["cells_submitted_all_time"];
-    });
-    */
+    if (!CONFIG) return;
+    const userID = 0; //TODO loggedInUser.id
+    const url = CONFIG.leaderboard_url + '/userInfo?userID=' + userID;
+    fetch(url).then(result => result.json()).then(async(json) => { userInfo = json; });
+    const statsURL = CONFIG.user_stats_url + '&user_id=' + userID;
+    fetch(statsURL).then(result => result.json()).then(async(json) => { cellsSubmitted = json["cells_submitted_all_time"]; });
   }
 
-  return {leaderboardLoaded, leaderboardEntries, setLeaderboardTimespan, resetLeaderboard, loopUpdateLeaderboard};
+  return {leaderboardLoaded, leaderboardEntries, userInfo, cellsSubmitted, 
+          setLeaderboardTimespan, resetLeaderboard, loopUpdateLeaderboard};
 });
 
 interface ServerMessage {